/*
Theme Name: unstunst theme
Theme URI: http://blog.mozilla.com/webdev
Description: Webdev blog theme
Version: 1.0
Author: Neil Lee
Author URI: http://www.mozilla.com/
Tags: 

                         
     #                   
      #                  
     W##     ###         
     ###    ####j        
   ### #i   #####        
  ###      L#####        
 ####      i#:# #        
####E     ; #####        
#####,      #####        
#######    ######        
###################      
 ####################    
  ####################   
   ###################   
    ###################  
      ################## 
       .################ 
        ################ 
        ############ ### 
        ###########j ####
        ###########  ####
        ############ ### 
        ###########   ## 
         ########## # ## 
       K###########  ##  
      ############   ##  
     ###############  #  
     ################    
    #################G   
    ##################   
   ####################  
   ##################### 
   #####################,
    #####################
      ##### ### #########
        ###  ## t########
        ###  #G    ##### 
        ###  jj  jjj###Lj
       j###  jj fjjjjjjjj
    jjjjjjj jjjjjjjjjjjjj
   jjjjjjjjjjjjjjjjjjjjjj
   ttttttttttttttttttttt 

We like ninjas.
*/


/* @font-face
--------------------------------------------- */

@font-face {
	font-family: 'ChunkFiveRegular';
	src: url('../fonts/Chunkfive.eot');
	src: local('ChunkFive Regular'), local('ChunkFive'), url('../fonts/Chunkfive.woff') format('woff'), url('../fonts/Chunkfive.otf') format('opentype'), url('../fonts/Chunkfive.svg#ChunkFive') format('svg');
}

@font-face {
	font-family: 'ChunkFiveRegular';
	src: url('../fonts/Chunkfive.eot');
	src: local('ChunkFive Regular'), local('ChunkFive'), url('../fonts/Chunkfive.woff') format('woff'), url('../fonts/Chunkfive.otf') format('opentype'), url('../fonts/Chunkfive.svg#ChunkFive') format('svg');
}

@font-face {
	font-family: 'PTSansBold';
	src: url('../fonts/PT_Sans_Bold.eot');
	src: local('PT Sans Bold'), local('PTSans-Bold'), url('../fonts/PT_Sans_Bold.woff') format('woff'), url('../fonts/PT_Sans_Bold.otf') format('opentype'), url('../fonts/PT_Sans_Bold.svg#PTSans-Bold') format('svg');
}

@font-face {
	font-family: 'PTSansBold';
	src: url('../fonts/PT_Sans_Bold.eot');
	src: local('PT Sans Bold'), local('PTSans-Bold'), url('../fonts/PT_Sans_Bold.woff') format('woff'), url('../fonts/PT_Sans_Bold.otf') format('opentype'), url('../fonts/PT_Sans_Bold.svg#PTSans-Bold') format('svg');
}

@font-face {
	font-family: 'PTSansRegular';
	src: url('../fonts/PT_Sans.eot');
	src: local('PT Sans Regular'), local('PTSans-Regular'), url('../fonts/PT_Sans.woff') format('woff'), url('../fonts/PT_Sans.otf') format('opentype'), url('../fonts/PT_Sans.svg#PTSans-Regular') format('svg');
}

@font-face {
	font-family: 'PTSansBold';
	src: url('../fonts/PT_Sans_Bold.eot');
	src: local('PT Sans Bold'), local('PTSans-Bold'), url('../fonts/PT_Sans_Bold.woff') format('woff'), url('../fonts/PT_Sans_Bold.otf') format('opentype'), url('../fonts/PT_Sans_Bold.svg#PTSans-Bold') format('svg');
}

@font-face {
	font-family: 'PTSansRegular';
	src: url('../fonts/PT_Sans.eot');
	src: local('PT Sans Regular'), local('PTSans-Regular'), url('../fonts/PT_Sans.woff') format('woff'), url('../fonts/PT_Sans.otf') format('opentype'), url('../fonts/PT_Sans.svg#PTSans-Regular') format('svg');
}

@font-face {
	font-family: 'ChunkFiveRegular';
	src: url('../fonts/Chunkfive.eot');
	src: local('ChunkFive Regular'), local('ChunkFive'), url('../fonts/Chunkfive.woff') format('woff'), url('../fonts/Chunkfive.otf') format('opentype'), url('../fonts/Chunkfive.svg#ChunkFive') format('svg');
}

/* page structure 
--------------------------------------------- */
body {
    background-color: rgb(255,255,255);
    font: 62.5% PTSansRegular, "trebuchet ms", sans-serif;
    color: #333;
}

.sidebar {
    width: 200px;
    float: right;
}

/* header 
--------------------------------------------- */

#headwrap {
    width: 100%;
    height: 235px;
    margin-bottom: 8px;
    background-color: #000;
    border-botoom: 8px solid #e8e5d4;
}

#header {
    width: 1006px;
    margin: 0 auto;
    color: rgb(255,255,255);
    position: relative;
}

#logo {
    width: 783px;
    height: 235px;
    background-color: #000;
    text-align: right;
    overflow: hidden;
    float: left;
	font-family: ChunkFiveRegular, helvetica, sans-serif;
	position: relative;
}

#home #logo h1 {
  	-moz-transform: rotate(-8deg);
	-webkit-transform: rotate(-8deg);
}

#home #logo h1 a {
    font-size: 6.6em;
    line-height: 0.73;
    letter-spacing: -4px;
    margin: 0 0 -10px -70px;
    color: #fff;
    text-transform: uppercase;
}

#logo .tagline {
    font-size: 1.2em;
    line-height: 0;
	margin: 0 35px 0 0;
	letter-spacing: 2px;
    color: #eee;
  	-moz-transform: rotate(-8deg);
	-webkit-transform: rotate(-8deg);	
}

#archive .tagline {
    -moz-transform: rotate(0);
    -webkit-transform: rotate(0);
    float: right;
}

#archive #headwrap,
#captcha  #headwrap{
    height: 60px;
}

#archive #logo,
#captcha #logo {
    width: 783px;
    height: 60px;
    text-align: left;
}

#archives #logo h1 {

}

#archive #logo h1 a,
#captcha  #logo h1 a {
    height: 60px;
    font-size: 2em;
    line-height: 1;
    letter-spacing: 0;
    position: absolute;
    left: 40px;
    bottom: -23px;
    text-transform: uppercase;
	-mozilla-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	color: #fff;
}

#header .sidebar {
    width: 169px;
    height: 203px;
    border-left: 11px solid #e8e5d4;
    border-right: 11px solid #e8e5d4;
    float: left;
    background-color: #000;
    padding: 16px 16px 16px 16px;
    font-size: 1.4em;
    color: #cfcebc;
    position: relative;
}

#header .sidebar span {
    color: rgb(255,255,255);
}

#header .sidebar .this {
    margin-top: 22px;
    color: rgb(255,255,255);
}

#header .sidebar ul {
    position: absolute;
    bottom: 10px;
    font-size: 1.1em;
    text-transform: uppercase;
    letter-spacing: -1px;
}

#header .sidebar ul li {
    line-height: 1.4em;
    text-shadow: 0 1px 0 rgba(155,155,155,.8);
}

#header .sidebar ul li:before {
    color: rgb(255,255,255);
    content: "\00B6";
}

#archive #header .sidebar,
#captcha #header .sidebar {
    height: 60px;
    padding: 0 0 0 15px;
    border: 0;
}

#archive #header .sidebar ul,
#captcha #header .sidebar ul {
    width: 190px;
}

#archive #header .sidebar li,
#captcha #header .sidebar li {
    display: inline;
    font-size: 0.85em;
    padding-right: 15px;
}

#archive #header .sidebar ul li:before,
#captcha #header .sidebar ul li:before {
    color: rgb(255,255,255);
    content: "";
}

.categories select {
    margin: 5px 0 10px 0;
    width: 180px;
}

/* main styles 
--------------------------------------------- */

a:link, a:visited {
    color: rgb(167,0,0);
    text-decoration: none;
}

a:hover {
/*     color: rgba(167,0,0,0.6); */
    opacity: 0.6;
}

a img {
    opacity: 1;
}

a:hover img {
    opacity: 1;
}

/*
#logo a {
    position: absolute;
    width: 850px;
    height: 235px;    
    color: #fff !Important;
}
*/

#header .sidebar a {
    color: rgb(255,255,255);
    padding-left: 10px;
}

#header .sidebar a:visited {
    color: rgb(255,255,255);
}

/*
#header .sidebar a:hover {
    color: rgba(255,255,255,0.8);
}
*/

#body .sidebar a {
    color: #000;
}

/*
#body .sidebar a:hover {
    color: rgba(167,0,0,0.6);
}
*/

.entry h2.title a:link, .entry h2.title a:visited {
    color: #333;
}

.entry h2.title {
    margin: 0;
}

h2.pagetitle {
    margin-bottom: 15px;
}

a.readmore {
    text-transform: uppercase;
    float: left;
    margin-right: 30px;
}

#footer ul a {
    color: rgb(232,229,211);
    font-size: 0.9em;
}

/*
#footer ul a:hover {
    color: rgba(232,229,211,0.8);
}
*/

#body {
     clear: both;
     font-size: 1.45em;
     line-height: 1.4;
}

#tweetwrap {
    width: 100%;
    height: 40px;
    background: rgb(181,233,244);
    color: #333;
}

#tweets {
    width: 935px;
    font-size: 0.94em;
    margin: 0 auto;
    position: relative;
}

#tweets p {
    padding: 10px 15px 0 50px;
    float: left;
}

#tweetie a {
    width: 64px;
    height: 64px;
    background: url(../img/home_twitter.png) no-repeat;
    position: absolute;
    top: -12px;
    left: -10px;
}

#featuredwrap {
    width: 100%;
    background-color: #e8e5d4;
 
}

#featured {
    width: 935px;
    padding: 17px 0 17px 0;
    margin: 0 auto;
    display: none;
}

#featured img {
    float: left;
    border: 8px solid #fff;
    background: #fff;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    box-shadow: 2px 2px 4px #bdbcb0;
    -webkit-box-shadow: 2px 2px 4px #bdbcb0;
    -moz-box-shadow: 2px 2px 4px #bdbcb0;
}

.siteinfo {
    margin-left: 125px;
    width: 680px;
}

#blogwrap {
    width: 1000px;
    margin: 0 auto;
}

#blog {
    width: 730px;
    float: left;
    padding: 26px 31px 10px 36px;
}

#body .sidebar {
    padding-top: 27px;
}

/* secondary styles 
--------------------------------------------- */

h1, h2, h3 {
    font-weight: normal;
    letter-spacing: -1px;
    margin: 0;
    padding: 0;
}

h1 { font-size: 2.5em; }
h2 { font-size: 1.9em; }
h3 { font-size: 1.5em; }

#featured h2 {
    text-transform: uppercase;
    font-size: 0.8em;
    color: rgb(166,26,26);
    font-weight: normal;
}

#featured h3 {
    font-size: 1.6em;
    margin-bottom: 0;
    line-height: 1.3;
}

.entry h2 {
    font-size: 1.6em;
    line-height: 1;
    margin: 10px 0;
}

.entry.first h2 {
    font-size: 2em;
}

#blog .entry ul {
    list-style: disc;
    margin-right: 100px
}

#blog .entry li {
    margin: 0 0 6px 14px;
}

.entry ul.metadata, ul.post-meta {
    margin: 0 0 10px 0;
    padding-top: 0;
    font-size: 0.9em;
}

.entry ul.metadata li, ul.post-meta li {
    display: inline;
    padding: 0 15px 0 0;
    margin-left: 0 !important;
}

#archive .entry .author-info {
    background-color: #e8e5d4;;
    border-top: 1px solid #aaa;
    border-bottom: 1px solid #aaa;
    padding: 10px 20px 10px 10px;
    font-size: 1.0em
}

.author_deets, .author-info .metadata {
    margin-left: 110px;
}

.entry img.avatar-48 {
    float: left;
    padding: 6px;
    border: 1px solid #aaa;
    background-color: #fff;
}

.fancy {
    float: left;
    font-size: 5em;
    padding: 0 8px;
    line-height: 1;
    color: rgb(221,212,193);
    font-family: "MS Serif", "Book Antiqua", georgia, serif;
}

.entry p, .quote p {
    margin: 0 0 10px 0;
    font-size: 1.0em;
    line-height: 1.4;
}

.author_deets p {
    margin: 0 0 10px 0;
}

.author-info .metadata {
    font-size: 0.9em;
}

#blog hr {
    clear: left;
    background: url(../img/divider.png) no-repeat center;
    border: 0;
    height: 20px;
    margin: 20px 0 30px 0;
}

hr.foot {
    margin: 20px 0 0 0 !important;
}

#moreentries h2 {
    font-size: 1.7em;
}

#moreentries dt {
    font-size: 1.2em;
}

#moreentries dd {
    font-size: 0.9em;
    margin-bottom: 5px;
}

#moreentries p {
    font-size: 1.2em;
}

#body .sidebar h2 {
    font: 1.4em/1 ChunkFiveRegular, sans-serif;
    letter-spacing: 0;
    margin-bottom: 8px;
}

#body .sidebar ul {
    margin-bottom: 20px;
}

#search {
    margin-bottom: 20px;
}

#searchfield {
    border: 1px solid rgb(159,159,159);
    background-color: rgb(239,239,239);
    padding: 4px;
    -moz-border-radius-topleft: 8px;
    -moz-border-radius-bottomleft: 8px;
    -webkit-border-top-left-radius: 8px;
    -webkit-border-bottom-left-radius: 8px;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    width: 120px;
    font-style: italic;
    color: #999;
}

#search input[type="submit"] {
    background: rgb(175,35,35);
    border: 1px solid rgb(175,35,35);
    padding: 4px;
    -moz-border-radius-topright: 8px;
    -moz-border-radius-bottomright: 8px;
    -webkit-border-top-right-radius: 8px;
    -webkit-border-bottom-right-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    color: #fff;
    cursor: pointer;
}

#archive #blog #searchfield {
    width: 300px
}

.query {
    font-weight: bold;
}

#archives-list ul li {
    margin-left: 12px;
}

#archives-list h1 {
    margin: 0;
}

#archives-list ul h3 {
    margin-top: 15px;
}

/* project page styles
------------------------ */

.project {
    margin: 10px 0;
    border-bottom: 0;
}

.project li {
    list-style: disc;
    margin-left: 15px;
}

/* comments */

h3#comments {
    border-bottom: 1px solid #ddd;
    margin-top: 15px;
}

.commentlist li {
    clear: left;
    padding: 8px 0;
    border-bottom: 1px solid #ddd;
}

.commentlist .avatar {
    padding: 6px;
    border: 1px solid #ddd;
    background-color: #fff;
    float: left;
    margin: 0 10px 0 0;
}

.commentlist .quote {
    margin-left: 53px;
}

#respond {
    padding: 0 0 25px 0;
}

#respond h3#comments {
    margin: 10px 0;
}

#commentform p {
    padding: 10px 0 10px 10px;
    border-top: 1px solid #bbb;
    background-color: #eee;
}

#commentform p.alt {
    background-color: #fff;
}

#author, #email, #url {
    border: 1px solid #aaa;
    padding: 2px 0;
    clear: both;
    width: 250px;
}

#commentform label {
    display: block;
    width: 180px;
    float: left;
    clear: both;
    font-weight: bold;
}

#commentform label small {
    font-size: 0.8em;
    font-weight: normal;
}

#commentform textarea {
    margin-top: 10px;
    width: 99%;
}

/* 404 page
--------------*/

#options {
    margin: 15px 0;
}

#options li {
    margin: 6px 20px;
    list-style: decimal;
}


/* footer 
--------------------------------------------- */

#footerwrap {
    clear: both;
    width: 100%;
    background-color: rgb(67,66,63);
    color: rgb(232,229,211);
    font-size: 1.7em;
    padding-bottom: 20px;
    border-top: 8px solid #e8e5d4;
}

#archive #footerwrap {
    font-size: 1em;
}

#captcha #footerwrap {
	position: absolute;
	bottom: 0;
	left: 0;
    font-size: 1em;
}

#footer {
    width: 930px;
    margin: 0 auto;
    padding: 11px 0;
}

#footer h2 {
    font: 1.6em/0 ChunkFiveRegular, sans-serif;
    text-transform: uppercase;
    font-weight: normal;
    letter-spacing: 0;
    margin-top: -2px;
}

#oursites, #footer .nav, #oursites ul {
    float: left;
}

#footer .nav {
    width: 314px;
}

#oursites {
    width: 600px;
}

#footer ul {
    margin-top: 31px;
}

#oursites ul {
    margin-right: 30px;
}

#footercontent {
	clear: left;
	font-size: 0.75em;
	padding: 40px 0 0 30px;
}

#legal { 
	clear: left;
	width: 975px;
}

#copyright { 
	float: left;
	padding-bottom: 20px;
}

#copyright img { 
	float: left;
	margin-right: 8px;
}

#copyright p strong { 
	display: block;
	width: 400px;
}

#legal ul { 
	float: right;
	margin: 10px 30px 0 0;
}

#legal ul li { 
	list-style: none;
	float: left;
	margin-left: 40px;
}

#legal ul li a {
    color: #fff;
}

/* page styling */

.page h3 {
    margin-bottom: .5em;
}
.page ul li {
    list-style: disc inside none;
}

.page {
    margin-bottom: 2em;
}


/* misc. 
--------------------------------------------- */

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

.alignleft {
    float: left;
}

.alignright {
    float: right;
}

.hiring {
    text-align: center;
}