/*-----------------------------------------------------------------------------
More Than a Carpenter
Corporate Website

version:   1.0
date:      01/17/08
author:    Michael Yap
email:     myap@exoatmospheric.com

website:   www.exoatmospheric.com

greeting:  Hello! This site has been handcrafted with care - enjoy!

credits:

1) "CSS Popup Image Viewer" by Dynamic Drive (http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/)

2) "CSS Rollovers" by Jeremy Weikel, Trans Art Media (http://actualfilms.net)

-----------------------------------------------------------------------------*/


/* Hacks
-----------------------------------------------------------------------------*/

html, body {
height:100% /* Assigns height values to html and body (parent elements) to allow divs to display at 100% height */
}

img {display:block}  /* Removes 3px vertical space after imgs. Imgs by default are inline elements */ 


/* Margins and Padding (Remove margin, padding and border from all elements, except forms)
-----------------------------------------------------------------------------*/

html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td, img {
margin:0;
padding:0;
}


/* Alignment
-----------------------------------------------------------------------------*/

.clear {
clear:both;
}


.right {
float: right;
}


.left {
float: left;
}


/* Body and Wrapper
-----------------------------------------------------------------------------*/

body {
font: 62.5%/1  Helvetica, Arial, sans-serif;
color:#4d4946;
background: url(../images/body_bg.gif) repeat-x #ebe9de;
text-align:center;
}

#wrapper { 
position:relative;
width:960px; /* Page width here (you can also use percentages) */  
height:100%;
margin-left:auto; 
margin-right:auto; 
text-align:left;
}


/* Navigation
-----------------------------------------------------------------------------*/

a, a:link, a:active, a:visited {
outline:none; /* Removes "dotted" links in Firefox IE: http://sonspring.com/journal/removing-dotted-links */
text-decoration:none;
}

a img, a:link img, a:visited img {
border:none;
}

#navigation_primary {
position:absolute;
top:505px;
left:0px;
width:480px;
height:106px;
color:#999999;
font-weight:bold;
line-height:1.4em;
}

#navigation_primary li.primary_nav_active {
color:#FFFFFF;
}

#navigation_primary li.primary_nav_active a { /* Anchor element font color is white when enclosing list item element is "active" */
color:#FFFFFF;
}

#navigation_primary a {
color:#999999;
}

#navigation_primary a:hover {
color:#FFFFFF;
}

#navigation_primary ul {
font-size:1.1em;
}


#navigation_primary #level_primary {
float:left;
width:25%;
}

#navigation_primary #level_secondary {
float:left;
width:25%;
}

#navigation_primary #level_tertiary {
float:left;
width:25%;
}

#navigation_primary #level_quaternary {
float:right;
width:25%;
}

#nav_view_all_projects {
position:absolute;
top:20px;
right:20px;
height:13px;
width:98px;
background: url(../images/anchor_view_all_projects.gif) no-repeat right center;
}

#nav_view_all_projects a {
position:absolute;
width:98px;
height:13px;
top:0px;
left:0px;
}

#nav_view_all_projects a:hover {
background: url(../images/anchor_view_all_projects_hover.gif) no-repeat right center;
}

#nav_view_all_projects a p {
visibility:hidden;
line-height:0px;
margin-bottom:0px;
}

#nav_pagination {
position:absolute;
top:20px;
right:20px;
height:13px;
width:220px;
background: url(../images/pagination_bg.gif) no-repeat right center;
}

#nav_pagination p#page_indicator {
position:absolute;
right:34px;
font-size:.9em;
line-height:13px;
}

#nav_pagination a {
position:absolute;
width:13px;
height:13px;
top:0px;
}

#nav_pagination a#previous {
right:16px;
background: url(../images/pagination_previous.gif) no-repeat right center;
}

#nav_pagination a#previous:hover {
background: url(../images/pagination_previous_hover.gif) no-repeat right center;
}

#nav_pagination a#next {
right:0px;
background: url(../images/pagination_next.gif) no-repeat right center;
}

#nav_pagination a#next:hover {
background: url(../images/pagination_next_hover.gif) no-repeat right center;
}

#nav_pagination a p {
visibility:hidden;
line-height:0px;
margin-bottom:0px;
}

#header #nav_hero a {
color:#4d4946;
}

#header #nav_hero a:hover {
color:#FFFFFF;
}

#header #nav_view_featured {
float:right;
line-height:30px;
padding-left:10px;
font-size: 1.1em;
font-weight:bold;
color:#FFFFFF;
background: url(../images/view_featured_arrow.gif) no-repeat left center;
}

#header #nav_view_featured:hover {
color:#999999;
background: url(../images/view_featured_arrow_hover.gif) no-repeat left center;
}

#header a#nav_start_working { /*Targets only anchor elements with the ID "nav_start_working" within the element with ID "header"*/
float:right;
line-height:30px;
padding-left:15px;
font-size: 1.1em;
font-weight:bold;
color:#FFFFFF;
background: url(../images/start_working_icon.gif) no-repeat left center;
}

#header a#nav_start_working:hover {
color:#999999;
background: url(../images/start_working_icon_hover.gif) no-repeat left center;
}

#content_primary a.link_arrow_bold {
font-weight:bold;
color:#4d4946;
}

#content_primary a.link_arrow_bold:hover {
background: url(../images/content_primary_anchor_bg.gif) repeat-x bottom;
}

#content_primary a.link_underline {
font-weight:bold;
color:#4d4946;
background: url(../images/content_primary_anchor_bg.gif) repeat-x bottom;
}

#content_primary a.link_underline:hover {
color:#FFFFFF;
background-color:#8f0000;
}

#footer_secondary #email {
background: url(../images/email_icon.gif) no-repeat left center;
margin:0 0 0 20px;
padding:0 0 0 15px;
font-weight:bold;
color:#4d4946;
}

#footer_secondary #email:hover {
color:#999999;
background: url(../images/email_icon_hover.gif) no-repeat left center;
}


/* Typography
-----------------------------------------------------------------------------*/

h1 {
font-size: 2.2em; /* Equivalent to 22pt */
}

h2 {
font-size: 2.0em; /* Equivalent to 20pt */
}

h3 {
font-size: 1.8em; /* Equivalent to 18pt */
}

h4 {
font-size: 1.6em; /* Equivalent to 18pt */
}

h5 {
font-size: 1.4em;
}

p, q, cite {
font-size: 1.1em; /* Equivalent to 11pt */
}

ul, ol, dl {
list-style: none;
}

li, dd, dt {
}

#content_primary ul.running_copy {
line-height:1.4em;
}

#content_primary ul.paragraph_break {
margin-bottom:2.2em;
}

#content_primary ul.running_copy li {
font-size:1.1em;
}

#content_primary ul.running_copy li.sub_head_1 {
font-size:1.4em;
font-weight:bold;
margin-bottom:.55em
}

#content_primary ul.running_copy li.paragraph_break {
margin-bottom:.55em
}

#content_primary ul.running_copy li.paragraph_break_double {
margin-bottom:1.1em
}

#content_primary ul.running_copy li.anchor {
font-size:1.1em;
padding-left:12px;
background: url(../images/anchor_arrow.gif) no-repeat left center;
}


/* Header
-----------------------------------------------------------------------------*/

#header {
position:absolute;
top:0px;
left:0px;
width:960px; 
height:30px;
text-align:left;
}

#header_primary {
float:left;
width:480px;
height:30px;
}

#header #nav_hero {
float:left;
height:30px;
}

#header #nav_hero li{
display:inline;
line-height:30px;
margin:0 4px 0 0;
font-size:2.4em;
font-weight:bold;
}

#header #nav_hero li.active{
color:#FFFFFF;
}


/* Content
-----------------------------------------------------------------------------*/

#content_primary {
position:absolute;
top:30px;
left:0px;
width:960px;
height:360px;
background: url(../images/content_primary_bg.gif);
}

#content_primary #hero_primary {
position:absolute;
top:0px;
left:0px;
}

#content_primary #hero_secondary {
position:absolute;
top:180px;
left:780px;
}

#content_primary #kicker {
position:absolute;
top:20px;
left:500px;
}

#content_primary #headline {
position:absolute;
top:49px;
left:500px;
}

#content_primary #one_line_headline_text_column {
position:absolute;
top:104px;
left:500px;
width:440px;
height:246px;
}

#content_primary #one_line_headline_text_column_primary {
position:absolute;
top:104px;
left:500px;
width:200px;
height:246px;
}

#content_primary #one_line_headline_text_column_secondary {
position:absolute;
top:104px;
left:740px;
width:200px;
height:246px;
}

#content_primary #two_line_headline_text_column_primary {
position:absolute;
top:134px;
left:500px;
width:200px;
height:216px;
}

#content_primary #two_line_headline_text_column_secondary {
position:absolute;
top:134px;
left:740px;
width:200px;
height:216px;
}

/* Branding
-----------------------------------------------------------------------------*/

#logo {
position:absolute;
top:430px;
}

#tagline {
position:absolute;
top:505px;
left:576px;
}


/* Footer
-----------------------------------------------------------------------------*/

#footer {
position:absolute;
top:640px;
left:0px;
width:960px;
text-align:left;
}

#footer_primary {
float:left;
font-size:1.1em;
}

#footer_primary li {
display:inline;
}

#footer_primary #copyright {
background: url(../images/copyright_pipe.gif) no-repeat left center;
margin:0 0 0 8px;
padding:0 0 0 10px;
}

#footer_secondary {
float:right;
font-size:1.1em;
}

#footer_secondary li {
display:inline;
}

#footer_secondary #phone {
background: url(../images/phone_icon.gif) no-repeat left center;
padding:0 0 0 12px;
}


/* About Us
-----------------------------------------------------------------------------*/

#about_us #content_primary #hero_primary {
position:absolute;
top:0px;
left:0px;
width:480px;
height:330px;
background-image: url(../images/hero_primary_about_us.jpg);
}

#about_us #content_primary #hero_primary a {
position:absolute;
}

#about_us #content_primary #hero_primary a#build_it_green {
width:53px;
height:38px;
left:33px;
top:281px;
}

#about_us #content_primary #hero_primary a#nari {
width:61px;
height:37px;
left:149px;
top:280px;
}

#about_us #content_primary #hero_primary a#usgbc {
width:40px;
height:40px;
left:280px;
top:280px;
}

#about_us #content_primary #hero_primary a#eccc {
width:61px;
height:38px;
left:389px;
top:281px;
}

#about_us #content_primary #hero_primary a p {
visibility:hidden;
line-height:0px;
margin-bottom:0px;
}


/* Projects
-----------------------------------------------------------------------------*/

.thumbnail { /* CSS Popup Image Viewer */
position: relative;
z-index: 0;
float:left; /* Reminder: Float the last image in the row to the right */
}

.thumbnail:hover { /* CSS Popup Image Viewer */
background-color: transparent;
z-index: 50;
}

.thumbnail span { /* CSS Popup Image Viewer */
position: absolute;
visibility: hidden;
}

.thumbnail:hover span { /* CSS Popup Image Viewer */
top: 44px;
left: 60px;
visibility: visible;
}

#projects #content_primary {
background: url(../images/content_primary_bg_projects.gif);
}

#projects #content_primary #kicker {
position:absolute;
top:15px;
left:15px;
}

#projects #content_primary #headline {
position:absolute;
top:44px;
left:15px;
}

#projects #content_primary #one_line_headline_text_column_primary {
position:absolute;
top:159px;
left:15px;
width:210px;
height:186px;
}

#projects #thumbnails {
position:absolute;
top:60px;
left:300px;
width:600px;
height:240px;
}


/* Forms
-----------------------------------------------------------------------------*/

input.text {
padding: 3px;
border: 1px solid #999999;	
}


/* Tables 
-----------------------------------------------------------------------------*/

table { 
border-spacing: 0;
border-collapse: collapse;
}

td {
text-align: left;
font-weight: normal;
}