* { margin: 0; padding: 0; }
html { overflow-y: scroll; background: black url(images/body-bg.png); }
body { background: url(images/header-bg.png) repeat-x; color: #ccc; font: 14px/1.6 Georgia, Serif; }        
header, section, footer, aside, nav, article, figure { display: block; }             
a img { border: 0; }
img { vertical-align: middle; }
a:active { outline: 0; }
.clear { clear: both; }
.container:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.container { display: inline-block; }
/* start commented backslash hack \*/
* html .container { height: 1%; }
.container { display: block; }
/* close commented backslash hack */
.last { margin-right: 0 !important; }


/*
    GENERIC TYPOGRAPHY
*/
::selection { background: #C44600; color: white; }
::-moz-selection { background: #C44600; color: white; }
h2,h3,h4,h5 { font-weight: normal; margin: 0 0 10px 0; }
p { margin: 0 0 20px 0; }
a { color: white; text-decoration: none; }

/*
    STRUCTURE
*/
body, html, #page-wrap { height: 100%; }
#page-wrap { width: 876px; margin: 0 auto; position: relative; z-index: 5000; }
#coverage { left: 0; top: 0; position: fixed; z-index: 4000; width: 100%; height: 100%; background: url(images/outsides.png) center center repeat-y; }






/*
    HEADER
*/
header { position: relative; width: 100%; height: 125px; }
header h1 a { outline: 0; opacity: 0.9; display: block; text-indent: -9999px; width: 100%; height: 79px; background: url(/images/logo.png) no-repeat; position: absolute; top: 0; left: 0; }
header h1 a:hover { opacity: 1; }
#slogan { background: rgb(0,0,0); background: rgba(0,0,0, 0.2); padding: 6px 12px; position: absolute; top: 31px; right: 1px; color: #ccc; font: italic 15px Georgia, Serif; }

nav ul { position: absolute; top: 80px; left: 0; }
nav ul li { display: inline; }
nav ul li a { padding: 9px 20px 10px 20px; color: #bababa; border-right: 1px solid #333; float: left; -moz-transition: background 0.1s ease-in-out; -webkit-transition: background 0.1s ease-in-out; }
nav ul li a:hover, nav ul li.current_page_item a { background: rgb(0,0,0); background: rgba(0,0,0, 0.7); color: white; }







/*
    CONTENT
*/
#home section { float: left; width: 410px; padding: 20px; }
section { float: none; padding: 40px 0 0 120px; width: 520px; }
section h3 { background: rgb(0,0,0); background: rgba(0,0,0,0.2); position: relative; padding: 10px; color: #c44600; font-size: 16px; text-transform: uppercase; letter-spacing: 4px; margin: 0 0 10px 0; }
#home section h3 { left: -20px; text-indent: 10px; width: auto; margin: 0 0 10px 0; }
.single section h3, .page section h3, .blog section h3 { left: -120px; text-indent: 110px; width: 520px; margin: 50px 0 25px 0; }
#blog section { width: 700px; padding-right: 0; }
#blog section h3:first-child { margin-top: 10px;  }

article { margin: 0 0 20px 0; position: relative; }
article h2 { margin: 0 0 10px 0; font-size: 24px; line-height: 28px; }
article h2 a { color: #b7b7b7; padding: 0; font-style: italic; }
article h2 a:hover { color: white; background: none; padding: 0; }
article h2 a, article h2 a:hover { background: none; border: 0; }
#single-title { font-size: 50px; font-weight: normal; line-height: 46px; color: white; }
section ul, section ol { margin: 0 0 20px 10px; }
section li { margin: 0 0 5px 0; }
article a { -moz-transition: background 0.1s ease-in-out; -webkit-transition: background 0.1s ease-in-out; background: rgb(255,91,0); background: rgba(255,91,0,0.4); color: #ccc; margin: 0 2px; white-space: nowrap; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid rgba(0,0,0,0.3); padding: 0 6px; }
article a:hover { padding: 1px 7px; border: 0; background: rgb(255,91,0); background: rgba(255,91,0,0.7); color: white;  }
article h2 a { white-space: normal; }
blockquote { padding: 0 0 0 20px; border-left: 10px solid #333; font-style: italic; margin: 0 0 20px 0; }



#recent-posts { list-style: none; margin: 0 0 20px 0; }
#recent-posts li {  }
#recent-posts li span { color: #999; background: black url(images/date-bg.png) repeat-x; padding: 2px 6px; font-size: 12px; opacity: 0.7; border: 1px solid #666; margin: 0 3px 0 0;  }
#recent-posts li a { color: #ccc; display: block; }
#recent-posts li a:hover { color: white; }
#recent-posts li a:hover span { opacity: 0.9; color: white; }

.post-date { background: rgb(0,0,0); background: rgba(0,0,0,0.2); padding: 10px; position: absolute; top: 0; left: -120px; }


/* 
    FANCY FORMATTING
*/
.image-break { text-align: center; padding: 10px; margin: 0 10px 10px 10px; background: rgb(0,0,0); background: rgba(0,0,0, 0.2); font-size: 12px; }
.image-break img { margin: 0 0 5px 0; }
.image-right { float: right; margin-right: -200px; width: 400px; }
.image-left { float: left; margin-left: -110px; width: 200px; }
.stick-to-left { margin-left: -120px; }
.jut-from-right { float: right; margin: 0 -235px 20px 20px; display: block !important; }
.jut-from-left { float: left; margin: 0 20px 20px -120px; display: block !important; }
.full-width-image { margin-left: -120px; }


/*
    BLOG PAGE
*/
#blog-blocks { list-style: none; margin: 0; }
#blog-blocks li { float: left; margin: 0 20px 20px 0; width: 180px; min-height: 75px; padding: 40px 10px 10px 10px; background: rgba(0,0,0, 0.2); position: relative; }
#blog-blocks li a { color: #eee; display: block; }
#blog-blocks li span { position: absolute; top: 0; left: 0; width: 100%; text-align: center; padding: 5px 0; background: rgba(0,0,0, 0.2); }
#blog-blocks li:hover { background: rgb(0,0,0); background: rgba(0,0,0, 0.6); }

.archive-col { width: 205px; float: left; margin:0 20px 0 0; }
.archive-col ul { list-style: none; margin: 0; }

#link-post-archive { margin: 0; list-style: none; }
#link-post-archive li { display: inline; }
#link-post-archive li a { display: block; float: left; margin: 0 5px 5px 0; }


/*
    HOMEPAGE & HOME SIDEBAR
*/
aside   { width: 418px; float: right; padding: 20px 0 0 0; }

#photo-and-bio { position: relative; width: 100%; margin: 0 0 20px 0; }
#photo-and-bio p { position: absolute; width: 125px; color: #ccc; background: rgb(0,0,0); background: rgba(0,0,0, 0.2); right: 1px; bottom: 20px; font-size: 12px; padding: 10px; }
#photo-and-bio p strong { display: block; margin: 0 0 0 0; color: white; font-size: 120%; }

#my-projects { list-style: none; margin: 0; }
#my-projects li { position: relative; width: 100%; margin: 0 0 20px 0;  }
#my-projects li img { opacity: 0.4; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; }
#my-projects li:hover img { opacity: 0.9; }
#my-projects li:hover a { background: black; }
#my-projects li a { z-index: 100; position: absolute; top: 27%; background: rgb(0,0,0); background: rgba(0,0,0,0.7); right: 0; width: 210px; padding: 10px; text-align: right; color: white; }



/*
    COMMENTS
*/
#comments { margin-bottom: 20px; clear: both; }
#commentform textarea { width: 400px; padding: 5px; font-size: 15px; }
#commentform div { margin: 0 0 10px 0; }
#commentform label { cursor: pointer; font-size: 13px; }
#commentform input[type=text] { padding: 3px; font-size: 15px; margin: 0 5px 0 0; }
.commentlist { list-style: none; margin: 0; }
.commentlist li { background: rgb(0,0,0); background: rgba(0,0,0,0.2); position: relative; width: 675px; padding: 0 40px 10px 40px; margin: 0 0 30px 0; }
.commentlist li .avatar { margin: -10px 10px 10px -20px; vertical-align: bottom; }
.commentlist li .comment-author { font-size: 20px; }
.commentlist li .comment-author a { color: #ccc; border-bottom: 1px dotted #666; }
.commentlist li .comment-author a:hover { color: white; border-bottom-style: solid; }
.commentlist li .comment-meta { position: absolute; top: 10px; right: 10px; text-align: right; }
.commentlist li .comment-meta a { color: #666; font-size: 12px; }
.commentlist li .comment-meta a:hover { color: white; }
.commentlist li p { margin-bottom: 10px; }

#respond { clear: both; }

/*
    FOOTER
*/
footer { background: url(images/footer-bg.png) repeat-x; height: 263px; margin: 50px 0 0 0; padding: 25px 0 0 20px; width: 855px; }
footer h4 { font-size: 16px; text-transform: uppercase; letter-spacing: 4px; color: white; }
footer p { margin: 0 0 10px 0; }
.footer-icon-list { list-style: none; margin: 0 0 20px 0; }
.footer-icon-list li { display: inline; }
.footer-icon-list li a img { opacity: 0.8; }
.footer-icon-list li a:hover img { opacity: 1 }

.footer-col { width: 220px; float: left; margin-right: 25px; }
.fav { width: 415px; }
.fwend { width: 170px; }

#friend-list { list-style: none; margin: 0; }
#friend-list li { margin: 0 0 5px 0; }
#friend-list li a { display: block; padding: 2px 8px; background: rgba(0,0,0,0.4); color: #777; }
#friend-list li a:hover { background: rgb(0,0,0); background: rgba(0,0,0,0.1); color: white; }

#fav-tweets { list-style: none; margin: 0; }
#fav-tweets li { margin: 0 0 5px 0; }
#fav-tweets li a { display: block; padding: 5px; background: rgba(0,0,0,0.4); color: #777; }
#fav-tweets li a:hover { background: rgb(0,0,0); background: rgba(0,0,0,0.1); color: white; }