/* -------------------------------------------------------------- 
  
	Resets default browser CSS
	http://meyerweb.com/eric/tools/css/reset/
   
-------------------------------------------------------------- */

/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
}

ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

html {
	overflow: scroll;
}

/* -------------------------------------------------------------- 
   
   typography.css
  
-------------------------------------------------------------- */

body { 
	font-size: 75%; 
	color: #646464; 
	font-family: Arial, Helvetica, Verdana, sans-serif;  
	line-height: 1.5;
}

h2, h3, h4, h5, h6 { color: #336699;  margin: 5px 13px;}

h2 { font-size: 1.3em; }
h3 { font-size: 1em; color: #454545; text-transform: uppercase;}
h4 { font-size: 1em;}
h5 { font-size: 1.1em; }
h6 { font-size: 1em; }
p { font-size: 1.1em;  margin: 5px 13px;}
ul, ol, dl { font-size: 1.1em;  margin: 5px 13px 5px 27px;}

img 		{ vertical-align: bottom;  margin: 5px 13px; }

ul          { list-style-type: disc; }
ol          { list-style-type: decimal; }

a           { color: #3366ff; text-decoration: underline; }
a:focus, 
a:hover     { color: #3366ff; text-decoration: none;}
strong      { font-weight: bold; }
em     		{ font-style: italic; }

dt			{font-weight: bold;}

.message h3 {
	color: #fff;
}

/* Some default classes
-------------------------------------------------------------- */

.small      { font-size: .8em; }
.large      { font-size: 1.2em; line-height: 2.5em; margin-bottom: 1.25em; }

.top        { margin-top:0; padding-top:0; }
.bottom     { margin-bottom:0; padding-bottom:0; }

.clear     { clear: both; }

.padding	{ padding: 10px 0; }

.hide { 
	position:absolute;
	left:-9990px;
	top:0px;
	width:1px;
	height:1px;
	overflow:hidden;
}

.hide2 {
	visibility: hidden;
}

.sub    { font-size: 50%; }

.left {
	float: left;
}

.right {
	float: right;
}

.divider {
	background: #e3e3e3;
	height: 1px;
	clear: both;
	margin: 5px 13px 5px 13px;
}

.sidecontent .divider {
	background: url(../images/divider2.gif) repeat-x;
}

.column {
	float: left;
}

.autowidth {
	width: auto;
}

.center {
	text-align: center;
}

/* -------------------------------------------------------------- 
  
	=Layout 
   
-------------------------------------------------------------- */
html {
	height: 100%;
}

body {
	min-height: 100%;
}	

.container {
	background: #a4e5f9;
	height: 100%;
	padding-top: 15px;
	padding-bottom: 15px;
	min-width: 1020px;
}
	
.content {
	width: 1020px;
	margin: 0px auto;
	overflow: auto;
	background: #fff url(../images/content_bg.gif) repeat-y;
	min-height: 400px;
}

.contentbottom {
	background: url(../images/content_bottom.gif) no-repeat;
	height: 10px;
	width: 1020px;
	margin: 0px auto;
}

.maincontent {
	float: left;
	width: 726px;
	margin: 9px 0 0 0;
}

.sidecontent {
	float: right;
	width: 290px;
	background: url(../images/content_corner.gif) right top no-repeat;
	padding-bottom: 5px;
}

.sidecontent h2, .sidecontent h3, .sidecontent h4, .sidecontent h5, .sidecontent h6, .sidecontent p,  .sidecontent .divider {
	margin-right: 26px;
}

.branding {
	clear: both;
	margin-left: 13px;
	margin-bottom: 9px;
	background: url(../images/water_bg_sm.jpg) no-repeat;
	height: 103px;
}

.logo img {
	margin: 18px 18px 0px 18px;
}


/* home layout & 'quirks' */

.home .branding {
	background: url(../images/water_bg.jpg) no-repeat;
	height: 301px;
	margin-bottom: 13px;
}

.home .logo img {
	margin-bottom: 41px;
}

.home .sectiontitle {
	font-size: .95em;
}

.siteentry {
	height: 141px;
	background: #fff url(../images/curved_shape.gif) no-repeat;
	width: 500px;
	padding-left: 50px;
	padding-top: 10px;
	position: relative;
}

.siteentry h2.offer {
	color: #9dc2d4;
	font-size: 1.7em;
	margin-right: 100px;
	line-height: normal;
	margin-bottom: 8px;
	margin-left: 40px;
}

h2.offer .free {
	color: #336699;
	text-transform: uppercase;
}

.entryform {
	margin-left: 40px;
	color: #336699;
	text-transform: uppercase;
	border-top: 1px dashed #e3e3e3;
	padding-top: 8px;
}

.sidecontent .entryform {
	margin: 9px 26px 9px 13px;
	border: 5px solid #336799;
	background: #def4ff;
	height: 84px;
}

.sidecontent .entryform .text {
	margin-left: 20px;
	font-size: 1.1em;
	padding-top: 6px;
	height: 20px;
	width: 130px;
}

.sidecontent .entryform .offer {
	font-size: 1em;
	margin-top: 0px;
	margin-bottom: 10px;
	margin-left: 20px;
}

.sidecontent .entryform .offer .free {
	color: black;
}

.entryform label {
	display: block;
	font-weight: bold;
	font-size: 1.25em;
}

.entryform .text, .entryform .submit {
	float: left;
}

.entryform .text {
	height: 25px;
	background: url(../images/input_bg.gif) repeat-x;
	border: 1px solid #646464;
	width: 120px;
	font-size: 2em;
	padding-left: .2em;
}

.entryform .submit {
	margin-left: 5px;
}

#controls {
	position: absolute;
	top: 10px;
	right: 5px;
}

#controls img {
	margin: 0;
	cursor: pointer;
}

.siteentry .promo {
	display: none;
}

.promoimage {
	float: left;
}

.promotext {
	margin-left: 190px;
}

h2.promotext {
	font-size: 1.2em;
	color: #9dc2d4;
	margin-right: 0px;
	padding-right: 70px;
	line-height: normal;
	margin-bottom: 8px;
	border-bottom: 1px dashed #E3E3E3;
	padding-bottom: 5px;
}

p.promotext {
	margin-right: 80px;
}

.promobutton {
	float: right;
	margin-top: -40px;
}

.section {
	float: left;
	line-height: normal;
}

.section img, .section h3, .section p {
	margin-right: 0;
}

.sections .section {
	width: 233px;
	margin-right: 13px;
	margin-bottom: 15px;
}

.sections2 .section {
	width: 177px;
	margin-right: 6px;
	margin-bottom: 5px;
}

.sections .last {
	margin-right: 0px;
}


/* =nav
--------------------------------------------------------------- */
#navcontainer {
	float: left;
	height: 27px;
	width: 701px;
	margin-bottom: 9px;
	margin-left: 13px;
	display: inline;
}

#nav {float:left; position:relative; margin: 0;}
#nav li { float:left; list-style: none;}
#nav li a { position: absolute; top:0; display:block; height:27px; background:url(../images/nav.gif) no-repeat; text-indent:-9999px; overflow:hidden; font-size:1%;}
li#resproducts a { width:167px; left:0; }
li#bottlescoolers a {  width:211px; left:167px; background-position:-167px top;}
li#services a { width:169px; left:378px; background-position:-378px top;}
li#comproducts a { width:154px; left:547px; background-position:-547px top;}
/* hover states */
li#resproducts a:hover { background-position:0 bottom; }
li#bottlescoolers a:hover { background-position:-167px bottom;}
li#services a:hover { background-position:-378px bottom;}
li#comproducts a:hover { background-position:-547px bottom;}
/* you-are-here navigation marker */
li#resproducts.current a { background-position:0 bottom; }
li#bottlescoolers.current a { background-position:-167px bottom;}
li#services.current a { background-position:-378px bottom;}
li#comproducts.current a { background-position:-547px bottom;}

/* without "bottle water & water coolers" nav button */
.altnav li#resproducts a { width:167px; left:0; }
.altnav li#bottlescoolers a { display: none;}
.altnav li#services a { width:169px; left:167px; background-position:-378px top;}
.altnav li#comproducts a { width:154px; left:336px; background-position:-547px top;}
/* hover states */
.altnav li#resproducts a:hover { background-position:0 bottom; }
.altnav li#services a:hover { background-position:-378px bottom;}
.altnav li#comproducts a:hover { background-position:-547px bottom;}
/* you-are-here navigation marker */
.altnav li#resproducts.current a { background-position:0 bottom; }
.altnav li#services.current a { background-position:-378px bottom;}
.altnav li#comproducts.current a { background-position:-547px bottom;}

#nav.altnav li#services .subnav {
	left:169px;
}


/* drop-down sub nav */
#nav li .subnav {
	position: absolute;
	top: 22px;
	left: 0px;
	margin-left: 0;
	background: #9dc2d4;
	line-height: normal;
}

#nav li#services .subnav {
	left: 380px;
}

#nav li .subnav li {
	float: none;
}

#nav li .subnav a {
	text-indent: 0px;
	font-size: .75em;
	position: static;
	background: #9dc2d4 url(../images/subnav_arrow.gif) 10px 7px no-repeat !important;
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
	padding: 5px 5px 5px 22px;
	height: auto;
	width: 138px;
}

#nav li .subnav a:hover {
	text-decoration: underline;
}

#nav li .subnav {
	display: none;
}

#nav li:hover .subnav, #nav li.over .subnav {
	display: block;
}

#nav li#resproducts:hover a, #nav li#resproducts.over a, #nav li#resproducts a:hover, #nav li#resproducts a:hover {
	background:url(../images/nav.gif) no-repeat left bottom;
}

#nav li#services:hover a, #nav li#services.over a, #nav li#services a:hover, #nav li#services a:hover {
	background:url(../images/nav.gif) no-repeat -378px bottom;;
}

/* hover states  */
#nav li .subnav li, #nav li:hover .subnav a, #nav li:hover .subnav li, #nav li.over .subnav a, #nav li a:hover .subnav li a, #nav li a.over .subnav li a {
	background: none;
}

#nav li .subnav a:hover {
	text-decoration: underline;
}


/* footer
-------------------------------------------------------------- */

.footercontainer {
	background:  url(../images/page_divider.gif) left top repeat-x;
	padding: 15px 0;
	font-size: .9em;
	min-width: 1020px;
}

#footer {
	width: 1020px;
	margin: 0 auto;
}

#footer .colcontain {
	background: url(../images/divider.gif) 50% 0 repeat-y;
	overflow: hidden;
	width: 100%;
	margin-bottom: 10px;
}

#footer .column {
	width: 45%;
}

#footer .last {
	margin-left: 80px;
	display: inline;
}

#footer h2 {
	text-transform: uppercase;
	margin-bottom: 0;
	font-size: 1em;
}

#footer p {
	margin-top: 5px;
	margin-bottom: 5px;
}

#footer .more {
	background: url(../images/arrow_link.gif) left .5em no-repeat;
	padding-left: 10px;
	font-weight: bold;
}

.footernav {
	clear: both;
	text-align: center;
	border-top: 1px solid #9c9c9c;
	padding-top: 15px;
	line-height: 2;
}

.footernav a {
	margin: 0 .3em;
	text-decoration: none;
}

.footernav a:hover {
	text-decoration: underline;
}


/* forms
-------------------------------------------------------------- */

form ol {
	list-style: none;
}

form li {
	margin-bottom: 10px;
}

input.text {
	width: 200px;
	color: #666;
}

input.largetext {
	width: 300px;
}

input.mediumtext {
	width: 150px;
}

input.smalltext {
	width: 50px;
}

.textarea {
	width: 200px;
	height: 150px;
	color: #666;
}

.select {
	width: 125px;
	color: #666;
}

.label {
	display: block;
	color: #77787b;
	background: url(../images/arrow.gif) right center no-repeat;
	padding-right: 15px;
	margin-right: 10px;
	float: left;
	width: 65px;
	text-align: right;
	font-weight: bold;
	font-size: .9em;
}

label.checkboxlabel, label.radiolabel {
	display: inline;
}

.leadform {
	background: #f4f4f2;
	margin-right: 13px;
	padding-top: 10px;
	margin-top: 5px;
}

#submitlead {
	margin-left: 90px;
}

/* common elements */
.breadcrumbs {
	background: #f2f2f2;
	color: #878787;
	margin: 0 13px 9px 13px;
	font-weight: bold;
	font-size: .8em;
	padding: 1px 0;
}

.title {
	color: #454545;
}

.sidecontent .title {
	color: #454545;
	margin-top: 10px;
	font-size: 2em;
	line-height: 1.1;
}

.sidecontent h3 {
	clear: both;
}

.phonenumber {
	color: #336699;
	font-size: 3em;
	line-height: 1;
	margin-bottom: 0;
	text-align: center;
}

.or {
	color: #336699;
	font-size: 1.8em;
	text-align: center;
	line-height: normal;
	font-weight: bold;
	margin: 0;
}

.sidebox {
	background: #f2f2f2;
	margin: 10px 26px 5px 13px;
	padding-bottom: 2px;
}

.sidebox h3 {
	color: #def4ff;
	background: #336699;
	margin: 0; 
	padding: 5px 20px;
}

.sidebox ul, .sidebox p {
	margin-left: 20px;
	margin-top: 5px;
	line-height: 1.3;
}

.sidebox li{
	list-style: none;
}

.sectiontitle {
	color: #def4ff;
	background: #336699 url(../images/drop_icon.gif) 10px 7px no-repeat;
	padding: 5px 35px;
	text-transform: uppercase;
	clear: both;
}

.sectiontitlealt {
	background-image: url(../images/water_icon.gif);
}

.sectiontitle a {
	color: #def4ff;
}

/* category page */
.widecol {
	width: 516px;
}

.narrowcol {
	width: 210px;
}

.narrowcol img {
	margin-right: 0;
}

.box {
	background: #ecf9ff;
	margin: 9px 13px;
	padding: 10px  9px;
}

.boxalt {
	background: #fff;
	border: 5px solid #ecf9ff;
}

.box p, .box ul {
	margin-bottom: 15px;
}

.box h3 {color: #646464; font-size: 1.1em;}

h3.subtitle{ color: #336699; font-size: 1.1em;}

h3.subtitle2 {color: #646464; font-size: 1.4em;}

.product {
	clear: both;
	margin-bottom: 10px;
	overflow: auto;
}

.product img {
	margin-bottom: 0;
}

.visual {
	float: left;
	width: 145px;
}

.description {
	margin-left: 145px;
}

.equalcol {
	width: 363px;
	float: left;
}

.column2 .box , .column2 .sectiontitle{
	margin-left: 0;
}

.maincontent .colcontain {
	background: url(../images/equal_column_bg.gif) repeat-y;
	margin-top: 10px;
	overflow: auto;
	margin-left: 13px;
	padding: 10px 0;
}

.maincontent .colcontain .equalcol {
	width: 355px;
}

.maincontent .colcontain .equalcol p, .maincontent .colcontain .equalcol h3, .maincontent .colcontain .equalcol ul {
	margin-right: 20px;
}

.maincontent .colcontain .equalcol p, .maincontent .colcontain .equalcol h3 {
	margin-left: 25px;
}

.maincontent .colcontain .equalcol ul {
	margin-left: 35px;
}

.serviceslist {
	margin-top: 15px;
}

.serviceslist li {
	margin-bottom: 15px;
}

/* lead form */
.offerblock {
	margin-top: -5px;
}