/** STYLES 
    Created 2007/02/25
    Updated 2009/09/07
    Author: Jeffrey Prutsman
    Copyright (c)2007-2009 Signal Strategy Group LLC
    All rights reserved. Adaptation allowed under MIT License with attribution.

    1.0  GLOBAL RESET
    2.0  HTML TAGS
    3.0  TABLES
    4.0  PAGE LAYOUT
    5.0  TYPOGRAPHY 
    6.0  NAVIGATION MENUS
    7.0  FORM ELEMENTS
    8.0  REPLACED ELEMENTS
    9.0  IMAGE GALLERY
    */


/** 1.0 GLOBAL RESET
    @tutorial  Operating system default button appearance is best practice for usability. 
    @tutorial  Do not globally reset background:transparent and border-style:none because 
               this wipes out operating system default button appearance.
------------------------------------------------------------------------------------------------- */
* { margin:0; padding:0; outline:0; outline:none; vertical-align:baseline; text-decoration:none }

img       { display:block } 
img, abbr { border:0 }
caption   {	text-align:left	}
a img     { border:none }
:focus    { outline:0 }



/** 2.0 HTML TAGS
---------------------------------------------------------------------------- */
body { font-family:verdana,"Lucida Grande","Bitstream Vera Sans",sans-serif;
       font-size:12px; line-height:1.6; background:#444; color:#FFF }

a:link    { color:#0671A6; text-decoration:none }
a:visited { color:#A6067E; text-decoration:none }
a:hover, 
a:visited:hover { color:#007DC3; text-decoration:underline }

h1, h2, h3, h4, h5, h6 { font-family:arial, helvetica, "Bitstream Vera Sans", sans-serif }
h1 { font-size:240%; padding-top:1em; margin-bottom:0; line-height:1.2 } 
h2 { font-size:180%; margin-top:1.2em; margin-bottom:1em; line-height:1.2; font-weight:bold }
h3 { font-size:150%; margin-top:1.5em; margin-bottom:0.5em; font-weight:bold }
h4 { font-size:120%; font-weight:bold }

big    { font-size:1.17em }
small  { font-size:0.83em }
em     { font-style:italic }
strong { font-weight:bold }

abbr, acronym { font-variant:normal }		
address, caption, cite, code, kbd, samp, pre, tt, var, isindex, 
listing, xmp, plaintext, textarea, input, select { font-size:1em; font-style:normal; white-space:normal }

pre  { font:1.1em/1.25 courier, "courier new", monospace; padding:1em; background:#F3F3F3; color:#00F }
tt   { font:bold 1em courier, "courier new", monospace }
font { font:inherit !important; color:inherit !important }

p            { margin-bottom:1em }
blockquote   { padding:0 2em 1.5em }

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



/** 3.0 TABLES
--------------------------------------------------------------------------- */
table      { margin-left:20px; border-collapse:collapse; border-spacing:0 }
th         { font-weight:bold; text-align:center; color:#15206D; background:#EBEBEB }
th, td     { text-align:left; padding:0.5em; color:#15206D; border:1px solid #CCC } /* white-space:nowrap; border:1px #ccc solid */
.n         { text-align:right } /* right-aligned number */
.neg       { color:#C00 } /* negative number */
.grid      { margin:2em 0; border:1px solid #CCC }
.rowdark   { background:#F0E9DA }
.rowlight  { background:#FFF }
.rowheader { font-weight:bold; background:#480303; color:#FFF }



/** 4.0 PAGE LAYOUT
    @tutorial  DIVs default to 100% width of immediate hierarchical parent containers.
    @tutorial  Internet Explorer requires a text-align:center declaration on parent DIVs
               to pin child DIVs to the middle of the page. Declaring text-align:left on
               a child DIV (e.g. the .spread class) correctly justifies text. 
    @tutorial  Avoiding explicit margins for container DIVs minimizes IE6 box model problems.  
    @tutorial  For a repeat-y background image to render correctly in a variable height
               container, a clearing DIV is necessary inside the bottom of the variable 
               height container.  
    @tutorial  A thin background GIF can provide matching height column background
               color without resorting to JavaScript. Also, placing 50-60px of padding
               at the bottom of the footer will typically be sufficient to stretch the
               footer background to the bottom of the screen.
    @tutorial  Photoshop drop shadow border settings: Opacity 70%, Angle 90, Distance 6, Spread 8, Size 25
----------------------------------------------------------------------------------------------------------- */
#wrapper { text-align:center }
#header  { height:120px; margin-top:28px; background:url(../img/site/bg-header.jpg) 50% 0 no-repeat }
#banner  { height:240px; background:url(../img/site/bg-middle.jpg) 50% 0 repeat-y }
#banner-special  { height:575px; background:url(../img/site/bg-middle.jpg) 50% 0 repeat-y }

#navmenu, #navmenu-home, #submenu { height:28px; background:url(../img/site/bg-middle.jpg) 50% 0 repeat-y }
#navmenu .eight, #submenu .eight  { height:28px }

#content { background:url(../img/site/bg-middle.jpg) 50% 0 repeat-y }
#title   { font-size:240%; margin-bottom:0.5em }
#deck    { font:normal 160%/1.3 georgia, palatino, serif; margin-left:0; margin-top:0.5em }
#summary { color:#06C }
#feature { background:#FFF; color:#444 }
#sidebar { margin:11px 18px; padding-bottom:46px; background:#ebebeb; color:#000; border:1px solid #CCC }	
#footer  { font-size:11px; padding-top:30px; padding-bottom:60px; background:url(../img/site/bg-footer.jpg) 50% 0 no-repeat }
#action  { } /* e.g. feature tour and signup buttons integrated with banner */


/** PAGE LAYOUT: Directional Classes
------------------------------------------ */
.spread { margin:0 auto; text-align:left }
.left   { float:left }
.right  { float:right }


/** PAGE LAYOUT: Content Fixed Height Classes
---------------------------------------------- */
.tower2 { height:388px }
.tower3 { height:582px }


/** PAGE LAYOUT: Grid Width Classes
------------------------------------ */
.one   { width:120px }
.two   { width:240px }
.three { width:360px }
.four  { width:480px }
.five  { width:600px }
.six   { width:720px }
.seven { width:840px }
.eight { width:960px }


/** PAGE LAYOUT: Whitespace Padding and Border Classes
    Inner "no-width" whitespace DIVS reduce box model width problems in IE6 
---------------------------------------------------------------------------- */
.pad11 { padding:0 11px }
.pad18 { padding:0 18px }
.pad28 { padding:0 28px }
.pad46 { padding:0 46px }
.pad74 { padding:11px 74px 28px; color:#333; background:#EBEBEB }

.pad100 { padding:30px 100px }
.pad130 { padding:0 128px }

        /* padding for tower classes */
.pad286 { padding:18px 28px 0 286px }
.pad406 { padding:18px 28px 0 406px }

.border1  { border:solid 1px #DDD }
.border5  { border:solid 5px #DDD }
.divider  { margin:24px 0 18px 0; border-top:1px solid #DDD }
.noborder { border:0 none }
.spacer   { margin:8px 0 6px }


/** PAGE LAYOUT: Image Classes
-------------------------------------------------------------------- */
.imagebox     { padding:0.75em; margin:1em 0 0.5em; background:#FFE}
.image .left  { margin-right:0 }
.image .right { margin-left:0 }
.outset       { margin-left:-140px }
.inright      { float:right; margin:0 20px 10px 20px }
.inleft       { float:left; margin:0 20px 10px 0 }


/** PAGE LAYOUT: Generic Layout Classes
---------------------------------------- */
.clear  { clear:both }
.cleft  { clear:left }
.cright { clear:right }
.block  { display:block }
.inline { display:inline }


/** PAGE LAYOUT: Secondary Pages
--------------------------------- */
#pageMask { 
  background:#000 repeat; height:100%; width:100%; 
  position:fixed; top:0; left:0; z-index:20;
  opacity:0.75; -moz-opacity:0.75;
  filter:alpha(opacity=75);
  display:none;
  }

.page {
  width:84%; margin:0 auto; background:#FFF; color:#444; 
  font:12px/1.4 verdana; 
  position:absolute; top:100px; left:8%; 
	z-index:50;
  display:none
  }
.page h1     { padding-top:0.5em }
.page strong { color:#000 }

.greenbar   { width:100%; height:40px; padding-top:20px; background:#F4F4F0 }
.greenbar p { font:bold 18px; margin-left:100px; color:#76B934 }

	
/** 5.0 TYPOGRAPHY
---------------------- */
.tower2 p, .tower2 ul,
.tower3 p, .tower3 ul  { font:normal 16px/1.6 verdana, palatino, serif }  
.tower2 ul, .tower3 ul { padding-left:28px } 
.tower2 p.pcaption, .tower3 p.pcaption { font-style:italic; font-size:12px; line-height:1.5; margin-top:3em }

.alert     { background:#FDD; color:#C00 }
.answer    { margin-top:-1em }
.byline    { margin-bottom:-1em }
.center    { text-align:center }
.comment   { color:#090 }
.compare   { margin-top:2em; padding-top:1em; border-top:1px solid #CCC }
.dateline  {  }
.delete    { text-decoration:line-through } /* line-thru for galleys; deleted by CMS for publication. */
.dropcap   { display:block; float:left; font:bold 400% Georgia,Palatino,serif; margin:-0.25em 0; letter-spacing:0.05em; color:#C00 }
.exclaim   { text-transform:uppercase } 
.firstline { text-transform:uppercase }
.highlight { background:#FFC }
.listing   { margin:0; padding:2em 1em }
.itemlead  { font-weight:bold }
.justify   { text-align:justify }
.legalcaps { text-transform:uppercase }
.php       { color:#C00 }
.question  { font-weight:bold; margin-top:2em; margin-right:2em; padding-top:1em }
.slug      { font:80%/1 Arial,Helvetica,san-serif; text-transform:uppercase; font-weight:100; margin-bottom:-1em; color:#999 }
.source    { text-align:right; padding-right:3em; margin-bottom:2em }

.biglist        { margin-left:1.1em; margin-right:3em; margin-bottom:1em } 
.biglist li     { margin-bottom:0.5em }
.biglistside    { margin-right:0; margin-bottom:0.5em } 
.biglistside li { margin-bottom:0.5em }

.callout   { width:38%; float:right; font-size:130%; line-height:1.4; margin:0.5em 0 2em 1em; padding:2em; background:#EEE; color:#900 }
.callout a { color:#900; text-decoration:none }

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


/** TYPOGRAPHY: Nonstandard Links
------------------------------------------------ */
.textlink { font-weight:bold }
.fontmenu { margin-bottom:18px; text-align:right }
.fontmenu a:visited { color:#007DC3 }
.banlink  { color:#00F; font-style:normal; text-decoration:underline } /* psuedo link text for affordance signaling inside tooltips */

#access { margin:0; font-size:0; line-height:0 }

a.lowcontrast { color:#FDE801; background:transparent }
a.lowcontrast { font-weight:bold; text-decoration:none }
a:hover.lowcontrast { text-decoration:underline }

#content .lowcontrast a { color:#FDE801; background:transparent }
#content .lowcontrast a { font-weight:bold; text-decoration:none }
#content .lowcontrast a:hover { text-decoration:underline }

#footer .lowcontrast a { color:#FDE801; background:transparent }
#footer .lowcontrast a { font-weight:bold; text-decoration:none }
#footer .lowcontrast a:hover { text-decoration:underline }


/** TYPOGRAPHY: Glossary Formatting
----------------------------------------------- */
.alpha { margin:0; font-size:0; line-height:0 } /* section headings */
dt { display:inline; font-weight:bold; padding-right:0.5em }
dd { display:inline }  
dd a:link:visited { color:#00F }



/** 6.0 NAVIGATION MENUS
------------------------- */
#navmenu-home,
#navmenu .eight  { background:url(../img/site/menu-gradient.jpg) repeat-x }

#navmenu-home    { width:705px; margin:0 auto; font-size:12px; font-weight:bold; clear:both }
#navmenu-home ul { display:inline; list-style:none }
#navmenu-home li { display:block; float:left } 
#navmenu-home a  { display:block; padding:4px 15px 5px; text-decoration:none; color:#000; background:url(../img/site/menu-gradient.jpg) repeat-x }
#navmenu-home a.first { padding-left:18px }
#navmenu-home a:hover { text-decoration:none; color:#000; background:#FFF }

#navmenu         { font-size:12px; font-weight:bold }
#navmenu ul      { display:inline; list-style:none; background:transparent }
#navmenu li      { display:block; float:left } 
#navmenu a       { display:block; padding:4px 12px 4.5px; text-decoration:none; color:#000; background:url(../img/site/menu-gradient.jpg) repeat-x }
#navmenu a.first { padding-left:18px }
#navmenu a:hover { text-decoration:none; color:#000; background:#FFF }

body#s1 #tab1 a, 
body#s2 #tab2 a,
body#s3 #tab3 a,
body#s4 #tab4 a { color:#000; background:#F4F4F4 } /* Descendant selectors for current page section tab */
 
#tab5 a { color:#FFF; background:#F00 }
#tab5 a:hover { color:#FFF; background:#F90 }


/* NAVIGATION: Submenu Bar
----------------------------------- */
#submenu         { font-size:11px }
#submenu ul      { display:inline; list-style:none }
#submenu li      { float:left } 
#submenu a       { display:block; padding:4px 12px; font-weight:bold; text-decoration:none }
#submenu a:hover { background:none; text-decoration:underline }
#submenu a.first { padding-left:18px }
#submenu a.last  { border-right:none }

#submenu .eight, #submenu a { background:#F4F4F4 }

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 { font-weight:bold }



/** 7.0 FORMS
----------------- */
form          { }
form h1       { margin:0; padding:15px 33px 0; font-size:200%; font-weight:bold }
form a:link   { text-decoration:underline }

fieldset      { display:block; margin:10px 20px 20px; padding:10px 20px 20px;
                border-radius:14px; -webkit-border-radius:14px; -moz-border-radius:14px }
fieldset.left { float:none; padding-top:24px } /* float:none cancels generic .left class float */
legend        { font-size:120%; font-weight:bold; padding:0 30px }

form p, form li, label, button, 
submit, input, select, textarea { font-size:100%; line-height:1.3 }
option { font-size:100%; line-height:1.3 } /* option inheritance is relative to select */

#formintro { display:block; padding:10px 24px 15px }
.element   { padding:5px 5px 8px; background:#F0F0F0; margin-bottom:10px; border:1px solid #DDD }


/** FORMS: Label Classes
------------------------------- */
label       { display:block }
label.above { margin-top:1em; line-height:1.3 }
label.left  { clear:left; text-align:right; width:140px; margin-top:0.5em; padding-right:10px }
label.check,
label.radio { margin-left:33px }
.checkleft,
.radioleft  { margin-left:150px }


/** FORMS; Input Field Classes
-------------------------------------------------------------------------------------- */
input, select, textarea { margin-top:5px; padding:0.2em; color:#000; background:#FFF }

input.xsmall, select.xsmall { width:33px  }
input.small,  select.small  { width:70px  }
input.medium, select.medium, textarea.medium { width:140px }
input.wide,   select.wide, textarea.wide     { width:280px }
input.xwide,  select.xwide, textarea.xwide   { width:420px }
input.xxwide, select.xxwide, textarea.xxwide { width:560px }

.formgrid    { margin:0 4em } 
.fieldnote   { width:100%; font-style:italic; line-height:1.2; margin-top:5px; margin-bottom:18px }
.legendnote  { font-weight:normal; font-size:65% }
.require     { font-weight:bold; color:#C00 }

form h1.left { float:none; margin:28px 0 0 118px }
form p.left  { float:none; margin-left:151px }


/** FORMS: Button Appearance 
----------------------------------------------------- */
button       { padding:0.2em 1em 0.5em; cursor:hand }
#submit      { margin:1em 0 1.5em 0 }
#submit.left { margin-left:149px }


/** FORMS: Form error display
    @tutorial  These styles must be declared AFTER the form element styles
--------------------------------------------------------------------------- */
#errors    { margin:0; padding:15px 30px; background:#FDD; color:#C00 }
#errors p  { font-weight:bold }
#errors ul { margin-left:18px; margin-top:0; padding-top:0 }
#errors li { padding-bottom:0.2em }



/** 8.0 REPLACED ELEMENTS 
    @tutorial  Placing a second "off" state image for a :hover effect within the parent  
               containing DIV minimizes or prevents :hover image load delay and flicker.  
    @tutorial  Correct operation of the a:hover span effect in IE requires that position:relative
               be declared ONLY for the a:hover immediate hierarchical parent and not any ancestor.
---------------------------------------------------------------------------------------------------- */
#intro        { margin:0; font-size:0; line-height:0; height:0; margin-right:20000px; color:#444 }	
#logo         { height:110px; background:url(../img/site/logo-ensun-yellow.gif) no-repeat }
#logo a       { display:block; float:left; width:360px; height:115px; background:url(../img/site/logo-ensun-yellow.gif) no-repeat }
#phone        { float:right; width:300px; height:110px; background:url(../img/site/phone-ensun-yellow.gif) top right no-repeat }

#logo h1, #logo p, #logo a,
#phone p, #logo p { font-size:0; line-height:0; color:#000; margin:0 }	



/* REPLACED ELEMENTS: Home Page Collage
---------------------------------------- */
#home-b, #home-b-left, #home-b-right, 
#home-b1, #home-b1 a, #home-b1 a:hover, 
#home-b2, #home-b2 a, #home-b2 a:hover, 
#home-b3, #home-b3 a, #home-b3 a:hover, 
#home-b4, #home-b4 a, #home-b4 a:hover, 
#home-b5, #home-b5 a, #home-b5 a:hover, 
#home-b6, #home-b6 a, #home-b6 a:hover { display:block }

#home-b1 a, #home-b2 a, 
#home-b3 a, #home-b4 a, 
#home-b5 a, #home-b6 a { display:block; outline:none; text-decoration:none; margin:0; font-size:0; line-height:0 }

#home-b1 a span, #home-b2 a span, 
#home-b3 a span, #home-b4 a span, 
#home-b5 a span, #home-b6 a span { display:none }


#home-b1 a:hover, #home-b2 a:hover, 
#home-b3 a:hover, #home-b4 a:hover, 
#home-b5 a:hover, #home-b6 a:hover { position:relative }

#home-b1 a:hover span, #home-b2 a:hover span, 
#home-b3 a:hover span, #home-b4 a:hover span, 
#home-b5 a:hover span, #home-b6 a:hover span { display:block; position:absolute; font-size:10px; line-height:1.5; padding:12px;
                                               text-align:left; border:2px solid #555; background:#FFFFD7; color:#000 }
															 
#home-b        { width:704px; height:480px; padding:0 128px 20px; overflow:hidden } 															 
#home-b-left   { float:left; width:217px; height:351px }
#home-b-right  { float:left; width:487px; height:351px; background:url(../img/site/b2-4-radiaflect.jpg) no-repeat }
#home-b strong { color:#000 }

#home-b1         { float:left; width:217px; height:351px; background:url(../img/site/b1-on-dynetech.jpg) no-repeat }
#home-b1 a       { width:217px; height:351px; background:url(../img/site/b1-on-dynetech.jpg) no-repeat }		
#home-b1 a:hover { width:217px; height:351px; background:url(../img/site/b1-on-dynetech.jpg) no-repeat }
#home-b1 a:hover span { top:83px; left:200px; width:330px; height:62px; z-index:100 }							 

#home-b2         { float:left; width:217px; height:135px; background:url(../img/site/b2-on-glass-museum.jpg) no-repeat }
#home-b2 a       { width:217px; height:135px;  background:url(../img/site/b2-on-glass-museum.jpg) no-repeat }
#home-b2 a:hover { width:217px; height:135px; background:url(../img/site/b2-on-glass-museum.jpg) no-repeat }
#home-b2 a:hover span { top:120px; left:-32px; width:270px; height:108px; z-index:100 }

#home-b4         { float:right; width:269px; height:135px; background:url(../img/site/b4-on-fasara-designer-glass.jpg) no-repeat }
#home-b4 a       { width:269px; height:135px; background:url(../img/site/b4-on-fasara-designer-glass.jpg) no-repeat }
#home-b4 a:hover { width:269px; height:135px; background:url(../img/site/b4-on-fasara-designer-glass.jpg) no-repeat }
#home-b4 a:hover span { top:100px; left:-140px; width:330px; height:65px; z-index:100 }							 

#home-b5         { float:right; width:135px; height:217px; background:url(../img/site/b5-on-piano-room.jpg) no-repeat }
#home-b5 a       { width:135px; height:217px; background:url(../img/site/b5-on-piano-room.jpg) no-repeat }
#home-b5 a:hover { width:135px; height:217px; background:url(../img/site/b5-on-piano-room.jpg) no-repeat }
#home-b5 a:hover span { top:-83px; left:-217px; width:217px; height:110px; z-index:100}							 

#home-b6         { float:left; width:351px; height:217px; background:url(../img/site/b6-on-clear-film.jpg) no-repeat }
#home-b6 a       { width:351px; height:217px; background:url(../img/site/b6-on-clear-film.jpg) no-repeat }
#home-b6 a:hover { width:351px; height:217px; background:url(../img/site/b6-on-clear-film.jpg) no-repeat }
#home-b6 a:hover span { top:-105px; left:-83px; width:300px; height:90px; z-index:100 }							 


#home-mission  { width:704px; height:125px; margin:0 auto; background:url(../img/site/home-mission-statement.gif) no-repeat }
#find-location { width:704px; height:210px; margin:0 auto; background:url(../img/site/location-page-text.gif) no-repeat }
#home-mission p,
#home-mission h1,
#find-location p,
#find-location h1 { margin:0; font-size:0; line-height:0; color:#000 }		 
							

/* REPLACED ELEMENTS: Buttons
--------------------------------------------------------------- */
#buttons              { float:right; width:365px; height:50px } 

#button-bbb           { float:right; font-size:0; line-height:0; overflow:hidden;
                        width:90px; height:110px; background:url(../img/site/button-bbb.gif) no-repeat }
#button-bbb a         { display:block; width:90px; height:110px; background:url(../img/site/button-bbb.gif) no-repeat }
#button-bbb a:hover   { background:url(../img/site/button-bbb-on.gif) no-repeat }

#button-promo         { width:170px; height:110px; font-size:0; line-height:0; overflow:hidden; background:url(../img/site/button-promo.gif) no-repeat }
#button-promo a       { display:block; width:170px; height:110px; background:url(../img/site/button-promo.gif) no-repeat }
#button-promo a:hover { background:url(../img/site/button-promo.gif) no-repeat }


#button-estimate         { float:right; font-size:0; line-height:0; overflow:hidden;
                           width:225px; height:50px; background:url(../img/site/button-estimate-on.gif) no-repeat }
#button-estimate a       { display:block; width:225px; height:50px; background:url(../img/site/button-estimate.gif) no-repeat }
#button-estimate a:hover { background:url(../img/site/button-estimate-on.gif) no-repeat }



/** 9.0 IMAGE GALLERY 
----------------------------------------------------------------- */
.gallery   { cursor:default; list-style:none; margin-left:-30px; padding-left:46px }
.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; width:350px; height:216px; position:absolute; top:-80px; left:-50px; z-index:100; overflow:visible } /* 430px width */
.gallery img { display:block; width:180px; height:111px; border:none; color:inherit; padding:2px; vertical-align:top }
.gallery li  { color:inherit; display:inline; float:left; margin:3px; padding:5px; position:relative }  /* background:#EDE6E0 */ 
.preload   { width:0; height:0 }