/*
File: screen.css
Date: 02242010 
*/


* { padding:0; margin:0; }

body {
font-family: helvetica, verdana, arial, sans-serif;
font-size: 76%;
color: #333;
/* color: #808284; font color the designer wanted. */
background: #09347a url(../pics/background.jpg) no-repeat center top; }

img { border: 0; }

li { margin-bottom: 0.7em; }
img.small_logo { float: right; clear: right; }

div#page_holder {
margin: 100px auto;
width: 850px;
position: relative; }



div#page_content_holder {
position: absolute;
top: 3px; left: 0px;
width: 780px;
min-height: 600px; }



div#main_navigation {
position: absolute;
top: 25px; left: 32px; }

div#main_navigation ul { list-style: none; }

div#main_navigation li {
display: block;
text-align: right;
margin: 15px 0;
border-bottom: 2px solid #fff; }

div#main_navigation li a {
display: block;
font-family: "copperplate regular", "copperplate", helvetica, verdana, arial, sans-serif;
letter-spacing: 0.1em;
padding: 0 5px 0 0;
/* font-size: 0.9em; */
font-size: 1.0em;
width: 140px; height: 25px;
text-transform: uppercase; }



div#content {
background-color: #fff;
position: absolute;
top: 0px; left:175px;
border: solid 1px #bbb;
border-top: none; }
/* Change this slector for the homepage only */
body#home div#content { 
width: 556px;
border: 0;
padding: 3; }




/* CSS Highlight Current link.
See: http://www.456bereastreet.com/archive/200503/setting_the_current_menu_state_with_css/ */
body#home li#nav-home a,
body#about li#nav-about a,
body#portfolio li#nav-portfolio a,
body#working li#nav-working a,
body#contact li#nav-contact a,
div#main_navigation li a:hover {
color: #09347a;
text-decoration: none; }



/*XXXXXXXXXXXXXXXXXX Dropshadow elements from: 
http://www.positioniseverything.net/articles/dropshadows.html   XXXXXXXXXXXXXXX*/ 

html>body .outerpair1 {
background: url(../pics/shadows/upperrightfade.png) right top no-repeat; 
padding-left: 8px;} 
/* .outerpair1 must be given a width contraint, via either a width, 
or by floating or absolute positioning. In this demo these are 
applied from the second class name on the .outerpair1 DIV's.
This box also has one of the corner .png's. */

html>body .outerpair2 {
background: url(../pics/shadows/lowerleftfade.png) left bottom no-repeat;
padding-top: 8px;
padding-left: 8px; }
/* .outerpair2 has padding equal to the shadow 
thickness, and also has one of the corner .png's */ 

html>body .shadowbox {
background: url(../pics/shadows/shadow.png) bottom right; }
/* .shadowbox holds the main shadow .png */ 

html>body .innerbox {
position: relative;
left: -8px;
top: -8px; }
/* .innerbox is made "relative" and is "pulled" up and to 
the left, by a distance equal to the thickness of the shadow.
Because this is a relative-based shift, the box retains its
exact dimensions without change. */


.shadowbox img {
border: 10px solid #fff;
vertical-align: bottom; }
/* Shadowed images should not be made "block" for eliminating the baseline 
space under the images, because this may trigger IE background bugs. 
Instead, use "vertical-align: bottom;" for this purpose. */
/*XXXXXXXXXXXXXXXXXX Custom width constraints and extra styling XXXXXXXXXXXXXXX*/ 


img.content_image { border: solid 1px #bbb; }

.floatimage {
float: right; /* Floating causes this box to shrinkwrap around sized content elements. */
margin: 5px -60px 15px 15px;
display: inline; /* IE doubled margin bug is defeated via this fixer rule. */
text-align: center;
font-size: 0.88em;
color: #666; }


/* Portfolio page stuff */
.floatimage_portfolio {
float: left; /* Floating causes this box to shrinkwrap around sized content elements. */
margin: 0 10px 10px 0;
display: inline; /* IE doubled margin bug is defeated via this fixer rule. */ }

div#portfolio_kitchens {
width: 320px;
float: left;
padding-right: 10px;
border-right: solid 1px #ddd;
text-align: center; }

div#portfolio_baths {
width: 150px;
float: right;
text-align: center; }

div#portfolio_kitchens li, div#portfolio_baths li{ display: inline; }

body#showroom li { list-style: none; }



/************ Start typography ************/

/* Anchors */
a {
color: #58585a;
text-decoration: none; }
a:hover {
color: #666;
text-decoration: underline; }
h3 a { text-decoration: underline; }
h3 a:hover { text-decoration: none; }
/* EOF Anchors */



p {
font-size: 1.2em;
line-height: 1.5em;
margin: 1.2em 0em 1.2em 0em; }


/* Heading Tags */
h1 {
font-size: 2.0em;
font-weight: normal;
margin-top: 0em;
margin-bottom: 0em;/*both set to zero and padding in header div is used intead to deal with compound ie pc problems that are beyound summary in a simple comment.*/
}
h2 {
font-size: 1.7em;
margin: 1.2em 0em 1.2em 0em;
font-weight: normal;
}
h3 {
font-size: 1.4em;
margin: 1.2em 0em 1.2em 0em;
font-weight: normal;
}
h4 {
font-size: 1.2em;
margin: 1.2em 0em 1.2em 0em;
font-weight: bold;
}
h5 {
font-size: 1.0em;
margin: 1.2em 0em 1.2em 0em;
font-weight: bold;
}
h6 {
font-size: 0.8em;
margin: 1.2em 0em 1.2em 0em;
font-weight: bold;
}
/* EOF Heading tags */


/********* End typography ************/