@import url('reset.css');
@import url('default.css');
@import url('type.css');

/***

Font-sizes. Browser default is 16px. Set body to 75%,which is equal to 12px and,therefore,1em is 12px.
9px :0.75em
10px :0.8333em
11px :0.9167em
12px :1.0em
13px :1.0833em
14px :1.1667em
15px :1.25em
16px :1.3333em
17px :1.4167em
18px :1.5em
19px :1.5833em
20px :1.6667em
21px :1.75em
22px :1.8333em
23px :1.9167em
24px :2.0em
25px :2.0833em
26px :2.1667em
27px :2.25em
28px :2.3333em
29px :2.4167em
30px :2.5em
31px :2.5833em
32px :2.6667em


7e8082

***/

body											{font-family: "proxima-nova-1","proxima-nova-2", Gotham, Helvetica, Arial, sans-serif; background: #fff;}
												
.clear											{clear: both;}
.left											{float: left;}
.right											{float: right;}
												
img 											{-ms-interpolation-mode:bicubic; }
img.left										{float: left; margin: 0 20px 20px 0;}
img.right										{float: right; margin: 0 0 20px 20px;}

#logo											{ width: 302px; height: 60px; float: left; background: url(../img/waterandwellness.jpg) left top no-repeat; display: block; text-indent: -9999px; }
#header											{ padding: 30px 0; }											
#header h1										{ margin: 0; padding: 0; }
#wrap											{ color: #7e8082; font-size: 1.0833em; padding-bottom: 50px; }
#print-logo										{ display: none; }
		

/**
***
*** Topbar Styles **/	
										
#topbar											{ padding: 10px 0; background: #c4d8ef; color: #7e8082; font-size: 1.0833em; }
#topbar .address								{ float: left; margin: 0; padding: 3px 0; }
#topbar .address span							{ color: #fff; }
#topbar ul										{ float: right; margin: 0; padding: 3px 0; }
#topbar ul li									{ float: left; padding: 0 20px; position: relative; }
#topbar ul li a									{ color: #7e8082; text-decoration: none; }
#topbar ul li a.current							{ color: #fff; }
#topbar ul li a:hover							{ color: #fff; }
#topbar ul li ul								{ display: none; }
#topbar ul li:hover ul							{ display: block; z-index: 10; position: absolute; top: 15px; left: 0; width: 200px; background: #c4d8ef; padding: 7px 0; }
#topbar ul li:hover ul li						{}
#topbar ul li:hover ul li a						{ padding: 3px 0; display: block; }
#topbar #searchForm								{ float: right; margin: 0; padding: 0; }
#topbar #searchText								{ border: none; background: #fff; color: #c4d8ef; margin: 0; padding: 5px; width: 175px; }



/**
***
*** Main Navigation Styles **/											

#main-nav 										{ margin: 0; padding: 0 0 0 48px; float: left; }
#main-nav li									{ margin: 0; padding: 11px 23px; float: left; position: relative; }
#main-nav li a									{ padding: 5px 10px; display: block; color: #7e8082; text-decoration: none; font-size: 1.25em; }
#main-nav li a:hover							{ color: #b0cbea; }
#main-nav li a.current							{ color: #9cd172; }
#main-nav li.first 								{ padding-left: 0; }
#main-nav li.last 								{ padding-right: 0; }
#main-nav li ul 								{ display: none; position: absolute; z-index: 10; margin: 0 0 20px; padding: 0 0 13px;; width: 163px; background: url(../img/bg-rounded-dark-bottom.png) bottom left no-repeat; }
#main-nav li:hover ul							{ display: block; }
#main-nav li ul li								{ padding: 0; position: relative; float: none; background: #dededf; }
#main-nav li ul li:first-child					{ padding-top: 13px; background: url(../img/bg-rounded-dark-top.png) top left no-repeat }
#main-nav li ul li a							{ padding: 5px 20px; color: #597abc; text-decoration: none; display: block; font-size: 1em; }
#main-nav li ul li:hover a,					
#main-nav li ul li a:hover						{ color: #005bab; }


/**
***
*** Homepage Styles **/

/** Banner Styles **/
#banner											{ height: 375px; }
#banner ul										{ margin: 0; padding: 0; }
#banner ul li									{ margin: 0; padding: 0; }
#banner #slides									{ height: 351px; }
#banner #slides-nav 							{ padding: 2px 0; text-align: right; }
#banner #slides-nav a							{ width: 13px; height: 13px; margin: 0 1px; display: inline-block; background: url(../img/bg-slidenav.jpg) top left no-repeat;  }
#banner #slides-nav a.activeSlide				{ background: url(../img/bg-slidenav-active.jpg) top left no-repeat; }

/** Button Styles **/
#buttons a.button								{ margin: 0 20px 20px 0; padding: 15px 20px; width: 266px; height: 130px; float: left; display: block; text-decoration: none; font-size: 2em; line-height: 1.1667em; }
#buttons a.button.map							{ font-size: 5em; padding: 80px 20px 15px; height: 65px; background: url(../img/bg-map.jpg) top left no-repeat; color: #f15f5e; }
#buttons a.button.green							{ background: url(../img/button-large-green.png) top left no-repeat; color: #fff; }
#buttons a.button.red							{ background: #f15f5e; color: #fff; }
#buttons a.button.blue							{ background: #b0cbea; color: #fff; }
#buttons a.button.last							{ margin-right: 0; }



/**
***
*** Main Column Styles **/
					
.main-col										{ width: 600px; float: right; }
.main-col .col									{ float: left; width: 280px; }
.main-col .col.first							{ padding-right: 40px; }
.main-col h1:first-child,						
.main-col h2:first-child,						
.main-col h3:first-child,						
.main-col h4:first-child,						
.main-col h5:first-child,						
.main-col h6:first-child						{ padding-top: 0; }
.main-col h1,									
.main-col h2,									
.main-col h3,									
.main-col h4,									
.main-col h5,									
.main-col h6									{ font-weight: normal; padding: 10px 0 5px; }
.main-col h1.green,									
.main-col h2.green,									
.main-col h3.green,									
.main-col h4.green,									
.main-col h5.green,									
.main-col h6.green								{ color: #B3D88C; }
.main-col h1									{ font-size: 2.75em; }
.main-col h2									{ font-size: 2.25em; line-height: 1.1667em; }
.main-col h3									{ font-size: 1.75em; }
.main-col h4									{ font-size: 1.25em; }
.main-col h5									{ font-size: 1.25em; }
.main-col h6									{ font-size: 1.25em; }
.main-col ul li									{ list-style: disc; }
.main-col ul li.coupons							{ list-style: none; float: left; padding: 0 20px 20px 0; margin-left: -30px; }
.main-col ul li.coupons img						{ padding-right: 30px; }
.main-col ol li									{ list-style: decimal; }
.main-col a										{ color: #B3D88C; text-decoration: none; }
.main-col a:hover								{ color: #b0cbea; }
.main-col blockquote p							{ font-size: 1.5em; color: #999; font-family: Georgia; font-style: italic; }
.main-col blockquote p.who						{ margin-top: -10px; font-size: 1em; text-align: right; font-style: normal; }
.main-col hr									{ border: none; border-top: 2px solid #bebfc0; clear: both; margin: 15px 0 20px; }
.main-col .images								{ width: 400px; height: 300px; display: block; float: left; margin-right: 20px; }
.main-col .nav 									{ width: 400px; float: left; text-align: center; padding-top: 5px; } 
.main-col .nav a                             	{ width: 12px; height: 12px; padding: 2px 2px; display: inline-block; background: url(../img/nav-dot.png) center center no-repeat; text-indent: -9999em; }
.main-col .nav a.activeSlide                 	{ background: url(../img/nav-dot-current.png) center center no-repeat; }
.main-col .next                           	    { width: 400px; height: 300px; display: block; float: left; margin-top: -300px; cursor: pointer; position: relative; z-index: 500; }
.note											{ background: #fff8d7; border: 1px solid #e8dfb5; padding: 5px 10px; margin-bottom: 10px; }

/** Breadcrumb/Sorting Extras **/
.main-col #breadcrumb							{ margin: 0 0 20px; padding: 0; }
.main-col #sorting								{ margin: 0; padding: 0 0 20px; }
.main-col #breadcrumb a,
.main-col #sorting a							{ color: #7e8082; text-decoration: none; }
.main-col #breadcrumb a:hover,
.main-col #sorting a:hover						{ color: #B3D88C; text-decoration: none; }	

/** Product Extras **/
.main-col.product .images						{ text-align: center; }
.main-col.product .productimg					{ max-width: 400px; }	
.main-col.product h1							{ font-size: 1.75em; padding: 0 0 0; }	

/** Related Products Extras **/
.main-col ul.related							{ margin: 0; padding: 0; }
.main-col ul.related li							{ margin: 0 0 40px; padding: 0; width: 200px; float: left; list-style: none; color: #7e8082;  }
.main-col ul.related li.last					{ margin-right: 0; }
.main-col ul.related li a						{ color: #7e8082; padding: 2px 0 0; display: block; }
.main-col ul.related li:hover a					{ color: #B3D88C; }
.main-col ul.related li .image					{ width: 150px; height: 150px; display: block; position: relative; overflow: hidden; }

.main-col ul#product_list						{ list-style: none; margin: 0; padding: 0; }
.main-col ul#product_list li					{ list-style: none; float: left; width: 270px; height: 150px; margin: 0 20px 20px 0; padding: 0 10px 0 0;  }
.main-col ul#product_list li h2					{ font-size: 1em; font-weight: bold; color: #333; }
.main-col ul#product_list li h2	a				{ color: #666; }

/**
***
*** Side Column Styles **/

.side-col										{ width: 306px; float: left; }

/** Side Navigation **/									
.side-col #side-nav-holder						{ background: url(../img/bg-rounded-dark-top.png) top left no-repeat; padding-top: 13px;}
.side-col #side-nav 							{ margin: 0 0 20px; padding: 0 0 13px; width: 165px; background: url(../img/bg-rounded-dark-bottom.png) bottom left no-repeat; }
.side-col #side-nav li							{ background: #dededf; padding: 5px 20px; width: 123px; position: relative; display: block; }
.side-col #side-nav li a						{ color: #597abc; text-decoration: none; display: block; width: 120px; }
.side-col #side-nav li:hover a,					
.side-col #side-nav li a:hover					{ color: #005bab; }
.side-col #side-nav li ul						{ display: none; position: absolute; z-index: 10; top: -10px; right: -155px; width: 165px; background: url(../img/bg-rounded-light-bottom.png) bottom left no-repeat; padding: 0 0 13px; }
.side-col #side-nav li ul li					{ background: #e8e8e8; }
.side-col #side-nav li ul li:first-child		{ background: url(../img/bg-rounded-light-top.png) top left no-repeat; padding-top: 16px; }
.side-col #side-nav li:hover ul					{ display: block; }
.side-col #side-nav li:hover ul li a			{ color: #597abc; }
.side-col #side-nav li:hover ul li a:hover		{ color: #005bab; }
.side-col #side-nav li:hover ul li ul			{ display: none; }

/** Side Button Extras **/	
.side-col .button								{ margin: 0 0 20px 0; padding: 15px 20px; height: 130px; display: block; text-decoration: none; font-size: 2em; line-height: 1.1667em; }
.side-col .button.small							{ height: 45px; font-size: 1.5em; }
.side-col .button.map							{ font-size: 5em; height: 65px; padding: 80px 20px 15px; background: url(../img/bg-map.jpg) top left no-repeat; color: #f15f5e; }
.side-col .button.green							{ background: url(../img/button-large-green.png) top left no-repeat; color: #fff; }
.side-col .button.red							{ background: #f15f5e; color: #fff; }
.side-col .button.blue							{ background: #b0cbea; color: #f0e948; }
.side-col .button.small.blue					{ background: url(../img/button-small-blue.png) top left no-repeat; }
.side-col .button.small.green					{ background: url(../img/button-small-green.png) top left no-repeat; }
.side-col .button.img							{ height: 130px; }


#search 										{}
#search #searchInput							{ border: 1px solid #c4d8ef; width: 400px; background: #fff; padding: 5px 5px; font-size: 1.25em; }
#search #searchSubmit							{ border: none; background: #c4d8ef; color: #7e8082; padding: 6px 15px; font-size: 1.25em; }
#search-results									{ margin: 0; padding: 0; }