/* Key styles for: Freedom Pools Townsville*/
/* Website designed and developed by Mojito Solutions, Katrina Youngman */
/* Last updated: Joanne Walter, 28 September 2009 */

/*Reset Styles*/
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;
}

body{font-family: "Century Gothic", Verdana, Arial, Helvetica, sans-serif; font-size: 62.5%; color: #333; behavior: url("csshover3.htc")}
img, div {behavior: url(iepngfix.htc) }

/*Container Styles*/
#banner {background: #fff; height: 180px; overflow: hidden;}
#logo {width: 290px; float: left;}
#footer {background: #fff;}
.wrapper {margin-left: auto; margin-right: auto; width: 960px;}
#main-container {background: url(images/main-container-bg.jpg) repeat-x #20285f; clear: both; overflow: hidden; padding: 20px 0}
#main-container .col {float: left; }

#navigation {width: 180px;}
#content-container {width: 470px; padding: 0 30px;}
*html #content-container{padding: 0 20px;}
#features {width: 250px;}
#combined-cols{width: 780px; overflow: hidden;}
*html #combined-cols{width: 760px; overflow: hidden;}

#subpage-banner{width: 755px; height: 160px; margin-bottom: 10px; margin-top: -10px; margin-left: 25px; overflow: hidden;}
*html #subpage-banner{margin-left: 15px;}

#special {float: right; width: 475px; background: url(images/special-bg.jpg) no-repeat; height: 135px;}
*html #special {position: absolute; top: 0; right: 0;}
html>body #special{*position: absolute; *top: 0; *right: 0;}
#special-content {padding: 5px 10px 10px 10px; text-align: right; float: right; width: 300px;  font-family: "Arial Rounded MT Bold";}
#footer {margin: 10px 0;  text-align: right;}
#gallery {position: absolute; margin-top: -40px; padding: 0;}
#gallery-overlay {position: absolute; margin-top: -320px; z-index: 99;}
@-moz-document url-prefix() {#gallery-overlay {margin-top: -310px;}}
#content {margin-top: 280px;}



/*Navigation Styles*/
#navigation ul {padding: 5px;}
#navigation li {margin: 0; display: block; list-style: none; behavior: url(iepngfix.htc);}
#navigation li a{text-decoration: none; color: #8bd4e5; font-size: 1.4em; display: block; padding: 5px 10px; text-transform: lowercase; }
#navigation li a:hover {color: #8bd4e5; border-bottom: none; background: url(images/nav-hover.png) repeat; }

#navigation li ul {padding: 0; border-top: 2px solid #fff;}
#navigation li li{background: #8bd4e5;}
#navigation li li a{color: #333;}
#navigation li li a:hover{background: #fff; color: #333;}

#navigation li.current a{background: url(images/nav-hover.png) repeat;}

/*IE-6 Navigation Styles*/
*html #navigation li a{width: 170px;}
*html #navigation li a:hover{background: #fff; color: #333; padding: 5px 10px; width: 170px;}

*html #navigation li.current a{background: #fff; color: #333;}
*html #navigation li.current ul li a{background: #8bd4e5; color: #333;}


/*Link Styles*/
a {color: #8bd4e5; text-decoration: none;}
a:link{color: #8bd4e5;}
a:visited {color: #8bd4e5; }
a:hover {color: #fff; border-bottom: 1px dotted #c9e9f4;}

#specials a{color: #c9e9f4;}
#specials a:hover{color: #fff; border-bottom: 1px dotted #c9e9f4;}

.feature-2 a{color: #fff !important;}
.feature-2 a:hover{color: #8bd4e5; border-bottom: 1px dotted #fff;}

.feature a{color: #213777 !important;}
.feature a:hover{color: #333; border-bottom: 1px dotted #213777;}

#footer a{color: #213777;}
#footer a:hover{color: #333; border-bottom: 1px dotted #213777;}

a:hover.img-link {border-bottom: none !important;}

/*Paragraph Styles*/
h1 {font-size: 2.4em; color: #fff; padding-bottom: 2px; font-weight: normal;}
h2 {font-size: 2.0em; color: #fff; padding-bottom: 2px; font-weight: normal;}
h3 {font-size: 1.8em; color: #8bd4e5; padding-bottom: 2px; font-weight: normal;}
h4 {font-size: 1.6em; color: #8bd4e5; padding-bottom: 2px; font-weight: normal;}
p {font-size: 1.3em; color: #fff; padding-bottom: 10px;}

#features h2{font-size: 1.8em;}
#features h3{font-size: 1.6em;}
#features h4{font-size: 1.4em;}

.feature p{color: #333; line-height: 1.4em; font-size: 1.3em;}
.feature h2, .feature h3, .feature h4 {color: #213777;}
.feature-2 h2, .feature-2 h3, .feature-2 h4 {color: #fff;}
.feature-2 p{color: #8bd4e5; line-height: 1.4em; font-size: 1.3em;}
#footer p{color: #333;}
#webdeveloper p{font-size: 1.1em;}


/*Table Styles*/
table {background: #8bd4e5; border: 1px solid #fff; margin-bottom: 10px;}
table td{ padding: 5px; background: #8bd4e5; color: #333; border: 1px solid #fff; font-size: 1.2em;}


/*List Styles*/
#content-container ul, #content-container ol {font-size: 1.3em; margin-left: 30px; padding-bottom: 10px; color: #fff;}
#features ul, #features ol {font-size: 1.3em; margin-left: 15px; padding-bottom: 10px; color: #fff;}
#content-container li, #features li{padding-bottom: 10px;}
.feature ol, .feature ul {color: #074fa2 !important;}


/*Image Styles*/
#gallery img{padding: 0px !important; margin: 0 !important}
#main-container img {padding: 5px;}
#main-container img.left {padding: 10px 10px 10px 0;}
#main-container img.right {padding: 10px 0px 10px 10px;}
.jdGallery { z-index: 0 !important;} 
#myGallery1 {margin-left: 10px;}
img.feature-bottom-img {padding: 0!important; margin-left: -10px;}
#pool-shapes img{margin-top: -15px;}

/*Class Selectors*/
.right {float: right;}
.left {float: left;}
.clear {clear: both;}
.specials-font-a{color: #00479b; font-size: 1.2em;}
.specials-font-b{color: #fff; font-size: 1.8em; line-height: .4em;}
.specials-font-c{color: #c9e9f4; font-size: 1.3em;}
.blue {color: #074fa2 !important;}
.space {border-right: 10px solid #fff;}
.divider {border-bottom: 1px solid #8bd4e5; margin-bottom: 20px; margin-top: 15px; clear: both;}
.feature {background: #8bd4e5; padding: 10px 10px 0 10px; border: 1px solid #79b9d1; margin-bottom: 10px; overflow: hidden; width: 228px;}
.feature-2{background: #213777; padding: 10px 10px 0 10px; border: 1px solid #fff; margin-bottom: 10px; overflow: hidden; width: 228px;}

.managecontainer {overflow: scroll; height: 800px; background: #fff; padding: 20px;}
#myGallery22 {margin-top: 20px; z-index: 1;}
.jdGallery a:hover {border-bottom: none !important;}