/* ---------------------------------------- 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) pink E24F9D (fold book bg) green text on pink B9D64A ---------------------------------------- Essential Stuff (body, blocks etc.) ---------------------------------------- */ body {margin:0; padding:0; color:#EFEFEF; font-family:Verdana, Arial, Helvetica, Sans-serif; line-height:120%; font-size: 1em; background: #3F667D top center repeat-y; } H1, H2, H3, H4, H5, H6, p, ul, li, dl, dt, dd, {margin:0 0 .5em .5em } 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; } /* Links ---------------------------------------- */ a {color:#8BBFF0; text-decoration:none; } a:visited {color:#8BBFF0; } 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:750px; top:0; z-index:2; height:1px; } /* realigns things after center tag centers the shell */ #shell div {text-align:left; } /* masthead-bg lives outside/behind the shell */ #masthead-bg {position:absolute; width:100%; height:28px; top:0; left:0; z-index:1; background: url("/images/fade_top.png") top left repeat-x; } #masthead {position:absolute; width:100%; top:0; left:0; background-color:#B8CEB3; } #logo {position:absolute; width:86px; height:86px; top:20px; left:566px; background: url("/images/logo.png") 0 0 no-repeat; z-index:10 } #logo h3, #logo h4 {display:none; } #tagline {position:absolute; width:300px; height:18px; top:75px; left:20px; background: url("http://www.deliberate-design.com/clients/xxx.gif") 0 0 no-repeat; } #tagline h3, #tagline h4 {display:none; } #horizline {position:absolute; width:678px; height:1px; top:62px; left:35px; /* windows won't collaps the div to 1px height without out this */ line-height:1px; background: url("/images/horiz_line_white.png") top left repeat-x; z-index:5 } /* ---------------------------------------- Navigation ---------------------------------------- */ #horiz-nav {position:absolute; width:280px; left:20px; z-index:10; } #horiz-nav, #pagename {top:43px; } #horiz-nav, #pagename h2 {font-family:Georgia, times, serif; font-size:.8em; letter-spacing:.15em; } #links-top, #links-bottom {width: 613px; margin: 0; padding: 0; position: relative; } #links-bottom {margin:1.5em 0 0 30px; } #links-top li, #links-bottom li {margin:0; padding:0 8px 0 8px; border:1px solid #6979A9; border-width:0 1px 0 0; list-style: none; position: relative; float:left; display:block; } #links-top a, #links-bottom a {text-decoration:none;} #link1 a, #link2 a, #link3 a, #link4 a, #link5 a, #link6 a, #link7 a { padding: 0; } /* ON states relies on Body ID */ #home #link1, #author #link2, #interviews #link3, #books #link4, #contact #link5 {font-weight:bold; font-style:italic; } #subnav {color:#CCCCCC; } /* end navigation */ /* ---------------------------------------- Content ---------------------------------------- */ #contentshell {position:relative; width:100%; padding-top:63px; left:0; z-index:6; } #contentshell p {font-size:.7em; line-height: 150% } /* pagename top position and font size are set above in horiz-nav */ #pagename {position:absolute; left:292px; color:#FFFFFF; } #pagename h2 {margin:0; font-weight:normal; text-transform:uppercase; letter-spacing:.35em; } #columnone {position:relative; width:288px; float:left; margin-top:36px; margin-bottom:10px;} #columnone p, #columnone h1, #columnone h2, #columnone h3, #columnone h4, #columnone img {margin-left:60px; margin-right:40px; } #columntwo {position:relative; width:265px; float:left; padding:.2em 0 0 0; background: url("/images/black_trans.png") top left repeat; margin-bottom:10px;} #columntwo p, #columntwo h1, #columntwo h2, #columntwo h3, #columntwo h4 {margin:0 5px 10px 5px; } #columnone h1, #columnone h2, #columnone h3, #columnone h4, #columntwo h1, #columntwo h2, #columntwo h3, #columntwo h4, #columnthree h1, #columnthree h2, #columnthree h3, #columnthree h4 {font-family:Georgia, times, serif; font-style:italic; font-weight:bold; margin-bottom:.75em; font-size:.9em; } #columnthree {position:relative; width:33%; float:right; display:none; } #image-left {position:absolute; left:0; top:10px; width:100%; } /* this positions the image far right, and gives it a barier to it's left, so it wont slide too far */ #image-left img {position:relative; float:right; margin-left:450px;} #contentshell dd {margin-left:0; } #contentshell li {margin-bottom:.5em; margin-right:20px; line-height:100%; } #contentshell ol a, #contentshell ul a {color:FFFFFF; text-decoration:underline; } #contentshell ol, #contentshell ul {margin-left:30px; padding:0 1em 0 1.7em; margin-top:0; } #contentshell dt, #contentshell dd, #contentshell li {font-size:70%; } .listheader {margin:.5em 0 .5em 55px; color:#FFFFFF; } .listheader a, #listheader a:visited {color:#FFFFFF; text-decoration:underline; } /* ---------------------------------------- Page ID level stuff ---------------------------------------- */ /* ---------------------------------------- Books ---------------------------------------- */ body.bookstop {background-color:#3D3D3D; } body.bookstop a, body.bookstop a:visited {color:#FFFFFF; } body.bookstop #columntwo {background-image:none; padding:36px 0 0 0; } body.bookstop #columnone {left:-32px; } body.bookstop #columnone img, body.bookstop #columntwo img {margin-right:10px; margin-bottom:10px; border:1px solid #3D3D3D; } body.bookstop #columnone img:hover, body.bookstop #columntwo img:hover {border:1px solid #AAAAAA; } /* body.bookstop #columnthree {position:relative; width:23%; float:right; display:inline; } */ body.bookstop #columnone p, body.bookstop #columnone h1, body.bookstop #columnone h2, body.bookstop #columnone h3, body.bookstop #columnone h4, body.bookstop #columnone h5 {margin-right:1px; margin-top:0 } body.bookstop #links-top li, body.bookstop #links-bottom li {border-color:#AAAAAA; } /* ---------------------------------------- Author ---------------------------------------- */ body#author {background-color:#1A1A1A; } body#author a, body#body #author a:visited {color:#FFFFFF; } #author #columntwo {background-image:none; padding:36px 0 0 0; } #author #columnone {left:-32px; z-index:10} #author #columtwo {left:-32px; z-index:12} #author #columnone img, #author #columntwo img {margin-right:10px; margin-bottom:10px; border:1px solid #3D3D3D; } #author #columnone img, #author #columntwo img {border-width:0 } #author #columnone img {margin-left:20px; } #author #columnone {top:-30px; } #author #columnone p, #author #columnone h1, #author #columnone h2, #author #columnone h3, #author #columnone h4, #author #columnone h5 {margin-right:1px; margin-top:0 } #author #links-top li, #author #links-bottom li {border-color:#AAAAAA; } /* ---------------------------------------- A Step From Heaven ---------------------------------------- */ body.astepfromheaven {background-color:#8E9F7B; } body.astepfromheaven a, body.astepfromheaven a:visited, .astepfromheaven #subnav {color:#D6E697; } body.astepfromheaven #links-top li, body.astepfromheaven #links-bottom li {border-color:#C4D0B7; } .astepfromheaven #links-top li a, .astepfromheaven #links-bottom li a, .astepfromheaven #links-top li a:visited, .astepfromheaven #links-bottom li a:visited {color:#D6E697; } /* ---------------------------------------- Wait For Me ---------------------------------------- */ body.waitforme {background-color:#3F667D; } .waitforme #subnav {color:#8BBFF0 } /* ---------------------------------------- The Fold grn b9d64a dk grn 387379 pink e24f9d ---------------------------------------- */ body.thefold {background-color:#ff99cf; } body.thefold a, body.thefold a:visited, .thefold #subnav {color:#ffbfe1; } body.thefold #links-top li, body.thefold #links-bottom li {border-color:#ffbfe1; } .thefold #links-top li a, .thefold #links-bottom li a, .thefold #links-top li a:visited, .thefold #links-bottom li a:visited {color:#fff2f9; } .thefold #columnone img {margin-left:40px; margin-right:40px; } /* total col width 288 */ /* ---------------------------------------- Interviews ---------------------------------------- */ #interviews #columnone {width:206px; } #interviews #columntwo {width:400px; padding:50px 0 0 0; } /* ---------------------------------------- Contact ---------------------------------------- */ #contact #columntwo {padding:50px 0 0 0; background:none; } #contact #columnthree {display:block; width:265px; float:left; padding:35px 0 0 0; } #contact #columntwo {position:relative; width:500px; float:left; padding:1em 0 0 0; background:none; } #contact #columntwo p, #contact #columntwo h1, #contact #columntwo h2, #contact #columntwo h3, #contact #columntwo h4 {margin:0 5px 10px 60px; } /* these two things format the page headers on book pages */ .waitforme #columntwo h2, .astepfromheaven #columntwo h2, .thefold #columntwo h2 {font-size:120%; font-weight:normal; line-height:120%; margin-bottom:.1em; margin-top:1em; ; } .waitforme #columntwo h3, .astepfromheaven #columntwo h3, .thefold #columntwo h3 {margin-top:0; } /* ---------------------------------------- MT - An Writing (in MovableType) ---------------------------------------- */ #anwriting #columnone {width:206px; padding:45px 0 0 0; } #anwriting #columnone ul.news-sidebar { margin: 0 20px 0 50px; padding: 0; font-size: 70%; line-height: 1.3em; } #anwriting #columnone li { margin: 5px 0; } #anwriting #columnone h4 {text-align: left; margin: 0 0 0 50px; padding: 0;} #anwriting #columntwo {width:400px; padding:100px 0 0 0; } #anwriting #columntwo p { font-size: 80%; } #anwriting #columntwo h2, #anwriting .entry h3 {font-size:120%; font-weight:normal; line-height:120%; margin-bottom:.1em; margin-top:0; } #anwriting p.subscribe { padding-top: 15px; border-top: 1px solid #666666; } #anwriting p.subscribe img { margin: 0; padding: 0; } #anwriting #columntwo ul.archives { list-style: none; margin: 0; padding: 0; font-size: 80%; } #anwriting #columntwo ul.archives .date { font-size: 85%; } #anwriting #columntwo ul.archives li { margin: 15px 0 15px 5px; } #anwriting #columntwo ul.archives li a { font-weight: bold; } #anwriting #columntwo p.subscribe { border-top: 1px #FFFFFF solid; } /* ---------------------------------------- IE Hacks for PNGs ---------------------------------------- */ * html #masthead-bg /* Will only be seen by IE */ {background: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='/images/fade_top.png',sizingMethod='scale'); } * html #logo /* Will only be seen by IE */ {background: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='/images/logo.png',sizingMethod='scale'); } * html #horizline /* Will only be seen by IE */ {background: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='/images/horiz_line_white.png',sizingMethod='scale'); } * html #links-bottom /* Will only be seen by IE */ {margin:0 0 0 30px; } * html #columntwo /* Will only be seen by IE */ {background: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='/images/black_trans.png',sizingMethod='scale'); } * html #contact #columntwo /* Will only be seen by IE */ {background: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='/images/black_transs.png',sizingMethod='scale'); }