@import url(http://markwunsch.com/styles/reset.css/);

body {
	margin: 0;
	padding: 0;
	font-family: "Trebuchet MS", "Lucida Grande", Verdana, serif;
	background: #3f3f3f;
	color: #eee;
	font-size: 75%;
	}
/* 75% of 16px = 12px */	

a:link, a:visited { 
	text-decoration: none; 
	color: #85a3c2;
	border-bottom: 1px solid #656565; 
	}
a:hover, a:focus  { color: #eee; border-bottom-color: #369; }
a:active 		  { color: #d9d9d9; }

h1,h2,h3,h4,h5,h6 { font-weight: normal; }

h1 { font-size: 3em; line-height: 1; margin-bottom: 0.5em; }
h2 { font-size: 2em; margin-bottom: 0.75em; }
h3 { font-size: 1.5em; line-height: 1; margin-bottom: 1em; }
h4 { font-size: 1.2em; line-height: 1.25; margin-bottom: 1.25em; }
h5 { font-size: 1em; font-weight: bold; margin-bottom: 1.5em; }
h6 { font-size: 1em; font-weight: bold; }

p, blockquote, cite, dl, pre
	{ margin: 0 0 1.5em 0; }
blockquote { 
	font-family: Georgia, Times, serif; 
	text-align: justify; 
	color: #b2b2b2; 
	}
cite { text-align: right; display: block; font-style: italic;  }

strong	  { font-weight: bold; }
em     	  { font-style: italic; }
sup, sub  { line-height: 0; }
abbr	  { 
		    border-bottom: 1px dotted #656565; 
			font-variant: small-caps; 
			text-transform: lowercase; 
			letter-spacing: 1px;
            }
address   { font-style: normal; }
del       {color:#6F5D5D;}
ins		  { color: #4F9438; }

code, kbd { font-family: "Andale Mono", "Courier New", Courier, monospace; }
pre   	  { white-space: pre; }

li ul, 
li ol       { margin: 0 1.5em; }
ul, ol      { margin: 0 1.5em 1.5em 1.5em; }
dl dt       { font-weight: bold; }
dd          { margin-left: 1.5em;}

table       { margin-bottom: 1.4em; width:100%; }
th          { font-weight: normal; border-bottom: 1px solid #656565; }
th,td       { padding: 4px 10px 4px 5px; }
tr.even td  { background: #e5ecf9; }
tfoot       { font-style: italic; }
caption     { background: #999; }			  

abbr.date {
	border-bottom: none; 
	font-variant: normal; 
	text-transform: none; 
	letter-spacing: normal;
	}

#masthead, .footerContent, #content { width: 60em; }

/* HEADER
-------------------------------------------------------------- */
#header {
	margin: 0 0 1.5em 0; 
	padding: 0;
	background: #369;
	}
#masthead 	 { margin: 0 auto; }
h1#pagetitle { 
	margin: 0;
	padding-top: 0.25em;
	font-size: 6em;
	text-transform: uppercase;
	font-family: "Adobe Garamond Pro", "Hoefler Text", Times, Georgia, serif;
	}
h1#pagetitle a:link, h1#pagetitle a:visited 
	{ border-bottom: none; color: #bebec8; }
h1#pagetitle a:hover 
	{ color: #dedfe3; }

/* CONTENT
-------------------------------------------------------------- */
/* To make the site elastic, 1 em is 12px.
    Here are some of the measurements:
        60em = 720px ( grid width )
        1.5em = 18px ( line height )
        48.5em = 582px
        11.5em = 138px 
      
	67.67em = 812px
	1.33em 	= 16px
	52.33em = 628px
	1.5em 	= 18px
	40.83em = 490px
	10.17em = 122px
	14em	= 168px
	2.5em 	= 30px
	0.83em 	= 10px */

#content { margin: 0 auto; }
.hentry	 { 
	clear: both; 
	border-top: 1px solid #656565; 
	position: relative;
	width: 48.5em;
	padding: 1.5em 0 0 11.5em; 
	}
.hentry.first, .hentry.permalink { border-top: none; padding-top: 0; }
h2.entry-title { margin-bottom: 0; }
.article h2.entry-title a:link, .article h2.entry-title a:visited { 
	color: #fff;
	font-family: "Adobe Garamond Pro", "Hoefler Text", Times, Georgia, serif; 
	font-style: italic; 
	font-variant: small-caps; 
	}
.article h2.entry-title a:hover, .article h2.entry-title a:active
	{ border-bottom: 1px solid #369; }
.link h2.entry-title  { font-size: 1.2em; line-height: 1.25; margin-bottom: 0; }

.quote blockquote	{ font-size: 1.2em; line-height: 1.25; margin-bottom: 1.25em; }
.article blockquote { margin: 0 2.5em 1.5em; }

/* ENTRY META */
.meta { 
	position: absolute;
	left: 0;
	top: 1.8em;
	width: 12.2em; /* or 122px */
	font-size: 0.83em; /* or 10px */
	line-height: 1.8;
	}
.article .meta { padding-top: 1.8em; }	
.hentry.first .meta, .hentry.permalink .meta { top: 0; }
.meta a {
	color: #b2b2b2;
	border-bottom: none;
	display: block;
	}
.meta a:hover { color: #fff; background-color: #656565; }	
.entry-date 	{ 
	border-bottom: 1px solid #8c8c8c; 
	}
.entry-date a {
	padding: 0 4px;
	background: no-repeat top right;
	}
.quote .entry-date a 
	{ background-image: url(http://markwunsch.com/images/interface/comment.png);}
.article .entry-date a 
	{ background-image: url(http://markwunsch.com/images/interface/page_white_text.png);}
.link .entry-date a 
	{ background-image: url(http://markwunsch.com/images/interface/link.png);}
.entry-comments { 
	text-align: right;
	margin-top: 0.6em;
	}
.entry-comments a {
	background: url(http://markwunsch.com/images/interface/comments.png) no-repeat 1px 1px;
	padding: 0 4px 0 16px;
	}

/* COMMENTS
-------------------------------------------------------------- */	
#comment-count {
	width: 60em;
	padding: 1.5em 0 0 0;
	border: solid #656565;
	border-width: 1px 0;
	float: left;
	}
#comment-count h3 {
	float: left;
	padding-left: 4px;
	font-family: "Adobe Garamond Pro", "Hoefler Text", Times, Georgia, serif;
	}
#add-comment { float: right; }
#add-comment a { 
	color: #b2b2b2; 
	border-bottom: none; 
	display: block;
	padding: 0 4px 0 18px; 
	background: url(http://markwunsch.com//images/interface/add.png) no-repeat; 
	}
#add-comment a:hover { color: #fff; background-color: #656565; }			
#comments {  
	width: 60em; 
	float: left; 
	padding: 0;  
	margin: 0 0 1.5em 0;
	list-style-type: none; 
	}
.comment { border-bottom: 1px solid #656565; padding: 1.5em 0 0 11.5em; width: 48.5em; position: relative; }
.comment.mark .cauthor   { 
	font-size: 1.5em; 
	font-family: "Adobe Garamond Pro", "Hoefler Text", Times, Georgia, serif; 
	text-transform: uppercase; 
	line-height: 1; 
	margin-bottom: 1em; 
	}
.comment.mark .cauthor a { color: #fff; }
.comment.mark .cauthor a:hover { color: #eee; border-bottom: 1px solid #369; }
.comment abbr.date { font-size: 0.83em; line-height: 1.8; color: #b2b2b2; display: block; font-style: italic; } 
.gravatar { position: absolute; top: 1.5em; left: 3.83em; height: 5em; width: 5em; margin-bottom: 1.5em; padding: 1px; border: 1px solid #656565; }
a:hover .gravatar { border-color: #369; }

/* COMMENT FORM */
#comment_form { 
	display: block;
	width: 60em;
	clear: both; 
	margin-bottom: 1.5em;
	position: relative;
	}
#comment_form fieldset { width: 37em; padding: 1.5em 0; }
#comment_form legend { font-size: 1.5em; line-height: 1; padding-left: 3.83em; font-family: "Adobe Garamond Pro", "Hoefler Text", Times, Georgia, serif; }
#comment_form label { float: left; width: 3.83em; }
.commentfield { margin-left: 3.83em; }
#comment_form .instructions { position: absolute; top: 3em; right: 0; width: 14em; }	
#comment_form .instructions p { font-size: 0.83em; line-height: 1.44; padding: 0; }	

/* FOOTER
-------------------------------------------------------------- */	
#footer { 
	clear: both;
    border-top: 1px solid #626262;
	color: #b2b2b2; 
	}
.footerContent { margin: 1.5em auto 0; }
	
#navigation    { float: left; }
#navigation ul { 
	margin: 0; 
	overflow: hidden; 
	list-style-type: none; 
	}
#navigation ul li { 
	float: left; 
	margin-right: 1em; 
	}
#navigation ul li a { 
	display: block; 
	text-transform: uppercase; 
	padding: 0 1.8em; color: #eee; 
	}
#navigation ul li.navAbout a 	{ 
	background: url(http://markwunsch.com/images/interface/information.png) no-repeat 2px 1px; 
	}
#navigation ul li.navArchives a { 
	background: url(http://markwunsch.com/images/interface/folder.png) no-repeat 2px 1px; 
	}
#navigation ul li.navFeed a 	{ 
	background: url(http://markwunsch.com/images/interface/feed.png) no-repeat 2px 1px; 
	}
#navigation ul li a:hover { 
	background-color: #656565; 
	color: #fff; 
	}

#copyright, #colophon 	{ font-size: 0.83em; line-height: 1.8; }
#copyright 				{ margin-top: 1.8em; }
#colophon 				{ float: right; text-align: right;  }
#colophon p 			{ margin-bottom: 1.8em; }