/* 
simongriffee.css
SimonGriffee.com master stylesheet by Simon Griffee
Wednesday, 10 June 2010
*/

* {vertical-align:baseline; font-family:inherit; outline:0; margin:0; padding:0;}

body {
text-align:center;
color:#000;
background:#dcdcdc url(/images/noise-l.gif) repeat;
font-family:helvetica, verdana, sans-serif;
font-size:100%;
line-height:1em; /* 16x1.125=18px */
margin:0 0 15em;
}

p.skip {display:none;}
/*div#accessibility {position:absolute; top:23px; right:23px; z-index:100; display:none;}*/
/* =Links, =Images ------------------------------------------------ */

a {outline:none !important;} /* Prevent visible outline on clicked anchors in Firefox */
a:link {
text-decoration:none;
color:#c30;
border-bottom:1px solid #bbb;
}
a:visited {
text-decoration:none;
color:#930;
border-bottom:1px solid #bbb;
}
a:hover {
text-decoration:none;
color:#c30;
border-color:#ccc;
outline:none;
}
a:active {color:#f60; outline:none; border-bottom:none;}

img, a img {border:0 !important; border-style:none; text-decoration:none; margin-bottom:1em;}
a:link img, a:visited img {border:0 !important; border-style:none; text-decoration:none; border-bottom:none; cursor:pointer;}
a.imglink:link, a.imglink:visited, div.imglink a:link, div.imglink a:visited {border:none !important; cursor:pointer;}
/* Trying to stop IE form putting a border under linked images. Unsuccessful so far. Update: Had to assign a class to links: http://www.webmasterworld.com/forum83/2276.htm */

/* =Layout ------------------------------------------------ */

#header {
/*    height:80px;*/
    position:relative;
    margin:25px auto 0 !important;
    padding:0 !important;
    }
body.storiesstoryindex #header {margin-bottom:15px !important;}

#lightswitch a {position:absolute; top:0; right:0; width:32px; height:28px; display:block; text-indent:-2000em; background:transparent url(../images/lightswitch.gif) no-repeat 0 0; border:none;}
#lightswitch a:hover, #lightswitch a:active {background-position:0 -28px;}
#lightsoff {display:block !important;}
#lightson {display:none !important;}


p.breadcrumbs {font-size:0.75em; line-height:1.461em;}
p.breadcrumbs span {margin:0 0.25em;}
p.breadcrumbs a.active {border:none; font-weight:bold;}
/*p.breadcrumbs a {color:#ccc;}
p.breadcrumbs a:hover, p.breadcrumbs a:active {color:#fff;}
*/

#page {position:relative; /*max-width:970px;*/ margin:0 auto 0; /*background:#eee;*/}
body.storieslatest, body.storiesstoryindex, body.notebookthumbnails {margin-left:20px; margin-right:20px;} 
body.notebookthumbnails {margin-left:30px; margin-right:20px;} 

#content {text-align:left; clear:both;} /*=Note: commented out apparently unecessary width…check in IE…
*/
body.textpage #content {margin-top:3em;}

body#stories #content,
body.storieslatest #content, 
body.storiessingles #content,
body.storiesstoryindex #content,
body.storiestitle #content,
body.notebookthumbnails #content,
body.notebooktitle #content,
body.notebooktimeline #content {width:auto !important; /*max-width:970px !important;*/}

div#textframe {max-width:32em; margin:0.5em auto 0;}
div#textframe.withimage {margin-bottom:3em;}
body.story div#textframe {margin:0 auto !important;}
div#textframe h1, div#textframe h2 {text-align:center;}
body.textpage div#textframe h1, body.textpage div#textframe h2 {text-align:left;}
div#textframe img {}
/*div#textframe.withimage img {overflow:visible; margin-left:-10em;}*/

/*  =Logo ---------------- */
h1#logo {letter-spacing:0.1em; font-size:1em !important; font-weight:bold; margin:0.7em 0 0.4em; line-height:1em;}
body#about h1#logo,
body#contact h1#logo,
body.storieslatest h1#logo,
body.storiestitle h1#logo,
body.storiestimeline h1#logo
{margin-bottom:0.6em;}

h1#logo a {margin:0; padding:0.25em 0.45em;}
h1#logo a:hover {background:#ccc;}
body.storiesstoryindex h1#logo {text-align:left; margin:0 0 0 -0.4em;}

#navcontainer {padding:0; text-align:center;}
body.storiesstoryindex #navcontainer {padding-top:1em; text-align:left; margin-left:-0.3em;}

#navcontainer ul {padding:0; margin:0; list-style-type:none; position:relative;}

#navcontainer li {display:inline;}
#navcontainer li.active {font-weight:bold; letter-spacing:-0.025em;}
#navcontainer li.active span {font-weight:normal;}
.normal {font-weight:normal;}

/*1st level elements*/
#navcontainer ul {margin-bottom:0.5em;}

#navcontainer li {margin:0; font-size:0.8em;}

#navcontainer ul a,
#navcontainer ul a:link,
#navcontainer ul a:visited
{color:#111; padding:0.35em 0.45em 0.25em; border:none;}

#navcontainer ul a:hover,
#navcontainer ul a:focus
{color:black; background:#ccc;}

ul.subnav em {font-style:normal;}
ul.subnav a {background:#ccc;}
ul.subnav a:hover, ul.subnav a:focus {background:#aaa !important;} 

body.storieslatest li#nav-storieslatest a,
body.storiestitle li#nav-storiestitle a,
body.storiestimeline li#nav-storiestimeline a
{font-style:italic;/* padding:0.5em 0.75em;*/ font-weight:normal; background:#ccc;}

body#notebook #navcontainer li#nav-notebook a,
body#about #navcontainer li#nav-about a,
body#contact #navcontainer li#nav-contact a,
body#stories #navcontainer li#nav-stories a,
body#stories #navcontainer li#nav-archives a
{/*font-style:italic;*/ letter-spacing:-0.025em; background:#ccc;}




#footer {clear:both; width:26em; margin:0 auto; text-align:center; padding-top:1.5em;}
body.notebookthumbnails #footer {padding-top:2em;}
body.storieslatest #footer, body.storiesstoryindex #footer {width:auto !important;}
/*body#stories #footer {padding-top:4em;}*/
#footer input {color:#888 !important; margin:0 0 0.75em;}
#footer p {color:#888 !important; font-size:0.75em; line-height:1.65em; margin:0 0 0.55em;}
#footer a {color:#888 !important; border-color:#444; border:0;}
#footer a:hover, #footer a:active {border:none; background:#ccc; color:#666 !important;}
/*#footer.largetopmargin {clear:both; padding-top:10em !important;}*/

h1 {font:bold 1.0625em/1.375em helvetica, arial, sans-serif; margin:-0.15em 0 0.3em; color:#000;}
/*body#stories h1 a:link, body#stories h1 a:visited {border:none; color:#fff; font:bold 1.0625em/1.375em helvetica, arial, sans-serif;}*/
h2#NotebookPhotoTitle, h2#StoryPhotoTitle {clear:both; font:normal 0.85em/1em helvetica, arial, sans-serif; margin:0 0 1em !important; font-weight:normal; white-space:nowrap; text-align:center;}
h2#NotebookPhotoTitle a, h2#StoryPhotoTitle a {color:#888;}
div#textframe.withimage h2 {text-align:left;}
body#stories div#textframe {color:#888;}
h1.weakcaption {font-weight:normal !important; font-size:0.75em !important;}

body#prints h1#StoryPhotoTitle {font-style:normal; font-weight:bold;}
h1 a:link, h1 a:visited {border:none; color:#000;}
h1 a span {font-size:0.6875em; line-height:2em; border-bottom:1px solid #ccc; color:#777;}
h1 a:hover, h1 a:active {border:none; color:inherit;}
h1.printofthemonthtitle {font-family:georgia, times, sans-serif; font-weight:normal; letter-spacing:0.050em;}
.extramargin {margin:0.5em 0 1em;}

h2, dt {font:bold 1em/1.4em helvetica, arial, sans-serif; color:#000; margin:1.5em 0 0.5em; } 
h2 a:link, h2 a:visited {border:none;} 
body#home h2 a:link, body#home h2 a:visited {border:none; color:#000;}
h2 a:hover, h2 a:active {border-bottom:1px solid #ccc; color:#c30 !important;}
h3 {font:bold 0.75em/1.461em helvetica, arial, sans-serif; color:#000; margin:0 0 0.6em; }
h3 a:link, h3 a:visited {border-color:#ccc;}
h3 a:hover, h3 a:active {color:#f60; border:none;}
h4 {font-size:0.75em; font-weight:normal; font-style:italic; margin:1.7em 0 0.5em; }
h5 {font-size:0.55em; text-transform:uppercase; margin:1.7em 0 0.5em; }
h6 {font-size:0.55em; text-transform:uppercase; font-style:italic; margin:1.7em 0 0.5em; }

/****************************************************************************
=Paragraphs, =Misc
****************************************************************************/

p {margin-bottom:1.186em; font-size:0.9em; line-height:1.45em;} /* 13x0.8125=13px */
.center {text-align:center;}
li, dd {font-size:0.8125em; line-height:1.286em;} /* 14x1.286=18px */

div.ThumbTitleCaption {
    float:left;
    width:12em;
    height:260px;
    margin:0.5em 1.25em 2em;
    padding:0;
    }
    div.ThumbTitleCaption:hover, div.ThumbTitleCaption:active {background:#ddd !important;}
div.ThumbTitleCaption img {margin-bottom:0.5em !important;}
div.ThumbTitleCaption h3 {margin-bottom:0.25em;}
div.ThumbTitleCaption p {font-size:0.75em; line-height:1.261em; margin-bottom:0.25em;}
div.ThumbTitleCaption p.small {font-size:0.65em; line-height:1.25em; display:inline;}

div.homethumb {width:9em; margin-right:-5.7em; clear:both;}
div.homethumb h3, div.homethumb p {margin-bottom:0;}
ul#titlelist, ul#timelinelist, ul.archivelist {list-style:none;}

ol.thumbs {margin:0 0 0 10px !important;}
body.storiesstoryindex ol.thumbs {margin:0 0 0 247px !important;}
ol.thumbs li {
/*    display:block;*/
    float:left;
    list-style:decimal outside;
    color:#bbb;
    margin:0 0 0 30px;
    }
ol.thumbs li a {
/*    background:#fc0;*/
    display:block;
    height:155px;
/*    list-style:decimal inside;*/
    border:none;
    }
ol.thumbs li:hover, ol.thumbs li:active {color:#000 !important;}
ol.thumbs li img {margin:-10px 0 0 -20px; padding:10px;}

ol.thumbs li.textthumb {padding:0 10px 0; /*display:block !important;*/ width:100px !important;}
ol.thumbs li.textthumb a {display:inline !important;}
ol.thumbs li.textthumb h3 {display:block !important;}

ol.thumbs.potm li {margin-bottom:1.5em;}
ol.thumbs.potm li:hover, ol.thumbs.potm li:active {background:#ddd;}
ol.thumbs.potm li a {display:inline !important;}
ol.thumbs.potm li p {margin-left:10px !important;}

ul.pagination {margin:0; clear:both;}
ul.pagination li {list-style:none; float:left; display:block; margin-right:3px; border:1px solid #ccc;}
ul.pagination li a {display:block; padding:3px 5px;}
li.inactive {padding:3px 5px; border-color:#ccc !important; color:#ccc !important;}
li.currentpage {background:#ddd; border-color:#dcdcdc !important; color:#111 !important;}

/*body.story #header {height:40px;}*/
/*body.storyphoto #header {height:70px;}*/
h1#storytitle {text-align:left; letter-spacing:1px; font-size:2.25em; font-weight:bold; line-height:1em; margin:0 0 0.45em;}
h1#storytitle a {color:#222 !important;}

div#information, div#information_index {
    width:234px;
    float:left;
    margin:0 0 3em 0;
    }
div#information.autowidth {width:auto !important; max-width:26em;}

div#information_index {margin-top:2px;}
div#information ul.storynav {list-style:none;}
div#information ul.storynav li {font-size:0.75em; line-height:1.461em;}
div#information ul.storynav li.arrownav a, div#information ul.storynav li.pagenav a {border:solid 1px #ccc; padding:3px 4px 1px 4px; display:block;}
div#information ul.storynav li.storynavselected {font-weight:bold; background:#c00;}
/*div#information h1 {padding-top:0.75em;}*/
div#information h1 a {font:bold 1.125em/1.375em helvetica, arial, sans-serif;}
p.sectiontitlemeta {font-style:italic; line-height:inherit; margin:0 0 0.25em !important;}
p.sectiontitlemeta a:link, p.sectiontitlemeta a:visited {border:none; color:#111;}
p.sectiontitlemeta a:hover, p.sectiontitlemeta a:active {color:#c30;}

img#potmplate, div.potmthumb img, img.potmthumb, ol.thumbs.potm li img {
    border-top:6px solid #b3b3b3 !important;
    border-right:6px solid #d5d5d5 !important;
    border-bottom:6px solid #fff !important;
    border-left:6px solid #c1c1c1 !important;
    }
div.potmthumb img, img.potmthumb, ol.thumbs.potm li img {border-width:3px !important;}
img#potmplate {margin-bottom:1.25em !important;}

/* =photonav overlay --------------------------------------------- */

div#plateframe {position:relative; margin:0 auto 0; text-align:center;}
body#notebook div#plateframe {margin:0 auto;}
div#plateframe a {border:none !important;}
/*div#plateframe img {border:11px solid #000 !important;}*/

p.ruler {clear:both; height:0; width:0; border:none; margin:0; padding:0; text-indent:-2000em;}

body#search p.date {text-align:left;}
p.feeds {padding-top:3em;}
p.caption, div.caption {font-size:0.75em; line-height:1.261em; font-style:italic; clear:both; text-align:center;}
p.entry-summary {margin-bottom:3em;}
p.smallprint, p.footnote {font-size:0.75em; letter-spacing:0.055em;}
p.footnote {color:#666;}
span.caps, strong.caps {font-size:0.95em; line-height:0;}
.current {font-style:italic; border-left:8px solid #ddd; padding-left:5px;}
li.current a {color:#000 !important;}
.clear {clear:both;}
.quiet {color:#666;}
h1 span.smaller {font-size:0.875em; line-height:0;}
.floatleft {float:left; margin:0 1.5em 1em 0;}
.floatright {float:right; margin:0 0 2em 2em;}
.clearboth {clear:both;}

div.sec {margin-bottom:4em; clear:both;}

hr, div.end {
    height:1px;
    background:#cc9;
    margin:3em -240px 3.5em;
    width:740px;
    border:none 0; 
    display:block;
    clear:both;
    color:#fff;
    }
* html body hr {height:0; background:none; margin-top:-10px;}
blockquote {margin:1em 0 1.286em; padding-left:1em; border-left:1px solid #bbb;}
pre {
    font-family:monospace;
    font-size:0.75em;
    line-height:1.461em;
    background:#eee;
    padding:10px;
    }
em, i, cite {font-style:italic;}
strong, b {font-weight:bold;}
del {text-decoration:line-through;}
ins {background:#ffc; text-decoration:none; border-bottom:1px dashed;}
kbd {background:#ff9;}
acronym, cite {border-bottom:1px dashed #999;}
address {margin:1.5em 0; font-style:italic;}
sup {line-height:0;}

body#archive #content p {margin-top:0; margin-bottom:0.25em;}
body#archive #content p em {
	font-size:0.75em !important; line-height:1.461em;
	}
ul#notebooktitlelist {list-style:none;}
body.notebooktimeline div#content dl#timelinelist dt {margin:1.286em 0 0; /*same as h2*/}
body.notebooktimeline div#content dl#timelinelist dd.archiveday {font-weight:normal; margin:0 0 -1.286em 0;}
body.notebooktimeline div#content dl#timelinelist dd.archivetitle {position:relative; color:#999; margin-left:1.5em;}
em.capturedate, .small {font-size:0.75em; line-height:1.35em; color:#777;}
em.capturedate {font-style:normal;}
body.searchresults strong {background:#ff9;}

/****************************************************************************
=Lists
****************************************************************************/
ul {font-size:inherit; list-style:disc inside;}
ul.left {float:left;}
ul.right {float:right;}
dl {font-size:1em; line-height:1.4em;}
	
#content ul, #content dl, #content ol {margin:0 0 1.286em 0.1em;}
ol {font-size:inherit; list-style:decimal inside;}

a#defaultstyle {border:none; font-weight:bold;}
a#darkstyle {border-bottom:solid 1px #444; font-weight:normal;}
a#lightstyle {border-bottom:solid 1px #444; font-weight:normal;}
a#largerstyle {border-bottom:solid 1px #444; font-weight:normal;}

/****************************************************************************
=Forms
****************************************************************************/
form.zemContactForm {margin:0 0 2em;}
input, textarea {font-size:0.75em; line-height:1.25em; background:#eee; margin:0 0 1em; border:1px solid #999; /*padding:3px; font-size:0.75em; line-height:1.461em; */font-weight:normal !important; padding:0.25em 0.55em;}
div#packetform label {font-style:italic;}
div#packetform select {padding:2px; font-size:0.75em;}
div#packetform input {padding:0; background:transparent;}
label {font-size:0.75em; line-height:1.461em; font-weight:bold;}
/*textarea {background:#fff; padding:4px 2px;}*/
div#purchaseform form {background:#efefef; padding:10px;}
div#purchaseform input, div#purchaseform textarea {background:#cf9;}
div#purchaseform h3 {margin-bottom:1.286em;}
div#purchaseform h3 span {color:inherit; font-weight:normal;}
div.purchasebutton input {border:none !important; padding:0 !important; margin-bottom:0.25em;}
/*div.purchasebutton input:hover {border-right:1px solid #cf9 !important;}*/
p.thankyou {background:#efefef; color:#444; font-family:georgia, times, sans-serif; font-weight:normal; letter-spacing:0.050em; padding:2em; font-style:italic; text-align:center;}
input.checkbox {margin:1em 0 0;}
input.zemRadio {margin:0 0 0 1em; padding:0;}
select {display:block; margin-bottom:1em;}
fieldset {padding:1em 0; border:none;}
form#search label {display:none;}
form#search input {/*border:1px dotted #999; */background:#dcdcdc; border:1px solid #c0c0c0;}
input.zemSubmit {background:none !important; /*border:1px dotted #999 !important;*/ cursor:pointer; color:#444;}
input:hover, input:active {background:#eee !important; color:#666;}
/*form.zemContactForm input.zemSubmit {background:#999 !important;}*/

ul.zemError {color:#c00 !important; padding:10px; border:2px solid #c00; width:auto; background:#eee;}
div.zemThanks p {padding:2em 3em; background:#ffc; text-align:center; font-family:georgia, times, serif; font-size:1.125em; line-height:1.375em; font-style:italic;}

/****************************************************************************
=Tables
****************************************************************************/
table {width:38em; padding:0; margin:0 0 2em; border-collapse:collapse;}
table caption {padding:0 0 0.8em 0; width:auto; font-style:italic; text-align:right;}
table th {text-align:left; border:1px solid #353535; padding:0.7em; letter-spacing:0.1em; color:#000; font-size:0.75em; line-height:1.461em;}
table td {border:1px solid #353535; padding:0.7em; font-size:0.75em; line-height:1.461em;}
table td.alt {}
table th.vert {border-left:1px solid #000; border-top:0; font:bold 10px helvetica, sans-serif;}
table th.vertalt { border-left:1px solid #000; border-top:0; font:bold 10px helvetica, sans-serif;}
.alignright {text-align:right;}
.aligncenter {text-align:center;}
table#printdetails {width:26em;}

/* =photos --------------------------------------------- */

ul#photos {
margin:0;
padding:0;
}
ul#photos li {
display:block;
float:left;
}
ul#photos li a {
display:block;
width:120px;
height:90px;
list-style:none;
border:2px solid #fff;
margin:0 8px 8px 0;
}
ul#photos li a:hover {border-color:#633;}