
/* ECO-HOME AT HAWK RIDGE -- June 2007 */
/* Author: Jacob LeBeau */


/* Global Settings
--------------------------------------*/

html, img, h1, h2, h3, h4, h5, ul { margin: 0; padding: 0; }
body { margin: 0; padding: 0; background: #ecf6e8 url(../images/bground.png); }
img { border: 0; }
a { border: none; }

#container { width: 735px; margin: 10px auto 0 auto; padding: 0; text-align: left; font-family: Arial, Verdana, sans-serif; }
#container .tiny { font-size: 60%; margin: 0 0 20px 10px; color: #666; }

#content_wrap { margin: 0; padding: 0; width: 735px; height: auto; float: left; background: #fff url(../images/content_bg.png); }
#content_wrap a:link, #content_wrap a:visited { color: #69c; text-decoration: none; }
#content_wrap a:hover { color: #999; }


/* Header Area
--------------------------------------*/

#header { margin: 0; padding: 0; width: 735px; height: 193px; background: #98c472 url(../images/header.png) no-repeat; }
#header h1 { text-indent: -9999px; }
#header h2 { text-indent: -9999px; }

#main_nav_wrap { margin: 0; padding: 0; width: 735px; height: 59px; background: url(../images/main_nav_bg.png) no-repeat; float: left; }

#main_nav { margin: 22px 0 0 28px; padding: 0; width: 707px; list-style-type: none; }
#main_nav li { margin: 0 20px 0 0; padding: 0; float: left; text-transform: uppercase; font-size: 90%; font-weight: bold; }
#main_nav a:link, a:visited { color: #fff; text-decoration: none; }
#main_nav a:hover { color: #333; text-decoration: none; }

body#about ul#main_nav li#nav_about a { color: #333; }
body#tech ul#main_nav li#nav_tech a { color: #333; }
body#discuss ul#main_nav li#nav_discuss a { color: #333; }
body#gallery ul#main_nav li#nav_gallery a { color: #333; }
body#partners ul#main_nav li#nav_partners a { color: #333; }


/* Submenu & Sidebar Area
--------------------------------------*/

#right_col { margin: 0; padding: 30px 25px 25px 0; width: 200px; height: auto; float: right; }

#sub_nav { margin: 0; padding: 0 0 0 20px; background: url(../images/divide_vert.png) 0 0 repeat-y; }
#sub_nav h3 { margin-bottom: 10px; font-size: 70%; font-weight: bold; color: #036; }
#sub_nav ul { list-style-type: none; margin-bottom: 25px; }
#sub_nav li { margin: 10px 0 0 0; padding: 0 0 0 15px; font-size: 80%; font-weight: bold; background: url(../images/bullet.png) no-repeat; background-position: 0 .3em; }
#sub_nav dt { margin: 0 0 4px 0; color: #036; font-weight: bold; font-size: 80%; }
#sub_nav dd { margin: 0 0 15px 0; color: #333; font-size: 70%; }
#sub_nav p { font-size: 80%; font-weight: bold;}


/* Content Area
--------------------------------------*/

#left_col { margin: 0; padding: 30px 15px 0 30px; width: 458px; height: auto; float: left; }
#full_col { margin: 0; padding: 30px 15px 0 30px; width: 670px; height: auto; float: left; }
#photo_col { margin: 0 0 20px 0; padding: 30px 0 0 30px; width: 680px; height: auto; float: left; }

#content { margin: 0; padding: 0; }
#content h4 { font-size: 110%; font-weight: normal; color: #696; }
#content h5.title_tab { display: block; padding: 7px 8px 5px 8px; margin: 0; width: 441px; background: #bccee7 url(../images/title_tab.png) 0 0 repeat-x; font-size: 90%; border-bottom: 1px solid #666; }
#content h5 { font-size: 100%; font-weight: bold; color: #333; margin: 0 0 6px 0; padding: 0; }
#content h5.photo_titles { margin-top: 25px; float: left; width: 675px; border-top: 1px solid #666; padding-top: 25px; }
#content h5.photo_titles_top { margin-top: 5px; border-top: none; }
#content p { margin: 0 0 20px 0; padding: 0; font-size: 80%; color: #000; line-height: 160%; }
#content a:link, #content a:visited { color: #069; text-decoration: none; }
#content a:hover { color: #666; text-decoration: none; }
#content img { margin-bottom: 15px; }
#content img.team { margin: 0 0 10px 20px; float: right; }
#content img.border { margin-bottom: 15px; border: 1px solid #666; }
#content img.general { float: right; margin: 5px 0 5px 15px; padding: 3px; background: #ebebeb; border: 1px solid #666; }
#content img.gallery { margin: 15px; padding: 3px; border: 1px solid #666; background: #ebebeb; float: left; }
#content img.nofloat { margin: 0 0 15px 0; padding: 3px; border: 1px solid #666; background: #ebebeb; }
#content ol { margin: 18px 0 20px 30px; font-size: 80%; }
#content ol li { margin: 0 0 12px 0; padding: 0; background: none; line-height: 150%; }
#content ul { margin: 18px 0 20px 0; list-style-type: none; font-size: 80%; }
#content li { margin: 0 20px 12px 20px; padding: 0 0 0 18px; background: url(../images/bullet_content.png) no-repeat; background-position: 0 .3em; line-height: 150%; }
#content ul.bold { font-weight: bold; }
#content .highlighted p { margin: 13px; }
#content .hidden { text-indent: -9999px; line-height: 0; }
#content span { font-weight: bold; color: #333; }

* html #content .clear { height: 25px; clear: both; }

#page_title { margin: 0; padding: 0 0 2px 0; float: left; background: url(../images/divide_horiz.png) 0 100% repeat-x; }
#title_margin { width: 450px; height: 25px; }

/* All this just to make my silly underlined titles look right in IE 6 */
body[id=about] #title_margin { width: 450px; height: 45px; }
body[id=tech] #title_margin { width: 450px; height: 45px; }
body[id=discuss] #title_margin { width: 450px; height: 45px; }
body[id=gallery] #title_margin { width: 450px; height: 45px; }
body[id=partners] #title_margin { width: 450px; height: 45px; }
/* ------------------------------------------------------------------ */

#location { margin: 15px 0 25px 0; padding: 0; }
#location img { margin: 0 10px 0 0; float: left; }
#location p { margin: 0 0 6px 0; }
#location p.secondary { margin: 0; font-size: 70%; color: #333; }
#location span { color: #999; margin: 0 5px 0 5px; }

#technologies { margin: 30px 28px 20px 28px; }
#technologies a:link, #technologies a:visited { color: #69c; }
#technologies a:hover { color: #999; }
#technologies img { border: none; }
#technologies .main_graphic { margin: 0 0 30px 0; }
#technologies .main_graphic_tech { margin: 25px 0 30px 0; }
#technologies_description { width: 458px; padding: 0; margin: 0; float: left; height: auto; }
#technologies_navigation { margin: 0 0 25px 0; padding: 0 0 0 20px; width: 180px; float: right; height: auto; background: url(../images/divide_vert.png) 0 0 repeat-y; }
#technologies_navigation h3 { margin: 0; font-size: 70%; font-weight: bold; color: #036; }
#technologies_navigation ul { list-style-type: none; font-size: 80%; }
#technologies_navigation li { margin: 10px 0 0 0; padding: 0 0 0 15px; font-weight: bold; background: url(../images/bullet.png) no-repeat; background-position: 0 .3em; }
#technologies_navigation p { margin: 10px 0 0 0; font-weight: bold; }
#technologies_navigation img { float: left }

.highlighted { width: 457px; margin: 0 0 22px 0; padding: 0; background: #eef2f8 url(../images/highlighted_bg.png); border: 1px solid #666; }

.features { margin: 18px 0 20px 0; list-style-type: none; font-size: 80%; }
.features li { margin: 0 20px 12px 20px; padding: 0 0 0 18px; background: url(../images/bullet_content.png) no-repeat; background-position: 0 .3em; }
.subfeatures { margin: 0 0 0 0; list-style-type: none; font-size: 80%; }
.subfeatures li { margin: 0 20px 15px 50px; padding: 0 0 0 16px; background: url(../images/bullet_content.png) no-repeat; background-position: 0 .3em; }

.photo { margin: 0 0 15px 15px; font-size: 80%; padding: 0; float: right; background: url(../images/bground.png); border: 1px solid #666; }
.photo img { margin: 3px; padding: 0; }
.photo p { margin: 0 5px 5px 5px; padding: 0; display: block; width: 140px; }

#lightbox{ background-color: #ebebeb; padding: 6px 6px 1px 6px; border-bottom: 2px solid #666; border-right: 2px solid #666; font-family: 'trebuchet ms', Arial, Verdana, sans-serif;  }
#lightboxDetails{ font-size: 0.8em; padding-top: 0.4em; display: none; }	
#lightboxCaption{ float: left; display: none; }
#keyboardMsg{ float: right; display: none; }
#closeButton{ top: 5px; right: 5px; }

#lightbox img{ border: none; clear: both;}
#overlay img{ border: none; }

#overlay{ background-image: url(../images/overlay.png); }

/* Annoying IE hacks for the lightbox */
* html #lightbox{ background-color: #ebebeb; padding: 6px; border-bottom: 2px solid #666; border-right: 2px solid #666; font-family: 'trebuchet ms', Arial, Verdana, sans-serif;  }
* html #overlay{ background-color: #333; back\ground-color: transparent; background-image: url(blank.gif); filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../images/overlay.png", sizingMethod="scale"); }


/* Footer
--------------------------------------*/

#footer { margin: 0 0 15px 0; width: 735px; height: 73px; float: left; background: #98c472 url(../images/footer_bg.png) no-repeat; }
#footer p { margin: 0; padding: 25px 0 25px 0; font-size: 70%; color: #333; text-align: center; }
#footer a:link, #footer a:visited { color: #069; text-decoration: none; }
#footer a:hover { color: #666; text-decoration: none; }
#footer span { color: #999; margin: 0 15px 0 15px; }