/* ---------------------------------------- Name: XXX Author: Eric Eaton & Carter Stowell Version: 2006 ---------------------------------------- ---------------------------------------- Color Guide ---------------------------------------- brown = 8D5A22 (body background) dark red = 881B00 (nav-bg background) red = C62700 (nav background) ---------------------------------------- Essential Stuff (body, blocks etc.) ---------------------------------------- */ body {margin:0; padding:0; background-color:#6F6F6F; font-family:'Trebuchet MS', Verdana, Arial, Helvetica, Sans-serif; line-height:110%; font-size:1em; background: url("http://www.joelplatz.com/images/bg_vert.png") #6F6F6F top center repeat-y; } H1, H2, H3, H4, H5, H6, p, ul, li, dl, dt, dd {margin:0 0 .75em 0 } H1 {font-size:1.25em; } dl dt {float: left; clear: left; width: 50%; margin: 0 -1px 0 0;} dl dd {width: 50%; float: left; margin: 0 ; clear: right; /*Forces the dd to break to the next line.*/ } /*Creates the horizontal border between each *row*.*/ dl> dd + dt, dl > dd + dt + dd {border-top: 1px #FFFFFF solid; padding:10px 0 10px 0; } dt, dd {font-size:80%; } /* Links ---------------------------------------- */ a, a:visited {color:#3333CC; text-decoration:none; } a:visited {color:#9933CC; } a:hover {text-decoration:underline; } /* Tables (reitterates basic body stuff) ---------------------------------------- */ table, td, tr, th {font-family:Verdana, Arial, Helvetica, Sans-serif; line-height:1.5em; color:#444444; } /* ---------------------------------------- Layout Containers ---------------------------------------- */ #shell {position:relative; width:281px; top:0; z-index:2; height:1px;} /* realigns things after center tag centers the shell */ #shell div { } /* masthead-bg lives outside/behind the shell */ #masthead-bg {position:absolute; width:100%; z-index:1; } #masthead {position:relative; width:100%; top:0; height:20px; } #masthead, #masthead-bg { } #masthead h1, #masthead h2, #masthead h3 {display:none; } #logo {position:relative; width:262px; height:42px; top:78px; background: url("http://www.joelplatz.com/images/logo_home.png") 0 0 no-repeat; z-index:8; } * html #logo /* Will only be seen by IE */ {background: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='http://www.joelplatz.com/images/logo_home.png',sizingMethod='scale'); } #logo h3, #logo h4 {display:none; } #logo span {display:block; width:262px; height:42px; top:0; left:0;} #tagline h3, #tagline h4 {display:none; } #photo {position:absolute; width:274px; height:455px; top:0; left:2px; border:2px solid #FFFFFF; border-width:0 0 2px 0; z-index:5; } /* ---------------------------------------- Navigation ---------------------------------------- */ #mainnav {position:absolute; top:460px; left:10px; text-align:left; font-size:80%; z-index:20; } #mainnav a {color:#666666; } #mainnav span {display:block; position:absolute; margin:0 0 .2em 0; } #mainnav #linkone {top:0; left:0; width:140px; color:#000000; } #mainnav #linktwo {top:0; left:180px; } #mainnav #linkthree {display:none} #mainnav #linkone a {color:#000000; } #mainnav #linktwo a {color:#FFFFFF; } #folionav {position:absolute; top:143px; left:5px; width:272px; z-index:10; } #folionav a {text-decoration:none; color:#DAAE6F; } #folionav a:visited {text-decoration:none; color:#DAAE6F; } #folionav a:hover {text-decoration:none; color:#FFFFFF; } #folionav span {display:block; position:absolute; width:131px; height:131px; border:1px solid #AD8981; font-size:80%; letter-spacing:3pt; } #folionav #linkone {top:0; left:0; text-align:left; background: url("http://www.joelplatz.com/images/s.gif") 0 0 no-repeat; } #folionav #linktwo {top:0; left:135px; text-align:left; background: url("http://www.joelplatz.com/images/s.gif") 0 0 no-repeat; } #folionav #linkthree {top:136px; left:0; text-align:right; background: url("http://www.joelplatz.com/images/s.gif") 0 0 no-repeat;} #folionav #linkfour {top:136px; left:135px; text-align:right; background: url("http://www.joelplatz.com/images/s.gif") 0 0 no-repeat;} #folionav span:hover {border-color:#000000; } #folionav #linkone:hover {background: url("http://www.joelplatz.com/images/roll_tables.jpg") 0 0 no-repeat; } #folionav #linktwo:hover {background: url("http://www.joelplatz.com/images/roll_chairs.jpg") 0 0 no-repeat; } #folionav #linkthree:hover {background: url("http://www.joelplatz.com/images/roll_cabinets.jpg") 0 0 no-repeat; } #folionav #linkfour:hover {background: url("http://www.joelplatz.com/images/roll_kitchens.jpg") 0 0 no-repeat; } #links {width: 613px; margin: 0; padding: 0; position: relative; } #links li {margin:0; border:0 solid #EE8888; border-width:0 1px 0 0; padding:0 8px 0 8px; list-style: none; font-size: 80%; position: relative; float:left; display:block; } #links a {text-decoration:none; } #link1 a, #link2 a, #link3 a, #link4 a, #link5 a, #link6 a, #link7 a { color:#FFFFFF; padding: 0;} #link6, #link6 a {border-width:0 1px 0 0; } /* ON states relies on Body ID */ #home #link1, #contact #link2, #philosophy #link3, #samples #link4, #stuff #link5, #xxx #link6, #xxx #link7, #xxx #link8, #xxx #link9, #xxx #link10 {background-color:#666666;} /* end navigation */ /* ---------------------------------------- Content ---------------------------------------- */ #content {position:relative; width:100%; top:147px; left:0; z-index:6; } #content h1 {text-transform:uppercase; letter-spacing:.2em; color:#881B00; font-weight:normal; font-size:100%; padding-top:.5em; } #content p {font-size:.8em; margin-left:20px; } #columnone {position:relative; width:60%; float:left; } #columntwo {position:relative; width:40%; float:right; } #columnthree {position:relative; width:33%; float:right; display:none; } /* ---------------------------------------- Page ID level stuff ---------------------------------------- */ #home #columntwo {background-color:#EFEFEF; } #home h1 {position:absolute; } #home #columnone {margin-top:2em; width:46% } #home #columntwo {width:50%; } #samples #columnthree {display:block; } #samples #columnone {width:33%; } #samples #columntwo {width:33%; }