/* ====================================================================================== 
	wMS | Main CSS | Light                                                        
	Author: Matthew Beverly | SmashBrand | SmashBrand.com 
	Build: 1.1 | Nov 2009
	Last Updated: Nov 1 2009
====================================================================================== */	

	@import url("reset.css");	             

/* ====================================================================================== //
	=LAYOUT  |  Body, Wrap, Main Body Wrap & Inner Wraps              
// ====================================================================================== */

	body  { background: #00b2ef url('../img/backgrounds/bgTile.jpg') repeat-y top center;  font-size: 70%; font-family:Helvetica, Arial sans-serif; color: #333;}		
	#wrap { width:100%; margin: 0 auto; background: url('../img/backgrounds/bg.jpg') no-repeat top center;  }			
	#mbw  { width: 1000px; height: auto; margin: 0 auto; background-color: #fff; }
	
	#header  { width: 1000px; height: auto; margin: 0 auto; display:block;  }
	#header ul {list-style:none; display:block; overflow:auto; float: right;}	
	#header ul li {float:left; outline: none; line-height: 20px; font-size:120%; font-weight:bold; margin-top:30px; padding-left:10px; margin-right:10px;}

	/* Nav States  */
	#header ul li a {color:#dcf6ff; text-decoration:none; float:left; display:inline; outline: none; }
	#header ul li a:hover {color:#fff; display:block; background-image:none !important;}
	#header ul li a.active {color:#fff; border-bottom:#92e3ff dotted 1px; }
	
/* ====================================================================================== //
	=SECTION Content Classes | Global Reuseable .section and .ul classes
// ====================================================================================== */
	
	/* CORE */
	.section     { padding: 30px; background: url('../img/backgrounds/sectionbg.gif') no-repeat top center; overflow: hidden;}
	
	/* blockList | Content UL for Repeatable Similar Block List Content */
	.blockList     { margin-top: 30px;  }
	.blockList li  { margin-bottom: 20px; overflow: hidden;}
	.blockList p   { }
	.blockList img { float: left; display:inline; margin-right:10px; }
	
	.internalList { list-style:circle!important; padding: 0px 0px 0px 10px!important;}
	.internalList li { background-image:none!important; margin: 0px!important;  padding: 0px 0px 0px 10px!important; line-height:16px;  }
	
	/* horList | Horizontal 4 blocks */
	.horList    { overflow:hidden; }
	.horList li { width: 250px; float: left; display: inline; overflow:hidden;}
	.horList h3 { margin: 0px 20px;   }
	.horList p  { font-size:100%; padding: 20px;}
	.horList img { display:block; margin:0 auto; }
	
	/* Simple utility list */
	.simpleList {}
	.simpleList li { padding: 0px; margin: 0px; line-height: 18px; font-size: 110%; font-weight:bold;}
	
	/* adding bullet point icons to a simple list */
	.bullets    { list-style-position: outside; }
	.bullets li { padding-left: 20px; background-image: url('../img/icons/arrow.gif'); background-repeat: no-repeat; background-position: 0 .5em;}
	
	/* sectioning left-right splits / supfacts */
	.section .split { width: 420px; display:inline; float:left; padding-right: 30px; padding-bottom: 30px; overflow:hidden;}
	.right { float:right; padding-right: -30px;}
	.section .split h3 { margin-bottom: 10px;}
	
	/* Referece list */
	.references { padding-bottom:30px; }

/* ====================================== //
	=SECTION Specific Styling  
// ===================================== */

	.overview   { width: 500px; height: 460px; margin: 0 auto;}
	
	.benefits   { width: 570px; padding: 0px 30px 0px 400px; background: url('../img/bgBenefits.jpg') no-repeat; }

	.science    { }
	.science h2{ margin-top: 30px}
	
	.tech       { width: 570px; padding: 0px 30px 30px 400px; background: url('../img/bgTech.jpg') no-repeat;}
	
	.expect     { width: 500px; padding: 60px 470px 30px 30px; background: url('../img/bgExpect.jpg') no-repeat}
	
	.tips h2	{ margin-top: 30px}
	.tips li    { background: url('../img/backgrounds/linebreak.gif') no-repeat Top right; margin: -10px -30px 0px; padding: 40px 30px 0px;}
	
	.testimonials  { width: 650px; padding: 50px 30px 30px 320px; background: url('../img/bgTestimonials.png') no-repeat; min-height: 570px;}
	.testimonials ul.blockList li { font-size: 110%; font-style:italic; }
	.testimonials em { color:#00b2ef!important; display:block; }
	
	.media {}
	
	.compare    { background-image:none; margin-bottom:30px;}
	.compare p  { padding: 0 30px;}
	
	.supFacts   { background: url('../img/bgSupFacts.jpg') no-repeat;}

	.faq h2	{ margin-top: 30px}
	.faq li { background: url('../img/backgrounds/linebreak.gif') no-repeat Top right; margin: -10px -30px 0px; padding: 40px 30px 0px;}
	.question {}
	.anwser   {}
	
	.contact h2	{ margin-top: 30px}
		
	
	/* Included Sections */	
	.convertToSale {  height:auto; margin-top: -50px; background: url('../img/bgConvert.jpg') no-repeat; overflow:hidden;}
	
	.productHero { float:right; overflow:hidden; display: inline;}	
	.convertToSale h2 { padding: 100px 0px 30px 50px}
	.buyNow { margin-left: 200px}
	
	.ctsExtras { width: 1000px; float: left;  padding: 0; margin:0;  background: url('../img/bgCtsExtras.jpg') no-repeat;    }

	.newsSignUp { min-height: 120px; height: 120px; padding:40px 10px 10px 510px; background: url('../img/newsLetterSignUp.jpg') no-repeat; overflow:hidden; min-height: 180px; }
	.newsSignUp p {font-size: 100%; line-height: 13px; font-weight:bold; overflow:hidden; color:#FFF}
		
	.wheretobuy { width: 1000px; float: left;  padding: 0; margin:0;  background: url('../img/bgWheretoBuy.jpg') no-repeat;    }
	
	
/* ====================================================================================== //
    =DETAILS  |  Reuseable classes for styling mini content      
// ====================================================================================== */
	
	/* Notify User that there is more content*/
	.linkToMore { min-height:80px;  background: url('../img/icons/linkToMore.gif') no-repeat top left; padding-left: 80px; margin-left: -31px}
	

/* ====================================================================================== //
	=FOOTER  |  Footer Navigation           
// ====================================================================================== */
	
	#footer { width: 100%;  }
	#footerwrap { width: 1000px; height: auto; margin: 0 auto; display:block; }
	
	.footBar { float: left; width: 960px; height: 50px; display: block; background: url('../img/backgrounds/footertab.png') no-repeat; padding:0px 20px; color:#666; font-size: 90%; line-height: 40px;}
	.footBar ul {list-style:none; display:block; overflow:auto; float: left; font-weight:normal; padding-right: 10px; border-right:#eee dotted 1px; margin-right:10px}	
	.footBar ul li {float:left;outline: none; line-height: 40px;}

	/* Nav States  */
	.footBar ul li a {color:#666; text-decoration:none;float:left;display:inline; /*ie*/padding-right:12px;outline: none;}
	.footBar ul li a:hover {color:#00ccff; display:block;background-image:none !important;}
	.footBar ul li a.active {color:#00b2ef;}

	.copyRight { float: left; font-weight:lighter; padding-right: 10px; outline: none; border-right:#ccc dotted 1px; margin-right:10px}
	.sbCredit  { float: right; font-weight:lighter; padding-left: 20px; outline: none; border-left:#ccc dotted 1px; margin-left:20px}
		
	.footBelow { display: block; padding: 65px 30px 20px 30px;} 
	.footBelow p { color:#666; font-size: 80%; line-height: 12px!important;}
	
/* ====================================================================================== //
   =TYPOGRAPHY  |  String class for needed style |  EX: class="bright lg center"         
// ====================================================================================== */

	h1 {  position:absolute;left:-9999px; }		
	h2 { color: #00b2ef; font-size: 180%; margin: 0px 0px 20px 0px; line-height: 24px; font-weight:bold; }
	h3 { color: #00b2ef; font-weight:bold; font-size: 120%;   } 	

	/* General Styling */
	p { margin-bottom:16px; line-height: 18px; font-size: 110%; }
	em { color: #666; font-style:italic; }
	strong { color: #000; }
	bold { font-weight:bold;}
	blockquote { padding: 0px 0px 16px 0px; font-style:italic; line-height: 22px; font-size: 130%; color: #111; text-align:center;}
	
	/* Lists */
	ul { list-style:none;  margin-bottom:20px;}
	ul li { line-height: 16px;}
	ol { padding-left: 10px; line-height: 16px; margin-bottom:20px; list-style-type: decimal;}
	ol li {margin-bottom:10px;}
	ol strong {display:block; font-size: 120%;}
	
	/* Colors */
	.bright   { color:#000;    }   
	.key      { color:#00b2ef!important; }      
	.subdued  { color:#666; font-size:90%    }   
	.alt      { color:#ff0000; }  
	
	/* Size */
	.sm   { font-size: 90%; line-height: 14px; }
	.med  { font-size: 120%; }
	.lg   { font-size: 140%; }
	.xl   { font-size: 200%; }
	.superXL {font-size: 250%; line-height: 30px;}
	
	/* LINKS - general */	
	a,a:link,a:hover {background:transparent; text-decoration:none; cursor:pointer; outline: none; } 
	a:link {color:#00b2ef; font-weight:bold;} 
	a:visited {color:#666; font-weight:bold; } 
	a:hover {color:#00ccff; font-weight:bold; text-decoration:underline} 
	a:active {color:#00b2ef; font-weight:bold;} 

	/* LINKS - External */	
	.external {font-weight:bold!important; } 
	
/* ====================================================================================== //
   =Forms, fields, buttons - Global styling classes       
// ====================================================================================== */
	
	/* Buttons */	
	.btn {border: 3px double #999; border-top-color: #fff; border-left-color: #fff; background-image:url('/img/nav/button_form_bg.gif'); background-repeat:repeat-x; background-position:top; outline:none; color: #333; font-family: Arial, Verdana, Helvetica, sans-serif; font-weight: bold;} 
	
	/* Choose size */
	.btn_sm {padding: 2px 6px 2px 6px!important; font-size: 80%!important; } 		
	.btn_lg {padding: 5px 10px 5px 10px!important; font-size: 100%!important; } 
	
	/*Form Elements */
	.form_field { width: 60%; padding: 4px; font-size: 14px; height:20px }
	.message { height:300px; }
	.form_dropdown { width: 62%; font-size: 14px; height:30px }
		
/* ====================================================================================== //
   =Contact form       
// ====================================================================================== */

	#ContactForm { width: 600px; padding: 30px 100px 30px 200px; }
	#ContactForm h2 { margin-top: 30px;}
	#ContactForm ul { margin-bottom:20px;  }
	#ContactForm li { border-bottom: 1px dotted #eee; padding:10px 0px; }
	#ContactForm label { width: 100px; float: left; text-align:right; display: inline; padding-right: 10px; margin: 10px 10px; font-weight: bold; border-right:1px solid #eee; } 
	#ContactForm .btn_lg { margin: 0 30%; width: 40%; position:relative; top: -30px; }

/* ====================================================================================== //
   =Validation, Error Messages      
// ====================================================================================== */
	
	.formfile { padding-left:280px }
	.jqueryfileholder { display:block; padding-left:160px; margin-bottom:10px; };

	.msgError { color:#FFF; background-color:#900; padding:10px; line-height:1.5em; border:1px solid #900; }
	.msgOK    { color:#333; background-color:#FFC; padding:10px; line-height:1.5em; border: 1px solid #CCC; }
	
	.positive { color:#66cc00; font-weight:bold }
	.negative { color:#cc0000; font-weight:bold }
	.notify   { color:#00b2ef; font-weight:bold }
	.alert    { color:#cc0000; font-weight:bold }	
	.required { color:#ff0099; font-weight:bold }	
	
	/* Utility Classes */		
	.hidden   {visibility: hidden;}		
	
/* ====================================================================================== //
     =Pagination / BreadCrumbs             
// ====================================================================================== */	

	.Pag             { text-align:center; height:40px; padding-top:30px; width: 100%;}
	.Pag ul 		 { list-style-type:none; margin:0 auto; padding:0; overflow:hidden; }
	.Pag li          { display:inline; font-size:120%; border-right: 1px dotted #eee;}
	.Pag li, .Pag a  { padding:3px; margin:0; }
	.Pag .previous-off, .Pag .next-off   { color:#333; font-weight:bold; padding:3px 12px; }		
	.Pag .next a, .Pag previous a  { font-weight:bold; }		
	.Pag .active     { font-weight:bold; padding:10px; color:#00b2ef; border-bottom:solid 3px #eee; }	
	.Pag a:link, .Pag a:visited   { text-decoration:none; color:#999; padding:3px 6px; }	
	.Pag a:hover     { text-decoration:none; color:#00b2ef; }

/* ====================================================================================== //
	=CLEAR FIXES & SPACERS            
// ====================================================================================== */

	.clear {clear:both;position:relative;font-size:0px;height:0px;line-height:0px} 
	.fix{clear: both;height: 1px;margin: 0 0 -1px;overflow: hidden;}
 	.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
	.clearfix {display: inline-block}	
	/* Hides from IE-mac \*/
	* html .clearfix {height: 1%;} .clearfix {display: block;}
	/* End hide from IE-mac */