/* HTML Element styles specific to this project. */

body {
	color: #444;
}

h1 {
	font-size: 1.6em;
	color: #225293;
}
h2 {
	font-size: 1.5em;
	color: #444;
}
h3 {
	font-size: 1.4em;
	color: #225293;
}
h4 {
	font-size: 1.3em;
	color: #444;
}
h5 {
	font-size: 1.2em;
	color: #225293;
}
h6 {
	font-size: 1.1em;
	color: #444;
}

.phone > a {
	color: inherit;
}







a.TextButton,
input.TextButton,
a.Method {
	border-color: #000;
	padding: 3px 5px;
	color: #fff;
	background: #666;
}

a.TextButton:hover,
input.TextButton:hover,
a.Method:hover {
	color: #eee;
	text-decoration: none;
}





/*Skin specific styles */

#container {
	min-height: 100%;
	text-align: center;
	background-color: #fff;
}

#container > div {
	text-align: left;
}

#container > div:before, #container > div:after {display: table; content: " "; line-height: 0;}
#container > div:after {clear: both;}
#container > div {*zoom: 1;}

#container > div > * {
	clear: both;
	position: relative;
	margin: 0 auto;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	max-width: 960px;
}





#logged-in-menu-container {
	color: #fff;
	background-color: #209ddd;
}

#logged-in-menu {
	padding: 0 10px;
	font-size: .9em;
}

#logged-in-menu a[title]:after {
	background-color: #209ddd;
	color: #fff;
}

#logged-in-menu a {
	color: inherit !important;
}

#logged-in-menu ul ul {
	background-color: #225293;
	color: #fff;
}

#logged-in-menu > ul:first-child {
	float: right;
}

#logged-in-menu > ul:first-child a[title]:after {
	left: auto;
	right: 100%;
}

#logged-in-menu > ul:first-child ul {
	left: auto;
	right: 7px;
	text-align: right;
}

#logged-in-menu > ul:first-child ul ul {
	right: 100%;
}

@media screen and (max-width: 599px) {
	#logged-in-menu.minimize600 > ul:before {
		content: "≡ Administration Menu";
	}
	#logged-in-menu.minimize600 > ul:first-child:before {
		content: "≡ User Menu";
	}
	#logged-in-menu.minimize600 > ul:first-child {
		float: none;
	}
	#logged-in-menu.minimize600 > ul:first-child ul {
		text-align: left;
	}
}





#HeaderContainer {
	background-color: #fff;
}

#Header {
	margin: 20px auto 40px auto !important;
	padding: 0 10px;
}

#page-container {
	background-color: #209ddd;
}

#page {
	background-color: #fff;
}




#main-menu {
	position: absolute;
	top: -20px;
	left: 0;
	padding: 0 10px;
	width: 100%;
	color: #fff;
	background-color: #225293;
	z-index: 3;
}

#main-menu > ul {
	padding: 12px 0;
}

#main-menu > ul > li {
	padding: 0 7px;
	border-left: 1px solid #d1d2d4;
}

#main-menu > ul > li:first-child {
	border-left: none;
}

#main-menu a {
	color: inherit !important;
}

#main-menu a[title]:after {
	background-color: #888;
	color: #fff;
}

#main-menu ul ul {
	background-color: #2b94c6;
	color: #fff;
}

@media screen and (max-width: 599px) {
	#main-menu {
		font-size: .9em;
	}
	#main-menu > ul {
		padding: 5px 0;
	}
	#main-menu.minimize600 > ul:before {
		content: "≡ Main Menu";
	}
	#main-menu > ul > li {
		border-left: none;
		padding: 5px 7px;
	}
}




#Banner {
	padding-top: 20px;
}

#Banner img {
	width: 100%;
}




#body {
	padding: 10px;
}




#HomePageTable > div {
	padding: 10px;
}

#HomePageTable > div > *:first-child {
	margin-top: 0;
}



#Logos {
	max-height: 100%;
	height: 152px;
	background: url(../image/Templates/footer-background.png) center no-repeat;
}

#Logos .footer-astral-logo {
	position: absolute;
	left: 20px;
	bottom: 25px;
}

#Logos .footer-group-logos {
	position: absolute;
	right: 20px;
	bottom: 20px;
}

@media screen and (max-width: 479px) {
	#Logos .footer-astral-logo {
		left: 10px;
	}
	#Logos .footer-group-logos {
		right: 10px;
	}
}




#footer {
	display: block;
	padding: 5px 10px;
	text-align: center;
 	font-size: .8em;
	color: #fff;
}

#footer a {
	color: #fff;
}

#administration-menu > ul > li,
#website-by {
	padding-top: 2px;
	padding-bottom: 2px;
}

#copyright {
	padding-top: 2px;
	padding-bottom: 2px;
	text-align: right;
}










/* Products Page Styles */

#FeatureBoxes.grid {
	margin-top: -10px;
}

#FeatureBoxes.grid > * {
	margin-top: 10px;
}

#FeatureBoxes .float-right {
	float: right;
}

#FlashMovieLeft {
}

#FlashMovieLeft object,
#FlashMovieLeft embed,
#FlashMovieRight object,
#FlashMovieRight embed {
	width: 100%;
	height: 336px;
}

#Products {
	text-align: center;
}

#Products h1 {
	margin-top: 0;
	text-align: center;
	text-transform: uppercase;
	color: #1e6a8e;
}

#Products > .grid {
	margin-top: -10px;
	margin-bottom: -10px;
}

#Products > .grid > * {
	padding-top: 10px;
	padding-bottom: 10px;
}

#Products a {
	display: block;
	margin-top: 10px;
	border: 0;
	height: 60px;
	text-decoration: none;
	background-repeat: no-repeat;
	background-position: center;
}

#Products a:hover {
	text-decoration: none;
}

.buttons-left > a:first-child,
.buttons-right > a:first-child {
	margin-top: 0;
}

.button-salt-chlorinators {
	background-image: url(../image/ProductButtons/1_.png);	
}

.button-salt-chlorinators:hover {
	background-image: url(../image/ProductButtons/1_o.png);
}

.button-chemical-dosing-systems {
	background-image: url(../image/ProductButtons/2_.png);	
}

.button-chemical-dosing-systems:hover {
	background-image: url(../image/ProductButtons/2_o.png);
}

.button-pumps {
	background-image: url(../image/ProductButtons/3_.png);	
}

.button-pumps:hover {
	background-image: url(../image/ProductButtons/3_o.png);
}

.button-heaters {
	background-image: url(../image/ProductButtons/4_.png);	
}

.button-heaters:hover {
	background-image: url(../image/ProductButtons/4_o.png);
}

.button-viron {
	background-image: url(../image/ProductButtons/5_.png);	
}

.button-viron:hover {
	background-image: url(../image/ProductButtons/5_o.png);
}

.button-lighting-and-waterfalls {
	background-image: url(../image/ProductButtons/6_.png);	
}

.button-lighting-and-waterfalls:hover {
	background-image: url(../image/ProductButtons/6_o.png);
}

.button-pool-and-spa-controllers {
	background-image:  url(../image/ProductButtons/7_.png);
}

.button-pool-and-spa-controllers:hover {
	background-image:  url(../image/ProductButtons/7_o.png);
}

.button-heat-pumps {
	background-image:  url(../image/ProductButtons/8_.png);
}

.button-heat-pumps:hover {
	background-image:  url(../image/ProductButtons/8_o.png);
}

.button-filters {
	background-image:  url(../image/ProductButtons/9_.png);
}

.button-filters:hover {
	background-image:  url(../image/ProductButtons/9_o.png);
}

.button-pool-cleaners {
	background-image:  url(../image/ProductButtons/10_.png);
}

.button-pool-cleaners:hover {
	background-image:  url(../image/ProductButtons/10_o.png);
}

.button-drains-and-skimmers {
	background-image:  url(../image/ProductButtons/11_.png);
}

.button-drains-and-skimmers:hover {
	background-image:  url(../image/ProductButtons/11_o.png);
}

.button-accessories {
	background-image:  url(../image/ProductButtons/12_.png);
}

.button-accessories:hover {
	background-image:  url(../image/ProductButtons/12_o.png);
}

#FlashMovieRight {	
}

#FlashTextArea {
	padding: 10px;
	border-top: 6px solid #45b1e2;
	background-color: #fff;
	color: #000;
}

#FlashTextArea h1 {
	margin-top: 0;
	padding-top: 0;
	font-size: 15px;
	font-weight: bold;
	color: #000;
}