@charset "utf-8";
/* CSS Document */

body {
	background-color: #0c58a2;
	background-image: url(images/bubblebackground.jpg);
	background-position: center top;
	background-repeat: repeat-x;
}

#infobox {
	background-color: #f5f5f5;
	background-image: url(images/infobackground.jpg);
	background-position: top;
	background-repeat: repeat-x;
	border-bottom: thick solid #e04245;
	height: 175px;
	margin: -10px 0 0 0;
}
	
	#infoboxwrapper {
		margin:0 auto;
		overflow:hidden;
		width:960px;
	}
	
		#leftinfo {
			clear: left;
			float: left;
			margin: 12px 0 0 0;
			text-align: left;
			width: 250px;
		}
		
		#rightinfo {
			clear: right;
			float: right;
			margin: 12px 0 0 0;
			text-align: right;
			width: 250px;
		}
		
		#logohead {
			margin: 20px 0 0 277px;
			width: 100px;
		}
		
		
		#leftnavigation {
			float: left;
			margin: -105px 0 0 0;
			padding: 0 00px 0 0;
		}

		#leftnavigation ul {
			list-style-type:none;
			margin:0;
			padding:0;
		}
		
		#leftnavigation li {
			display: inline;
		}
		
		#leftnavigation a:link, a:visited {
			color: #FFFFFF;
			font-family: 'Roboto Slab', serif;
			font-size: 14px;
			margin: 0 20px 0 0;
			text-decoration: none;
			width: 60px;
		}
		
		#leftnavigation a:hover, a:active {
			border-bottom: thin dotted #FFFFFF;
			color: #FFFFFF;
			}
			
		#rightnavigation {
			float: right;
			margin: -105px 0 0 0;
			padding: 0 00px 0 0;
		}

		#rightnavigation ul {
			list-style-type:none;
			margin:0;
			padding:0;
		}
		
		#rightnavigation li {
			display: inline;
		}
		
		#rightnavigation a:link, a:visited {
			color: #FFFFFF;
			font-family: 'Roboto Slab', serif;
			font-size: 14px;
			margin: 0 0px 0 20px;
			text-decoration: none;
			width: 60px;
		}
		
		#rightnavigation a:hover, a:active {
			border-bottom: thin dotted #FFFFFF;
			color: #FFFFFF;
			}
	
#wrapper {
	margin: 0 auto;
	overflow: hidden;
	width: 960px;
}

#slideboxwrapper {
	clear: both;
	margin: 30px 0 00px 0;
	width: 960px;	
}

#slidebox {
	float: left;
	width: 560px;
}

	#slidebar img {
		width: 560px;
	}

#waterboy {
	float: right;
	width: 380px;
}

#outofwater {
	background-color: #FFFFFF;
	-moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -khtml-border-radius: 6px;
    border-radius: 6px;
	clear: both;
	height: 340px;
	padding: 0 20px 0 20px;
	width: 920px;
}

	#outofwatertext {
		clear: left;
		float: left;
		margin: 0 0 0 20px;
	}

	.rightpic {
		float: right;
		margin: -10px -10px 20px 0;
	}

#products {
	clear: both;
	margin: 0 0 00px 0;
	width: 960px;
}

#sanitizer {
	background-color: #FFFFFF;
	-moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -khtml-border-radius: 6px;
    border-radius: 6px;
	float: left;
	height: 200px;
	margin: 00px 20px 0 0;
	padding: 20px;
	width: 430px;
}

#upzdazy {
	background-color: #FFFFFF;
	-moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -khtml-border-radius: 6px;
    border-radius: 6px;
	float: left;
	height: 200px;
	margin: 00px 0 0 0;
	padding: 20px;
	width: 430px;
}

#pumps {
	background-color: #FFFFFF;
	-moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -khtml-border-radius: 6px;
    border-radius: 6px;
	float: left;
	height: 200px;
	margin: 20px 20px 0 0;
	padding: 20px;
	width: 430px;
}

#flexcon {
	background-color: #FFFFFF;
	-moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -khtml-border-radius: 6px;
    border-radius: 6px;
	float: left;
	height: 200px;
	margin: 20px 0 0 0;
	padding: 20px;
	width: 430px;
}

#control {
	background-color: #FFFFFF;
	-moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -khtml-border-radius: 6px;
    border-radius: 6px;
	clear: left;
	float: left;
	height: 200px;
	margin: 20px 20px 0 0;
	padding: 20px;
	width: 430px;
}

#service {
	background-color: #FFFFFF;
	-moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -khtml-border-radius: 6px;
    border-radius: 6px;
	clear: right;
	float: left;
	height: 200px;
	margin: 20px 0 0 0;
	padding: 20px;
	width: 430px;
}

	.left {
		float: left;
		clear: left;
		width: 180px;
	}
	
	.leftpumps {
		float: left;
		clear: left;
		width: 210px;
	}

	.right {
		float: right;
		clear: right;
	}
	

#form {
	background-color: #FFFFFF;
	-moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -khtml-border-radius: 6px;
    border-radius: 6px;
	clear: both;
	margin: 0px 0 0 0;
	padding: 0 20px 0 20px;
	width: 920px;
}

#logobox {
	background-color: #FFFFFF;
	-moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -khtml-border-radius: 6px;
    border-radius: 6px;
	clear: both;
	margin: 0px 0 0 0;
	padding: 20px;
	width: 920px;
}

	.logoimg {
		float: left;
		margin: 0 20px 0 0;
	}

#footerbox {
	background-color: #f5f5f5;
	border-top: thick solid #e04245;
	margin: 30px 0 0 0;
	padding: 20px 0 20px 0;
}
	
	#footerwrapper {
		margin:0 auto;
		overflow:hidden;
		width:960px;
	}
	
		#footerleft {
			float: left;
			margin: 0 30px 0 0;
			width: 300px;
		}
		
		#footercenter {
			float: left;
			margin: 0 30px 0 0;
			width: 300px;
		}
		
		#footerright {
			float: left;
			width: 300px;
		}
	
/* TYPE STYLE */

h1 {
	color: #FFFFFF;
	font-family: 'Satisfy', cursive;
	font-size: 60px;
	margin: 5px 0 10px 0;
}

h2 {
	color: #e04245;
	font-family: 'Satisfy', cursive;
	font-size: 45px;
	line-height: 50px;
	padding: 30px 0 30px 00px;
	text-align: center;
}

h3 {
	color: #0c58a2; 
	font-family: 'Roboto Slab', serif;
	font-size: 40px;
	font-weight: lighter;
	margin: 0 0 15px 0;
}

h4 {
	color: #999999;; 
	border-bottom: thin dotted #999999;
	font-family: 'Roboto Slab', serif;
	font-size: 20px;
	font-weight: lighter;
	margin: 0 0 15px 0;
	padding: 0 0 10px 0;
}

p {
	color: #000000;
	font-family: 'Arial', Helvetica, sans-serif;
	font-size: 12px;
	line-height: 16px;
	margin: 5px 0 20px 0;
}

.boldhead {
	color: #0c58a2;
	font-family: 'Arial', Helvetica, sans-serif;
	font-size: 18px;
	font-weight: 900;
	margin: 10px 0 10px 0;
}

.scripthead {
	color: #0c58a2;
	font-family: 'Satisfy', cursive;
	font-size: 22px;
	font-weight: 400;
}

.center {
	text-align: center;
}

#waterboy p {
	color: #FFFFFF;
	font-family: 'Arial', Helvetica, sans-serif;
	font-size: 14px;
	line-height: 22px;
	margin: 5px 0 10px 0;
}

	#waterboy a:link {
		border-bottom: thin dotted #999999;
		color: #FFFFFF;
		font-weight: bold;
		text-decoration: none;
	} 
	
	#waterboy a:visited {
		border-bottom: thin dotted #999999;
		color: #FFFFFF;
		font-weight: bold;
		text-decoration: none;
	}
	
	#waterboy a:hover{
		color: #999999;
		font-weight: bold;
		text-decoration: none;
	} 
	
	#waterboy a:active{
		color: #999999;
		font-weight: bold;
		text-decoration: none;
	}

b {
	font-weight: bold;
}

.texthead {
	background-color: #e04245;
	-moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -khtml-border-radius: 6px;
    border-radius: 6px;
	clear: both;
	color: #FFFFFF;
	float: left;
	font-family: 'Roboto Slab', serif;
	font-size: 24px;
	margin: 30px 0 20px 0;
	padding: 10px;
	width: 940px;
}

.callus {
	background-color: #ffcc33;
	border: solid 2px #e04245;
	-moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -khtml-border-radius: 6px;
    border-radius: 6px;
	color: #0c58a2;
	font-family: 'Roboto Slab', serif;
	font-size: 24px;
	font-weight: bold;
	margin-left: auto;
    margin-right: auto;
	padding: 5px 35px 5px 35px;
	text-align: center;
	width: 6em;
}
	a.callus:link {
		text-decoration: none;
	} 
	
	a.callus:visited {
		text-decoration: none;
	}
	
	a.callus:hover{
		background-color: #0C58A2;
		color:#FFFFFF;
		text-decoration: none;
	} 
	
	a.callus:active{
		background-color: #0C58A2;
		color:#FFFFFF;
		text-decoration: none;
	}

.license {
	clear: both;
	color: #000000;
	font-family: 'Arial', Helvetica, sans-serif;
	font-size: 18px;
	font-weight: bold;
	line-height: 24px;
	margin: 30px 0 20px 0;
	text-align: center;
}

p.flex-caption {
	color: #E04245;
	font-size: 14px;
	font-weight: bold;
	height: 12px;
	padding: 10px 0 0 10px;
}

#footerbox p {
	color: #999999;
	font-family: 'Arial', Helvetica, sans-serif;
	font-size: 10px;
	line-height: 14px;
	margin: 5px 0 10px 0;
}
	
	#footerbox a:link {
		color: #999999;
		font-family: 'Arial', Helvetica, sans-serif;
		font-size: 10px;
		text-decoration: none;
	} 
	
	#footerleft a:link {
		line-height: 30px;
	}
	
	#footerbox a:visited {
		color: #999999;
		text-decoration: none;
	}
	
	#footerbox a:hover{
		color: #999999;
		border-bottom: thin dotted #999999;
	} 
	
	#footerbox a:active{
		color: #999999;
		border-bottom: thin dotted #999999;
	}