/*** Colors ***
 * Blue:        #133280
 * Light blue:  #8299f2
 */

/*** Global ***/

html{
  height:100%;
}
body{
  background:#404040 url(../images/bg.png) 0 118px repeat-x;
  color:#fff;
  font-family:Helvetica,Arial,sans-serif;
}
a{
  color:#8299f2;
}
a:hover,a:active{
  color:#b2c9ff;
}
a:visited{
/*  color:#ccc;*/
}

/*** Global > Headers ***/

h2{
  width:175px;
  height:50px;
  margin:0 auto 40px;
  background:transparent 0 0 no-repeat;
  font-weight:normal;
  text-indent:-9999em;
}
h3, h4, h3 a{
  font-family:"Helvetica Neue Light","HelveticaNeue-Light","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight:300;
}

/*** Global > Site header ***/

div#site-header{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  min-width:720px;
  height:136px;
  background:transparent url(../images/header-bg.png) 0 0 repeat-x;
}
div#site-header h1{
  width:167px;
  height:30px;
  margin:40px 0 0 20px;
  background:transparent url(../images/logo-m.png) 0 0 no-repeat;
}
div#site-header h1 a{
  display:block;
  height:100%;
  text-indent:-9999em;
}
div#site-header ul{
  position:absolute;
  left:250px;
  top:8px;
  height:101px;
}
div#site-header ul li{
  float:left;
  width:100px;
  height:100%;
  margin:0 20px 0 0;
}
div#site-header ul li.current{
  background:transparent url(../images/header-nav-selected-bg.png) 0 0 no-repeat;
}
div#site-header ul li a{
  display:block;
  height:44px;
  margin:34px auto 0;
  background:transparent url(../images/header-nav-stream.png) 0 0 no-repeat;
  text-indent:-9999em;
}
div#site-header ul li a:hover,
div#site-header ul li a:focus{
  background-position:0 -44px;
}
div#site-header ul li a.stream{
  width:73px;
}
div#site-header ul li a.portfolio{
  width:80px;
  background-image:url(../images/header-nav-portfolio.png);
}
div#site-header ul li a.about{
  width:61px;
  background-image:url(../images/header-nav-about.png);
}
div#site-header ul li.current a{
  background-position:0 0;
}

/*** Global > Site body ***/

div#site-body{
  width:720px;
  margin:175px auto 0;
}
div#site-body p{
  margin:1.5em 0;
  line-height:1.5em;
}
div#site-body p em{
  padding:0.125em 0.25em;
/*  background:#666;*/
  background:rgba(255,255,255,0.1);
  border-radius:4px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
  font-style:normal;
}

/*** Global > Site footer ***/

div#site-footer{
  margin:50px auto 20px;
  font-size:0.875em;
  text-align:center;
}
div#site-footer,
div#site-footer a{
  color:#999;
}
div#site-footer ul li{
  display:inline;
  margin:0 0.75em;
}
div#site-footer p{
  margin:1em auto;
}

/*** Main > Index ***/

body#main-index{
  background:#133280;
}
body#main-index h1{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:55%;
  background:#000;
}
body#main-index h1 a{
  display:block;
  width:257px;
  height:45px;
  background:transparent url(../images/logo-l.png) 0 0 no-repeat;
  margin:250px 40px 0 auto;
  text-indent:-9999em;
}
body#main-index h2{
  position:relative;
  left:-40px;
  top:310px;
  width:55%;
  margin:0;
  color:#999;
  font-size:1.125em;
/*  letter-spacing:-0.075em;*/
  text-align:right;
  text-indent:0;
  z-index:9;
}
body#main-index ul#nav{
  position:absolute;
  left:55%;
  top:0;
  bottom:0;
  background:transparent url(../images/main-index-bg.png) 0 0 repeat-y;
}
body#main-index ul#nav li{
  margin:0 0 20px 20px;
}
body#main-index ul#nav li.stream{
  margin-top:215px;
}
body#main-index ul#nav li a{
  display:block;
  width:116px;
  height:34px;
  background:transparent url(../images/main-index-nav-stream.png) 0 0 no-repeat;
  text-indent:-9999em;
}
body#main-index ul#nav li a:hover,
body#main-index ul#nav li a:active{
  background-position:0 -34px;
}
body#main-index ul#nav li.stream a{}
body#main-index ul#nav li.portfolio a{
  background-image:url(../images/main-index-nav-portfolio.png);
}
body#main-index ul#nav li.about a{
  background-image:url(../images/main-index-nav-about.png);
}

/*** Main > About ***/

body#main-about h2{
  background-image:url(../images/section-header-about.png);
}
/*
body#main-about p em{
  background:#777;
}
*/
body#main-about p img{
  vertical-align:-1px;
}

/*** Posts > Index ***/

body#posts-index h2{
  background-image:url(../images/section-header-stream.png);
}
body#posts-index p.intro{
  padding:0 0 0 150px;
}
body#posts-index div.posts{
  padding:20px 0 0;
  background:transparent url(../images/stream-gutter-top.png) 0 0 no-repeat;
}
body#posts-index div.posts div.post,
body#posts-index div.posts div.loading{
  clear:both;
  margin:0;
  padding:0 0 30px 150px;
/*  overflow:auto;*/
  background:transparent url(../images/stream-gutter-middle.png) 0 0 repeat-y;
}
body#posts-index div.posts div.loading{
  color:#999;
}
body#posts-index div.posts div.post div.source{
  float:left;
  margin:0 0 0 -129px;
}
body#posts-index div.posts div.post.github div.source{
  width:93px;
  height:56px;
}
body#posts-index div.posts div.post.google-reader div.source{
  width:79px;
  height:95px;
  margin-left:-122px;
}
body#posts-index div.posts div.post.twitter div.source{
  width:93px;
  height:35px;
}
body#posts-index div.posts div.post div.source a{
  display:block;
  height:100%;
  background-color:transparent;
  background-position:0 0;
  background-repeat:no-repeat;
  text-indent:-9999em;
}
body#posts-index div.posts div.post.github div.source a{
  background-image:url(../images/post-source-github.png);
}
body#posts-index div.posts div.post.google-reader div.source a{
  background-image:url(../images/post-source-google-reader.png);
}
body#posts-index div.posts div.post.twitter div.source a{
  background-image:url(../images/post-source-twitter.png);
}
body#posts-index div.posts div.post div.source a:hover,
body#posts-index div.posts div.post div.source a:focus{
  background-position:left bottom;
}
body#posts-index div.posts div.post h3{
/*  font-family:Helvetica,Arial,sans-serif;*/
  font-size:1.25em;
/*  letter-spacing:-0.075em;*/
}
body#posts-index div.posts div.post.github h3{
  padding-top:0.75em;
}
body#posts-index div.posts div.post.google-reader h3{
  padding-top:1em;
}
body#posts-index div.posts div.post.twitter h3{
  padding-top:0.25em;
}
body#posts-index div.posts div.post h3 a{
  color:#fff;
  text-decoration:none;
}
body#posts-index div.posts div.post h3 a:hover,
body#posts-index div.posts div.post h3 a:focus{
  text-decoration:underline;
}
body#posts-index div.posts div.post div.title{}
body#posts-index div.posts div.post div.description{
/*  width:600px;*/
  padding:0.5em 0;
/*  overflow:auto;*/
}
body#posts-index div.posts div.post div.description blockquote{
  margin:0.5em;
  padding:0.5em;
  background:#505050;
    background:-webkit-gradient(linear, left top, left 10, from(rgba(0,0,0,0.2)), to(rgba(0,0,0,0.1)));
  border-radius:4px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
  box-shadow:-1px -1px 2px rgba(0,0,0,0.1), 1px 1px 2px rgba(255,255,255,0.1);
    -moz-box-shadow:-1px -1px 2px rgba(0,0,0,0.1), 1px 1px 2px rgba(255,255,255,0.1);
    -webkit-box-shadow:-1px -1px 2px rgba(0,0,0,0.1), 1px 1px 2px rgba(255,255,255,0.1);
}
body#posts-index div.posts div.post p{
  margin:0;
}
body#posts-index div.posts div.post p.meta{
  color:#999;
  font-size:0.75em;
}
body#posts-index div.posts div.post p.meta a.datetime{
/*  color:#999;*/
/*  text-decoration:none;*/
}
body#posts-index div.posts div.post p.meta a:hover,
body#posts-index div.posts div.post p.meta a:focus{
  text-decoration:underline;
}
body#posts-index div.pagination{
  padding:3em 0 35px 150px;
  background:transparent url(../images/stream-gutter-bottom.png) 0 0 no-repeat;
  text-transform:lowercase;
}
body#posts-index div.pagination span.prev_page,
body#posts-index div.pagination span.next_page{
  display:none;
}
body#posts-index div.pagination span.separator{
  margin:0 0.5em;
}

/*** Projects ***/

body.projects h2{
  background-image:url(../images/section-header-portfolio.png);
}

/*** Projects > Index ***/

body#projects-index div#site-body{
  width:960px;
}
body#projects-index p{
  text-align:center;
}
body#projects-index ul.projects{
  width:760px;
  margin:0 auto;
}
body#projects-index ul.projects li{
  float:left;
  width:189px;
  height:215px;
}
body#projects-index ul.projects li.quotelet{
  /* For first item of a row with too few items */
  margin-left:189px;
}
body#projects-index ul.projects li a{
  display:block;
  height:100%;
  background:transparent 0 0 no-repeat;
  text-indent:-9999em;
}
body#projects-index ul.projects li a:hover,
body#projects-index ul.projects li a:focus{
  background-position:0 -215px;
}
body#projects-index ul.projects li a.carinasaur{
  background-image:url(../images/projects/carinasaur.png);
}
body#projects-index ul.projects li a.drawing-widget{
  background-image:url(../images/projects/drawing-widget.png);
}
body#projects-index ul.projects li a.hermannsaur{
  background-image:url(../images/projects/hermannsaur.png);
}
body#projects-index ul.projects li a.leopaz{
  background-image:url(../images/projects/leopaz.png);
}
body#projects-index ul.projects li a.nomenda{
  background-image:url(../images/projects/nomenda.png);
}
body#projects-index ul.projects li a.quotelet{
  background-image:url(../images/projects/quotelet.png);
}

/*** Projects > Show ***/

body#projects-show div.nav{}
body#projects-show div.nav a{
  display:block;
  width:47px;
  height:61px;
  margin:50px 0 0;
  background:transparent 0 0 no-repeat;
  text-indent:-9999em;
}
body#projects-show div.nav a:hover,
body#projects-show div.nav a:focus{
  background-position:0 -61px;
}
body#projects-show div.nav a.prev{
  float:left;
  margin-left:-75px;
  background-image:url(../images/arrow-left.png);
}
body#projects-show div.nav a.next{
  float:right;
  margin-right:-75px;
  background-image:url(../images/arrow-right.png);
}
body#projects-show div.content{
  padding:0 0 0 227px;
  background:transparent 0 -215px no-repeat;
}
body#projects-show div.content strong{
  font-weight:bold;
}
body#projects-show div.content.carinasaur{
  background-image:url(../images/projects/carinasaur.png);
}
body#projects-show div.content.drawing-widget{
  background-image:url(../images/projects/drawing-widget.png);
}
body#projects-show div.content.hermannsaur{
  background-image:url(../images/projects/hermannsaur.png);
}
body#projects-show div.content.leopaz{
  background-image:url(../images/projects/leopaz.png);
}
body#projects-show div.content.quotelet{
  background-image:url(../images/projects/quotelet.png);
}
body#projects-show div.content.nomenda{
  background-image:url(../images/projects/nomenda.png);
}
body#projects-show h3{
  background:transparent 0 0 no-repeat;
  font-size:1.5em;
}
/*
body#projects-show div.description em{
  background:#777;
}
*/
body#projects-show div.details{
  margin:3em 0 0;
  color:#999;
  font-size:0.875em;
}
body#projects-show div.details strong{
  font-weight:bold;
}
body#projects-show div.details em{
  color:#ccc;
}
body#projects-show div.screenshots{}
body#projects-show div.screenshots h4{
  margin:3em 0 0;
  text-transform:lowercase;
}
body#projects-show div.screenshots ul{
  height:80px;
  margin:0.5em 0 0;
}
body#projects-show div.screenshots ul li{
  float:left;
  margin:0 1em 0 0;
}
body#projects-show div.screenshots ul li a{
  display:block;
  height:75px;
/*  border:2px solid #133280;*/
  overflow:hidden;
  text-decoration:none;
}
body#projects-show div.screenshots ul li a:hover,
body#projects-show div.screenshots ul li a:focus{
/*  border-color:#fff;*/
  border:3px solid #fff;
  margin:-3px;
}
body#projects-show div.alt-nav{
  margin:3em 0 0;
  text-transform:lowercase;
}
body#projects-show div.alt-nav span.separator{
  margin:0 0.5em;
}

/*** Error pages ***/

body.error{
/*  height:100%;*/
  background:#808080 url(../images/bg-dark.png) left bottom repeat-x;
}
body.error h1{
  width:440px;
  height:103px;
  margin:150px auto 0;
  background:transparent url(../images/grrr-argh.png);
}
body.error h1 a{
  display:block;
  height:100%;
  text-indent:-9999em;
}
body.error p{
  margin:1em auto;
  text-align:center;
}
body.error p a{
  margin:0 0.5em;
  text-transform:lowercase;
}