/* CSS Document 
Site: David Coogan
URL: www.davidcoogan.com
Updated: 3/6/09
Media: screen
*/

@import url("reset.css");

body {margin: 0 auto; padding: 0; background: #000 url(../images/background/bg-01.jpg) 50% 0 no-repeat; font:100%/1.5em Georgia, serif; color: #323232;}
	html>body {font-size: 16px;}

/* Links
-------------------------------------------------------------------------------------*/
a:link, a:visited, a:active {padding-bottom:.1em;color: #1d68a0;text-decoration: none;border-bottom: 1px solid #dbd8c2;font-weight:bold;}
a:hover {padding-bottom:.1em;color: #3f2d0c;border-bottom:1px solid #3f2d0c;background:#dddbcf;}
a:active, a:focus {padding-bottom:.1em;color: #1d68a0;text-decoration: none;border-bottom: 1px solid #dbd8c2;font-weight:bold;}

/* Test Grid
-------------------------------------------------------------------------------------

body div.grid {position:relative; margin:0 auto; width:960px; }
body div.grid span {position:absolute; top:0; left:0;  z-index:150; background:url(../images/16col.png) repeat-y; width:960px; min-height:1500px;}*/

/* Layout - General
-------------------------------------------------------------------------------------*/
#header {background: transparent url(../images/layout/bg-nav-65.png) repeat-x 0 100%; width: 100%; height: 70px;}
#container {margin:0 auto; padding: 0; width:960px; position: relative;}
#content, #content-main, #col3 {display: inline; float: left; margin-left: 10px; margin-right: 10px;}
#content {width: 940px; margin-top: 50px; background: transparent url(../images/layout/bg-contenthead.png) 0 0 repeat-y; min-height: 350px;}
#content-main {width: 580px; margin:100px 0 0 0; padding:40px 120px 4em 240px; background: #fff; position: relative;}

/* Laout - Home page
-------------------------------------------------------------------------------------*/
body.home #content {width: 940px; margin-top: 50px; background: transparent url(../images/layout/bg-contenthead.png) 0 0 repeat-y; min-height: 350px;}
body.home #content-main {width: 100%; margin:0; padding:0; background: #fff; position: relative;}
body.home #content-secondary {display: inline; float: left; margin:0; padding:0; width:100%;}
body.home .col3 {float:left; width: 300px; margin-right: 10px; padding:0; background: #fff; height: 14em;}
body.home .col3 .gutter {width:auto; padding:.12em 1em 1em 1em;}
body.home .col3 h3 {background:#A39F90; width:288px; font-weight:700; color:#474338; margin-bottom:1em; padding:.3em 0 .5em .75em;}
body.home .col3 p {font-size:80%;}

/* Laout - Book pages
-------------------------------------------------------------------------------------*/
#content-main {width: 540px; margin:200px 0 0 0; padding:40px 160px 100px 240px; background: #fff; position: relative;}

/* Header
-------------------------------------------------------------------------------------*/
/* Identity */
#header a#identity {display: block; background: url(../images/layout/logo-coogan.png) no-repeat; position: absolute; top: 15px; left: 50%; width: 250px; height: 55px; margin-left: -469px; z-index: 100; border:0;}
#header a#identity span {display: none;}
/* Navigation  */
#navigation {width:960px; margin:0 auto;}
#navigation ul {position: relative; display:inline; float:right; width: 726px; text-align: left; margin:0;}
#navigation ul li {display: inline;}
#navigation ul li a {position: relative; margin-left: 15px; display: inline-block; background:none; width: 160px; height: 29px; font: 1em Helvetica, sans-serif; color: #fff; text-decoration: none; text-transform: uppercase; text-align:center; padding: 25px 0 15px 0; border:0;}
#navigation ul li a:hover {background:#1D68A0; filter: alpha(opacity=100); -moz-opacity: 1; opacity: 1;}

/* active page */
body.about #navigation ul li#about a {background:#000;}
body.story #navigation ul li#book a {background:#000;}
body.workshop #navigation ul li#workshop a {background:#000;}
body.contact #navigation ul li#contact a {background:#000;}

/* Typography
-------------------------------------------------------------------------------------*/
#content p, #content li {margin-bottom: 1.5em; line-height: 1.5em;}
#content p.intro span {font-weight: 700;}

/* Drop caps for first letter in story */
#content p.drop:first-letter {
	font:normal 40px/40px Georgia;
	margin-top:-4px;
	margin-bottom:-8px;
	float:left;
	}
#content p.dropquote:first-letter {
	/* with quote mark at start */
	font:normal 40px/40px Georgia;
	margin-top:-4px;
	margin-bottom:-8px;
	margin-left:-17px;
	float:left;
	}

/* Headers */
h1 {font-size: 2em; line-height: 1.5em; padding: 0.5em 0}
h2 {font-size: 1.5em; line-height: 1.25em; margin-bottom: 0.6em;}
h3 {line-height: 1.5em;}
h4 {font-size: 1em; line-height: 1.125em; padding-bottom: 0.375em; margin-top: 1.5em;}

/* Page title section */
#content-main h1 {position: absolute; width: 600px; height: 40px; font: 2.25em Helvetica, sans-serif; color: #fff; left: 240px; top: -90px;}

/* Story title section */
#content-main h1.title {position: absolute; width: 600px; height: 40px; font: 2.5em Helvetica, sans-serif; color: #fff; left: 240px; top: -165px;}
#content-main h2.author {position: absolute; width: 600px; height: 30px; font: 1.25em Helvetica, sans-serif; color: #fff; left: 240px; top: -90px;}
#content-main h2.chapter {position: absolute; width: 115px; height: 30px; font: 4em Helvetica, sans-serif; color: #fff; text-transform: uppercase; left: 60px; top: -146px;}

/* Lists */
#content-main ul {margin:1.5em 0 1.5em 1.5em;}
#content-main ol {margin:1.5em 0 1.5em 0; border:0;}
#content-main ul li {margin:0 0 .5em 0;}
#content-main li p {font-size: 1em;}
#content-main ol li {list-style: decimal; margin:0 0 .5em 0;}

/* Blockquotes */
blockquote.bar {margin:25px 0 25px -80px; width: 680px; padding: .25em 10px .25em 20px; font-size: 1.4em; line-height: 1.3em; color: #2B88B1; border-left: 5px solid #2B88B1;}

/*blockquote.bar {float:left; margin:0 0 25px -180px; width: 380px; padding: 0 10px 0 20px; font-size: 1.4em; line-height: 1.2em; text-indent:-0.4em; color: #537897; border-left: 15px solid #abc6df;}*/

blockquote.left {display:block; float:left; margin: 0 20px 0 -240px; width:380px; padding:30px 20px 15px 60px; font-size: 1.15em; color: #fff; background: #666; letter-spacing:0.025em; line-height: 1.2em;}

blockquote.right {display:block; float:right; text-align:left; margin: 0 -120px 1.5em 20px; width:260px; padding:30px 30px 40px 40px; font-size: 1.15em; color: #fff; background: #666;}

/* Blocquote on Home page */
body.home blockquote {width: 950px; height:340px; background: transparent url(../images/layout/bg-contenthead.png) 0 0 repeat-y;  margin:0; padding:0; color:#fff;}
body.home blockquote p.main {padding:50px 0 10px 60px; width: 760px; height: 140px; font: 2em Helvetica, sans-serif; color: #fff;}
body.home blockquote p.cite {display:block; margin-left:420px; width:450px; height: 40px; font: 1.25em Helvetica, sans-serif; color: #fff; }

/*  Bio block at bottom of chapters
----------------------------------------------------------------------------------------------------------- */
div#bio {position:relative; background:#797766 url(../images/background/ripped-edge2.gif) bottom left no-repeat; margin:4em 0 0 -240px; padding:0 0 4em 0; font-size:95%; float:left; display:inline; width:940px; color:#fff;}
div#bio .gutter {background:#797766 url(../images/background/ripped-edge1.gif) 0 0 no-repeat; padding:4em 0 0 0;}
div#bio img{position:absolute; left:0; top:4em; width:180px; z-index:250;}
div#bio .columns h2 {margin-left:240px; padding:0;}
.columns {float:left; padding-bottom:1em;}
.columns .col1 {width: 275px; margin-left:240px; float:left; display:inline; margin-right:2em; }
.columns .col2 {width: 275px; float:left; display:inline;}
p#current {clear:both; border-left:4px solid #3F3E33; background:#605E50; margin:0 0 3em 240px;  padding:1.5em 120px 2em 2em; font-style:italic;}

/*  Book index columns
----------------------------------------------------------------------------------------------------------- */
div#book-index .columns {font-size:95%;}

/*  Feature block
----------------------------------------------------------------------------------------------------------- */
div.feature {background:#fff; padding:4px; border:1px solid #807C6C; border-right:0; padding-right:0; margin:0 -160px 1.5em 1.5em; float:right; width:274px; height:auto;}
div.feature .gutter {background:#CBC8B1; float:left; display:inline; width:274px;}
div.feature img {float:left; display:inline;}
div.feature p.caption {display:inline; float:left; font-size:85%; padding:.75em 1em 1em 1em; line-height:1.5em; height:auto;}

/*  sIFR -- the sifr.swf replaces header text -- for info go to http://wiki.novemberborn.net/sifr/
----------------------------------------------------------------------------------------------------------- */
/* These are standard sIFR styles... do not modify */
.sIFR-flash {visibility:visible !important;margin:0;}
.sIFR-replaced {visibility:visible !important;}
span.sIFR-alternate {position:absolute;left:0;top:0;width:0;height:0;display:block;overflow:hidden;}

/* These "decoy" styles are used to hide the browser text before it is replaced */
.sIFR-hasFlash #content-main h1,
.sIFR-hasFlash #content-main h1.title{visibility:hidden;letter-spacing:0;font-size:24px; line-height:1em;}
.sIFR-hasFlash #content-main h2.author {visibility:hidden;letter-spacing:0;font-size:16px; line-height:1em;}
.sIFR-hasFlash #content-main h2.chapter {visibility:hidden;letter-spacing:0;font-size:15px; line-height:1em;}
.sIFR-hasFlash body.home blockquote p.main {visibility:hidden;letter-spacing:0;font-size:30px; line-height:1.2em;}
.sIFR-hasFlash body.home blockquote p.cite {visibility:hidden;letter-spacing:0;font-size:16px; line-height:1.2em;}

/* Sub Navigation
-------------------------------------------------------------------------------------*/
#sub-bar {position:relative; width:940px; height:40px; margin:-80px 0 40px -240px; background:transparent url(../images/layout/bg-contenthead.png) 0 0 repeat-y; float:left; display:inline-block; zoom:1;}
h3.contents {position:absolute; color:#fff; left:240px; top:0; margin:0; width:100px; z-index:10;}
ol#sub-nav {position:absolute; left:234px; top:0; margin:0; width:600px; list-style:none;}
ol#sub-nav li {display:inline; float:left; margin:0; padding:0; color:#333; border-right: solid 1px #3b3b3b;}
ol#sub-nav li a {font-weight:400; display:block; height:27px; background:none; color:#888; padding: 7px 8px 6px 8px; text-decoration:none; text-align:center; width:auto; border:0;}
ol#sub-nav li a:hover {background: #000; color:#eee;}
ol#sub-nav li a.current {background: #fff; color:#212121;}

/* Images
-------------------------------------------------------------------------------------*/
img {border: 0;}
img.imgright {float: right; margin: 0 0 1.5em 1.5em;}
img.imgleft {float: left; margin: 0 1.5em 1.5em 0;}
body.home .col3 .imgleft {margin: 0 1em .5em 0;}
img.imgflushleft {float:left; margin:0 1.5em 1.5em -240px;}

div#photo-info {float:right; margin:0 -160px 2em 2.5em; width:280px; font-size:11px; background:#CBC8B1;}
div#photo-info-left {float:left; margin:0 2.5em 2em -240px; width:280px; font-size:11px; background:#CBC8B1;}
div#photo-info p, div#photo-info-left p {padding:1.5em; padding-top:1em; line-height:1.75em;"}


/* Forms
-------------------------------------------------------------------------------------*/
/* contact */
body.contact div.content-form {margin: 0 0 0 -180px; padding: 0; width: 820px; font-size:85%;}
body.contact div.content-form form {margin: 0 0 2.5em 0; padding: 0;}
body.contact div.content-form form fieldset {margin: 0 0 1em 0; padding: 0 0 1em 0; border: none; border-bottom: 1px dotted #c7c7c7;}
body.contact div.content-form form fieldset label {float: left; width: 11.5em; margin: 0 2em 0 0; padding: 0; font-weight: bold; line-height: 1.5em; color: #444;}
body.contact div.content-form form fieldset div.field {float: left; width: 33em; margin: 0 1em 0 0;}
body.contact div.content-form form fieldset div.field label {float: none; width: auto; font-weight: normal;}
body.contact div.content-form form fieldset div.field input.input-text {width: 31.2em; padding: .5em; font-size: 1em; color: #444;}
body.contact div.content-form form fieldset div.field textarea {width: 31.2em; padding: .5em; font-size: 1em; color: #444;}
body.contact div.content-form form div.submit {padding-left: 13.4em;}

/* Miscellaneous
-------------------------------------------------------------------------------------*/
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clear {clear: both;}
.floatleft {float: left;}
.floatright {float: right;}
.inline {display: inline;}
em {font-style: italic;}
.right {text-align: right;}

/* Footer
-------------------------------------------------------------------------------------*/
#footer {display:block;clear: both; width: 940px; margin: 0 auto; padding: 1.5em 0 3em 0; color:#817F6C; font-size:85%;}
#footer .gutter {display:block;height:100px; padding:20px;}

/* Back to top link */
.toplink, .toplink:hover {padding-left:14px; background: url(../images/layout/icon-toplink.gif) top left no-repeat;}
#content p.toplink {font-size: 1.1em;}
	
/* Jump to content - for screen readers
-------------------------------------------------------------------------------------*/
#jumptocontent {position: absolute;top: -1000px;}