/* CSS Document for pages on waterprotection.ca */

/*sets zero margin for page*/
html, body {
	margin: 0px;
	padding: 0px;
}

/*sets base font and white page background*/
body {
	font-family: Arial, Helvetica, Sans-serif;
	font-size: 62.5%;
	color: #000000;
	background: none #FFFFFF;
}

/*sets page area*/  
#page-container {
	width: 760px;
	margin: auto;
	padding: 0px;
	background: #ffffff;
}

/*sets header area and puts picture behind menu bar*/  
#header {
	width: 760px;
	margin: auto;
	padding: 0px;
	background: white url(../images/topright.jpg) no-repeat right top;
}

/*makes thin blue dividing line in menu*/
.bar {
	clear: both;
	background: #003366;
	width: 760px;
	height: 3px;
}

/*creates placeholder and places logos at top of page and formats alt text*/
#splogo {
	float: left;
	width: 535px;
	min-height:90px;
	height:90px;
	font-family: Arial, Helvetica, Sans-serif;
	font-size: 1.6em;
	color:#333399;
}

/*creates placeholder for partner links and sets base font*/
#spr {
	float: left;
	width: 200px;
	position:relative;
	padding: 5px;
	background: none;
	text-align: center;
	vertical-align:bottom;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.4em;
	font-weight: bold;
	line-height: 1.1em;	
	color:#333399;
}

#spr p {
	bottom:0px;
	position:relative;
}

/*creates placeholder for primary menu bar*/
#primarymenu {
	clear: both;
	width: 760px;
	padding: 8px 0px 8px 0px;
	background: none;
}

/*formats primary menu items*/
#primarymenu a {
	font-weight: bold;
	font-size: 1.2em;
	line-height: 1.2em;
	color: #008000;
	text-decoration: none;
	background: none;
}

/*sets small spacing betweeen menu items*/
a.sp10 {
	padding-left: 10px;
}

/*sets large spacing betweeen menu items*/
a.sp20 {
	padding-left: 20px;
}

/*creates placeholder for secondary menu bar*/
#secondarymenu {
	clear: both;
	float:left;
	width: 405px;
	padding: 0px 0px 8px 0px;
	background: none;
}

/*formats link to home, tools, sitemap*/
#secondarymenu a {
	font-size:1.1em;
	line-height: 1.4em;
	color: #006600;
	text-decoration: none;
	background:none;
}

/*sets placeholder for path menu and formats unlinked current page item*/
#pathmenu {
	float: left;
	width:760px;
	font-size:1.1em;
	line-height: 1.2em;
	font-style:italic;
	text-align:right;
	color: #000000;
	background:#ffffff;
	padding: 0px;
}

/*formats links on small path*/
#pathmenu a {
	font-size:1.0em;
	color: #ff0000;
	text-decoration: none;
	font-style:italic;
	background:none;
	padding:0px 5px 2px 2px;
}

/*creates placeholder for search box*/
#searchbox {
	clear: none;
	float:left;
	width: 170px;
	padding: 0px 0px 8px 0px;
	background: none;
	font-size:1.0em;
	color: #FF0000;
	text-align:left;
}

/*creates placeholder for Quick Links box*/
#quicklinks {
	float:left;
	width: 180px;
	padding: 0px 0px 8px 0px;
	background: none;
	font-size:1.0em;
	color: #FF0000;
	text-align:right;
	position:relative;
}


/*formats link to partners*/
#partnerslinks {
	font-size:1.1em;
	line-height: 1.4em;
	color: #000000;
	text-decoration: none;
	text-align:center;
	background:none;
}

/*formats link to partners*/
#partnerslinks a {
	line-height: 1.4em;
	color: #3333CC;
	text-decoration: none;
	background:none;
}

/*empty column in content area*/
#empty {
	width:2%;
	float:left;
	clear:none;
	background:none;
	}

/*container for notices box on home page*/
#notices {
	float:left;
	clear: none;
	float:left;
	width:28%;
	background: none;
	font-size:1.0em;
	text-align:left;
}

/*formats linkbox to related pages*/
#relatedpages {
	font-size:0.9em;
	line-height: 1.1em;
	font-style:normal;
	clear:right;
	float:right;
	border: solid 3px #D7E1FF;
	background: #F9FBFF;
	padding:4px 4px 1px 4px;
	text-align:center;	
}

/*formats caption for related pages box*/
#otherpage {
	font-size:1.0em;
	line-height: 1.2;
	font-weight:bold;
	font-style:normal;
	color:#003366;	
}

a.otherpage {
	font-family: Arial, Helvetica, sans-serif;
	color: #0080FF;
	text-decoration: none;
	font-size: 1.1em;
	line-height: 1.5em;
}

a.path {
	color: #0000cc;
	text-decoration: none;
	font-style:italic;
	font-size: 1.1em;
	line-height: 1.5em;
}



/*common box classes*/
.hidden {display: none;}

.leftfloat {float:left;}

.rightfloat {float:right;}

.clearboth {clear:both;}

.clearnone {clear:none;}

.clearright {clear:right;}

.w5per {width:5%;}

.w10per {width:10%;}

.w15per {width:15%;}

.w20per {width:20%;}

.w25per {width:25%;}

.w30per {width:30%;}

.w35per {width:35%;}

.w40per {width:40%;}

.w45per {width:45%;}

.w50per {width:50%;}

.w55per {width:55%;}

.w60per {width:60%;}

.w65per {width:65%;}

.w70per {width:70%;}

.w75per {width:75%;}

.w80per {width:80%;}

.w85per {width:85%;}

.w90per {width:90%;}

.w95per {width:95%;}

.w100per {width:100%;}

.lineborder {border: #CCCCF7 solid thin;}

.def1 {}

h1 {
	margin: 0;
	padding: 0;
}


/*formatting for table-style lists*/
div.rowa {clear:both; float:left; width:80%; font-size:1.2em; background: #ffffcc; padding:4px 6px 8px 8px;}

div.rowb {clear:both; float:left; width:80%; font-size:1.2em; background: #ffcc99; padding:4px 6px 8px 8px;}

div.rowspace {clear:both; float:left; width:80%; background: #ffffff; height:1.1em;}

div.cola1 {float:left; width:35%;}

div.cola2 {float:left; width:60%;}

div.colb1 {float:left; width:35%;}

div.colb2 {float:left; width:60%;}


/*formats e-mail link in footer*/
a.mail {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #0000cc;
	text-decoration: none;
	font-weight: bold;
	font-size: 1.1em;
	line-height: 1.5em;
}



/*sets placeholder for main content block*/
#content {
	clear:both;
	background: #ffffff;
	background-image:none;
	color:#000000;
	line-height: 1.8em;
	padding: 8px 0px 0px 0px;
}

/*use in content block for any element needing no padding*/
#content .padding {
	padding: 0px;
}

/*format links in content block*/
#content a:link {
	color: #FF0000;
	text-decoration: none;
}

/*format visited links in content block*/
#content a:visited {
	color: #0033FF;
	text-decoration: none;
}

/*format regular paragraphs in content block*/
#content p {
	margin: 0px;
	padding: 0em 0em 1.2em;
	font-size:1.2em;
	line-height:1.5em;
}


	

/*format title in content block*/
#content h1 {
	color: #FF3333;
	font-size: 1.6em;
	font-weight:bold;
	padding-bottom: 4px;
}

.h1red {
	color: #FF3333;
	font-weight:bold;
	padding-bottom: 4px;
}


.h2blue {
	color:#0033FF;
	font-size: 1.3em;
	font-weight: bold;
	padding-bottom: 4px;
}

.h3blue {
	color:#336699;
	font-size: 1.1em;
	font-weight: bold;
}

.s8 {font-size:0.8em;}

.s10 {font-size:1.0em;}

.s12 {font-size: 1.2em;}
	
.s14 {font-size: 1.4em;}

.s16 {font-size: 1.6em;}

.s18 {font-size: 1.8em;}

.s20 {font-size: 2.0em;}

.s24 {font-size: 2.4em;}

.sbold {font-weight:bold;}

.sital {font-style: italic;}

.sline {text-decoration:underline;}

.sleft {text-align:left;}

.sright {text-align:right;}

.scenter {text-align:center;}

.eright {right:auto;}

.bgyellow {background:#ffffcc;}

.bggreenl {background: #99ffcc;}

.bdgreenm {background: #99cccc;}

.bdgreenp {background: #ccffcc;}

.bdpurple {background: #9999ff;}

.lmargin5 {margin-left:0.5em;}

.lmargin15 {margin-left:1.5em;}

/*extra space between lines*/
.morespace {line-height:1.9em;}	


/*right column with gutter between left and right page column*/
#rcolumn {margin-left:0.5em;}



/*FOOTER -- The following items relate to the footer on the Home Page*/

/*format bar that starts footer*/
#contactbar {
	background: #003366;
	width: 760px;
	height: 1.6em;
	clear:both;
	text-align:center;
	color: #efe2c4;
	font-style:italic;
	font-size:1.2em;
}

/*placeholder for footer*/
#footer {
	clear: both;
	width: 760px;
	background: #ffffff;
	padding: 6px 0px 0px 0px;
}

/*placeholder for email phone and fax in footer*/
#fmail {
	float: left;
	text-align: left;
	width: 260px;
	padding: 5px;
	background:#ffffff;
	color: green;
	font-size:1.2em;
	line-height:1.3em;
}

/*placeholder and image for swirl in footer*/
#fswirl {
	float: left;
	width: 120px;
	height:45px;
	margin: 0px 5px 0px 5px;
	background: url(../images/swp-wave.gif) no-repeat center top #ffffff;
}

/*placeholder for office in footer*/
#foffice {
	float: left;
	text-align: right;
	width: 60px;
	padding: 5px;
	background: #ffffff;
	color: #006600;
	font-size:1.2em;
	line-height:1.3em;
}

/*placeholder for address in footer*/
#faddress {
	float: left;
	text-align: left;
	width: 270px;
	padding: 5px;
	background:#ffffff;
	color:#0066cc;
	font-size:1.2em;
	line-height:1.3em;
}

/*new section that makes curved background for Notices*/
.bl {background: url(noticebl.gif) 0 0 no-repeat; height:17px}
.br {background: url(noticebr.gif) 100% 0 no-repeat; height:17px}
.tl {background: url(noticetl.gif) 0 0 no-repeat;}
.tr {background: url(noticetr.gif) 100% 0 no-repeat;}
.clear {background: url(../images/spacer.gif) #FFFFFF ; height: 1px}