/*  
Theme Name: ReLion Template (Standard - 3 Columns, Fixed Width)
Description: This is the custom Template for the website of www.thewaterpeople.com
Version: 1.0
Author: Xander
Author URI: http://www.reliablyonline.com
*/


/* ---------------------------------------------- The Basics */
* html { position: relative; }
.clearthis { clear: both; }

a img { border: 0px; }

body {
	background: #A4CADB url('../interface/bgd.gif') repeat;
	margin: 0px auto; padding: 0px;
	font-family: 'Lucida Grande', Verdana, Helvetica, Arial, 'Trebuchet MS', sans-serif;
	color: #000; text-align: center;
}

#bgd { width: 100%; height: auto; margin: 0px auto; padding: 0px;
	background: url('../interface/bgd-gradient.gif') repeat-x; }

#container {
	width: 980px; height: auto;
	margin: 0px auto; padding: 0px;
	color: #000; text-align: center;
	background: #4995B8 url('../interface/bgd-container.gif') repeat-x;
}

#whiteness { width: auto; height: auto; margin: 0px 10px; padding: 0px; background-color: #FFF; }

/* ---------------------------------------------- Home page Specific */
#wrapperhome { /* contains MAIN content area */
	width: auto; height: auto; margin: 0px; padding: 0px; }
#wrapperhome p { margin: 0px; padding: 4px 0px; font-size: 11px; line-height: 14px; text-align: left; color: #FFF; }
#wrapperhome h1 { margin: 0px 0px 4px 0px; padding: 4px 0px; font-size: 20px; font-weight: bold; line-height: 20px; text-align: left; color: #FFF; border-bottom: 1px dotted #FFF; }
#wrapperhome h2 { margin: 0px; padding: 4px 0px; font-size: 13px; font-weight: normal; line-height: 13px; text-align: left; color: #000; border: none; }
#wrapperhome a { color: #009; font-weight: normal; text-decoration: none; }
#wrapperhome a:hover { color: #FFF; text-decoration: none; }
#wrapperhome a:active { color: #000; text-decoration: none; }

#homecol1 { /* left column */
	float: left; position: relative;
	height: auto; width: auto; 
	margin: 0px; padding: 0px 0px 0px 30px;
}
#homecol1 img { display: block; border: none; margin: 0px; padding: 0px; }
#homecol1roll { visibility: hidden; z-index: 9; position: absolute; top: 0px; left: 30px; height: 194px; width: 440px; margin: 0px; padding: 40px 20px 10px 20px; background: url('../images/home/design-roll.gif') no-repeat; }

#homecol2 { /* center column */
	float: left; position: relative;
	height: auto; width: auto; 
	margin: 0px; padding: 0px 20px;
}
#homecol2 img { display: block; border: none; margin: 0px auto; padding: 0px; }
#homecol2toproll { visibility: hidden; z-index: 9; position: absolute; top: 0px; left: 20px; height: 84px; width: 190px; margin: 0px; padding: 20px 20px 20px 20px; background: url('../images/home/service-roll.gif') no-repeat; }
#homecol2bottroll { visibility: hidden; z-index: 9; position: absolute; top: 124px; left: 20px; height: 90px; width: 190px; margin: 0px; padding: 20px 20px 10px 20px; background: url('../images/home/sales-roll.gif') no-repeat; }

#homecol3 { /* right column */
	float: right; position: relative;
	height: auto; width: auto; 
	margin: 0px; padding: 0px 30px 0px 0px;
}
#homecol3 img { display: block; border: none; margin: 0px; padding: 0px; }
#homecol3toproll { visibility: hidden; z-index: 9; position: absolute; top: 0px; left: 0px; height: 58px; width: 110px; margin: 0px; padding: 5px 20px 15px 20px; background: url('../images/home/certified-roll.gif') no-repeat; }
#homecol3midroll { visibility: hidden; z-index: 9; position: absolute; top: 78px; left: 0px; height: 58px; width: 110px; margin: 0px; padding: 15px 20px; background: url('../images/home/eco-roll.gif') no-repeat; }
#homecol3bottroll { visibility: hidden; z-index: 9; position: absolute; top: 166px; left: 0px; height: 58px; width: 110px; margin: 0px; padding: 15px 20px 5px 20px; background: url('../images/home/eco-roll.gif') no-repeat; }

/* ---------------------------------------------- Other pages than home */
#wrapper { /* contains MAIN content area */
	width: auto; height: auto; margin: 0px 30px; padding: 0px; }

#content { /* center column */
	float: left; position: relative;
	height: auto; width: 645px; 
	margin: 0px; padding: 0px 0px 10px 30px;
}

#leftcol { /* left column */
	float: left; position: relative;
	height: auto; width: 225px; 
	margin: 0px; padding: 18px 0px 50px 0px;
}

#rightcol { /* right column */
	float: right; position: relative;
	height: auto; width: 0px; 
	margin: 0px; padding: 0px;
}

/* ---------------------------------------------- Header */
#headertop { width: 900px; height: 30px; margin: 0px 40px; padding: 0px; }
#headertop img { float: left; border: none; margin: 0px; padding: 0px; }
#headertop p { font-size: 10px; margin: 0px; padding: 7px 2px; color: #009; text-align: left; }
#headertop a { color: #009; text-decoration: none; font-weight: normal; }
#headertop a:hover { color: #4995B8; text-decoration: underline; }
#headertop a:active { color: #000; text-decoration: none; }

#header { width: 980px; height: 115px; margin: 0px; padding: 0px; }
#header img { display: block; border: none; margin: 0px; padding: 0px; }

/* ---------------------------------------------- Navbar */
#navwrap { width: 960px; height: auto; margin: 0px; padding: 0px; background: #FFF url('../interface/nav-area-top-left.jpg') no-repeat top left; }
#navwrap img { float: right; border: none; margin: 0px 0px 0px 0px; padding: 1px 30px 0px 0px; }

#slogan1 { width: 900px; height: auto; margin: 0px 30px; padding: 0px 0px 5px 0px; }
#slogan1 h1 { margin: 0px; padding: 0px; font-size: 13px; font-weight: bold; line-height: 15px; text-align: right; color: #009; background: none; border: none; }
#slogan2 { width: auto; height: auto; margin: 0px 30px; padding: 5px 0px 10px 0px; }
#slogan2 h1 { margin: 0px; padding: 0px; font-size: 13px; font-weight: bold; line-height: 15px; text-align: left; color: #009; background: none; border: none; }

#navbar { width: auto; height: auto; margin: 0px 30px; padding: 0px; border-top: 1px solid #009; border-bottom: 1px solid #009; }
#navbar p { font-size: 11px; line-height: 23px; margin: 0px; padding: 0px; color: #009; text-align: left; }
#navbar a { color: #009; font-weight: normal; text-decoration: none; padding: 5px 5px; }
#navbar a:hover { color: #FFF; text-decoration: none; background-color: #009; }
#navbar a:active { color: #FFF; text-decoration: none; background-color: #4995B8; }

/* ---------------------------------------------- Bread Crumbs */
#breadcrumbs {
	width: auto; height: auto;
	margin: 0px; padding: 0px 0px 2px 0px;
	border-bottom: 1px dotted #000;
}
#breadcrumbs p { font-size: 10px; line-height: 16px; margin: 0px; padding: 0px; color: #000; text-align: right; }
#breadcrumbs a { color: #009; font-weight: normal; text-decoration: none; }
#breadcrumbs a:hover { color: #4995B8; text-decoration: underline; }
#breadcrumbs a:active { color: #000; text-decoration: none; }

#bottomcrumbs {
	width: auto; height: auto;
	margin: 15px 0px 0px 0px; padding: 5px 0px;
	border-top: 1px dotted #000;
}
#bottomcrumbs p { font-size: 10px; line-height: 16px; margin: 0px; padding: 0px; color: #000; text-align: left; }
#bottomcrumbs a { color: #009; font-weight: normal; text-decoration: none; }
#bottomcrumbs a:hover { color: #4995B8; text-decoration: underline; }
#bottomcrumbs a:active { color: #000; text-decoration: none; }

/* ---------------------------------------------- Left Column */
#leftcol ul { list-style-type: none; margin: 0px 10px; padding: 5px 0px; }
#leftcol li { font-size: 11px; text-align: left; }

#sidenav { margin: 0px; padding: 0px; }
#sidenav img { display: block; margin: 0px; padding: 0px; border: none; }

#sidenav a { color: #009; font-weight: bold; text-decoration: none; width: auto; height: 15px; display: block; margin: 0px; padding: 0px 0px 0px 2px; border-left: 1px solid #FFF; }
#sidenav a:hover { color: #000; text-decoration: none; border-left: 1px solid #000; background: url('../interface/sidenav-bgd.jpg') repeat-y; }
#sidenav a:active { color: #4995B8; text-decoration: none; border-left: 1px solid #4995B8; background: none; }

#icons { position: relative; margin: 5px auto 0px auto; padding: 5px 0px; text-align: center; border-top: 1px solid #000; }
#icons img { display: inline; margin: 0px; padding: 3px; border: 0px; }
#icons img:hover { border: 0px; background: none; }

#iconwrap { position: relative; margin: 0px; padding: 0px; width: auto; height: auto; text-align: left; }
#icon1roll { visibility: hidden; z-index: 9; position: absolute; top: 0px; left: 0px; height: auto; width: 225px; margin: 0px; padding: 3px 0px; border-top: 1px dotted #000; }
#icon2roll { visibility: hidden; z-index: 9; position: absolute; top: 0px; left: 0px; height: auto; width: 225px; margin: 0px; padding: 3px 0px; border-top: 1px dotted #000; }
#icon3roll { visibility: hidden; z-index: 9; position: absolute; top: 0px; left: 0px; height: auto; width: 225px; margin: 0px; padding: 3px 0px; border-top: 1px dotted #000; }
.iconrolltext p { font-size: 11px; margin: 0px; padding: 3px 0px; color: #000; line-height: 16px; }

/* ---------------------------------------------- Home page text */
#hometextwrapper { width: auto; height: auto; margin: 20px 50px; padding: 0px; }
#hometextleft { float: left; width: 440px; height: auto; margin: 0px 30px 0px 0px; padding: 0px; }
#hometextright { float: right; width: 360px; height: auto; margin: 0px 0px 0px 30px; padding: 0px; }

/* ---------------------------------------------- Footer */
#footer { width: auto; height: auto; margin: 0px; padding: 0px; }

#footer p { font-size: 10px; margin: 0px auto; padding: 5px 0px 0px 0px; color: #000; line-height: 16px; text-align: center;}
#footer a { color: #009; font-weight: normal; text-decoration: none; }
#footer a:hover { color: #4995B8; text-decoration: underline; }
#footer a:active { color: #000; text-decoration: none; }
#footer hr { border: 0px; color: #009; background-color: #009; height: 1px; text-align: left; margin: 5px 60px 0px 60px; padding: 0px; }

#footertop { width: 900px; height: 40px; margin: 5px 30px; padding: 0px;
	background: url('../interface/grass.gif') repeat-x; border-bottom: 2px solid #009;
	 }
#footerbottom { width: 960px; height: 30px; margin: 0px; padding: 0px;
	background: url('../interface/footer-bottom.gif') no-repeat;
	 }

/* ---------------------------------------------- Text Styles */
h1 {
	color: #000; font-size: 21px; font-weight: normal; line-height: 27px; text-align: left;
	margin: 0px 0px 10px 0px; padding: 5px 0px;
	border-bottom: 1px solid #000; background: none;
}

h2 {
	color: #000; font-size: 16px; line-height: 22px; text-align: left;
	margin: 0px 0px 5px 0px; padding: 10px 0px 2px 0px;
	border-bottom: 1px dotted #000; background: none;
}

h3 {
	color: #009; font-size: 16px; line-height: 22px; text-align: left;
	margin: 0px; padding: 5px 0px 5px 0px; background: none;
}

h4 {
	color: #4995B8; font-size: 14px; line-height: 20px; text-align: left;
	margin: 0px; padding: 5px 0px 5px 0px; background: none;
}

h5 {
	color: #000; font-size: 14px; line-height: 20px; text-align: left;
	margin: 0px; padding: 5px 0px 5px 0px; background: none;
}

h6 {
	color: #009; font-size: 14px; line-height: 20px; text-align: left;
	margin: 0px; padding: 5px 0px 5px 0px; background: none;
}


p { margin: 0px; padding: 5px 0px; font-size: 12px; line-height: 18px; text-align: left; }

a { color: #009; font-weight: bold; text-decoration: underline; }
a:hover { color: #4995B8; text-decoration: none; }
a:active { color: #000; text-decoration: underline; }

blockquote { margin: 0px 25px; }

code {
	display: inline; padding: 2px;
	color: #333; background: #EFEFEF;
	font-family: Courier New, Courier, mono;
}

#content ol { list-style-type: decimal; margin: 0px 20px 0px 30px; padding: 5px 0px; }
#content ol li { font-size: 12px; line-height: 18px; }
#content ul { list-style-type: square; margin: 0px 20px 0px 30px; padding: 5px 0px; }
#content ul ul { margin: 0px 30px; padding: 5px 0px; }
#content li { font-size: 12px; line-height: 18px; text-align: left; }
#content li li { list-style-type: circle; font-size: 11px; line-height: 16px; padding: 0px; }
#content li li li { list-style-type: disc; font-size: 11px; line-height: 16px; padding: 0px; }

.greenbold { font-weight: bold; color: #4CA53B; }
.green { color: #4CA53B; }
.bluebold { font-weight: bold; color: #009; }
.blue { color: #009; }
.lightbluebold { font-weight: bold; color: #4995B8; }
.lightblue { color: #4995B8; }
.grey { color: #666; }
.red { color: #C00; }
.underline { border-bottom: 1px dotted #000; margin-bottom: 10px; }
.rightalign { text-align: right; }
.leftalign { text-align: left; }
.centrealign { text-align: center; }

small { font-size: 10px; }

hr { border: 0px; color: #000; background-color: #000; height: 1px; text-align: left; margin: 10px 0px; padding: 0px; }

img { border: none 0px; display: block; }

#content img { float: right; margin: 0px 0px 10px 10px; padding: 5px; border: 1px solid #009; background-color: #FFF; }
#content img:hover { border: 1px solid #4995B8; background-color: #FFF; }

#captionedimg337 { float: right; margin: 5px 0px 5px 10px; padding: 0px; width: 337px; height: auto; text-align: center; }
#captionedimg337 img { display: block; margin: 0px 0px 2px 0px; padding: 5px; border: 1px solid #FFF; background-color: #FFF; }
#captionedimg337 img:hover { border: 1px solid #009; background-color: #FFF; }
#captionedimg337 p { margin: 0px; padding: 5px 10px; font-size: 10px; line-height: 14px; text-align: center; color: #666; font-style: italic; }

#captionedimg141 { float: right; margin: 5px 0px 5px 10px; padding: 0px; width: 141px; height: auto; text-align: center; }
#captionedimg141 img { display: block; margin: 0px 0px 2px 0px; padding: 5px; border: 1px solid #FFF; background-color: #FFF; }
#captionedimg141 img:hover { border: 1px solid #009; background-color: #FFF; }
#captionedimg141 p { margin: 0px; padding: 5px 10px; font-size: 10px; line-height: 14px; text-align: center; color: #666; font-style: italic; }

/* ---------------------------------------------- Special Styles */
#colwrap { margin:0px 10px; padding: 0px; }
#colleft { width: 48%; float: left; } 
#colright { width: 48%; float: right;}

#xmasdraw { margin: 20px; padding: 0px; }
#xmasdraw img { margin: 0px auto; padding: 0px; }
#xmasdraw p { text-align: center; color: #C00; }

/* ---------------------------------------------- Other stuff */
#nodetailfull { margin: 0px auto; padding: 5px 0px 0px 0px; }
#nodetailfull img { float: none; margin: 0px auto; padding: 9px; border: 1px solid #FFF; background-color: #FFF; }
#nodetailfull img:hover { border: 1px solid #FFF; background-color: #FFF; }

#nodetailleft { margin: 0px; padding: 0px; }
#nodetailleft img { float: left; margin: 10px; padding: 0px; border: 1px solid #FFF; background-color: #FFF; }
#nodetailleft img:hover { border: 1px solid #FFF; background-color: #FFF; }

#nodetailright { margin: 0px; padding: 0px; }
#nodetailright img { float: right; margin: 10px; padding: 0px; border: 1px solid #FFF; background-color: #FFF; }
#nodetailright img:hover { border: 1px solid #FFF; background-color: #FFF; }

#catalog { margin: 10px auto; padding: 0px; }
#catalog img { float: none; display: block; margin: 0px; padding: 0px; border: none 0px; }
#catalog img:hover { border: none 0px; background-color: #FFF; }
.catalogitems { float: left; width: 129px; height: auto; margin: 5px; padding: 9px; border: 1px dotted #CCC; }
.catalogitems img { float: none; display: block; padding: 0px; margin: 0px auto; border: none 0px; }
.catalogitems p { font-size: 12px; font-weight: bold; line-height: 16px; text-align: left; margin: 0px; padding: 5px 0px 0px 0px; }
.catalogitems a { color: #009; font-size: 10px; font-weight: normal; text-decoration: underline; }
.catalogitems a:hover { color: #4995B8; text-decoration: none; }
.catalogitems a:active { color: #000; text-decoration: underline; }

/* ---------------------------------------------- Not Used */
.announce { 
	float: right; background: url('../interface/transparency-light.png') repeat; border: 1px dotted #060;
	width: 250px; margin: 5px 0px 10px 10px; padding: 2px 15px 7px 15px;
	text-align: left;
}

#map { 
	float: right; background: url('../interface/transparency-light.png') repeat; border: 1px dotted #060;
	width: 204px; margin: 5px 0px 10px 20px; padding: 5px 15px;
	text-align: right;
}
#map img { float: right; margin: 0px 0px 5px 0px; padding: 5px; border: 1px solid #369; background-color: #FFF; }
#map img:hover { border: 1px solid #000; background-color: #369; }

#gallery { margin: 0px; padding: 0px; }
#gallery img { float: left; margin: 5px 10px 5px 0px; padding: 5px; border: 1px solid #369; background-color: #FFF; }
#gallery img:hover { border: 1px solid #000; background-color: #369; }

#nodetail { margin: 0px; padding: 10px 0px; }
#nodetail img { float: none; margin: 0px; padding: 0px; border: 1px solid #FFF; background-color: #FFF; }
#nodetail img:hover { border: 1px solid #FFF; background-color: #FFF; }

.nolineheight { padding: 0px; line-height: 14px; }
.smalllineheight { padding: 5px; line-height: 14px; }

.listfloat { float: left; width: auto; height: 100%; margin: 0px; padding: 0px 40px 20px 0px; }
.listfloatspecific { float: left; width: 198px; height: 100%; margin: 0px; padding: 0px 0px 20px 0px; }

#tabledividers hr { border: 0px; color: #99B2CC; background-color: #99B2CC; height: 1px; text-align: left; margin: 1px 0px; padding: 0px; }


/* --------------------------------------------------- Form styles */
label { font: 12px; line-height: 16px; color: #000; padding: 0px 5px; }
.labelalign { text-align: left; }
#itsaform { margin: 10px 0px 0px 0px; padding: 0px; }
#itsaform p { text-align: left; }
.subdivider { margin-top: 20px; }


textarea {
	border: 1px solid #009;
	color: #000;
	padding: 5px;
	margin: 2px 0px;
	width: 90%;
	background: #FFF;
	}

textarea:hover {
	background: #EFEFEF;
	border: 1px solid #000;
	color: #000;
	}

select { font: 12px; line-height: 16px; }

.commentfield {
	padding: 2px;
	margin: 0px;
	background: #FFF;
	border: 1px solid #009;
	color: #000;
	width: 220px;
	font-size: 10px;
	height: auto;
}

.commentfield:hover {
	background: #EFEFEF;
	border: 1px solid #000;
	color: #000;
	}
	
.commentfieldmid {
	padding: 2px;
	margin: 0px;
	background: #FFF;
	border: 1px solid #009;
	color: #000;
	width: 150px;
	font-size: 10px;
	height: auto;
}

.commentfieldmid:hover {
	background: #EFEFEF;
	border: 1px solid #000;
	color: #000;
	}

.commentfieldsmall {
	padding: 2px;
	margin: 0px;
	background: #FFF;
	border: 1px solid #009;
	color: #000;
	width: 50px;
	font-size: 10px;
	height: auto;
}

.commentfieldsmall:hover {
	background: #EFEFEF;
	border: 1px solid #000;
	color: #000;
	}