/* ====================================================================================== 
	WATERLOO CONTAINER  |  Main CSS                                                           
	Author: Matthew Beverly | Matty Studios | www.mattystudios.com | Feb 2010        
====================================================================================== */	

	@import url("reset.css");	 	
	@import url("style.css");
	@import url("forms_buttons.css");
	@import url("../scripts/colorbox/v5/colorbox.css");
	

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

	body {background-color: #fff; font-size: 70%; font-family: Helvetica, serif; color: #444; background-image: url('../img/backgrounds/bg.gif');background-repeat: no-repeat; background-position: top;}	
	#Wrap { width:1000px; height: auto; margin: 0 auto; }			
	#MainBodyWrap {  }

	/* Wraps | Vertical Inner Wrap Containers */
	#MainContentWrap { width:690px; padding:0 30px; margin:0px; float:left; overflow:hidden; background-image: url("../img/backgrounds/productdetailsbg.gif"); background-repeat:no-repeat; background-position: 720px 0px; font-size:110%}
	#SideBarWrap     { width:250px; padding:0px; margin:0px; float: left; overflow:hidden; }
	#FullWidthWrap   { width:940px; padding:0 30px; margin:0px; float: left; overflow:hidden; font-size:110% }
	
	/* ====================================================================================== //
	=HEADER  |  Main Navigation              
// ====================================================================================== */
	
	/* if ie 6 sub  */
	#header table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}
	
	/* Header Container | Navigation Setup  */
	#header    { height:80px; position:relative; overflow: visible; z-index:98; }
	#header h1 { position:absolute;left:-9999px; }	
	
	#header ul    { float:left; }
	#header ul li { float:left; line-height:60px; position:relative;z-index:99;outline: none; font-size:14px; font-weight:bold; font-family:"Georgia", Times, serif  }
	
	/* Nav States */
	#header ul li a        { color:#888; text-decoration:none; height:60px; float:left; display:inline; /*ie*/padding:0 14px; outline: none; }
	#header ul li a:hover  { display:block; background-image:none !important; background-color:#fff; color:#000; border-left:1px solid #eee; border-right:1px solid #eee; margin:0 -1px; }
	#header ul li a.active { display:block; color:#0099ff; border-left:1px solid #eee; border-right:1px solid #eee; background-color:#fff; background-image: url('../img/nav/active.gif');background-repeat: repeat-x; background-position: top right; padding-bottom:10px; margin:0 -1px; }

	/* Drop setup */	
	#header ul li.hover ul,
	#header ul li:hover ul {display:block; outline: none; z-index:100; }
	
	/* Drop styling */	
	#header ul ul { position:absolute; top:60px; left:-1px; background:#eee; background-image: url('../img/nav/dropbg.gif');background-repeat: repeat-x; background-position: top; width:140px; display:none; z-index:99; border-bottom:2px solid #bbb; border-right:1px solid #bbb; border-left:1px solid #fff; }
	#header ul ul li { float:none; height:24px; line-height:24px; z-index:99; border-bottom:1px solid #eee; border-top:1px solid #fff; border-left:1px solid #eee; border-right:1px solid #ddd;}
	
	/* Drop states  */
	#header ul ul li a        { display:block; background-image:none !important; color:#666; outline: none; padding:0 15px; float:none; height:24px; line-height:24px; font-family: Helvetica, Verdana, serif; font-size:11px; font-weight:bold;}
	#header ul ul li a:hover  { display:block; background-image:none !important; background-color:#0099ff; color:#fff; border-left:1px solid #006699; border-right:1px solid #33ccff; border-bottom:1px solid #33ccff; border-top:1px solid #006699; padding:-1px -2px 0;}
	#header ul ul li a:active { display:block; background-image:none !important; background-color:#0099ff;  color:#fff; padding:-1px -2px 0;}


/* ====================================================================================== //
	VIEW & LAYOUT | Content_Block Layout | Smart Colums, Grids              
// ====================================================================================== */
	
	.container   { padding: 0px 2%; overflow:hidden }	

	/* View - Smart Colums */		
	ul.column    { width: 100%; padding: 0; margin: 0; list-style: none; overflow:hidden } 
    ul.column li { width: 140px; padding: 0; margin: 0px 0; float: left; display: inline; overflow:hidden } 
	
	/* Styles Product Teaser Block */
	.block        { margin-right: 20px; padding: 0px; overflow:hidden;  text-align:center; } 	
	.block li     { width:100%!important; }			
	.block h3     { padding-top:10px; background-image:url("/img/backgrounds/prod_block_bg.gif"); background-repeat:no-repeat;  background-position:top center;}
	.block h3 div { margin-top:-4px!important; padding:0px!important;}
	.block p      { font-weight:normal;  color:#666; line-height: 10px;}	
	.block img    { width: 89%;  margin: 0 auto; -ms-interpolation-mode: bicubic; display: block;  }
	
	/* Simple utility list */
	.simpleList { margin-bottom:30px;}
	.simpleList strong { line-height: 24px; }
	.simpleList li { padding-left: 10px; margin: 0px; line-height: 18px;}
	
	/* 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;}
	/* Dynamic Class to remove the right margin so the blocks come flush with container */
	.norightmargin { margin-right:0px; background:#F00!important;}	

	/* Main Cat Variation */
	.cat_block        { margin: 0 auto; width: 150px; float: left; display: inline; overflow:hidden; margin-right:10px; text-align:center; line-height: 14px; }
	.cat_block h3     { padding-top:10px; background-image:url("/img/backgrounds/prod_block_bg.gif"); background-repeat:no-repeat; background-position:top center;}	
	.cat_block p      { font-weight:normal;  color:#666;  line-height: 14px; height:20px}	
	.cat_block img    { width: 120px; height: 350px; margin: 0 auto; -ms-interpolation-mode: bicubic; display: block;  }	
	.cat_row { width: 100%; padding: 0; margin: 0; list-style: none; overflow:hidden }
	
/* ====================================================================================== */
/* =Headers / Features                                                                  = */
/* ====================================================================================== */
	
	#flashFeature { width: 1000px; height: 500px; z-index: 90; background: url('../img/featurebg.jpg') no-repeat top center;}  		
	.section_header{  margin-bottom: -30px; padding-bottom:50px; background-image: url("../img/backgrounds/fullEdge.gif"); background-position: bottom; background-repeat: no-repeat}

/* ====================================================================================== //
   =Product/Catalog        
// ====================================================================================== */	

	/* Container DIV's */
	#productMain { width:640px; float: left; display:block;  padding-left: 30px; overflow:visible;}	
	#productDetails { width:300px; float: right; overflow:hidden; display:block; padding-left: 30px; background-image: url("../img/backgrounds/productdetailsbg.jpg"); background-repeat:no-repeat; background-position:top; }
	
	/* Options */
	#productOptions { width:350px; float: left; display:block; }
	#productOptions .section { background-image:none; padding:0!important; margin-top:20px; }
	#productOptions .section img { width: 20%; height: 20%; -ms-interpolation-mode: bicubic; float: left; display: inline; margin:0!important; padding:0!important;}	
	#productOptions h1 { margin:0!important; padding:0!important; color: #111; font-size: 260%; font-weight:lighter; border:none; }
	#productOptions h3 { display:block; clear: left; }
	#productOptions ul li { line-height:20px; border-bottom:1px dotted #eee; padding-left:10px;}
	
	/* State for currently viewing bottle and finish */
	#productOptions .current_viewing { color: #fff!important; font-weight:bold;}
	#productOptions img.current_viewing { border-bottom:10px solid #0099ff; border-top:1px solid #0099ff  }
	#productOptions ul li.current_viewing  { background-color: #0099ff;  }	
	
	p.string_number { color: #999; display:block; font-size:90%}
	p.string_number strong { color: #666;}

	.viewing {color: #999; font-size:90%; padding: 0px 50px 0px 0px; display:block;  text-align:right; overflow: hidden; }
	
	/* Main Bottle */
	#productImgLarge { width:250px; float: right;  }
	#productImgLarge img { margin: 0 auto; -ms-interpolation-mode: bicubic; display: block; }
	
	/* Details */	
	#productDetails ul { background-image: url("../img/backgrounds/smalledge.gif"); background-position: bottom; background-repeat: repeat-x; padding: bottom 20px;}
	#productDetails ul li { line-height:20px; border-bottom:1px dotted #eee; font-size:90%; }
	#productDetails ul li strong { font-size:110%; }
	#productDetails h2 { margin-left:-10px; padding-left: 30px; background-image: url("../img/backgrounds/smalledge.gif"); background-position: bottom; background-repeat: repeat-x; font-size:140%; font-weight:lighter; line-height:50px;}
	#productDetails p  { margin: 10px auto; display:block}

/* ====================================================================================== //
	=SECTION Content Classes | Global Reuseable .section and .ul classes
// ====================================================================================== */
	
	/* Section DIV - Seperates content within MainContentWrap */
	.section     { padding: 20px 0; background-image: url("../img/backgrounds/smalledge.gif"); background-position: bottom; background-repeat: repeat-x }
	.section img { display:inline; margin: 0px 20px 0px 0px; float:left; }	
	.section dt  { font-size: 90%; margin-bottom: 20px;  text-align:right;}
	
	/* blockList | Content UL for Repeatable Similar Block List Content */
	.blockList ul { margin-bottom:20px; padding:10px 0; border-top:1px solid #eee; }
	.blockList li { padding: 20px; overflow:hidden; background-image: url("../img/backgrounds/smalledge.gif"); background-position: bottom; background-repeat: repeat-x }
	.blockList dt { font-size: 90%; margin-bottom: 20px; text-align:right; }
	.blockList p  { overflow:hidden; }
	.blockList img { display:inline; float:left; border-right: 1px dotted #eee; margin-right:20px; padding-right:10px;    }
	
	/* blockList | Sexy version 2 | uses blockList as a base */
	.ver2 li img { float:right; border: 0px; padding:0px;}
	.ver2 li h2  { font-size:140%;  }
	
	/* gridList | Content UL for grid modules */
	.gridList   { width: 100%; padding: 0; list-style: none; overflow:hidden; margin-top: 50px;}	
	.gridList li  { width: 220px; height:260px; float: left; display: inline; padding-bottom: 20px;  margin: 0px 20px 20px 0px; background-image: url("../img/backgrounds/sep_sm.gif"); background-position: bottom center; background-repeat:no-repeat; overflow:hidden;  }
	.gridList h3  { font-size:130%; color:#0099ff; font-weight:lighter;}
	.gridList p   { font-size:94%; line-height:14px; color:#222;}
	.gridList img { width: 100%; height:auto; margin: 0 auto -10px; -ms-interpolation-mode: bicubic; display: block; padding-bottom: 20px; background-image: url("../img/backgrounds/sep_sm.gif"); background-position: bottom center; background-repeat:no-repeat; }
	
	/* thumbGrid | holds sets of thumbs */
	.thumbGrid { background-image: url("../img/backgrounds/sep_sm.gif"); background-position: bottom center; background-repeat:no-repeat; text-align:center; overflow:visible; display:block; float:left; padding-bottom: 20px; margin:10px; auto }
	.thumbGrid img { width: 48%; height:auto; -ms-interpolation-mode: bicubic; display: inline; margin: 0px 2px 2px 0px; }
	.thumbGrid img.noresize { width: auto; height:auto; display: inline; margin: 0px 2px 2px 0px; }
	
/* ====================================== //
	=SECTION Specific Styling  
// ===================================== */

	.services li em  { font-size:150%; line-height: 20px; margin-bottom:10px; font-family:"Times"; display:block; }
	.services img { width: 150px; height: auto; -ms-interpolation-mode: bicubic;}
	
	.profiles li em { margin-bottom:10px; display:block; }
			
	.testimonials h3 { font-family:"Georgia"; color: #0099ff; font-style:italic; font-weight:normal;} 
	
	.reference ul.blockList li { background:none; border-bottom: 1px dotted #eee; padding:10px 0px 10px 0px;}	
	.faq h3 {font-family:"Georgia"; color: #0099ff; font-style:italic; font-weight:normal;}
	.faq p { font-size: 90%; padding: 0px 10px;}
	
	.pdfDownloadLink img { float:left!important; margin-top: 10px;}
	
	/*News*/
	.mainImg { width: 100%; height:auto; padding: 0; margin: 0; display:block; overflow:hidden; float: left }
	
	.relatedProducts     { margin: 30px 0; background-image: url("../img/backgrounds/smalledge.gif"); background-position: bottom; background-repeat: repeat-x }
	.relatedProducts img { width: 10%!important; height:10%!important; -ms-interpolation-mode: bicubic;}

/* ====================================================================================== //
	=SIDEBAR    
// ====================================================================================== */

	#SideBarWrap li  { padding:0px 0px 20px 0px; margin-bottom:-20px; background-image: url("../img/backgrounds/sep_sm.gif"); background-position: bottom center; background-repeat:no-repeat; }
	#SideBarWrap img { margin: 0 auto; display:block; float:none; }
	#SideBarWrap dt  { text-align:center; margin-bottom:10px; font-size:90% } 
	#SideBarWrap h2  {  padding:0px 0px 10px 0px; background-image: url("../img/backgrounds/sep_sm.gif"); background-position: bottom center; background-repeat:no-repeat; text-align:center; }
	#SideBarWrap h3  { font-family:"Georgia"; color: #0099ff; font-style:italic; font-weight:normal;} 
	#SideBarWrap li.sbFeatured p  { color:#333!important;  }
	#SideBarWrap .thumbGrid img { display:inline!important; float:left!important; border: 1px solid #efefef; }
	
	.contact ul li { background:none!important; line-height:18px; }
	.contact { font-size:110%!important;}

		
/* ====================================================================================== //
	=FUNCTION  |   Dynamically Added Classes in Common/functions.js     
// ====================================================================================== */
		
    .lastinnav    { border-right:0px!important;}
	.FirstSection { }
	.LastSection  { background-image:none!important; }

/* ====================================================================================== //
    =DETAILS  |  Article Footers,Credit,Date,Bullets        
// ====================================================================================== */

	.ArticleFooter { width: 99%; min-height:50px; margin:10px auto; padding: 0; line-height: 16px; float: left; background: url('../img/backgrounds/fadeline_small.jpg') no-repeat; color:#999; font-size:80%; display:block}
	.Date          { float: left; color:#999;}
	.Credits       { float: right}
	
/* ====================================================================================== //
     =Pagination             
// ====================================================================================== */	

	.Pag { text-align:center; height:30px; margin-top:50px; padding-bottom: 20px;width: 100%; background: url('../img/backgrounds/fadeline_small.jpg') no-repeat; background-position: bottom;}
	.Pag ul 		 { list-style-type:none; margin:0 auto; padding:20px; overflow:hidden; }
	.Pag li          { display:inline;  border-right: 1px dotted #fff; }
	.Pag li, .Pag a  { padding:3px; margin:0; font-size: 120%; font-weight:bold;}

	.Pag .previous-off, .Pag .next-off   { color:#000; font-weight:bold; padding:3px 12px;font-size: 120%; }		
	.Pag .next a, .Pag previous a  { font-weight:bold; font-size: 120%;}		
	.Pag .active     { font-weight:bold; padding:10px; color:#0099ff; border-bottom:solid 3px #0099ff; font-size: 120%;}	
	.Pag a:link, .Pag a:visited   { text-decoration:none; color:#000; padding:3px 6px;font-size: 120%; }	
	.Pag a:hover     { text-decoration:none; color:#000;font-size: 120%; }

	
/* ====================================================================================== //
	=FOOTER  |  Footer Navigation           
// ====================================================================================== */

	/* Footer Container */
	#footer { width: 1000px; min-height:150px; margin: 0 auto; background-image:url('../img/backgrounds/footerbg.jpg'); background-repeat: no-repeat; background-position: bottom;}
	/* Footer Extras  */
	.FootBottom { padding-top: 100px}
	.sitecredit { float: left;  padding: 30px; font-size: 80%; font-weight:normal; color:#ccc;} 
	.sitecredit a { color:#ccc; font-weight:normal;  }
	.sitecredit a:hover { color:#333; font-weight:bold;}
	
	.copyright  { float: right; padding: 30px; font-size: 80%; font-weight:normal; color:#ccc; text-align:right} 

/* ====================================================================================== //
	=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 */
	
/* ====================================================================================== //
   =User Notification | Validation Positive, Negative, Alert, Required, hidden             
// ====================================================================================== */
	
	.positive { color:#66cc00; font-weight:bold }
	.negative { color:#cc0000; font-weight:bold }
	.notify   { color:#0099ff; font-weight:bold }
	.alert    { color:#cc0000; font-weight:bold }	
	.required { color:#ff0099; font-weight:bold }
	.overQuote { color:#FFF; font-weight:bold; padding:10px; background-color:#900; text-align:center} 
	
	/* Utility Classes */		
	.hidden   {visibility: hidden; font-size:0px;height:0px;line-height:0px; position:absolute;left:-9999px;}