
/**********************************/
/* Superior Water                 */
/* Created: April 22nd            */
/* Author: Oozle Media            */
/* Copyright: Superior Water 2010 */
/**********************************/

/* Import other Styles */
@import url('reset.css');
@import url('SprySlidingPanels.css');

@font-face {
    font-family: 'HelveticaCompressed';
    src: url('../fonts/helveticacomp-webfont.eot#') format('embedded-opentype'),
         url('../fonts/helveticacomp-webfont.woff') format('woff'),
         url('../fonts/helveticacomp-webfont.ttf') format('truetype'),
         url('../fonts/helveticacomp-webfont.svg#webfonteoPlD8SE') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* HTML5 compatability fix */
section, nav, header, footer, article, aside, figure { display: block; }

/* Default Styles */
body { background: url(../images/home-bg-tile.gif) top center repeat-y !important; font-family: Arial, Helvetica, sans-serif; font-size: 11px; }
	.bg-image-wrap { width: 100%; margin: 0 auto; }

	.bg-image-wrap {
		background: url(../images/home-body-bg.jpg) top center no-repeat;
	}
	
a { text-decoration: none; color: #013b76; }
p { color: #5e5e5e; line-height: 20px; margin-bottom: 20px; font-size:12px; }
	p	span { font-size: 13px; font-weight: bold; }
form p { margin-bottom: 0px; }

input, textarea, select { color: #000000; margin-bottom: 10px; }
li { color: #5e5e5e; }
h1 { font-size: 22px; color: #035fb3; font-weight: normal; line-height: 28px; margin-bottom: .5em; }
h2 { color: #035fb3; font-size: 18px; font-weight: lighter; margin-bottom: 8px; line-height: 24px; }
h3 { }
h4 { font-size: 17px; color: #004a8f; line-height: 32px; }

.clear { clear: both; }

.button {
	border-style:none;
	float:right;
	padding:8px;
}

.right .sideimage {
	float:right;
	padding:8px;
}

.post h3 { margin-bottom: 3px;  float: left; font-size: 16px; }
.post .date { float: right; font-size: 10px; }
.post {}
.post .entry {  border-top: 1px dashed #E4E4E4; clear: both; }

/* Header Styles */
	#top-nav { margin-top: 0px; float: right; height: 65px; text-align: right; color: #8098bc; }
		#top-nav li { float: right; padding: 0px 3px; border-right: 1px solid #8098bc; height: 11px; }
			#top-nav li.last { border: none; }
		#top-nav a { color: #8098bc; font-size: 11px; position: relative; top: -1px; } 
			.dynamic-phone-number { margin-top: 8px; font-size: 26px; color: #dc1313; }
			.rest-phone { margin-top: 8px; font-size: 26px; color: #dc1313; }
	.main .logo { clear: right; float: left; }
	.main #main-nav {  }
		.main #main-nav ul { margin-top: 15px; margin-left: 65px; }
		.main #main-nav ul li { position: relative; z-index: 900;  margin-right: 22px; height: 20px; font-size: 14px; color: #004a8f; display: inline; padding: 4px 30px 3px 5px; background: url("../images/nav-bullet.png") right top no-repeat; }
		.main #main-nav ul li.nochild { background: none; padding-right: 8px; }										
			.main #main-nav ul li.last {  margin-right: 0px; }
		.main #main-nav ul li.shover,
		.main #main-nav ul li:hover { -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; background: #e3eef3 url(../images/nav-bullet.png) top right no-repeat; } 
		.main #main-nav ul li.nochild:hover { background-image: none; }
		.main #main-nav ul li ul { width: 200px; display: none; position: absolute; z-index: 900; top: 22px; left: 0; margin: 0 0 0 0; padding: 5px 10px 10px 10px; background: #e3eef3; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }
		.main #main-nav ul ul ul { display: none; position: absolute; top: 0px; left: 190px; }
		.main #main-nav ul li ul li { font-size: 12px; display: block; margin: 0; padding: 6px 5px 1px 5px; background: url(../images/nav-dropdown.png) bottom left; background-repeat: no-repeat; background-repeat: repeat-x; }
		.main #main-nav ul li ul li a { display: block; height: 20px; }
		.main #main-nav ul li ul li.shover,
		.main #main-nav ul li ul li:hover { background-color: #82bae5; background: url(../images/nav-dropdown.png) bottom left repeat-x; }

.main {
	background: #fff;
	position: relative;
	padding-top: 36px;
	width: 895px;
	height: 110px;
	padding: 36px 20px 0px 35px;
	margin: 0px auto 0px auto;
	-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
	z-index: 99999;
}
	.main #top-nav {
		position: absolute;
		top: 32px;
		right: 20px;
		margin-top: 0;
	}
	.main #main-nav {
		position:absolute;
		right:20px;
		top: 100px;
	}
	.main #main-nav ul {
		
	}
	.main #main-nav > ul li a {
		font-weight: bold;
		color: #004a8f;
	}
	.main #main-nav li ul.link-areas { width:400px; left:-300px; }
	.main #main-nav li ul.link-areas li.full-width { width:400px; height:30px; background:none; }
	.main #main-nav li ul.link-areas li { float:left; width:180px; margin-right:10px; }
	
	
	.overlay {
		width: 50%;
		position: absolute;
		top: 0px;
		height: 630px;
		z-index: 99;
		line-height: 20px;
	}
		.overlay .inside .title {
			font-size: 29px;
			font-weight: normal;
			color: #fff;
			line-height: 34px;
			margin-bottom: 8px;
			font-family: "HelveticaCompressed";
			letter-spacing: 1px;
		}
		.overlay .inside {
			padding: 100px 60px 0;
			overflow: auto;
		}
			.overlay .inside p {
				color: #e1e1e1;
				font-size: 12px;
			}
		.overlay.left {
			background: url(../images/left-overlay.png) top right repeat-y;
			left: 1px;
		}
			.overlay.left .inside {
				float: right;
			}
		.overlay.right {
			background: url(../images/right-overlay.png) top left repeat-y;
			right: 1px;
		}
		
	.left-overlay {
		width: 50%;
		position: absolute;
		left: 0;
		top: 148px;
		background: url(../images/left-overlay.png) top right repeat-y;
		height: 630px;
		z-index: 99;
	}
	.features {
		width: 950px;
		height: 630px;
		margin: 0 auto;
		position: relative;
		z-index: 8;
	}
		.features .feature .text {
		}
		.features .left-overlay {
			
		}
		.features .right-overlay {
			
		}
		.features .feature {
			position: absolute;
			cursor: pointer;
			z-index: 99;
		}
			.features #feature-1 {
				top: 28px;
				left: 562px;
			}
			.features #feature-2 {
				top: 151px;
				left: 682px;
			}
			.features #feature-3 {
				top: 324px;
				left: 682px;
			}
			.features #feature-4 {
				top: 439px;
				left: 561px;
			}
			.features #feature-5 {
				top: 431px;
				left: 287px;
			}
			.features #feature-6 {
				top: 308px;
				left: 172px;
			}
			.features #feature-7 {
				top: 156px;
				left: 172px;
			}
			.features #feature-8 {
				top: 43px;
				left: 288px;
			}
/* Main Body Styles */
.main-content { width: 810px; margin: 0 auto 25px auto; position: relative; z-index: 99; }
.main-content {
	width: 950px;
}
.rounded { border: 5px solid #d5e8f7; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; background: #ffffff; }

.rounded { border: none; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; background: #ffffff; }
			
.main-col { position: relative;margin-top: 30px;position: relative; width: 950px; margin-bottom : 22px; }
	.main-col .left { float: left; width: 250px; padding: 35px 10px 0 20px; background: #F9F9F9; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;}
		.main-col .left hr { border: none; clear: both; border: none; width: 250px; height: 15px;  }
		.main-col .left .block { clear: both; margin-left: 12px; padding-right: 15px;}
		.main-col .left .submenu { font-size: 10px; text-align: left; }
		.main-col .left .submenu a:hover { border-bottom: 1px dashed #AC1F2F; }
		.main-col .left .submenu .current { font-weight: bold; }
		.main-col .left .submenu .current a { color: #AC1F2F; }
	.main-col .right { float: left; padding: 35px 20px 30px 40px; width: 605px; margin-bottom: 5px; }
		.main-col .left h4 { margin-bottom: 5px;  }
		.main-col .left input, .main-col .left textarea { width: 210px; } 
		.main-col .left textarea { height: 110px; }
		.main-col .left input.sub { float: right; width: auto !important; } 
	.main-col p span { color: #AC1F2F; }
	.main-col .right figure img { border: 3px solid #eceaeb; -moz-border-radius: 3px; 
													-webkit-border-radius: 3px; border-radius: 3px; margin-bottom: 10px; }
.content ul, .main-col ul { list-style-type: disc; margin-left: 20px; margin-bottom: 20px; }
	.content li, .main-col li { margin: 3px; line-height: 20px; font-size:13px; }
	.content ol, .main-col ol { list-style-type:decimal; margin-left: 20px; margin-bottom: 20px; }

			
.one-col { position: relative; width: 800px; margin-bottom : 22px; height: 371px; background: #ffffff; }
	.one-col .border { position: absolute; top: -5px; left: -5px; background: transparent;  width: 800px; height: 371px; z-index: 100; }
	.one-col .left { position: relative; float: left; height: 351px; margin-top: 10px; width: 165px; background: #ffffff;  z-index: 150; }
		* html .one-col .left  { overflow: hidden; }
		.one-col .left ul { margin-top: 24px; }
		.one-col .left ul li { position: relative; color: #013b76; height: 38px; width: 165px; font-size: 12px; overflow: visible; }
		.one-col .left ul li a { display: block; height: 25px; width: 165px; text-indent: 27px; 
															padding-top: 13px; background: url(../images/home-list-bg.png) 0 0;  }
		.one-col .left ul li.first a { background: url(../images/home-list-bg.png) 0px -80px; }
		
		.one-col .left ul li a:hover  { position: absolute; z-index: 201; height: 27px; width: 200px; background: url(../images/home-list-bg.png) 0px -40px; }
		.one-col .right a { position: relative; z-index: 110; text-decoration: underline; }
			
		.one-col .left ul .last { height: 24px; }

	.one-col .right { float: left; width: 635px; }
		.one-col .right div {  }
		
		.one-col .right .content { font-size: 13px; color: #474747; margin-left: 238px; margin-top: 225px; width: 350px; padding: 10px; height: 97px; width: 357px; background: url(../images/panel-bg.png); }
		
		.one-col .right .tab1 .content { margin-left: 248px; margin-top: 40px; }
		
		.tab0 { background: url(../images/panel-bg-2.jpg); }
		.tab1 { background: url(../images/panel-bg-3.jpg); }
		.tab2 { background: url(../images/panel-bg-1.jpg); }		
		.tab3 { background: url(../images/panel-bg-4.jpg); }
		.tab3 { background: url(../images/panel-bg-8.jpg); }
		.tab4 { background: url(../images/panel-bg-7.jpg); }
		.tab5 { background: url(../images/panel-bg-6.jpg); }		
		.tab6 { background: url(../images/panel-bg-5.jpg); }
		.tab7 { background: url(../images/panel-bg-4.jpg); }
		
.main-content .copy { width: 820px; margin-top: 10px; margin-bottom: 20px; text-align: center; color: #235b8c; font-size: 13px; }		

.two-col { clear: both; margin-bottom: 22px; }
	.two-col .left { float: left; width: 570px; margin-right: 20px; }
	.two-col .left .content { padding: 23px 25px 25px 25px; }
	.two-col .left .copy { width: 510px; margin-top: 20px; margin-bottom: 20px; text-align: center; width: 570px; color: #235b8c; font-size: 13px; }
		.two-col .left .copy a { color: # #235b8c; }
		
	.two-col .right { float: left; padding: 15px 20px 5px 20px; width: 170px; }
		.two-col .right h4 { margin-bottom: 5px;  text-align: center; }
		.two-col .right input, .two-col .right textarea { width: 165px; } 
		.two-col .right textarea { height: 110px; }
		.two-col .right input.sub { float: right; width: auto !important; } 

.main-col .copy {
		width: 655px !important;
		text-align: center;
		position: absolute;
		bottom: 20px;
		right: 0px;
		margin: 0 !important;
}	

.home .two-col .copy {
		width: 636px !important;
		text-align: center;
		position: absolute;
		bottom: 20px;
		left: 0px;
		margin: 0 !important;
}
.home .two-col {
	position: relative;
	z-index: 100;
}
		.home .two-col .left {
			width: 636px;
			margin-right: 0;
		}
		.home .two-col .left .content {
			padding: 135px 42px 55px 35px;
		}
		.home .two-col .right {
			width: 239px;
			background: #f9f9f9;
			padding: 150px 30px 35px 45px;
			margin-top: 5px;
		}
		.home .two-col .right h4 { text-align: left; }
		.home .two-col .right input, .home .two-col .right textarea {
			width: 100%;
		}
		.home .header-image {
			margin-bottom: 28px;
		}
		
.three-col { clear: both; margin-bottom: 22px; height: 144px; }
	.three-col .col { padding: 0 0px 0 10px; width: 237px; height: 134px; float: left; }
	.three-col h4 { line-height: 22px; text-decoration: underline; }
	.three-col p { line-height: 20px; }
	.three-col p span { font-weight: normal; font-size: 12px; color: #ed0606; }
	.three-col .icon { float: left; margin-top: 32px; margin-right: 9px; }
	.three-col .content { float: left; width: 160px; margin-top: 34px; }
		
		.three-col .right  h4 { color: #ed0606; font-size: 14px; }

.home .three-col {
	height: 133px;
	position: absolute;
	top: -30px;
	left: 18px;
}
	.home .three-col .col { 
		width: 282px;		
		float: left; 
		padding-left: 10px;
		border: 1px solid #18607b;
		margin-right: 17px;
	}
	.home .three-col .col.right-col {
		margin-right: 0;
	}
	.home .three-col .content {
		width: 190px;
	}
	.home .three-col h4 {
		margin-bottom: 2px;
	}
	
.home .main:after,
.two-col:after {
	display: block; 
	content: "."; 
	clear: both; 
	font-size:0; 
	line-height: 0; 
	height: 0; 
	overflow: hidden; 
}

span.required { color:#F00!important; font-weight:bold; }

.tabbing { clear:both; margin-bottom:20px; }
.image-float { float:right; margin-left:20px; }
.product { width:275px; border:1px solid #CCC; margin-bottom:20px; float:left; margin-right:20px; }
.product img { float:left; margin-right:20px; margin-left:10px; }
.product ul { margin:0px; padding-left:25px; margin-left:50px; }
.product h3 { background:#CCC; padding:5px; margin-bottom:5px; }

.social-media { position:absolute; top:37px; left:450px; }

.leads { margin-left:100px; color:#FFF; }
.leads p { color:#FFF; }
.leads span { color:#000; }

.alignright { float:right; padding:0 0 5px 10px; }
