* { 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: black; color: white; }
::-moz-selection { background: black; 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; }


hr {
  background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, transparent), color-stop(50%, rgba(0, 0, 0, 0.5)), color-stop(100%, transparent));
  background: -webkit-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,0.5), rgba(255,255,255,0));
  background: -moz-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,0.5), rgba(255,255,255,0));
  background: -o-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,0.5), rgba(255,255,255,0));
  background: linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,0.5), rgba(255,255,255,0));
  border: 0;
  height: 1px;
  margin: 30px 0;
}





/*
    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: 7px 5px 5px 5px; color: #c44600; font-size: 12px; text-transform: uppercase; letter-spacing: 6px; 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, .fav > p a { color: #52e5ee; white-space: nowrap; border-bottom: 1px dashed #0b747b; }
article a:hover, .fav > p a:hover { color: white; border-bottom-color: white; }
article h2 a { white-space: normal; }
article img { max-width: 100%; }
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 span.button { display: inline-block; width: 75px; text-align: center; }
.button { 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;  }
.button:hover { border-color: white; }
#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;
  width: 876px !important;
  height: auto !important;
  max-width: none !important;
}


/*
    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: 300px; float: left; margin:0 20px 0 0; }
.article-col:nth-child(2n) { margin-right: 0; }
.archive-col ul { list-style: none; margin: 0; }
.archive-col a { display: block; overflow: hidden; white-space: pre; text-overflow: ellipsis; }

#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; font-size: 12px; }
#photo-and-bio p strong { color: #C44600; text-transform: uppercase; letter-spacing: 2px; display: block; }

#home #pillars { clear: both; float: none; width: 100%; padding: 0; }
#home #pillars h3 { left: 0; margin: 0; }
#home #pillars ul { list-style: none; overflow: hidden; margin: 0; }
#home #pillars ul li { display: inline; }
#home #pillars ul li a { display: block; float: left; width: 25%; padding-top: 210px; height: 20px; }
#home #pillars ul li a span { height: 20px; text-indent: 30px; display: block; -webkit-transition: all 0.35s ease; -moz-transition: all 0.35s ease; -o-transition: all 0.35s ease; margin-top: -210px; padding-top: 210px; }
#home #pillars ul li a em { display: block; text-indent: 30px; }
#home #pillars ul li a:hover span { opacity: 0; height: 0; }
#home #pillars ul li.pillar-css a { background: url(/images/pillar-5-in.png) no-repeat; }
#home #pillars ul li.pillar-css a span { background: url(/images/pillar-5-out.png) no-repeat; }
#home #pillars ul li.pillar-shoptalk a { background: url(/images/pillar-6-in.png) no-repeat; }
#home #pillars ul li.pillar-shoptalk a span { background: url(/images/pillar-6-out.png) no-repeat; }
#home #pillars ul li.pillar-digwp a { background: url(/images/pillar-3-in.png) no-repeat; }
#home #pillars ul li.pillar-digwp a span { background: url(/images/pillar-3-out.png) no-repeat; }
#home #pillars ul li.pillar-qod a { background: url(/images/pillar-4-in.png) no-repeat; }
#home #pillars ul li.pillar-qod a span { background: url(/images/pillar-4-out.png) no-repeat; }


/*
    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; overflow: hidden; margin: 50px 0 0 0; padding: 25px 0; width: 875px; }
footer h4 { font-size: 16px; text-transform: uppercase; letter-spacing: 4px; color: #C44600; }
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: 245px; float: left; margin-right: 25px; }
.fav { width: 425px; }
.fwend { width: 155px; }

#friend-list { list-style: none; margin: 0; }
#friend-list li { margin: 0 0 5px 0; display: inline; }
#friend-list li a { display: block; padding: 2px 8px; background: rgba(0,0,0,0.4); color: #777; float: left; width: 100px; margin: 0 6px 6px 0; }
#friend-list li:nth-child(2) a { margin-right: 0; }
#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; }