
/* ======================================== Generic elements =================================================================  */

body{ margin:0px; padding:0px;font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#040404; background:#f9fafa url(../images/background.gif) repeat-x left top }

h1, h2, h3, h4, h5, h6, h7, p, form, input, ul, li{padding:0px; margin:0px; font-weight:normal}
p,li{line-height:18px}
ul,ol { list-style: none; }
input, select, textarea{font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#040404}
a{color:#057083; text-decoration:none}
a:hover{color:#000; text-decoration:underline}
a img{border:0}

.clear{ clear:both;}


#wrapper:after,#header:after,#middle:after, #footer:after, .middle-section:after, .content:after, .data:after, .section:after{ content: "."; display: block; height:0; font-size:0px; clear: both; visibility: hidden; }


/* \*/ * html #header{height:1px} /* */
/* \*/ * html #middle{height:1px} /* */
/* \*/ * html .middle-section{height:1px} /* */
/* \*/ * html #footer{height:1px} /* */
/* \*/ * html .content{height:1px} /* */
/* \*/ * html .data{height:1px} /* */
/* \*/ * html .section{height:1px} /* */


.colleft{float:left; width:auto }
.colright{float:right;width:auto}

.right{text-align:right}
.center{text-align:center}

.content{width:100%;}
.data{width:auto}	

h1{font-size:22px; font-weight:bold; }
h1.heading{font-size:22px; color:#040404; font-weight:bold; padding:0 0 3px; margin:0 0 10px;background:url(../images/dot-line.gif) repeat-x left bottom }
h1.heading span{color:#057083}

h2{font-size:20px; padding:0 0 8px;}

h3{font-size:18px; font-weight:bold;color:#057083}
h3.heading{ padding:0 0 3px; margin:0 0 10px;background:url(../images/dot-line.gif) repeat-x left bottom }

h4{font-size:15px; font-weight:bold }

h5{font-size:12px; font-weight:bold; margin-bottom:5px}
p{padding:0 0 8px}

/* ======================================== Wrapper ========================================================  */

#wrapper{ width:100%; height:auto; margin:0 auto;}


/* ======================================== Header ==========================================================  */

/* ---------------- Header Container-------------- */

#header-container{ width:100%;height:auto; }
#header{ width:950px; padding:0px; margin:0 auto; height:106px!important}

/* ---------------- Header Logo -------------- */

#header #logo{ float:left; width:350px;margin:10px 0 0 0px; }
#header #logo img{ display:block}


/* ---------------- Top Links -------------- */

ul.top-links{  float:right; padding:10px 0 0 ;width:auto;}
ul.top-links li{ padding:0 0 0 4px; width:auto; font-size:11px; color:#eee; float:left}
ul.top-links li a{ color:#fff; padding:0}
ul.top-links li a:hover{ color:#fff; text-decoration:underline}


/* =================================== Middle Container Structure ===============================================  */

#middle-container{ width:100%; height:auto; padding:0px; }
#middle{ width:950px; padding:15px 0 0px; margin:0px auto; }

#left-sidebar{ float:left;width:220px; padding:0 12px 0 0; margin-bottom:10px }
#main{ float:left;width:715px;}


/* =================================== left-sidebar ====================================================  */


/* ----------------- menu-list -------------- */

.menu-list { width:100%}
.menu-list:after{font-size:0px; line-height:0px; height:0px; content:'.'; visibility:hidden; display:block; clear:both}
/* \*/ * html .menu-list{height:1px} /* */
	
.menu-list li{ float:left; width:auto;border-bottom:1px solid #ffbf6f; font-weight:bold; font-size:13px; border:1px solid #c5c5c5 }
.menu-list li a{display:block; width:210px;padding:7px 0px 7px 8px;color:#fff; background:#057083 url(../images/menu-bg.gif) repeat-x 0 0; }
.menu-list li a span{ background:url(../images/menu-bullet.gif) no-repeat scroll 0; padding-left:12px}
.menu-list li a:hover,.menu-list li a.selected{ color:#fff;background-position:0 -32px; text-decoration:none }
.menu-list li a:hover span, .menu-list li a.selected span{ background:url(../images/white-bullet.gif) no-repeat scroll 0;}


/* ===================================  main  ===========================================================  */

/* ---------------- product-banner -------------- */

#product-banner{ background:url(../images/banner-bg.jpg) no-repeat left top;width:674px;height:223px;padding:25px 20px 10px 20px;margin:0 0 15px;}
#product-banner .more-info{position:absolute; margin:184px 0 0 350px}
#product-banner .pic{float:left; width:190px; text-align:center}
#product-banner .details{float:left; width:460px;}
#product-banner h1{ color:#51d3e7; font-size:30px; margin-bottom:8px}
#product-banner h3{ color:#fff; font-weight:bold; margin-bottom:10px}
#product-banner li{ background:url(../images/bullet.gif) no-repeat 0 6px; color:#fff; font-weight:bold; font-size:14px; padding:0px 0px 2px 12px}


/* ----------------  widget -------------- */

.widget{ width:100%;margin:0px 0px 12px;border:1px solid #dcdddd;}
.widget .top{ padding:5px 8px 6px; margin:0px;background:#057083 url(../images/head-green-bg.gif) repeat-x top left;}
.widget h2.heading{color:#fff; font-size:18px; font-weight:bold; padding:0px; margin:0px; display:block;} 
.widget .data{ padding:12px; margin:0px;}
	
	
.product-photo{ float:right;width:240px;text-align:center; background:#fff;border:1px solid #ccc}
.product-photo img{ margin:0 auto}
.product-details{ width:430px;}
.product-details ul{margin-bottom:10px}
.product-details li{ background:url(../images/list-bullet.gif) no-repeat 0 6px;  padding:4px 0px 4px 18px}

	
.lightbox{background:#ebf4f5; }
.lightbox h3{color:#057083; margin-bottom:8px; font-weight:bold }
ul.listing{margin-bottom:10px}
ul.listing li{ background:url(../images/list-bullet.gif) no-repeat 0 5px;  padding:0px 0px 4px 18px}


.download-manual{background:url(../images/manual-icon.gif) no-repeat left scroll; line-height:33px; font-weight:bold; padding:10px 20px 10px 35px}
	



/* ---------------- pbox -------------- */

.pbox{width:318px; padding:12px 10px; background:#fff url(../images/pbox-bg.gif) repeat-x left top; border:1px solid #b9b9b9}
.pbox img{float:left; margin-right:10px;padding:2px; background:#fff; border:1px solid #BABABA}
.pbox .desc {display:block; float:left; width:185px;}
.pbox .desc h4{margin-bottom:10px}


/* ----------------  contact-form -------------- */

#contact-form { padding:18px; }
#contact-form label{ float:left; display:block; color:#333; width:110px; margin:3px 0 3px;   font-weight:bold; } 
#contact-form label.row{ width:700px } 

#contact-form input.text {float:left; width:230px; line-height:15px; color:#000; padding:3px 2px; border-top:2px solid #CCCCCC; margin-bottom:9px}
#contact-form textarea {float:left; width:500px; height:130px; padding:5px;  margin-bottom:15px; color:#000; padding:4px 2px; border-top:2px solid #CCCCCC;overflow:auto;}
#contact-form br{clear:both}

.btn{
background: transparent url('../images/menu-bg.gif') repeat-x 0px 0px;
display: block;
float:left;
font-size:12px;
padding-left:5px;
padding-right:5px;
font-weight:bolder;
line-height: 28px;
height: 28px; /* Height of button background height */
text-decoration: none;
border:none;
overflow:hidden;
color:#fff;
margin-right:10px
}
.btn:hover{background: url('../images/menu-bg.gif') repeat-x 0px -32px;}


/* ---------------- product -------------- */

	.product-list{background:#FF0000;}	
	.product{width:337px;height:200px;border:1px solid #b9b9b9; padding:0px; margin:0px 0px 10px; background:#ffff url(../images/box-bg.gif) repeat-x 0 35px; }
	
	.product h4{ color:#fff; font-size:13px; font-weight:bold; padding:8px 5px; background:url(../images/head-black-bg.gif) repeat-x left top}
	.product h4 span{background:url(../images/head-bullet.gif) no-repeat left scroll; padding-left:18px;}
	.product a.pic{float:left}
	.product img{float:left;display:block; margin:0px 10px 0px 0px}
	
	.product .details{padding:5px 10px 0px; font-size:11px}
	.product p{padding:0 0 5px; line-height:16px;}
	.product p.more{ position:absolute; margin:170px 0 0 225px; text-align:right; padding:0px;}
	.product p.more a{background:#057083; color:#fff; padding:5px; line-height:20px}
	.product p.more a:hover{color:#47cce2; text-decoration:none}
	



/* ==============================================  Footer   ===========================================================  */

#footer-container{width:100%;height:auto;padding:0px; margin:0;background:#eee url(../images/footer-bg.gif) repeat-x left top;}
#footer{ width:950px; padding:22px 0px 20px; margin:0 auto}
#footer .footer-left{ float:left;width:600px; padding:10px 0px 0px 0px; color:#f0f0f0}
#footer .footer-right{ float:right;width:245px;padding:12px 0px 0px 0px; text-align:right;}

#footer ul li{display:inline;color:#fff; font-size:11px;}
#footer ul li a{padding:0px 5px 0 0px; color:#fff; }
#footer ul li a:hover{}
#footer .copyright{ color:#999;margin-top:10px; font-size:10px;}


