/* Style Sheet for Third Generation My Local Pool Shop Descriptive pages - February 2017*/

* {
	margin: 0px;
	padding: 0px;
	font-size: 16px;
}
html {
	padding: 0px;
	margin: 0px;
	height: 100%;
}
body {	
	 /*background: -webkit-linear-gradient(#EBF5F9, #CCCCCC); *//* For Safari 5.1 to 6.0 */
	  /*background: -o-linear-gradient(#EBF5F9, #CCCCCC); *//* For Opera 11.1 to 12.0 */
	  /*background: -moz-linear-gradient(#EBF5F9,#CCCCCC);*/ /* For Firefox 3.6 to 15 */
	  /*background: linear-gradient(#EBF5F9, #CCCCCC);*/ /* Standard syntax */
	 background-color:#27BAF5;
	 font-family: Helvetica, Arial, sans-serif;	
}
#top{
	background-color: #EBF5F9;
	color: #FFFFFF;
	width:100%;
	margin: 0; 
	padding-top: 8px;
	text-align: left
}
.headcontainer {
	width: 100%;
	max-width:1000px;
	background-color: transparent;
	margin: 0px auto 15px;
}
#header1A {
	clear:both;
	width:90%;
	margin: auto;
	padding-top: 10px;
	background-color: transparent;
	color: #059A49;
	font-size: 1em;
	font-weight: normal;
	text-align: center;
}
#header1B {
	display:none;
}
img.header{
	float: left;
	width: 98%;
	max-width: 464px;
	height: auto;
	margin-top: 8px;  
}
.nava {
	/*position:relative;
	left:0;
	top:0;*/
	width: 100%;
	background-color: transparent;	
}
.tabholder {
	background-color: transparent; 
	height: 35px;
	width: 100%;
	max-width:200px;
	margin: auto;
}
.aus, .newz {
	float: left;
	background-color: #999999;	
	width: 200px;
	height: 20px;
	padding: 8px 0px 7px ;
	font-weight: bold;
	font-size: 1em;
	text-decoration: none;
	text-transform: uppercase;
	text-align: center;
}
#middle {
	background-image: url(../ImagesSite/PoolBeach1-2.jpg);
    background-repeat: no-repeat;
    /*background-position: top right; */
	width: 100%;
	padding: 0px;
	margin: -35px 0 0;
	min-height:520px;
}
.bodytext, .bodytext1{
	width: 95%; 
	max-width: 800px; 
	margin: auto;
	text-align: justify; 
	min-height:550px; 
	padding-top: 115px;
}
.boxholder1{
	position:absolute;
	left:0; 
	top:38em; 
	width:100%; 
}
.infobox1, .infobox2, .infobox3, .infobox4{
	width: 90%;
	max-width:290px;
	height: 90px; 
	margin:0.3em auto; 
}
.infobox1{
	background-color:rgba(255,255,255,0.8);
}
.infobox2{
	background-color:rgba(0,255,255,0.8);
}
.infobox3{
	background-color:rgba(255,0,255,0.8);
}
.infobox4{
	background-color:rgba(255,255,0,0.8);
}
#lower {
	background-color: /*#3984D0; #EFE28D;*/ transparent;
	width: 100%;
	height: 20px;
}
#footerA {
	width: 100%;
	background-color: #D1D3D1;
    color: #CC0000;
	text-align: center;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 1em;
}
.displaytableA {	
	 display:none;
}
.displaytableB {	
	display: block;
	text-align: left; 
	color: #666666;
	padding: 1%;
	font-size: 1em; 
	width:90%;
	margin: auto;
}
.footlist{
	float:left;
	display:flex;
}
.rollover {     
        display : block;       
        background-color: #5B5B5B; 
}

.rollover:hover { 
        display : block;     
        background-color: #999999; 
}

/* Link Styles */

a.topnav:link {
	color: #FFFFFF;
	text-decoration: none;
	font-size: 1em;
}
a.topnav:visited {
	color: #FFFFFF;
	text-decoration: none;
	font-size: 1em;
}
a.topnav:hover {
	color: #CAF6FF;
	text-decoration: none;
	font-size: 1em;
}
a.topnav:active {
	color: #FDFFCA;
	text-decoration: none;
	font-size: 1em;
}
a.topnav2:link {
	color: #095595;
	text-decoration: none;
}
a.topnav2:visited {
	color: #FFFFFF;
	text-decoration: none;
}
a.topnav2:hover {
	color: #CAF6FF;
	text-decoration: none;
}
a.topnav2:active {
	color: #FDFFCA;
	text-decoration: none;
}
a.content:link {
	color: #095595;
	text-decoration: none;
}
a.content:visited {
	color: #095595;
	text-decoration: none;
}
a.content:hover {
	color: #191970;
	text-decoration: none;
}
a.content:active {
	color: #FDFFCA;
	text-decoration: none;
}
a.content3:link {
	color: #095595;
	font-size: 1.2em;
	text-decoration: none;
}
a.content3:visited {
	color: #095595;
	font-size: 1.2em;
	text-decoration: none;
}
a.content3:hover {
	color: #191970;
	font-size: 1.2em;
	text-decoration: none;
}
a.content3:active {
	color: #FDFFCA;
	font-size: 1.2em;
	text-decoration: none;
}

/* List Styles */
ul {
	margin-left: 20px;
}

/* General Styles  */
h1, h1.bgrey {
	margin-top: 5px;
	color: #CC2006;
	font-size:2.4em;
	font-weight: bold;
	text-align: center;
}
h1.bgrey {
	color: #006678;
}
h2, h2.white h2.bigwhite {
	color: #5C5B5B;
	font-size: 1.2em;
	font-weight: bold;
	text-align: center;
	margin-bottom: 0px;
}
h2.white{
	color: #FFFFFF;
	margin-bottom: 8px;
}
h2.bigwhite{
	font-size: 1.6em;
	font-family: Open Sans;
	color: #FFFFFF;
	margin-bottom: 8px;
}
h3 {
	color: #5C5B5B;
	font-size: 1.2em;
	font-weight: bold;
	text-align: left;
	margin: 0px 0px 5px;
}
h4 {
	color: #5C5B5B;
	text-align: left; 
	font-size: 1.4em;
	margin: 0 auto 0.7em
}
h5 {
	color: #5C5B5B;
	text-align: left; 
	font-size: 1.4em;
	margin-left: 12%;
}
h6 {
    background-color: transparent;
    color: #666666;
    text-align: center;
    font-family: Century-gothic,Helvetica, sans-serif;
    font-size: 2em;
}
.clear {
	clear: both;
	background-color: transparent;
	width: 100%;
	height: 1px;
}
.normal {
	font-weight: normal;
}
.bold {
	font-weight: bold;
}
.italic {
	font-style: italic;
}

/* Font sizes */

.small {
	font-size: 0.8em;
}
.text, .reg {
	font-size: 1.0em;
}
.accentuate{
	font-size: 1.2em;
}
.medium {
	font-size: 1.4em;
}
.big {
	font-size: 1.8em;
}
.large {
	font-size: 2.2em;
}
.superlarge {
	font-size: 2.6em;
}

/* Alignments */

.left {
	text-align: left;
}
.center {
	text-align: center;
}
.right {
	text-align: right;
}
.justify {
	text-align: justify;
}
.padtop {	
	margin: 0.5em 0 0;
}
.padbot {
	margin: 0 0 0.5em;
}
.spaced {
	margin: 0.5em 0;
}
.headspaced {
	margin: 1em 0px 0.5em;
}
.unspaced {
	margin: 0 0;
}
.white {
	color: #FFFFFF;
}
.red {
	color: #CC2006;
}
.black {
	color: #000000;
}
.grey {
	color: #5C5B5B;
}
.blue{
	color: #0399E3;
}
.greyemphasis {
	background-color: transparent;
	color: #5C5B5B;
	text-align: center;
	font-weight: bold;
	font-size: 1.5em;
}
.bluegrey {
	background-color: transparent;
	color: #006678;
}
.bluegrey1 {
	background-color: transparent;
	color: #006678;
	font-size: 1em;
}
.bluegreyemphasis {
	background-color: transparent;
	color: #006678;
	text-align: center;
	font-weight: bold;
	font-size: 1.5em;
}
.core {
	font-weight: bold;
	font-size: 1em;
 }
 .shadow {	 
text-shadow: rgb(51, 51, 51) 2px 2px ; 
 }
p.smallcaption {
	font-size: 0.6em;
	text-align: center;
}
.fright {
	float: right;
}
.fleft {
	float: left;
}
.clear {
	background-color: transparent;
	clear: both;
	width: 100%;
	height: 1px;
	margin: 0px;
	padding: 0px;
}
.clearfloat2 {
	background-color: transparent;
	width: 100%;
	height: 4em;
	clear: both;
}
.botspace, .privatebot {
	width: 100%; 
	height: 1em; 
	background: transparent; 
	clear: both
}
.fillintext {	
  background-color: #D5F3FD;
  color: #0299DE;
  width: 95%;
  max-width:600px;
  margin: 20px auto 0;
  min-height:160px;
  padding:2%;
  font-size: 1em;
  text-align: left;
}
.next1 {
	background-color: #EBF0F5;
	color: #0299DE;
	border: 1px solid #0299DE;
	border-radius: 2px 2px 2px 2px;
  -ms-border-radius: 2px 2px 2px 2px;
  -moz-border-radius: 2px 2px 2px 2px;
  -webkit-border-radius: 2px 2px 2px 2px;
  -khtml-border-radius: 2px 2px 2px 2px;  
   box-shadow: 2px 2px 3px #999;
   -webkit-box-shadow: 2px 2px 3px #999;
   -moz-box-shadow: 2px 2px 3px #999;
}

/* Form elements - ff is short for 'form field' */
.formholder{
	margin: 0 auto; 
	width: 100%;
	max-width: 440px;
}
.ffhead{
	float:left; 
	width:100%;
	padding: 0 0 2px;
}
.ffshort{
	float:left; 
	width:50%; 
	font-weight: bold;
	margin: 5px 0;
}
.fflong{
	float:left; 
	width: 97%; 
	font-weight: bold;
	margin: 5px 0;
}
.ffinput1{
	width: 100%;
	padding: 0 2px;
}
.question{
	font-family: Helvetica, Arial, sans-serif;
	padding: 0 2px;
}


/* ___________________  Media Queries Begin  ____________________  */

@media screen and (min-width: 585px) and (max-width:1008px) {
	
.nava {
	background-color: #5B5B5B;	
}
.tabholder {
	max-width:600px;
}
#middle {
	margin: 0;
}
.bodytext, .bodytext1 {
	padding-top: 35px;
}
}

@media screen and (min-width: 1009px)  {
#header1A {
	display:none;
}
#header1B {
	display:block;
	float: right;
	padding-top: 60px;
	background-color: transparent;
	color: #059A49;
	font-size: 1.4em;
	font-weight: normal;
	text-align: right;
}
.nava {
	/*position: static;*/
	height: 35px;
	background-color: #5B5B5B;	
}
.tabholder {
	background-color: transparent; 
	height: 35px;
	width:100%;
	/*max-width:600px;*/
	max-width:400px;
	margin: auto;
}
#middle {
	margin: 0;
}
.infobox1, .infobox2, .infobox3, .infobox4{
	float:left; 
	width: 15%;
	margin:0 5%; 
}
.boxholder1{
	top:20em; 
}
.bodytext {
	padding-top: 40px;
}
.bodytext1 {
	padding-top: 40px;
}
.privatebot{
	height: 14em;
}
#lower {
	height:180px;
}
#footerA {
	position: fixed; 
	left: 0px;
	bottom: 0px;
	height: 180px;
}
.displaytableA {	
	display: block;
	text-align: center; 
	color: #666666;
	padding: 1em;
	font-size: 1em; 
	width:90%;
	max-width: 1250px;
	margin: auto;
}
.displaytableB {display:none;}
}

@media screen and (min-width: 1500px)  {
#lower {height:80px;}
}

@media screen and (min-width: 585px) {

.ffshort{
	width:30%; 
	max-width: 130px; 
}
.fflong{
	width: 70%; 
	max-width: 300px;
}
}

/* Styles End  */