/* GLOBAL DEFAULT STYLES
------------------------- */
body         { margin:0; text-align:center; line-height:1.4; background:#000; color:#FFF;
               font-family:"Lucida Grande",verdana,"Bitstream Vera Sans",sans-serif }  
#wrapper     { margin:0 auto; text-align:center; display:none } /* display:none reduces/prevents onload flicker */

            .formwrap,
            .innerwrap { clear:both; margin:0 auto; padding:0; text-align:left; overflow:hidden; background:transparent } /* centers content */
            .homewrap  { clear:both; margin:0 auto; padding:0; overflow:hidden } /* centers content */
          
body.normal .formwrap  { width:440px }
body.wide   .formwrap  { width:563px }
body.ultra  .formwrap  { width:704px }

body.normal .homewrap  { width:650px }
body.wide,
body.ultra  .homewrap  { width:760px }

body.normal .innerwrap { width:656px }
body.wide   .innerwrap { width:840px }
body.ultra  .innerwrap { width:1050px }

body.normal #header    { width:100%; height:96px; margin:0 auto; overflow:hidden }
body.normal #logo      { float:left; width:650px; height:82px; background:url(../img/site/logo-advanced-pool-656.jpg) no-repeat }
body.normal #logo a    { display:block; width:650px; height:82px; border:none; background:transparent }

body.wide #header      { width:100%; height:96px; margin:0 auto; overflow:hidden }
body.wide #logo        { float:left; width:760px; height:96px; background:url(../img/site/logo-advanced-pool-1050.jpg) no-repeat }
body.wide #logo a      { display:block; width:760px; height:96px; border:none; background:transparent }

body.ultra #header     { width:100%; height:96px; margin:0 auto; overflow:hidden }
body.ultra #logo       { float:left; width:760px; height:96px; background:url(../img/site/logo-advanced-pool-1050.jpg) no-repeat }
body.ultra #logo a     { display:block; width:760px; height:96px; border:none; background:transparent }

body.normal .formwrap  { width:440px }
body.wide   .formwrap  { width:563px }
body.ultra  .formwrap  { width:704px }

body.normal .innerwrap { width:656px }
body.wide   .innerwrap { width:840px }
body.ultra  .innerwrap { width:1050px }

body.normal #columns { width:656px; background:url(../img/site/container-656.jpg) repeat-y }
body.wide   #columns { width:840px; background:url(../img/site/container-840.jpg) repeat-y }
body.ultra  #columns { width:1050px; background:url(../img/site/container-1050.jpg) repeat-y }

#banner      { width:100%; margin:0 auto; clear:both }
#container   { width:100%; margin:0 auto; clear:both }
  #sidebar   { color:#000; overflow:hidden }
  #content   { margin-top:1em; overflow:hidden; background:#EBEBEB } 

#footer      { width:100%; margin:0 auto; clear:both }
#footer p    { margin-top:0; padding-top:2em; border-top:1px solid #CCC }  

body.normal #banleft  { float:left; width:216px }
body.normal #banright { float:right; width:440px }
body.normal #sidebar  { float:left; width:216px }
body.normal #content  { float:right; width:440px }

body.wide   #banleft  { float:left; width:277px }
body.wide   #banright { float:right; width:563px }
body.wide   #sidebar  { float:left; width:277px }
body.wide   #content  { float:right; width:563px }

body.ultra  #banleft  { float:left; width:346px }
body.ultra  #banright { float:right; width:704px }  
body.ultra  #sidebar  { float:left; width:346px }
body.ultra  #content  { float:right; width:704px }  
 
#cwsp        { color:#000; margin:0; overflow:hidden; padding:0 3em 1em 3em } /* Secondary "no-width" whitespace divs avoid width problems with IE floated divs */
#swsp        { margin:0; overflow:hidden; padding:1em }

#dialog,
#smallform   { margin:10% auto; padding:0 }
#bigform     { margin:5% auto; padding:0 }

a:link             { color:#00F; text-decoration:none }
a:visited          { color:#639; text-decoration:none }
a.textlink:link,
a.textlink:visited { text-decoration:underline }
a:hover,
a:visited:hover    { color:#00F; background:#FFC; text-decoration:underline }

.reverse a:link    { color:#FFF; text-decoration:underline }  
.reverse a:hover   { font-weight:bold }  

#contact                        { width:100%; margin:0 auto }
#contactphone                   { float:left; margin:0; font-size:0; line-height:0; overflow:hidden }
#contactbutton                  { float:right; margin:0; overflow:hidden }  
#contactbutton a                { display:block; margin:0; font-size:0; line-height:0; color:#000; border:none; text-decoration:none }

body.normal #contact            { height:60px }
body.wide   #contact            { height:73px }
body.ultra  #contact            { height:90px }

body.normal #contactphone       { width:440px; height:60px; background:url(../img/site/contact-phone-656.gif) no-repeat }
body.wide   #contactphone       { width:570px; height:73px; background:url(../img/site/contact-phone-840.gif) no-repeat }
body.ultra  #contactphone       { width:700px; height:90px; background:url(../img/site/contact-phone-1050.gif) no-repeat }

body.normal #contactbutton         { width:200px; height:60px; background:url(../img/site/contact-button-off-656.jpg) no-repeat }
body.normal #contactbutton a       { width:200px; height:60px; background:url(../img/site/contact-button-off-656.jpg) no-repeat }
body.normal #contactbutton a:hover { width:200px; height:60px; background:url(../img/site/contact-button-on-656.jpg) no-repeat }  

body.wide   #contactbutton         { width:250px; height:73px; background:url(../img/site/contact-button-off-840.jpg) no-repeat }
body.wide   #contactbutton a       { width:250px; height:73px; background:url(../img/site/contact-button-off-840.jpg) no-repeat }
body.wide   #contactbutton a:hover { width:250px; height:73px; background:url(../img/site/contact-button-on-840.jpg) no-repeat }  

body.ultra  #contactbutton         { width:310px; height:90px; background:url(../img/site/contact-button-off-1050.jpg) no-repeat }
body.ultra  #contactbutton a       { width:310px; height:90px; background:url(../img/site/contact-button-off-1050.jpg) no-repeat }
body.ultra  #contactbutton a:hover { width:310px; height:90px; background:url(../img/site/contact-button-on-1050.jpg) no-repeat }  


#sidebar a   { font-weight:bold }

h1, h2, h3, h4 { margin:0; color:#000; line-height:1.3; font-family:"Lucida Grande",arial,"Bitstream Vera Sans",sans-serif }
h1           { font-size:300%; margin-bottom:0.5em; color:#0078FD } 
h2           { font-size:180%; margin-top:1.2em; color:#0078FD }
h3           { font-size:150%; margin-top:0.5em; color:#0078FD }
h4           { font-size:100%; margin-bottom:0 }

ul           { list-style:disc }  
ul li        { margin-bottom:0 }  
ul.nested    { margin-bottom:1em; list-style:inherit } 
ul.nested li { margin-bottom:0 }
ol h4 li     { list-style-position:outside; margin-left:-18px; padding:0 }
ol p         { margin-left:-3em }

img          { display:block } 
hr           { margin:1em 0; color:#CCC }
pre          { font:1.1em/1.25 courier, "courier new"; padding:1em; background:#F3F3F3; color:#00F }
tt           { font:bold 1em courier, "courier new", monospace }
blockquote   {  }

dt           { display:inline; font-weight:bold; margin:0; padding-right:0.5em } /* glossary formatting */
dd           { display:inline; margin:0; padding:0 }  
dd a:link:visited: { color:#00F }

#homebanner    { width:760px; height:320px; margin:0 auto }
#homefooter    { width:760px; color:#FFF; margin:0 auto; padding-top:1em; padding-bottom:2em; border-top:1px solid #999; text-align:right }
#homefooter a  { color:#F4F492; background:none; text-decoration:none }
#homefooter a:hover { color:#81BCFD; text-decoration:underline }


.menuhome   { list-style:none; margin:0 auto }
.menuhome a { position:relative; cursor:default }
.menuhome a .zoom { display: none }
.menuhome a:hover { display:block; font-size:100%; z-index:1 }
.menuhome a:hover .zoom { display:block; position:absolute; top:-40px; left:-50px; z-index:100; overflow:visible }
.menuhome img   { background:#fff; border:none; margin:0; padding:0; vertical-align:top; width:120px }
.menuhome ul    { margin:0; padding:0 }
.menuhome li    { position:relative; float:left; display:inline; margin:0; padding:0 }
.menuhome .zoom { width:250px }

.gallery   { cursor:default; list-style:none; margin-left:-30px; margin-right:30px }
.gallery a { position:relative; cursor:default }
.gallery a .zoom { display: none }
.gallery a:hover { display:block; font-size:100%; z-index:1 }
.gallery a:hover .zoom { display:block; position:absolute; top:-80px; left:-50px; z-index:100; overflow:visible }
.gallery img { background:#FFF; border:1px solid #EBEBEB; color:inherit; padding:2px; vertical-align:top; width:173px }
.gallery li  { background:#EBEBEB; color:inherit; display:inline; float:left; margin:3px; padding:3px; position:relative }
.gallery .zoom { width:346px }


table   { margin:0; border-collapse:collapse }
th, td  { text-align:left; padding:0.5em; color:#000; margin:0; border:1px solid #999 } /* white-space:nowrap; border:1px #ccc solid */
th      { background:#333; color:#FFF }
.grid   { margin:2em 0; border:1px solid #999 }
.number { text-align:right }

.LPform   { width:160px; height:79px; margin:0; padding:0; border:none; font-family:Arial, Helvetica, sans-serif; font-size:11px }
.LPbg     { margin:0; padding:0; border:none }
#LPsubmit { width:75px; height:22px; margin:0; padding:0; border:none }
#liveone table, #livetwo table, #livethree table, .LPform table, .LPbg table, #LPsubmit table { border:none }
#liveone tr, #livetwo tr, #livethree tr, .LPform tr, .LPbg tr, #LPsubmit tr { border:none }
#liveone td, #livetwo td, #livethree td, .LPform td, .LPbg td, #LPsubmit td { border:none }

#phone p,
#logo p,
#dealer p,
#headline h1 { font-size:0; line-height:0; color:#FFF; margin-left:-10000px } /* hidden elements */
#deck h2     { font-family:georgia,times,serif; font-size:200%; line-height:1.2; font-weight:normal; font-style:italic; color:#999 }

h2.news      { margin-top:1em }
h2.questions { margin-top:1.2em; margin-bottom:-0.5em }
.listing     { margin:0; padding:2em 1em }
.photobox    { padding:0.75em; margin:1em 0 0.5em 0 }
.clr         { clear:both }
.hide        { display:none }

/* PRIMARY NAVIGATION MENU
--------------------------- */
#access           { left:-10000px; visibility:hidden; width:0; height:0 }
#navmenu          { width:90%; margin:0 }
#navmenu ul       { list-style:none }
#navmenu li       { margin:0; border-bottom:1px solid #CCC } 
#navmenu li.last  { border-bottom:none } 
#navmenu a        { display:block; margin:0; font-size:110%; font-weight:normal; padding:1em; text-decoration:none; color:#0078FD }
#navmenu a:hover  { text-decoration:none; color:#FFF; background:#0078FD }

/* Descendant selectors for current page tab
--------------------------------------------- */
body#s1 #tab1 a, 
body#s2 #tab2 a, 
body#s3 #tab3 a,
body#s4 #tab4 a,
body#s5 #tab5 a,
body#s6 #tab6 a,
body#s7 #tab7 a, 
body#s8 #tab8 a, 
body#s9 #tab9 a, 
body#s10 #tab10 a, 
body#s11 #tab11 a, 
body#s12 #tab12 a, 
body#s13 #tab13 a, 
body#s14 #tab14 a   { color:#FFF; background:#0078FD }

/* Descendant selectors for current page tab hover state
--------------------------------------------------------- */
body#s1 #tab1 a:hover, 
body#s2 #tab2 a:hover, 
body#s3 #tab3 a:hover,
body#s4 #tab4 a:hover, 
body#s5 #tab5 a:hover,
body#s6 #tab6 a:hover, 
body#s7 #tab7 a:hover, 
body#s8 #tab8 a:hover,  
body#s9 #tab9 a:hover,  
body#s10 #tab10 a:hover,  
body#s11 #tab11 a:hover,  
body#s12 #tab12 a:hover,  
body#s13 #tab13 a, 
body#s14 #tab14 a:hover { color:#FFF; background:#1BB706 }


/* SCREEN-BASED LAYOUT WIDTHS
   Descendant div layout width changes by body class
   For box layout, must declare body class-specific em widths for header, container and footer
----------------------------------------------------------------------------------------------- */
body.basic .innerwrap,
body.basic .formwrap   { clear:both; padding:0 1em }
body.basic #banright   { display:none }
body.basic #header     { height:190px }
body.basic #logo,
body.basic #phone      { float:none; clear:both; width:100; height:95px; overflow:visible }
body.basic #topmenu,
body.basic #navmenu,
body.basic #container,
body.basic #content,
body.basic #sidebar    { clear:both; width:100%; padding:0 }
body.basic #sidebar h2 { margin-top:1em }
body.basic #columns    { background:none }
body.basic #dialog,
body.basic #bigform,
body.basic #smallform  { width:100%; padding:0 }
body.basic #cwsp,
body.basic #swsp       { padding:0 }
body.basic #navmenu          { height:auto; margin:1em; font-size:100%; font-weight:normal; background:#FFF; border:none }
body.basic #navmenu ul       { display:block; list-style:none }
body.basic #navmenu li       { float:none; margin:0; height:1.6em; border:none } 
body.basic #navmenu li.first { margin:0; padding:0; border:none }
body.basic #navmenu li.last  { } 
body.basic #navmenu a        { display:inline; text-decoration:underline; background:#FFF; color:#00F }
body.basic #navmenu a:hover  { text-decoration:underline; background:#FFC; color:#00F }

body.normal #dialog,
body.wide   #dialog,
body.ultra  #dialog    { width:40em }

body.normal #smallform,
body.wide   #smallform,
body.ultra  #smallform { width:48em }

body.normal #bigform,
body.wide   #bigform,
body.ultra  #bigform   { width:62em }


/* IMAGE FORMATTING 
------------------- */
.incolumnright { float:right; margin:0 20px 10px 20px }
.incolumnleft  { float:left; margin:0 20px 10px 0 }


/* TEXT FORMATTING 
------------------- */
#byline    { color:#F00; margin-bottom:-1em }
#dateline  { color:#090 }
#summary   { color:#06C }
#deck      { font:italic 240%/1.3 georgia, palatino, serif; margin-top:-0.5em; margin-bottom:1em; color:#999 }
#caption   { margin-bottom:2em; font-style:italic; width:90% }
#abstract  { }
#promo     { margin:1em 0 2em 0; padding:1em 2em; background:#F8F8E2; border:1px solid #CCC }
#promo h2  { color:#D5481E }

.alpha     { visibility:hidden; margin:0; padding:0 } /* glossary section headings */
.dropcap   { display:block; float:left; font:bold 400% Georgia,Palatino,serif; color:#C00; margin:-0.25em 0; letter-spacing:0.05em }
.firstline,
.legalcaps { text-transform:uppercase }

.slug      { font:80%/1 Arial,Helvetica,san-serif; text-transform:uppercase; font-weight:100; margin-bottom:-1em; color:#999 }
.itemlead  { font-weight:bold }
.question  { font-weight:bold; margin-top:2em; padding-top:1em; border-top:1px solid #CCC }
.answer    { margin-top:-1em }
.qnalead   { font:bold 150% Georgia,Palatino,serif; color:#CCC; letter-spacing:-0.1em } 
.rowheader { font-weight:bold }
.highlight { background-color:#FFC }
.php       { color:#C00 }
.comment   { color:#090 }
.delete    { text-decoration:line-through } /* line-thru for galleys and simply deleted for publication. */
.source    { text-align:right; padding-right:3em; margin-bottom:2em }

  .footnote { font-size:85%; margin-bottom:1em }
h2.footnote { font-size:160%; line-height:1.2; margin-top:2em; margin-bottom:0.67em; padding-top:1em; border-top:1px solid #CCC }


.biglist     { margin-right:4em; margin-bottom:0.5em } .biglist li { margin-bottom:0.5em }
.biglistside { margin-right:0; margin-bottom:0.5em } .biglistside li { margin-bottom:0.5em }

.pullquote { font:160%;/1.3 Georgia,Palatino,"Times New Roman",Times,serif; font-style:italic; padding:1em 2em; color:#555; background:#FAFAFA }
.callout   { width:38%; float:right; font-size:130%; line-height:1.4; margin:0.5em 0 2em 1em; padding:2em; color:#900; background:#EEE }
.callout a { color:#900; text-decoration:none }

.fontMenu  { text-align:right; margin-bottom:1em }
.fontMenu a:visited { color:#00F }

#thanknote  { width:385px; margin-top:2em; margin-left:4em; margin-bottom:3em }
#legaltext  { margin:2em 3em 3em 4em }


/* FORM ELEMENTS
----------------- */
form        { width:100%; margin:0 auto; padding:0 0 3em 4em }
#formhead   { display:block; margin:0; font-size:180%; font-weight:100; padding:0.5em 0 0.7em 2.2em; color:#FFF; background:#C1CDB2; letter-spacing:0 }
#formintro  { width:80%; margin-top:1em }
form p      { margin:0; padding:1em 4em 1em 0 }
form p.only { margin:1.5em 0 }
fieldset    { margin:0 2em; border:none }
fieldset p  { margin:0; padding:0 1em 0.5em 0.8em }
legend      { font-size:110%; font-weight:bold; margin:0; padding:0 0.5em }
.legendnote { font:normal 65% "Lucida Grande",verdana,"Bitstream Vera Sans",sans-serif }
.radio      { width:70%; margin:2em 0; padding:2em 1em 1em 1.5em; background:#FFF;
              border-top:2px solid #555; border-left:2px solid #555; border-bottom:1px solid #CCC; border-right:1px solid #CCC;}

fieldset.radio p     { margin-top:-1.4em; margin-left:2em; line-height:1.5em }  
.radiobutton         { margin:5px 0; padding:0 }

input, select, option, textarea { font:100%/1.3 "Lucida Grande",verdana,"Bitstream Vera Sans",sans-serif; color:#000 }    
select, option, #logofile       { height:1.8em; line-height:1.2 }

textarea    { width:75%; margin-right:3em; padding:0.5em } 
label.col   { float:left; clear:left; width:160px; margin-top:0.2em; padding:0 10px; text-align:right } /* Match width */
label.row   { display:block; margin-top:0.5em; margin-bottom:0.1em; padding:0 }
label.left  { width:100%; padding-left:2em }
label.right { margin-left:14.5em; white-space:nowrap }
input       { margin:0; padding:0.3em }
checkbox    { display:inline; padding:0 }
#submit     { display:block; margin-top:1.5em; padding:0.3em 1.2em; font-weight:bold; font-size:110%; background:#95DF02; color:#FFF }
.formgrid   { margin:0 4em } 

.fieldnote  { display:block; margin:0 2em 0.5em 15.2em } /* Match padding-left to label width, plus */
#dialog .fieldnote,
#smallform .fieldnote { margin-left:14.1em }
.formlinks  { text-align:right; margin:1em 2em -1.5em 0 }
.require    { font-weight:bold; color:#C00 }

/* Form errors display must be declared after the form element styles
---------------------------------------------------------------------- */
#errors     { margin:0; padding:1em 0 1em 4em; background:#FDD; color:#C00 }
#errors p   { font-weight:bold }
#errors ul  { }
#errors li  { padding-bottom:0.2em }