@charset "utf-8";
/* CSS Document */
body, html {
    margin:0;
    padding:0;
	background-color:#FFFFCC;
}
body { min-width:1000px; }
#storage{ display:none; }
#header{ height:177px; background:url(images/header.png) center; margin-bottom:38px;}
#container{ width:1000px; height:680px; background-color:#FFF; }
#cleft{ width:640px; float:left; }
#cright{ width:360px; float:right; }
#ctop{ width:640px; }
#nextbutton *, #backbutton *{
	border:none;
	text-decoration:none;
	width:86px;
	height: 30px;
}
#backbutton{ float:left; }
#nextbutton{ float:right; }
#stepnumber{ float:left; width:468px; height:30px; font-weight:bold; }
#cmid{ width:640px; height: 480px; z-index:5; }
#mainimage{ width:100%; height:480px; }
#parts,#directions{ width:340px;}
#parts{ padding-top:15px; ;}
ul.imageRow {
	width: 2816px; /* 128x(number of steps+2) */
	height:140px;
	margin:0px;
	padding:0px;
}
ul.imageRow li {
	float: left;
	display: block;
	padding: 4px;
	margin: 0px;
	opacity: 0.7;
	filter: alpha(opacity=70);
	cursor:default;
}
ul.imageRow li img {
	border: 0px;
	height: 90px;
	width: 120px;
	margin: 0px;
	padding:0px;
	cursor:pointer;
	cursor:hand;
}
div.filmstrip {
	padding-left: 256px;
	padding-right: 256px;
	overflow-x: auto;
	overflow-y: hidden;
	height: 140px; /* give it enough space for the images and the scrollbar, if present */
	position:relative;
	top:30px;
}
ul.imageRow li:hover, #onStep {
	opacity: 1.0;
	filter: alpha(opacity=100);
	background-color:#FFFF66;
}
ul.imageSmallRow {
	width: 640px; /*width of all of your images plus the margins/padding you use*/
	height: 60px;
	margin:0px;
	padding:0px;
	position:relative;
	top:-475px;
	left:4px;
}
ul.imageSmallRow li{
	float:left;
	display: block;
	padding: 4px;
	margin: 0px;
	opacity: 0.7;
	filter: alpha(opacity=70);
}
ul.imageSmallRow li img {
	border: 0px;
	height: 45px; /* just incase the images are a different size */
	width: 60px; /* ditto */
	margin: 0px;
	padding:0px;
	border: 1px solid #555;
}
div.otherimages {
	overflow:hidden;
	height: 60px; /* give it enough space for the images and the scrollbar, if present */
	z-index: 6;
}
ul.imageSmallRow li:hover, #onThumb { opacity: 1.0; filter: alpha(opacity=100); }
ul.imageSmallRow li img:hover { border:1px solid #000;}
#directions,#parts,#feedback{ text-align:left; margin:5px; margin-left:15px;; }
h3{ margin-bottom:0px; }
.small{ height:50px; border:1px solid #000; margin:5px; cursor:pointer; cursor:hand; }
#navbar{
width:1000px;
height:36px;
background:url(img/navbar-bg.png) left top repeat-x; }
#navbar .inbar{
display:block;
height:36px;
background:url(img/right-round.png) right top no-repeat; }
#navbar ul, #navbar ul li{
border:0px;
margin:0px;
padding:0px;
list-style:none;
height:36px;
line-height:36px; } #navbar ul{
background:url(img/left-round.png) left top no-repeat; }
#navbar ul li{
float:left;
display:block;
line-height:36px; }
#navbar ul li a{
color:#403e32;
text-decoration:none;
font-weight:bold;
display:block; }
#navbar ul li a span{
padding:0 20px 0 0;
height:36px;
line-height:36px;
display:block;
margin-left:20px; }
#navbar .navhome a, #navbar .navhome a:hover{
background:url(img/a-bg.png) left top no-repeat;
height:36px;
line-height:36px; }
#navbar .navhome a span, #navbar .navhome a:hover span{
color:#FFFFFF;
background:url(img/span-bg.png) right top no-repeat;
height:36px;
line-height:36px; }
#navbar ul li a:hover{
background:url(img/ahover-bg.png) left top no-repeat;
height:36px;
line-height:36px; }
#navbar ul li a:hover span{
background:url(img/spanhover-bg.png) right top no-repeat;
height:36px;
line-height:36px; } 
/*
#clower{
	position:relative;
	top:30px;
	overflow-x: scroll;
	overflow-y: hidden;
	height: 140px; /* give it enough space for the images and the scrollbar, if present*/
/*}
.film{
width:120px;
height:90px;
margin:4px;
float:left;
}*/
/*
#container
	#cleft
		#ctop
			#backbutton
			#stepnumber
			#nextbutton
		#cmid
			#mainimage
		#clower
	#cright
		#parts
		#directions
	*/