/* @override http://www.islandwaterworks.ca/css/island_style.css */

/* @override http://local.islandwaterworks.ca/css/island_style.css */

/** CSS RESET
 *
 */
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;
    background: transparent;
}

body {
    line-height: 1;
   	color: #454545;
}

p {
	font-size: 15px;
	line-height: 1.5;
	margin: 0 0 20px;
	max-width: 600px;
   	color: #454545;
}

.caption {
	padding: 0 0 0 20px;
	color: #13558f;
}

#contact-info {
	float: left;
	margin: 0 0 0 0px;	
}

a {
	font-size: 15px;
	color: #D76D33;
	text-decoration: none;
}

a:hover, a:active {
	color: #104765;
}

h1 {
    font-size:2.4em;
    font-weight: bold;
	color: #13558f;
    line-height:1.3;	
}

h2 {
font-size:2.2em;
line-height:1.2;
letter-spacing:1.5;
margin: 0 0 10px;
color: #D76D33;
}

h3 {
color: #13558f;	
font-size:1.5em;
line-height:2;
clear: both;
}

h4 {
color: #13558f;	
font-size:1.1em;
line-height:1.5;
margin: 0 0 10px;
max-width: 700px;
}

h5 {
	font-size: 14px;
	margin: 0 0 5px;
}

#factsheet-list {
	width: 250px;
	padding: 20px 20px 5px 20px;
	float: right;
	overflow: hidden;
	background-color: #efefef;
	margin: 0 0 20px 20px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	border-bottom: 1px solid #ddd;
	border-top: 1px solid #eee;
}

#factsheet-list ul {
	list-style: none;
	margin: 0;
}

#factsheet-list h4 {
	color: #13558f;
	font-size: 1.2em;
	font-weight: normal;
}

#factsheet-list a {
	display: block;
	color: #D76D33;
	text-decoration: none;
	font-size: 15px;
}

#factsheet-list li {
	border-top: 1px solid #ddd;
	padding: 20px 0 20px;
	display: block;
	text-decoration: none;
	font-size: 15px;
}

#factsheet-list a:hover,
#factsheet-list a:active {
	color: #104765;
}

.cite {
	color: #104765;
	font-size: 12px;	
}

.cite a {
	font-size: 12px;	
}

ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

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

/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}

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


/*  
Sticky Footer Solution
by Steve Hatcher 
http://stever.ca
http://www.cssstickyfooter.com
 */

* {
margin:0;padding:0;
} 

/* must declare 0 margins on everything, also for main layout components use padding, not 
vertical margins (top and bottom) to add spacing, else those margins get added to total height 
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

html, body {
    height: 100%;
    font-family: 'Cantarell', 'lucida grande', 'Trebuchet MS', 'sans-serif';
    background-color:#B3D9ED;
}

#wrap {
    min-height: 100%;
    background:url('../img/vertical-bg.gif') repeat-y top;
    width:978px;
    margin:0 auto;
}

#footer {
    width:978px;
    background:url('../img/vertical-bg.gif') repeat-y top;
    position: relative;
    height: 350px;
    clear:both;
    margin: -300px auto 0 auto;
    font-size: 14px;
	color: #0E4563;
	padding: 40px 0 0;
}

#main {
    margin: 0 auto;
    width:960px;
    overflow:auto;
    padding-bottom: 432px;
    background-color:#fff;
}  /* must be same height as the footer */

#header-bar {
height:53px;
width:918px;
padding:0 21px;
margin:0 auto;
background:url('../img/top-bar.jpg') repeat-x top;
}


#header-bar h2 {
    font-size:2em;
    font-weight:bold;
    padding: 6px 0 0 10px;
    margin: 0;
    color:#fff;
    letter-spacing: 2;
    line-height: 1.15em;
    text-shadow: #1e4a92 0px -1px 0px;
}

#main-wrap {
    background:url('../img/header-fade.jpg') no-repeat top;
    padding:0 20px 50px;
}

#home-wrap {
    background:url('../img/home-bg.jpg') no-repeat top;
    padding:0 20px 1px;
    margin: 0 0 30px 0;
}

#footer-content div.col-3 h4 {
	margin: 0 0 5px;
	font-weight: normal;
	font-size: 16px;
	color: #0E4563;
}

h4#address {
	line-height: 1.4;
	float: right;
	width: 200px;
	padding: 20px 0!important;
}

#footer-content div.col-3 p {
	font-size: 14px;
	color: #0E4563;
	margin: ;
}

span.contact-type {
	font-size: 13px;
	font-style: italic;
	font-weight: ;
	margin: 0 5px 0 0;
}

#home-wrap h1 {
    width:450px;
    margin-bottom:50px;
	text-shadow: #fff 0 1px 0, #000 0 -1px 0;
}

#home-wrap img {
}

img#bbb_adjust {
	margin: 0 20px 0 0 ;	
}


#feature-box {
    height:245px;
    padding: 0 0 20px 0px;
}

.two-col {
width: 420px;
float: left;
padding: 0px 20px 20px 0;
}

.wide-box {
	width: 580px;	
}

table {
	margin: 10px 0 20px;		
}

td, th {
	padding: 10px 20px;	
}

sub {
	font-size: 10px;
}

#about_us_logos img {
	margin: 0 20px 0 0;	
}

#about_us_logos {
	float: left;
	clear: left;
}

#map {
	float: left;
	margin: 0 0 0 50px;
}

#map img {
	padding: 0 0 10px;
}

#contact-form label {
	font-size: 15px;
	color: #13558f;
}

#sitemap ul {
	margin: 0 0 10px 0;	
	color: #D76D33;
}

#sitemap ul li {
    padding: 0 0 10px 0;
    margin: 0 0 0 25px;
    list-style-type: circle;
}

.two-col ul, .three-col {
    margin-left:20px;
}

.three-col {
	float: left;
	width: 250px;
	padding: 0px 20px 20px 0;
}

.three-col img {
	float: left;
}

.two-col li, .three-col li {
    list-style:disc;
    margin: 5px;
    padding-left:6px;
	list-style-type: circle;
	color: #13558f;
	line-height: 1.5;
}

#top-nav {
    margin:25px 0 0;
    float:right;
}

#contact form {
	display: none;
    float:left;
    width: 380px;
}

#commentform input, #contact input {
-webkit-box-shadow: #AAA 0px 2px 5px inset;
-moz-box-shadow: #AAA 0px 2px 5px inset;
box-shadow: #AAA 0px 2px 5px inset;
margin: 4px 0 0;
padding: 9px;
width: 360px;
background-color: #EDFDFC;
}

#faucets {
	width: 423px;
	height: 212px;
	float: right;
	background: url(../img/faucets.jpg) no-repeat;
	margin: 0 0 30px 0;
}

#faucets h4 {
	padding: 30px 0 0 20px;
	font-size: 1.5em;    
	text-shadow: #B3D9ED 0px 1px 0px;
}

#faucets p {
	padding: 0px 0 0 20px;
	width: 200px;
	color: #fff;
	font-size: 17px;
}

.blue-box {
	width: 370px;
	height: 200px;
	padding: 30px 40px 0 30px;
	background: url(../img/blue-bg.jpg) no-repeat;
	float: right;
}

.blue-box-tall {
	width: 370px;
	height: 250px;
	padding: 30px 40px 0 30px;
	background: url(../img/blue-bg-tall.jpg) no-repeat;
	float: right;
}

.blue-box img {
	float: left;
	margin: 0 10px 30px 0;
}

.blue-box h4 {
	text-shadow: #B3D9ED 0px 1px 0px;
}

.blue-box p, .blue-box-tall p {
	color: #fff;
	font-size: 16px;	
}

.blue-box-tall a {
	color: #104765;
}

.blue-box-tall a:hover,
.blue-box-tall a:active {
	color: #D76D33;
}


#commentform textarea, #contact textarea {
-webkit-box-shadow: #AAA 0px 2px 5px inset;
-moz-box-shadow: #AAA 0px 2px 5px inset;
box-shadow: #AAA 0px 2px 5px inset;
height: 164px;
margin: 4px 0px 10px;
padding: 9px;
width: 360px;
background-color: #EDFDFC;
}



input[type="text"]:focus, input[type="password"]:focus, input.text:focus, input.title:focus, textarea:focus, select:focus {
border-color: #4fb4e0;
}


#commentform input, #commentform textarea, #contact form input, #contact form textarea {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}


input[type="text"], textarea {
border: 1px solid #6EABBE;
}

#commentform label, #contact form label {
display: inline;
font-size: 1.3em;
font-weight: normal;
margin: 0px;
text-shadow: white 0px 1px 0px;
}

#commentform button, #contact form button {
border: 0;
padding:10px 12px;
font-size: 22px;
margin: 0 auto;
color: #0E4563;
background:url(../img/send.jpg) no-repeat;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
border: 1px solid #6EABBE;
} 

#commentform button:hover, #contact form button:hover {
background:url(../img/send.jpg) 0 -46px no-repeat;
}

#commentform button:active, #contact form button:active {
background:url(../img/send.jpg) 0 -92px no-repeat;
}

#business-card img{
width: 110px;
height: 0px;
}

#business-card {
padding: 5px;
background:url(http://www.systemandstyle.com/img/S&S-business-card.png) 0 0 no-repeat;		
}

#business-card:hover {
background-position: 0 -27px;		
}

#business-card:active {
background-position: 0 -53px;		
}

#quote {
	margin: 0px 30px 60px 190px;
	padding: 0;
	color: #386F8E;
    font-style:italic;
    font-size:18px;    
}


#quote h4 {
	font-weight: normal;
	line-height: 1.9;
	margin: 0 0 5px;
}

#quote h5 {
    font-size: 14px;
    font-weight: normal;
    line-height: 0.4;
    margin: 0 0 0 15px;
}


/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}

#content_area {
    margin: 0 0 60px;
    padding: 0 20px 0;
}

#footer-content div.col-3 img {
	margin: 20px 0 20px;
	border: 1px solid #386F8E;
}


.about_us_image{
    padding-top:20px;
    padding-right:20px;
    padding-bottom:5px;
}

.text-image-left{
    padding: 5px 20px 20px 0;
}

.image-right img {
	border: 1px solid #13558f;
}

.text-image-right{
    margin: 5px 0 10px 20px;
}

#about_us_video{
	padding: 0 0 20px 20px;
}

#logo a {
    text-decoration:none;
    float:left;
    padding: 0 0 0 15px;
}


#home-logo {
    background-image: url(../img/Island-Waterworks-home-hover.jpg);
}

#logo a {
	margin: 0 0 50px;
}

#main-logo {
    background-image: url(../img/Island-Waterworks-main-hover.jpg);
    
}

#social-media {
    float:right;
    background: url(../img/social.png) no-repeat;
    height: 43px;
    margin: 5px 0 0;
    padding: 0;
    width: 102px;
}

#social-media li {
    display:inline;
    float: left;
    list-style:none;
}

#social-media li, #social-media a {
    height:43px;
    width:38px;
    text-indent: -10000px;
    display: block;
}

#rss {
    margin:0 0 0 26px;
}

#twitter a:hover {
    background:url('../img/social.png') 0px -44px no-repeat;
}

#rss a:hover {
    background:url('../img/social.png') -64px -44px no-repeat;
}


#top-nav li {
    background-image:url('../img/nav-bg.png');
    margin:0 1px 0 0;
    display: inline;
    list-style: none;
    float: left;
}

#top-nav li, #top-nav a {
    display:block;
}

#top-nav a {
    padding:15px 20px;
    padding-left:20px;
    padding-right:20px;
    font-size:15px;
    text-decoration:none;
    color: #255584;
	text-shadow: #c3d4e9 0 2px 0;
}

#sel-water_testing, #sel-services, #sel-products, #sel-contact {
    background:url('../img/nav-bg.png') -8px -92px;
    padding:15px 20px;
    font-size:15px;
}

#sel-about {
    background:url('../img/nav-bg.png') left -92px;
    padding:15px 20px;
    font-size:15px;
}

#sel-blog {
    background:url('../img/nav-bg.png') right -92px;
    padding:15px 20px;
    font-size:15px;
}

#nav-products, #nav-services, #nav-water_testing {
    background-position: -8px 0px;
}

#nav-contact {
    background-position: right 0;
}

#nav-contact a:hover {
    background:url('../img/nav-bg.png') right -46px;
}

#nav-products a:hover, #nav-services a:hover, #nav-water_testing a:hover {
    background:url('../img/nav-bg.png') -8px -46px;
}

#nav-about a:hover {
    background:url('../img/nav-bg.png') left -46px;
}

#nav-contact a:active {
    background:url('../img/nav-bg.png') right -92px;
}

#nav-products a:active, #nav-services a:active, #nav-water_testing a:active {
    background:url('../img/nav-bg.png') -8px -92px;
}   

#nav-about a:active {
    background:url('../img/nav-bg.png') left -92px;
}  

.clear{
    clear:both;
}


div .home_page_lists img {
    padding-top:20px;
}


.float_right{
    float:right;
}

.float_left{
    float:left;
}

.bold{
    font-weight:bold;
}

.ital{
    font-style:italic;
}

.small_list{
    line-height:1.2em;
}


.center{
    text-align:center;
}

.container {
    padding:0 10px;
}

#footer-content {
    width:960px;
    margin:0 auto;
    height:350px;
    background:url('../img/footer-bg.jpg') no-repeat top;
}

#footer-bottom {
    margin: 20px 20px;
}

#footer-bottom p {
    float:left;
    font-size: 11px;
    margin: 0 0 0 15px;
   	color: #0E4563;
	display: block;
}

#footer-bottom ul {
    float: right;
    font-size: 11px;
}

#footer-bottom li {
    display: inline;
    margin: 0 10px;
}

#footer-bottom a {
	font-size: 12px;
	color: #0E4563;
    text-decoration:none;
}

#footer-bottom a:hover {
    text-decoration:underline;
   	color: #fff;
}

.col-3 {
    width: 280px;
    height: 190px;
    float: left;
    margin:0;
    padding: 0 0 0px 40px;
}

div.twitter-feed {
	line-height: 1.2;
	margin: 0 0 10px 0;
}


span.time-stamp a {
	text-decoration: none;
	font-size: 12px;
	margin: 0;
}

.col-3 h3 {
    font-size: 26px;
    margin:0 0 6px 0;
	float: none;
	color: #104765;
	text-shadow: #E0EDF3 0 2px 0;
}

.col-3 {
	
}

.col-3 a {
    color: #0080A9;
}

.col-3 a:hover {
    text-decoration: none;
    color: #fff;
}

ul.list-row {
	margin: 0 auto;
	width: 100%;
}

ul.list-row li {
	float: left;
	margin: 0 20px 0;
	height: 100px;
}

.float-left {
    float: left;
}

.float-right {
    float: right;
}

.left-border {
    border-left: 1px dotted #aaa;
}

#message-notification {
    display: none;
    height: 50px;
    text-align: center;
    color: #666666;
    width: 380px;
    height:400px;
    float:left;
}


#confirmation-box a {
    font-size: 15px;
    display: block;
    width: 310px;
    text-align: center;
    margin: 30px 0;
}

#confirmation-box  {
    color: #666666;
    width:380px;
    height:400px;
    font-style: italic;
    font-size: 16px;
    text-shadow: #FFFFFF 0px 2px 0;
    padding-top: 60px;
    display: none;
    float:left;
}

#message-notification img {
    float: left;
    margin-left: 148px;
}

#contact-form div .invalid {
    color: #b8240c;
    font-style: italic;
    font-size: 16px;
    line-height: 12px;
    float:right;
    margin:10px 5px 0;
}

input[type=text].invalid, textarea.invalid {
    border: 1px solid #b8240c;
}