/* GLOBAL DEFAULT STYLES
------------------------- */
body         { margin:0; text-align:center; line-height:1.4; background:#FFF; color:#333;
               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 */

h2, h3, h4   { margin:0; color:#000; font-family:"Lucida Grande",arial,"Bitstream Vera Sans",sans-serif }
h1           { font-size:220%; line-height:1.2; margin-bottom:0.5em; color:;#555; letter-spacing:-0.03em } 
h2           { font-size:180%; line-height:1.2; margin-top:1.2em }
h3           { font-size:150%; line-height:1.3; margin-top:1.2em }
h4           { font-size:100%; line-height:1.3; font-weight: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   { font-style:italic }

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 }

table  { margin:0; border-collapse:collapse }
th, td { text-align:left; padding:0 1em; color:#000; margin:0 } /* white-space:nowrap; border:1px #ccc solid */
th     { font-weight:bold; padding-bottom:0.5em }


/* PAGE LAYOUT STYLES
---------------------- */
            .formwrap,
            .innerwrap { clear:both; margin:0 auto; padding:0; text-align:left; overflow:hidden; background:transparent } /* centers content */
          
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 #header { width:656px }
body.wide   #header { width:840px }
body.ultra  #header { width:1050px }

#header      { height:100px; margin:0 auto; border-bottom:2px solid #FFF; overflow:hidden }
  #logo      { float:left; width:385px; height:100px; background:url(../img/site/logo.jpg) no-repeat }
  #logo a    { display:block; width:385px; height:100px; border:none; background:transparent }
  #phone     { float:right; width:346px; height:100px; background:url(../img/site/phone.gif) no-repeat }

#smallheader             { height:100px; margin:0 auto; border-bottom:2px solid #FFF; overflow:hidden }  
body.normal #smallheader { width:440px }
body.wide   #smallheader { width:563px }
body.ultra  #smallheader { width:704px }
  
body.normal #navmenu   { width:656px }
body.wide   #navmenu   { width:840px }
body.ultra  #navmenu   { width:1050px }

/* Sidebar background is #EDE6E0 */ 
body.normal #columns { width:656px; background:url(../img/site/container-normal.gif) repeat-y }
body.wide   #columns { width:840px; background:url(../img/site/container-wide.gif) repeat-y }
body.ultra  #columns { width:1050px; background:url(../img/site/container-ultra.gif) 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 } 

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

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

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

body.ultra  #banleft  { float:left; width:704px }
body.ultra  #banright { float:right; width:346px }  
body.ultra  #content  { float:left; width:704px }
body.ultra  #sidebar  { float:right; width:346px }  

#cwsp        { margin:0; overflow:hidden; padding:0 2em 1em 0 } /* Secondary "no-width" whitespace divs avoid width problems with IE floated divs */
#swsp        { margin:0; overflow:hidden; padding:2em }

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

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

#buttonfree         { font-size:0px; line-height:0; margin:1.5em auto; overflow:hidden;
                      display:block; width:216px; height:58px; color:#E0ECF3; background:url(../img/site/button-estimate-off.gif) no-repeat }
#buttonfree a       { display:block; width:216px; height:58px; color:#E0ECF3; background:url(../img/site/button-estimate-off.gif) no-repeat }
#buttonfree a:hover { display:block; width:216px; height:58px; color:#E0ECF3; background:url(../img/site/button-estimate-on.gif) no-repeat }  

#buttoncontact         { font-size:0px; line-height:0; margin:1.5em auto; overflow:hidden;
                         display:block; width:216px; height:58px; background:url(../img/site/button-contact-off.gif) no-repeat }
#buttoncontact a       { display:block; width:216px; height:58px; background:url(../img/site/button-contact-off.gif) no-repeat }
#buttoncontact a:hover { display:block; width:216px; height:58px; height:58px; background:url(../img/site/button-contact-on.gif) no-repeat }  

#buttonfreehome                     { float:right; font-size:0; margin:0; line-height:0 }
#buttonfreehome a                   { display:block; margin:0; border:none }
body.normal #buttonfreehome         { width:216px; height:133px; background:url(../img/site/button-estimate-home-normal-off.jpg) no-repeat }
body.normal #buttonfreehome a       { width:216px; height:133px; background:url(../img/site/button-estimate-home-normal-off.jpg) no-repeat }
body.normal #buttonfreehome a:hover { width:216px; height:133px; background:url(../img/site/button-estimate-home-normal-on.jpg) no-repeat }  
body.wide   #buttonfreehome         { width:277px; height:171px; background:url(../img/site/button-estimate-home-wide-off.jpg) no-repeat }
body.wide   #buttonfreehome a       { width:277px; height:171px; background:url(../img/site/button-estimate-home-wide-off.jpg) no-repeat }
body.wide   #buttonfreehome a:hover { width:277px; height:171px; background:url(../img/site/button-estimate-home-wide-on.jpg) no-repeat }  
body.ultra  #buttonfreehome         { width:346px; height:214px; background:url(../img/site/button-estimate-home-ultra-off.jpg) no-repeat }
body.ultra  #buttonfreehome a       { width:346px; height:214px; background:url(../img/site/button-estimate-home-ultra-off.jpg) no-repeat }
body.ultra  #buttonfreehome a:hover { width:346px; height:214px; background:url(../img/site/button-estimate-home-ultra-on.jpg) no-repeat }  

#poolbrand h2                  { font-size:0; line-height:0 }
#poolbrand a                   { display:block; border:none }
body.normal #poolbrand         { width:216px; height:216px; margin:0; background:url(../img/edit/poolbrand-normal.jpg) no-repeat }
body.normal #poolbrand a       { width:216px; height:216px; background:url(../img/edit/poolbrand-normal.jpg) no-repeat }
body.normal #poolbrand a:hover { width:216px; height:216px; background:url(../img/edit/poolbrand-normal-on.jpg) no-repeat }
body.wide   #poolbrand         { width:277px; height:277px; margin:0; background:url(../img/edit/poolbrand-wide.jpg) no-repeat }
body.wide   #poolbrand a       { width:277px; height:277px; background:url(../img/edit/poolbrand-wide.jpg) no-repeat }
body.wide   #poolbrand a:hover { width:277px; height:277px; background:url(../img/edit/poolbrand-wide-on.jpg) no-repeat }
body.ultra  #poolbrand         { width:346px; height:346px; margin:0; background:url(../img/edit/poolbrand-ultra.jpg) no-repeat }
body.ultra  #poolbrand a       { width:346px; height:346px; background:url(../img/edit/poolbrand-ultra.jpg) no-repeat }
body.ultra  #poolbrand a:hover { width:346px; height:346px; background:url(../img/edit/poolbrand-ultra-on.jpg) no-repeat }

#solardhw h2                   { font-size:0; line-height:0 }
#solardhw a                    { display:block; border:none }
body.normal #solardhw          { width:216px; height:216px; margin:0; background:url(../img/edit/dhw-normal.jpg) no-repeat }
body.normal #solardhw a        { width:216px; height:216px; background:url(../img/edit/dhw-normal.jpg) no-repeat }
body.normal #solardhw a:hover  { width:216px; height:216px; background:url(../img/edit/dhw-normal-on.jpg) no-repeat }
body.wide   #solardhw          { width:277px; height:277px; margin:0; background:url(../img/edit/dhw-wide.jpg) no-repeat }
body.wide   #solardhw a        { width:277px; height:277px; background:url(../img/edit/dhw-wide.jpg) no-repeat }
body.wide   #solardhw a:hover  { width:277px; height:277px; background:url(../img/edit/dhw-wide-on.jpg) no-repeat }
body.ultra  #solardhw          { width:346px; height:346px; margin:0; background:url(../img/edit/dhw-ultra.jpg) no-repeat }
body.ultra  #solardhw a        { width:346px; height:346px; background:url(../img/edit/dhw-ultra.jpg) no-repeat }
body.ultra  #solardhw a:hover  { width:346px; height:346px; background:url(../img/edit/dhw-ultra-on.jpg) no-repeat }

#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          { height:2.4em; margin:0 auto; clear:both; font-size:90%; font-weight:bold; background:#007DC3; border-top:2px solid #FFF }
#navmenu ul       { display:inline; list-style:none }
#navmenu li       { float:left; margin:0; height:2.4em; border-right:2px solid #FFF; background:transparent } 
#navmenu li.first { margin-left:2.2em; border-left:2px solid #FFF }
#navmenu li.last  { } 
#navmenu a        { display:block; margin:0; padding:0.5em 1em; text-decoration:none;
                    background:#007DC3; color:#FFF }
#navmenu a:hover  { text-decoration:none; color:#FFF; background:#BA0404 }

/* 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   { color:#000; background:#FFF }

/* 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 { color:#FFF; background:#BA0404 }


/* 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:#C00; margin-bottom:-1em }
#dateline  { color:#090 }
#summary   { color:#06C }
#deck      { font:100%/1.4 "Lucida Grande",verdana,"Bitstream Vera Sans",sans-serif } 
#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. */

  .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:200; padding:0.5em 0 0.7em 2.2em; color:#FFF; background:#43AD16; letter-spacing:0 }
#formintro  { width:385px; 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:0 0 2em 0; padding:2em 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 }

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:80%; margin-right:2em; 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:#C00; 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 2em 1em 4em; background:#FDD; color:#C00 }
#errors p   { font-weight:bold }
#errors ul  { }
#errors li  { padding-bottom:0.2em }