@import "lib/reset.css";
@import "lib/typography.css";

/* General
-------------------------------------------------------------- */

/* color scheme:
   http://colorschemedesigner.com/#0m51T6g59w0w0
-------------------------------------------------------------- */

body{
  background-image:   url('/images/cafe.jpg');
  background-repeat:  no-repeat;
  font-size:          85%;
  color:              #292621;
}

hr {
  background-color:  #948e84;
  border: 0;
  height: 1px;
}

a {
  color:            #261f20;
  text-decoration:  underline;
}
a:hover {
  color:            #934915;
  text-decoration:  underline;
}

/* Header
------------------------------------------------------------- */
#header { margin-top: 3px; border-bottom: 1px solid #948e84; }
#header a:link, #header a:visited { color: #1f1c1a; text-decoration: none;}
#header h1 { margin-bottom: 0.2em; text-shadow: 2px 2px 5px #000; }
#header > #awesomeful-info { float: right; font-size: 85%; }

/* Page
-------------------------------------------------------------- */
#page { 
  margin:   0 auto; 
  width:    960px; 
}

/* Body
-------------------------------------------------------------- */

#body { margin-top: 10px; }

#sidebar { float: left; width: 200px; padding-right: 10px }
#sidebar h3 { color: #292421; font-size: 1.3em; border-bottom: 1px solid #ccc; }
#sidebar ul, #sidebar ol { color: #888; }
#sidebar ul a { color: #555; }

#sidebar > .box { padding: 0px 2px 10px 0px;  }

#main{ float: left; width: 740px; padding: 5px; font-size:1.1em}


#main-post > .post-title > h2 {
  font-size:      2em; 
  margin-bottom:  0.2em; 
}

#main-post > .post-date {
  font-size:      0.9em;
  line-height:    1.0;
  margin-bottom:  0.5em;
}

#main-post > .tags {
  font-size:      0.9em;
  line-height:    1.0;
  margin-bottom:  0.5em;
}

.post-comment-count > a{
  color:          #CCC;
  font-size:      0.9em
}

#main-post > .post-comment-count {
  margin-bottom: 10px;
}

#main-post, #three-posts { border-bottom: 1px #948e84 solid; }

#three-posts > .post {
  float:    left;
  padding:  10px;
  width:    30%;
}

#three-posts > .post > .post-title {
  font-size:        1.3em;
  line-height:      1.0;
  padding-bottom:   2px;
}
#three-posts > .post > .post-date {
  font-size:    0.8em;
  line-height:  1.0;
}
#three-posts > .post > .post-body > p{
  margin:       0;
}

.tag a{
  padding:          3px;
  margin:           5px;
  text-decoration:  none;
  /*border:       1px solid #948e84;*/
}

.tag a:hover {
  padding:          2px;
  margin:           5px;
  background-color: #948e84;
  border:           1px #261f20 solid;
  color:            #FFF;
}

#the-older-stuff { 
  padding-top:  10px; 
}
#the-older-stuff .post {
  padding:         5px;
}

#the-older-stuff .odd {
  -webkit-border-radius:  .3em;
  -moz-border-radius:     .3em;
  background-color: #eee;
}


#the-older-stuff .post > .post-title{
  font-size:        1.2em;
  line-height:      2.0;
}
#the-older-stuff .post > .post-title a{
  color:            #261f20;
  /*color:            #934915;*/
}

#the-older-stuff .post > .post-title a:hover {
  color:            #934915;
  text-decoration:  underline;
}

#the-older-stuff .post > .post-date{
  font-size:    1em;
  line-height:  2.0;
  color:        #555;
  clear:        both;
  float:        right;
}

#the-older-stuff .post-comment-count > a {
  line-height:  1.0;
  font-size     0.7em;
  float:        right;
  clear:        both;
}

.post:after {
  content:    ".";
  display:    block;
  height:     0;
  clear:      both;
  visibility: hidden;
}

.actions {
  float: right;
}

/* Footer
-------------------------------------------------------------- */
#footer {
  border-top:       10px solid #261F20;
  margin-top:       20px;
  background-color: #292421;
  color:            #948A84;
  /*padding:          10px 10px 0 10px;*/
  float:            left;
  font-size:        90%;
  width:            100%;
}

#footer h4 { color: #7f858d; }

#footer p.quiet { color: #ccc;}

#footer a { color: #eee }

#footer .first {
  float:    left;
  width:    33%;
  padding:  20px 30px 0px 30px;
}

#footer .second {
  overflow:   auto;
  padding:  20px 0px 0px 0px;
}

* html #footer > .second {
  float:    left;
}

* html #footer > .second > .inner {
  width:    100%;
}

#footer .third {
  float:    right;
  width:    33%;
  position: relative;
  padding:  20px 30px 0px 30px;
}

#copyleft {
  padding:  30px
}

/* Clearfix
-------------------------------------------------------------- */

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
 
/*.clearfix {*/
  /*display: inline-block;*/
/*}*/
 
html[xmlns] .clearfix {
	display: block;
}
 
* html .clearfix {
	height: 1%;
}

/* Tweets
-------------------------------------------------------------- */
.tweets .tweet_list {
  -webkit-border-radius:  .5em;
  -moz-border-radius:     .5em;
  list-style-type:        none;
  margin:                 0;
  padding:                0;
  background-color:       #FFF;
}
.tweets .tweet_list li {
  overflow:   auto;
  padding:    .5em;
}
.tweets .tweet_list .tweet_even {
  background-color: #eee;
}

.tweets .tweet_list .tweet_avatar {
  padding-right:    .5em;
  float:            left; 
}
.tweets .tweet_list .tweet_avatar img {
  vertical-align: middle; 
}

/* Image shadows
 * http://www.alistapart.com/articles/cssdropshadows/
-------------------------------------------------------------- */
.img-shadow {
  float:      left;
  background: url(/images/image_shadow.png) no-repeat bottom right !important;
  background: url(/images/shadow.gif) no-repeat bottom right;
  margin:     10px 0 0 10px !important;
  margin:     10px 0 0 5px;
}

.img-shadow img {
  display:          block;
  position:         relative;
  background-color: #fff;
  border:           1px solid #a9a9a9;
  margin:           -6px 6px 6px -6px;
  padding:          4px;
}