/*
Theme Name:		24th and Mission
Theme URI: 		http://mattt.me/
Version: 		  0.0.87
Description: 	Caw!
Author: 		  Mattt Thompson
Author URI:		http://mattt.me
Tags:			    Crow, Stripes, San Francisco
*/

@import "css/blueprint/screen.css";

html {
  background:#f2efce url(images/flock.png) bottom right fixed no-repeat;
}

body {
  color:#353535;
  background:url(images/body-background.png) top left fixed repeat-x;
}

.container{
  background:url(images/container-background.png);
  width:870px;
  margin:0px 20px;
  border-top:none;
  padding:0 30px 10px 30px;
}

.article{
  clear:both;
}

.article .header, .home .header{
  height:220px;
  margin-top:-35px;
  border-bottom:2px #fcfcfc groove;
}

.article .header{
  margin-bottom:24px;
}

.badge{
  height:64px;
  width:64px;
  position:absolute;
  margin-left:800px;
  padding:0;
  border:2px #F3EBC7 solid;
  -moz-border-radius:     10px;
  -khtml-border-radius:   10px;
  -webkit-border-radius:  10px;
  border-radius:          10px;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  -khtml-box-sizing: content-box;
  box-sizing: content-box;
}

.category .badge{
  margin-top:-50px;
}

.category .description{
  padding-right:120px;
}

.article .header .badge {
  margin-top:40px;
}

.excerpt .header{
  margin-top:0;
  margin-bottom:-1em;
  height:100px;
  background-position: 0px -30px;
}

.excerpt .header .badge {
  margin-top:18px;
}

.excerpt p{
  font-family:"Archer", "Georgia", "Times", "Times New Roman", serif;
  padding-right:20px;
  font-size:125%;
  line-height: 130%;
/*  font-style:italic;*/
}

.article .sidebar{
  float:left;
  width:150px;
  padding-right:40px;
  clear:left;
}

.article .body{
  float:left;
  width:590px;
  margin:1em 0 2em 0;
  clear:right;
}

.article .footer{
  color:#f3f2f3;
  font-size:125%;
  font-family:"Archer", "Georgia", "Times", "Times New Roman", serif;
  float:none;
  clear:both;
  margin:50px 0;
  border:4px #eee solid;
  border-bottom-color:#ccc;
  border-left-color:#ddd;
    border-right-color:#ddd;
  margin-left:-4px;
  margin-right:-4px;
  padding:20px;
  background-repeat: no-repeat;
  background-position: 60px center;
  padding-left:193px;
  padding-right:80px;
  -moz-border-radius:     17px;
      -khtml-border-radius:   17px;
      -webkit-border-radius:  17px;
      border-radius:          17px;
      -moz-box-sizing: content-box;
      -webkit-box-sizing: content-box;
      -khtml-box-sizing: content-box;
      box-sizing: content-box;
}

.container .article .footer a{
  color:#fff;
  text-decoration:underline;
  text-shadow:none;
}

.container .article .footer a:hover{
  background:#fff;
  color:#222;
  text-decoration:none;
  text-shadow:none;
}

.listing{
  margin-bottom:2em;
}


.no-padding,
.article .header,
.home .header {
  margin-left:-20px;
  margin-right:-20px;
}

.stripes{
  width:100%;
  height:30px;
  position:absolute;
  top:100px;
  left:0px;
  background-image: url(images/stripes.png);
}

.crow{
  width:109px;
  height:120px;
  position:absolute;
  top:14px;
  left:880px;
  background-image: url(images/crow.png);
}
.crow span{
  display:none;
}

#header{
  padding:0 20px;
  min-height:100px;
  background:url(images/glow.png) bottom left no-repeat;
}



#logo{
  margin:15px 0;
  margin-top:0;
  padding:10px;
  padding-top:25px;
  float:left;
  width:180px;
  height:43px;
  background:url(images/mattt.png) no-repeat center 25px;
}

#logo:hover{
  background-color:#eee;
}

#logo span{
  display:none;
}

#header .navigation{
  padding:0;
  margin:0;
  margin-right:91px;
  float:right;
}

#header .navigation li{
  display:block;
  float:left;
  margin:0 15px;
}

#header .navigation li span{
  display:none;
}

#header .navigation li a{
  padding:0 5px;
  padding-bottom:10px;
  height:25px;
  padding-top:43px;
  background-position:center 43px ;
  background-repeat:no-repeat;
  display:block;
}

#header a {
   -moz-border-radius:     10px;
  -khtml-border-radius:   10px;
  -webkit-border-radius:  10px;
  border-radius:          10px;
  -moz-border-radius-topleft: 0px;
  -webkit-border-top-left-radius: 0px;
  -moz-border-radius-topright: 0px;
  -webkit-border-top-right-radius: 0px;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  -khtml-box-sizing: content-box;
  box-sizing: content-box;
}

#header .navigation li a:hover{
  background-color:#eee;
}

#header .navigation #articles a{
  width:115px;
  background-image:url(images/navigation/articles.png);
}
#header .navigation #work a{
  width:79px;
  background-image:url(images/navigation/work.png);  
}
#header .navigation #about a{
  width:87px;
  background-image:url(images/navigation/about.png);  
}
#header .navigation #contact a{
  width:113px;
  background-image:url(images/navigation/contact.png);  
}

body.articles #header .navigation #articles a,
body.work #header .navigation #work a,
body.about #header .navigation #about a,
body.contact #header .navigation #contact a {
  background-color: #FBF9E0;

}

body.articles #header .navigation #articles a:hover,
body.work #header .navigation #work a:hover,
body.about #header .navigation #about a:hover,
body.contact #header .navigation #contact a:hover {
  background-color: #eee;
}

body.articles #header .navigation #articles a:active,
body.work #header .navigation #work a:active,
body.about #header .navigation #about a:active,
body.contact #header .navigation #contact a:active {
  background-color: #F2EBA4;
}

#content{
  margin-top:45px;
}


h1{
  font-family:"Archer", "Georgia", "Times", "Times New Roman", serif;
}

h1.title{
  margin-bottom:1.0em;
  font-weight: bold;
}

h1, h2, h3, h4{
  text-shadow: 0 1px 1px #fff;
}

h2{
  margin-top:1.5em;
}

h3{
  margin-top:1.25em;
}

.about h2{
  font-size:1.75em;
  margin-top:0;
}

img.me{
  margin-bottom:1.75em;
}

.datewidget{
  padding:20px;
  text-align:center;
  width:130px;
  height:67px;
  background:#888;
  color:#fff;
}

a{
  color:#555;
  text-decoration:none;
  text-shadow:#ddd 0px 1px 1px;
}

a:hover{
  color:#fff;
  background:#555;
  text-shadow:#222 1px 1px 1px;
}

a img{
  padding:0.3em;
  padding-bottom:1em;
}

.articles .category .category-symbol{
  padding:1.5em 0;
  display:block;
}

.category-symbol img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

h1 a, h4 a{
  display:block;
}

.category h4 a{
  min-height:4em;
}

.articles .category .category-symbol:hover{
  padding:1.5em 0;
  margin:0;
  -moz-border-radius:     17px;
      -khtml-border-radius:   17px;
      -webkit-border-radius:  17px;
      border-radius:          17px;
      -moz-box-sizing: content-box;
      -webkit-box-sizing: content-box;
      -khtml-box-sizing: content-box;
      box-sizing: content-box;
}

.category-symbol:hover h3 {
  color:#fff;
  text-shadow:#222 1px 0px 2px;
}

ol a:hover, .about #content a:hover, .contact #content a:hover, #footer a:hover,
.philosophy a:hover, a.philosophy:hover,
.aesthetics a:hover, a.aesthetics:hover,
.programming a:hover, a.programming:hover,
.linguistics a:hover, a.linguistics:hover{
  padding:0.25em;
  margin:-0.25em;
  -moz-border-radius:     5px;
  -khtml-border-radius:   5px;
  -webkit-border-radius:  5px;
  border-radius:          5px;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  -khtml-box-sizing: content-box;
  box-sizing: content-box;
}

.about li a{
  display:block;
}

li {
  margin:0.5em 0;
}

.philosophy a, a.philosophy {
  color: #02867b;
  text-shadow:#DDF8F5 0px 1px 1px;
}

.body .philosophy a:visited{
  color:#5FACA5;
}

.philosophy a:hover, a.philosophy:hover{
  color:#fff;
  text-shadow:#02867b 1px 1px 2px;
  background:#02867b;
}

.philosophy .footer{
  background-image:url(images/symbols/philosophy.white.png);
  background-color:#02867b;
}


.linguistics a, a.linguistics {
  color: #d95127;
  text-shadow:#E6D0C9 0px 1px 1px;
}

.body .linguistics a:visited{
  color:#DA7E62;
}

.linguistics a:hover, a.linguistics:hover{
  color:#fff;
  text-shadow:#d95127 1px 1px 2px;
  background:#d95127;
}

.linguistics .footer{
  background-image:url(images/symbols/linguistics.white.png);
  background-color:#d95127;
}

.aesthetics a, a.aesthetics {
  color: #D9961E;
  text-shadow:#E9D4B2 0px 1px 1px;
}

.body .aesthetics a:visited{
  color:#D9A448;
}

.aesthetics a:hover, a.aesthetics:hover{
  color:#fff;
  text-shadow:#e8a121 1px 1px 2px;
  background:#e8a121;
}

.aesthetics .footer{
  background-image:url(images/symbols/aesthetics.white.png);
  background-color:#D9961E;
}


.programming a, a.programming {
  color: #534731;
  text-shadow:#EDE5D4 0px 1px 1px;
}

.programming .article a {
  color:#9D6300;
}

.body .programming a:visited{
  color:#807156;
}

.programming a:hover, a.programming:hover{
  color:#fff;
  text-shadow:#534731 1px 1px 2px;
  background:#534731;
}

.programming .footer{
  background-image:url(images/symbols/programming.white.png);
  background-color:#534731;
}

.philosophy .badge {
  background:url(images/badges/philosophy.png);
}

.linguistics .badge {
  background:url(images/badges/linguistics.png);
}

.aesthetics .badge {
  background:url(images/badges/aesthetics.png);
}

.programming .badge {
  background:url(images/badges/programming.png);
}

.container {
 
}



.comments{
  width:590px;
  list-style:none;
  margin:0;
  padding:0;
  margin-left:190px;
}

.comment-form{
  width:590px;
  margin-left:190px;
}

.comment-form textarea{
  width:100%;
}

.comments .comment {
  display:block;
  margin-bottom:10px;
  padding:10px 0;
  border-bottom:1px #eee solid;
    border-bottom:1px #f2f2f2 solid;
}

.comments .comment .meta{
  float:left;
  width:70px;
  margin:5px;
  margin-right:10px;
  margin-left:-85px;
}

.comments .comment .content {
  float:left;
  width:590px;
}

.avatar{
  border:1px #565656 solid;
  -moz-border-radius:     10px;
  -khtml-border-radius:   10px;
  -webkit-border-radius:  10px;
  border-radius:          10px;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  -khtml-box-sizing: content-box;
  box-sizing: content-box;
}

.comment-author{
  display:block;
  font-weight:bold;
  margin-bottom:0.75em;
}



#footer{
  font-size:0.8em;
  padding-top:1.5em;
  margin-top:3em;
  border-top:1px #ccc solid;
  clear:both;
  margin-left:-20px;
  margin-right:-20px;
  padding-left:20px;
  padding-right:20px;
  margin-bottom:-40px;
}

#footer-cap{
  width:910px;
  height:62px;
  background:url(images/footer-background.png) no-repeat center bottom;
  margin:0px 20px;
  padding:0 10px;
  margin-bottom:60px;
}


.category h3 {
  text-align: center;
}




.section{
  display:block;
  clear:both;
  margin:1em 0;
  padding:1em 0;
}


.work ol{
  padding:0;
  margin:0;
  list-style:none;
}




.clearfix:after, .container:after, .section:after, #content:after, #footer:after, .comments .comment:after {content:"\0020";display:block;height:0;clear:both;visibility:hidden;overflow:hidden;}
.clearfix, .section, .container, #content, #footer, .comments .comment {display:block;}
.clear {clear:both;}


.introduction p{
  margin:0.5em 0;
  padding:0;
  font-family:"Archer", "Georgia", "Times", "Times New Roman", serif;
  font-size:5em;
  line-height:1.1em;
}

.sidebar .timestamp {
  display:block;
  margin-top:1.5em;
  font-family:"Archer", "Georgia", "Times", "Times New Roman", serif;
}

.sidebar .timestamp span{
  text-align:center;
  display:block;
  margin:0;
  line-height:0.9em;
}

.sidebar .timestamp .month{
  font-size:2em;
}

.sidebar .timestamp .day {
  font-size:5em;
}

.sidebar .timestamp .year {
  margin-top:0.5em;
  font-size:1.5em;
}

.sidebar .timestamp .year:before{}


form br {
  display: none;
}
form input {
  margin-bottom: 10px;
}
input#contactsubmit {
  display: block;
  clear: both;
  margin: 20px 0;
}
input {
  width:240px;
}
form .column input {
  width: 145px;
  margin-bottom: 1em;
}
form label{
  display:block;
}
form input.error {
  background: #FAEDEE;
  color: #D12F19;
  border-color: #FBC2C4;
  border-width: 1px;
}
div.error {
  margin-bottom: 2em;
}
form .column input.error {
  width: 136px;
}


.body cite{
  display:block;
  text-align:right;
  clear:both;
  float:right;
  color:#222;
  text-decoration:underline;
  margin-bottom:1.5em;
  margin-top:0.5em;
  width:100%;
}


.mantra {
	    border: 5px solid #000;
	    width:510px;
	    -moz-border-radius:     17px;
      -khtml-border-radius:   17px;
      -webkit-border-radius:  17px;
      border-radius:          17px;
      -moz-box-sizing: content-box;
      -webkit-box-sizing: content-box;
      -khtml-box-sizing: content-box;
      box-sizing: content-box;
      padding:20px;
      padding-bottom:30px;
      margin-bottom:2em;
	  }
	  
	  .mantra span{
	    display:block;
	  }
	  
	  .mantra .title{
	    font-size:3em;
	    margin-bottom:0.25em;
	  }
	  
	  .mantra span {
	    margin-left:170px;
	    margin-right:20px;
	  }
	  
	  .team-fortress-2 {
	    color:#fff;
	    text-shadow: #444 2px 2px 1px;
	    border-color:#AEFFCC;
	    background:url(http://mattt.me/wp-content/uploads/2009/07/spy.png) no-repeat #54575D -15px bottom;
	  }
	  
	  .world-of-goo {
	    color:#fff;
	    text-shadow: #444 2px 2px 1px;
	    border-color:#AEFFCC;
	    background:url(http://mattt.me/wp-content/uploads/2009/07/goo-ball.png) no-repeat #54575D 30px center;
	  }


hr {
  margin: 17px 0 18px;
  height: 0;
  clear: both;
  border-top: 1px solid #ddd;
border-bottom: 1px solid #fff;
}


blockquote{
  font-style: normal;
  border-left:1px #ccc solid;
  margin:0.5em 0 1em 0;
  padding:0.5em 0 0.5em 1.5em;
}

blockquote p{
  margin:0;
}


.comment .author{
  color:#222;
  font-size:1.2em;
  font-weight:bold;
  margin-right:0.25em;
}

.comment .timestamp{
  float:right;
}

.comment cite {
  color:#999;
  font-style:normal;
  border-bottom:1px #f2f2f2 solid;
  display:block;
  padding-bottom:0.25em;
  margin-bottom:0.5em;
}