
/** STYLES 
------------------
Created 2007/02/25
Updated 2009/07/02
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  COLOR PALETTE
3.0  TYPOGRAPHY 
4.0  TABLES
5.0  PAGE LAYOUT
6.0  NAVIGATION MENUS
7.0  FORM ELEMENTS
8.0  REPLACED ELEMENTS  */
 


/** 1.0 GLOBAL RESET
    Operating system default button appearance is best practice for usability. 
    Do not globally reset background:transparent and border-style:none because
    this will wipe 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 COLOR PALETTE
    Body background color provides full-height footer background color
    without JavaScript. Use #nofooter style to change body background
    to match the main content area background for pages with no footer.
------------------------------------------------------------------------ */
body { color:#444; background:#FFF }
h1, h2, h3, h4, h5, h6, strong { color:#000 }
pre { background:#F3F3F3; color:#00F }


/** 2.1 COLOR PALETTE: Link Text
--------------------------------- */
a:link    { color:#0671A6 }
a:visited { color:#A6067E }
a:hover, a:visited:hover { color:#007DC3; background:#FFC }
.fontmenu a:visited { color:#007DC3 } /* font resize menu links */
dd a:link:visited { color:#00F } /* glossary links */
#navmenu .section { background:url(menu-gradient.jpg) repeat-x }
#navmenu a  { color:#FFF } 
#navmenu a:hover { background:#F00 }


/** 2.2 COLOR PALETTE: Major Page Sections
--------------------------------------------- */
#header, #banner, #action { background:#000 } /* BLACK */


/** 2.3 COLOR PALETTE: Editorial Elements
------------------------------------------ */
#byline   { color:#F00 }
#dateline { color:#090 }
#deck     { color:#777 }
#feature  {  }
#sidebar  { background:#C8E9CE }
#summary  { color:#06C }
#title    {  }


/** 2.4 COLOR PALETTE: Text Classes
------------------------------------------ */
.alert     { background:#FDD; color:#C00 }  
.callout   { color:#900; background:#EEE }
.comment   { color:#090 }
.dropcap   { color:#C00 }
.highlight { background:#FFC }
.photobox  { background:#FFF; border:1px solid #DDD }
.php       { color:#C00 }
.slug      { color:#999 }


/** 2.5 COLOR PALETTE: Graphics Boxes
-------------------------------------- */
.adsense   { background:#F4F4F4 } 
.caption   { color:#060 }
.imagebox  { background:#FFE }


/** 2.6 COLOR PALETTE: Tables
------------------------------------------------ */
th         { color:#15206D; background:#EBEBEB }
th, td     { color:#15206D; border:1px solid #CCC }
.neg       { color:#C00 } /* negative number */
.grid      { border:1px solid #CCC }
.rowdark   { background:#F0E9DA }
.rowlight  { background:#FFF }
.rowheader { background:#480303; color:#FFF }


/** 2.7 COLOR PALETTE: Borders
------------------------------- */
.border1, .border5, .border10,
.border20 { border-color:#DDD }


/** 2.8 COLOR PALETTE: Forms
------------------------------------------- */
form     { color:#000; background:#FFF }
form h1  { color:#000; background:#FFF }
fieldset { background:#F6F6F6 } }
legend   { color:#0F6CBC }
input, 
select,
textarea { background:#FFF }



/** 3.0 TYPOGRAPHY
---------------------------------------------------------------------------- */
body { font-family:verdana,"Lucida Grande","Bitstream Vera Sans",sans-serif;
       font-size:12px; line-height:1.6 }

a:link, a:visited { text-decoration:underline }
a:hover, a:visited:hover { text-decoration:underline }

h1, h2, h3, h4, h5, h6 { font-family:helvetica, arial, "Bitstream Vera Sans", sans-serif }
h1 { font-size:240%; margin-top:1em; margin-bottom:0; line-height:1.1 } 
h2 { font-size:160%; margin-top:1.2em; margin-bottom:1em; line-height:1.2; font-weight:bold }
h3 { font-size:140%; 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 }
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-left:30px; 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.1 Glossary Formatting
------------------------------------------------------------ */
dt { display:inline; font-weight:bold; padding-right:0.5em }
dd { display:inline }  
.alpha { visibility:hidden; margin:0; padding:0 } /* glossary section headings */


/** 3.2 Text Classes
---------------------------------------------------------------- */
.caption     { margin-top:1em; margin-bottom:2em }
.dropcap     { display:block; float:left; font:bold 400% Georgia,Palatino,serif; 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 }
.itemlead    { font-weight:bold }
.question    { font-weight:bold; margin-top:2em; padding-top:1em; border-top:1px solid #CCC }
.answer      { margin-top:-1em }
.question    { font:bold 150% Georgia,Palatino,serif; color:#CCC; letter-spacing:-0.1em } 
.product     { font-size:0.83em }
.delete      { text-decoration:line-through } /* line-thru for galleys; deleted by CMS for publication. */
.source      { text-align:right; padding-right:3em; margin-bottom:2em }
.listing     { margin:0; padding:2em 1em }

.biglist        { margin-right:3em; margin-bottom:1em } 
.biglist li     { margin-bottom:1em }
.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 }
.callout a   { color:#900; text-decoration:none }
.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 }


/** 3.1 Nonstandard Links
------------------------------ */
#navmenu  { font-weight:bold; font-size:1.2em }
.textlink { font-weight:bold }
.fontmenu { margin-bottom:18px; text-align:right }



/** 4.0 TABLES
--------------------------------------------------------------------------- */
table      { margin-left:20px; border-collapse:collapse; border-spacing:0 }
th, td     { text-align:left; padding:0.5em } /* white-space:nowrap; border:1px #ccc solid */
th         { font-weight:bold; text-align:center }

.n         { text-align:right } /* right-aligned number */
.grid      { margin:2em 0 }
.rowheader { font-weight:bold }



/** 5.0 PAGE LAYOUT
     Divs default to 100% width of immediate hierarchical parent containers.
     Explicit margins are not declared in page layout divs to avoid IE box model problems.  
     display:none reduces/prevents onload flicker. Reversed by behavior.js file.
------------------------------------------------------------------------------------------- */
#wrapper { margin:0 auto }


/** 5.1 PAGE LAYOUT: Drop Shadow Page Container Boxes
----------------------------------------------------------- */
#boxtop, #boxbase, #boxmain { width:1060px; margin:0 auto }
#boxtop  { height:0px; background:url(../img/site/shadowbox7-top.jpg) no-repeat } 
#boxbase { height:0px; background:url(../img/site/shadowbox7-base.jpg) no-repeat } 
#boxmain { background:url(../img/site/shadowbox7-main.jpg) repeat-y } 


/** 5.2 PAGE LAYOUT: Container and Float DIV Classes
----------------------------------------------------- */
.section { width:980px; margin:0 auto }
.left    { float:left }
.right   { float:right }


/** 5.3 Column DIV Width Classes
---------------------------------- */
.one    { width:140px }
.two    { width:280px }
.three  { width:420px }
.four   { width:560px }
.five   { width:700px }
.six    { width:840px }
.seven  { width:980px }


/** 5.4 Whitespace Padding and Border Classes
    Secondary "no-width" whitespace DIVS avoid 
		box model DIV width problems in IE6 
----------------------------------------------- */
.pad10    { padding: 0 10px }
.pad20    { padding: 0 20px }
.pad33    { padding: 0 33px }
.pad50    { padding: 0 50px }
.border1  { border:solid 1px #DDD }
.border5  { border:solid 5px #DDD }
.border10 { border:solid 10px #DDD }
.border20 { border:solid 20px #DDD }
.spacer   { margin:8px 0 6px }


/** 5.5 PAGE LAYOUT: Page Sections and Elements
-------------------------------------------------- */
#header, #banner, #content, #footer { width:100% }
#header  { height:80px }
#banner  { width:100%; height:214px }
#action  {  } /* e.g. tour and signup buttons */
#logo    { background:url(logo-ensun-yellow.gif) no-repeat }
#logo a  { display:block; width:420px; height:80px; background:url(logo-ensun-yellow.gif) no-repeat }
#phone   { width:280px; background:url(phone-ensun.gif) no-repeat }
#logo, 
#phone   { height:80px; font-size:0; line-height:0; overflow:hidden }	
#content { height:100% }

/** 5.6 PAGE LAYOUT: Editorial Content Elements
------------------------------------------------ */
#feature  { margin-left:0; width:560px }
#title    { margin-left:0; width:700px; font-size:240% }
#deck     { margin-left:0; width:700px; margin-top:0.5em; font:normal 160%/1.4 palatino, georgia, serif; font-style:italic }
#summary  {  }
#byline   { margin-bottom:-1em }
#dateline {  }
#sidebar  { margin-top:4em }


/** 5.7 PAGE LAYOUT: Image Classes
------------------------------------------------ */
.imagebox { padding:0.75em; margin:1em 0 0.5em }
.image.left { margin-right:0 }
.outset   { margin-left:0; overflow:visible }
.picright { float:right; margin:0 20px 10px 20px }



/** 5.8 PAGE LAYOUT: Generic Layout Classes
-------------------------------------------- */
.center   { text-align:center }
.justify  { text-align:justify }
.clear    { clear:both }
.cleft    { clear:left }
.cright   { clear:right }
.hide     { display:none }
.visible  { display:block }
.block    { display:block }
.inline   { display:inline }
.top10    { margin-top:10px }
.top20    { margin-top:20px }



/** 6.0 NAVIGATION MENUS
----------------------------------------------------------------- */
#access   { left:-10000px; visibility:hidden; width:0; height:0 }


/* 6.1 Primary Navigation Menu Bar
----------------------------------- */
#navmenu          { width:100%; height:2.4em }
#navmenu .section { width:980px; height:2.4em; margin:0 auto }
#navmenu ul       { display:inline; list-style:none }
#navmenu li       { float:left } 
#navmenu li.first { padding-left:8em; border-right:3px solid #223903; } 
#navmenu li.last  { border-right:none } 
#navmenu a        { display:block; height:2.3em; top:0; padding:0.2em 1em 0; font-weight:bold; text-decoration:none } 
#navmenu a:hover  { text-decoration:none }

/* 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 { color:#000; background:#FFF; cursor:default }





/** 7.0 FORM ELEMENTS
------------------------------------------------ */
form          {  }
								 
form h1       { margin:0; padding:15px 33px 20px; font-size:200%; font-weight:bold }
form a:link   { text-decoration:underline }

fieldset      { display:block; margin:10px 0 20px; padding:10px 20px 20px }

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 }


/** 7.1 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 }
form p.left   { margin-left:150px }


/** 7.2 Input Field Classes
--------------------------------------------------------- */
input, select, textarea { margin-top:5px; padding:0.2em }

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 p.left  { margin-left:151px }


/** 7.3 Button Location 
----------------------------------------------------- */
button       { padding:0.2em 1em 0.5em; cursor:hand }
#submit      { margin:1em 0 1.5em 0 }
#submit.left { margin-left:149px }


/** 7.4 Form error display
     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 }

