/* CSS Document */

@import url(reset.css);
@import url(default.css);

html {
  height: 100%;
  overflow: -moz-scrollbars-vertical;
}

body {
  font: normal 76% Arial;
  line-height: 1.4em; color: #6b9299;
  background: #000 url("images/bg.gif") center bottom repeat-x;
}

/* Links
------------------------------------- */

a:link, a:visited, a:active {
  color: #507a81; text-decoration: none;
}
a:hover { text-decoration: underline; }

a.current {
  color: #6b9299; text-decoration: underline;
}

#navi a:link, #navi a:visited, #navi a:active, #navi a:hover,
#footer a:link, #footer a:visited, #footer a:active, #footer a:hover{
  text-transform: uppercase;
}

/* Navi
------------------------------------- */

#navi ul {
  overflow: hidden;
  width: 260px; font-size: 0.8em;
}

#navi ul li {
  float: left;
}

#navi ul li a {
  padding: 2px 4px;
}

/* Layout
------------------------------------- */

#container {
  width: 680px; overflow: hidden;
  margin: 60px auto 0 auto;
}

#main {
  float: left; margin-right: 40px;
  width: 260px; overflow: hidden;
}

#content {
  width: 260px; overflow: hidden;
  margin: 20px 0;
}

#sidebar {
  float: right; width: 360px;
  border: 4px solid #002139;
  padding: 6px;
}

#sidebar img {
  display: block;
}

#footer {
  text-align: right;
  font-size: 0.8em;
}

/* Texts
------------------------------------- */

h1 a {
  display: block; margin: 10px 0;
  width: 255px; height: 30px;
  background: url("images/logo.gif") no-repeat;
}

h1 a span { margin-left: -9999px;}

h2 {
  width: 114px; height: 67px;
  margin: 0 auto 10px auto;
  background: url("images/portfolio.gif") no-repeat;
}

h2 span { margin-left: -9999px; }

p { margin: 10px 0; }

/* Carousel
------------------------------------- */

#myslides{
	clear: both;
}

.stepcarousel{
	position: relative; /*leave this value alone*/
	overflow: scroll; /*leave this value alone*/
	width: 228px; /*Width of Carousel Viewer itself*/
	height: 230px; /*Height should enough to fit largest content's height*/
	margin: 0 16px;
}

.stepcarousel .belt{
	position: absolute; /*leave this value alone*/
	left: 0;
	top: 0;
}

.stepcarousel .panel, .frontpagepanel{
	float: left; /*leave this value alone*/
	overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
	width:220px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
	margin: 0 4px;
	height: 230px;
}
.frontpagepanel{
	margin: 0 20px;
}

.stepcarousel .panel img,  .frontpagepanel img{
  margin: 2px; /*padding: 2px;
  background: #fff; border: 2px solid #ddd;*/
}