/***************************************************
	HTML Element Styles
 ***************************************************/

* {
	padding: 0;
	margin: 0;
}

html { 
	width: 100%;
	height: 100%;
}

body {
	font: normal 76%/150% Arial, Verdana, Sans-Serif;
	color: #FFFFFF;
	background-color: #FFFFFF;
	width: 100%;
	height: 100%;	
}

img { 
	border: none; 
}

a {
	text-decoration: none;
	cursor:pointer;
}

p {
	margin: 0 0 1em; 	
	line-height: 1.2em;
}

/*** Page ***/

#page {
	clear: both;
	width: 100%;
	height: 100%;	
}

#bg {	
	position: absolute;
	z-index: 1;
	width: 229px;
	height: 100%;
	background-color: #FFFFFF;
	filter:alpha(opacity=75);
	-moz-opacity:.75;
	opacity:.75;
}

/*** Container ***/

#container { 
	position: absolute;
	z-index: 2;
  	clear: both;
	width: 100%;
	height: 100%;	
}

.logo {
	height: 89px;
	vertical-align: top;	
	padding-top: 30px;		
}

.logo a {
	display: block;
	width: 228px;
	text-align: center;	
	cursor:pointer;
}

.logo_bottom {
	vertical-align: bottom;	
	padding-left: 166px;	
	padding-bottom: 2px;
}

#navigation {	
	vertical-align: middle;	
}

#nav {
	width: 228px;	
    list-style: none;	
}

/* First Level */

#nav li {
	font-weight: bold;
	font-size: 1.2em;	
	text-align: right;	
	padding-top: 1px;		
	padding-right: 2px;
	background: url(../images/spacer.gif) repeat-x top right;  
}

#nav li a {
	display: inline-block;
	clear: both;
	color: #FFFFFF;
	padding: 5px 10px 5px 20px;
	background: #7b7b7b;
	cursor:pointer;
}

#nav li a:hover {
   background: #5c5c5c;   
}

/* Second Level */

#nav li ul {
   	clear: left;
   	position: absolute;
   	left: -999em;
	list-style: none;	
}

#nav li li {
	float: left;
	font-weight: bold;
	white-space: nowrap;
	font-size: 1em;
	padding-right: 1px;
	background: url(../images/spacer.gif) repeat-y top right;  
}

#nav li li a {
	display: block;
   	color: #7B7B7B;
	background-color: #FFFFFF;
	cursor:pointer;
}

#nav li li a:hover {
	color: #FFFFFF;
	background-color: #7b7b7b;  
}

/* Third Level */

#nav li li ul {
   	clear: both;
   	position: absolute;
	left: 0px;
	top: -999em;
	list-style: none;
}

#nav li li li {	
	clear: both;
	font-weight: bold;
	font-size: 1em;		
	background: url(../images/spacer.gif) repeat-x top left; 
	padding-top: 1px;	
}	

#nav li li li a {	
	display: block;	
	color: #FFFFFF;	
	background-color: #a3a3a3;	
	cursor:pointer;
}

#nav li li li a:hover {
	color: #FFFFFF;
	background-color: #9c9c9c;
	cursor:pointer;
}

/* Products */

#nav #products {
   	position: absolute;
   	left: 230px;	
	top: 0px;	
}

.imageContainer {width:227px; height:150px;}
.imageContainer ul li {float:left; position:relative;}

.infoContainer ul,
.infoContainerWhite ul{
	clear: both;
   	position: absolute;
   	left: 228px;
	list-style: none;
}

.infoContainer ul li,
.infoContainerWhite ul li{
	clear: both;
	font-weight: bold;
	font-size: 1em;
	margin-bottom: 1px;
}

.infoContainer ul li a {
	display: inline-block;
	clear: both;	
	padding: 7px 10px 7px 10px;     
	color: #FFFFFF;	
	background-color: #7d7d7d;	
	font-weight: bold;
	font-size: 1.3em;
	cursor:pointer;
}

.infoContainerWhite ul li a {
	display: inline-block;
	clear: both;	
	padding: 7px 10px 7px 10px;     
	color: #7d7d7d;	
	background-color: #FFFFFF;	
	font-weight: bold;
	font-size: 1.3em;
	cursor:pointer;
}

ul.workNav {position:absolute; left:379px; margin-top: -29px;}
ul.workNav li {margin-bottom:8px; list-style: none; float: left;}
ul.workNav li a {display:block; width:39px; height:29px; text-indent:-9999px; outline:none;cursor:pointer;}

ul.workNav li a.prev {background:url(../images/arrow_up_off.gif) no-repeat;cursor:pointer;}
ul.workNav li a.prev:hover {background:url(../images/arrow_up_on.gif) no-repeat;cursor:pointer;}

ul.workNav li a.next {background:url(../images/arrow_down_off.gif) no-repeat;cursor:pointer;}
ul.workNav li a.next:hover {background:url(../images/arrow_down_on.gif) no-repeat;cursor:pointer;}

/* Product Images */

#image_container {
	clear: both;	
}

#image_container div {
	float: left;	
}

.product_image {
	display: none;
	color:#000000;
}

.product_image span {
	display:block;
	clear:both;
	padding-top:5px;	
	text-align:justify;
}

.thumbnails_bottom {
	vertical-align: bottom;	
	text-align:left;
}

.thumbnails {
	
}

.thumbnails a {
	display: block;
	float: left;
	padding: 5px;
	margin-right: 1px;
	background-color: #CCCCCC;
	width: 68px;
	height: 68px;
	cursor:pointer;
}

.thumbnails a:hover {
	display: block;
	padding: 5px;
	background-color: #7B7B7B;
	width: 68px;
	height: 68px;
	cursor:pointer;
}

.thumbnails a.current {
	display: block;
	padding: 5px;
	background-color: #6DABC0;
	width: 68px;
	height: 68px;
	cursor:pointer;
}

.thumbnails ul {list-style:none;}

.thumbnails ul li {float:left;}

#thumbnail_container div {
	float:left;
}

#thumbnail_container div a.prev {display:block; width:25px; height:36px; text-indent:-9999px; outline:none;margin-top: 20px;margin-right:10px;background:url(../images/arrow_left_off.gif) no-repeat;cursor:pointer;}
#thumbnail_container div a.prev:hover {background:url(../images/arrow_left_on.gif) no-repeat;cursor:pointer;}

#thumbnail_container div a.next {display:block; width:25px; height:36px; text-indent:-9999px; outline:none;margin-top: 20px;margin-left:10px;background:url(../images/arrow_right_off.gif) no-repeat;cursor:pointer;}
#thumbnail_container div a.next:hover {background:url(../images/arrow_right_on.gif) no-repeat;cursor:pointer;}


/* Product Details */

#nav #detail {
   	float: left;
   	position: absolute;
   	left: 229px;	
	text-align: left;
	width: auto;
}

#nav #detail_bg {	
	position: absolute;
	z-index: 10;	
	width: auto;
	background-color: #7d7d7d;
	filter:alpha(opacity=75);
	-moz-opacity:.75;
	opacity:.75;
}

#nav #detail_content {	
	position: absolute;
	z-index: 11;	
	width: auto;
	padding: 15px 10px 15px 10px;
	font-size: .8em;
	font-weight: normal;
}

#nav #detail_content h2 {
	font-size: 2.5em;
	letter-spacing: -1px;
	padding-bottom: 10px;
}

.detail_hide {
	float: left;
   	position: absolute;
	left: 980px;
	cursor: pointer;
	width: 16px;
	height: 50px;
	z-index: 11;	
	background-color: #7d7d7d;
	filter:alpha(opacity=75);
	-moz-opacity:.75;
	opacity:.75;
}

.detail_show {
	float: left;
   	position: absolute;
	left: 230px;
	cursor: pointer;
	width: 16px;
	height: 50px;
	z-index: 11;	
	background-color: #7d7d7d;
	filter:alpha(opacity=75);
	-moz-opacity:.75;
	opacity:.75;
}

.detail_hide img,
.detail_show img {
	display: block;
	text-align: center;
	padding-top: 20px;	
}

#detail_content .content {
	clear: both;
	padding-top: 10px;	
}

#nav #detail_show {
	display: none;
}

#nav #detail_show a {
	margin-top:1px;
	cursor:pointer;
}

#nav .detail_a {
	white-space: nowrap;
	float: right;	
	background-color: #5c5c5c;
	cursor:pointer;
}

.detail_title {
	clear: both;	
}

.detail_contentc {
	clear: both;	
	margin-top: -10px;
	text-align: justify;
	font-size: 1.1em;
}

#detail_name {
	display: block;
	float: left;
	font-size: 1.5em;
	font-weight: bold;
	padding-top: 3px;
	padding-bottom: 10px;
	line-height: 1em;
}

.detail_bg {
	float: right;	
}

.detail_bg div {
	float: left;	
	margin-left: 5px;
	margin-top: -5px;
	padding: 3px;
	cursor: pointer;
}

.detail_bg .out {
	background-color: #ababab;
}

.detail_bg .out:hover {
	background-color: #d8d8d8;
}

.detail_bg .current {
	background-color: #d8d8d8;
}

#preloader {
	display: none;
	position: absolute;
	width: 89px;
	height: 89px;
	background-color: #7b7b7b;	
}

#preloader div {
	clear: both;
	width: 69px;
	height: 69px;
	padding:7px;
	margin-top: 3px;
	margin-left: 3px;
	background-color: #fff;
}

.product_detail_image {
	border: #7B7B7B 5px solid;	
}

/***************************************************
	Form
 ***************************************************/
 
.input, textarea, select {
	font-size: 11px;
	color: #333333;
	padding: 3px;
	font-family: tahoma, arial, sans-serif;
	width: 200px;
}

.input_button {
	font-size: 1em;
	font-weight:bold;
	font-family:tahoma, arial, sans-serif;
	background-color: #DDDDDD;
	padding: 3px;
	color: #000000;
	border:1px solid #FFFFFF;	
}

.input_button:hover {
	background-color: #DDDDDD;	
	border:1px solid #000000;	
}
 
form strong {	
	font-weight:bold;
	display:block;
	margin-bottom: 2px;
}

form .group {	
	clear: both;
	width: 450px;
	margin-bottom: 10px;
}

form .left {	
	float: left;
	margin-right: 10px;
}

form .right {	
	text-align: right;
	width: 428px;
}

.alert {
	width: 410px;
	background-color:#FFD7D7;
	border:1px solid #FF0000;
	color: #000000;
	padding: 10px;
	margin-top:10px;
	margin-bottom: 10px;
}

.alert ol {
	margin: 1em 1em;
	list-style: none;
}

.alert ol li {
	display: block;	
	clear: both;
	font-weight: normal;
}

.message {
	font-weight: bold;
}

/***************************************************
	Media
 ***************************************************/
 
.media {
 	margin: 0;
	padding: 0;
}
 
.media li {
	display: block;
	clear: both;
	list-style: none;
	cursor: pointer;
}

.media li:hover span {
	color: #c5ecf1;
}

.media span {
	font-weight: bold;
}

.media em {
	color: #cccccc;
}

#media {
	display: none;
	clear: both;
	width: 750px;
	padding-bottom: 20px;
}

#media iframe {
	width: 750px;
	height: 300px;
	border: 0;
}

.project {
	clear: both;
}

.project div {
	float: left;
	width: 240px;
}