body { background-color: #333; text-shadow: 1px 1px 0 #111; color: #aaa; font-size: 62.5% line-height: 1.6; border-color: #111;}

h1, h2, h3, h4, h5, h6,
#main h1, #main h2, #main h3, #main h4, #main h5, #main h6 { font-weight: bold; color: #fff; font-family: Helvetica, Arial, sans-serif;}
h2 { font-size: 21px; font-weight: bold; margin-bottom: 10px; }
p { position: relative; font-size: 16px; line-height: 26px; color: #999; }
ul li, ol li { color: #ccc;}
em, strong { color: #eee;}
img { margin-bottom: 0;}

#post-content ul { list-style: disc; }
#post-content ol { list-style: decimal; }

a { color: #F26522;}
a:hover { color: #fff;}
code { font-size: 12px; white-space: normal; line-height: 18px; color: #eee;}

#logo { top: 0; position: absolute; right: 2px; font-family: Arial, sans-serif; font-weight: bold; background-color: #111; padding: 20px 10px 0; }
#logo a {text-decoration: none; font-size: 108px; position: relative; text-transform: uppercase; display: block; height: 90px; overflow: hidden; width: 76px; color: #666; padding: 2px; }
#logo a span { position: absolute; font-size: 8px; line-height: .9; text-align: center; top: 66px; left: 29px; width: 22px; font-weight: normal; color: #333; }
#logo .to-home { display: none; position: absolute; font-size: 10px; top: 180px; left: 58px; letter-spacing: 1px;}
#logo a:hover { color: #fff;}


#nav-main a { color: #999;}
#nav-main a:hover { color: #F26522;} 

#container { 0background: url(../i/sm/grid.png) repeat-y; }
#realigned p.note { border-bottom:3px solid #666; border-top:3px solid #666; color:#ccc; font-size:14px; padding: 20px 10px; font-weight: normal; background-color: #111; width: 210px; margin-bottom: 60px; -moz-box-shadow: 0 0 15px #111; -webkit-box-shadow: 0 0 15px #111; }
#post #main { width: 950px; float: none; margin-top: 240px; }
#h1-wrap { height: auto; }
#h1-wrap h1 { position: relative; border-bottom: 5px solid #111; padding-bottom: 30px; margin-bottom: 40px; font-style: normal; text-shadow: 2px 2px 0 #111; }

.meta { display: none; }
#post-content, #post-content p { padding: 0; margin-bottom: 40px;}
#post-content p.lead { margin: 0 0 10px 390px; font-size: 21px; line-height: 32px; color: #bbb; }
#post-content h3 { font-size:16px; font-weight:bold; letter-spacing: 0;  text-transform:none; }

#sm-homepage, #sm-homepage-re { margin-top: 20px;}
#sm-homepage-re img { box-shadow: 0 0 15px #111; -moz-box-shadow: 0 0 15px #111; -webkit-box-shadow: 0 0 15px #111;}

#usability-issues ol, #realigned ol { margin-top: 20px; }
#usability-issues li, #realigned li { padding: 0 0 25px 0; border-bottom: 1px solid #444; margin: 0 0 5px 0; font-weight: bold; font-size: .85em; line-height: 1.6em; font-family: Arial, sans-serif; color: #fff; font-weight: 300; }
#details li { clear: both; margin: 0 0 40px; border-top: 1px solid #444; padding-top: 10px; line-height: 18px; font-size: 12px; color: #ccc; font-family: Arial, sans-serif;}
#details li img { float: left; margin-right: 90px; margin-left: -10px; }

.caption { position: absolute; background-color: #222; padding: 3px 10px; top: -32px; font-size: 12px; }

#usability-issues, #realigned, #breakdown, #details, #reference { margin-top: 60px; border-top: 1px solid #fff;}
#usability-issues h2, #realigned h2, #breakdown h2, #details h2, #reference h2 { font-size: 24px; margin: 0 0 40px; padding: 40px 0 0 160px; background: url(http://www.awayback.com/wp-content/uploads/2009/12/head-bg-sprite.png) no-repeat 0 -142px; height: 30px; }
#view-realigned { -moz-border-radius: 10px; -webkit-border-radius: 10px; }
#details h2 { background: url(http://www.awayback.com/wp-content/uploads/2009/12/head-bg-sprite.png) no-repeat 0 0; }
#realigned h2 { background: url(http://www.awayback.com/wp-content/uploads/2009/12/head-bg-sprite.png) no-repeat 0 -213px; }
#breakdown h2 { background: url(http://www.awayback.com/wp-content/uploads/2009/12/head-bg-sprite.png) no-repeat 0 -71px; }
#reference h2 { background: url(http://www.awayback.com/wp-content/uploads/2009/12/head-bg-sprite.png) no-repeat 0 -284px; }

#breakdown h3 { border-left: 3px solid #999; padding-left: 10px; letter-spacing: 0; margin-bottom: 20px;}
#breakdown ul { margin-top: 15px;}
#breakdown li { font-size: 12px; list-style: none; text-shadow: 0 0 0 #111; font-family: Arial, sans-serif; color: #111; padding: 2px 7px; border-width: 0 1px 1px 0; border-color: #111; border-style: solid; margin-bottom: 5px; }
#bd-sm p, #bd-re-sm p { font-size: 12px;}
#breakdown .bdi-c { background-color: #7fff7f;}
#breakdown .bdi-ad { background-color: #ff7f7f;}
#breakdown .bdi-b { background-color: #ffff7f;}
#breakdown .bdi-nav { background-color: #ffcc7f;}
#breakdown .bdi-sp { background-color: #7fe5ff;}
#breakdown .bdi-un { background-color: #fff;}
#reference li { font: 12px/18px Arial, sans-serif;}
h3#rel-art { padding: 20px 160px; border-top: 1px solid #111; color: #666; font-size: 24px; }
#post-nav { display: none; }
#comments { border-top: 5px solid #222; margin-top: 20px;}
#comments, #post-comments { float: left; width: 950px; }
#comments li { padding-right: 320px; min-height: 100px; }
#comments blockquote { color: #bbb; }
input[type="text"], textarea, #comments .author, #comments .author > blockquote { border-color: #555; }

.gravatar { display: block; border:5px solid #222222; height:48px; position:absolute; right:0; top:20px; width:48px;}

#sidebar { display: none;}
#footer h4, #footer li{ font-size: 12px; color: #666;}
#footer li { margin-left: 40px; }

input[type="text"], textarea { background-color: #fff; }
input[type="text"]:focus, textarea:focus { background-color: #ffc;}

/* P L A C E M E N T */

.left {float: left; margin-right: 10px;}
.right {float: right; margin-left: 10px;}
.right.inset {margin: 0 120px 0 20px;} /* img floated right within text */
.left.inset {margin-left: 230px;} /* img floated left within text */

 /* S I Z E */
 
.one {width: 70px;}
.two {width: 150px;}
.three {width: 230px;}
.four {width: 310px;}
.five {width: 390px;}
.six {width: 470px;}
.seven {width: 550px;}
.eight {width: 630px;}
.nine { width: 710px;}
.ten { width: 790px; }
.eleven { width: 870px; }
.twelve { width: 950px;}

 /* M A R G I N */
body #post-content .push-one { margin-left: 80px;}
.push-one { margin-left: 80px;}
.push-two { margin-left: 160px;}
.push-three { margin-left: 240px;}
.push-four { margin-left: 320px;}
.push-five { margin-left: 400px;}
.push-six { margin-left: 480px;}
.push-seven { margin-left: 560px;}
.push-eight { margin-left: 640px; }
.push-nine { margin-left: 720px; } 

.pull-two { margin-left: -160px; }
.pull-four { margin-left: -320px; }
.pull-seven { margin-left: -560px; } 
.pull-eight { margin-left: -640px; } 
.pull-nine { margin-left: -720px; }

/* A D D I T I O N S */

.frame {border: 1px solid #999;}
.solo img {margin-bottom: 20px;}
.last { margin-right: 0;}
#main:after, #usability-issues:after, .group:after, #realigned:after, #details:after, #breakdown:after, #conclude:after, #details li:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }

#retweet {position: relative; clear: both; margin-left: 160px;}