/*************************************************************************/
/*        Stakz is a Tumblr Theme Designed by Clay Cauley 2011           */
/*        All code in this document is copyright of Clay Cauley          */
/*        You have every right to edit this code for your needs          */
/*        Do note that this theme will look terrible in IE 6-8           */
/*   Works great on up-to-date versions of Chrome, Safari, and Firefox   */
/*  Email me of you have any questions or comments regarding this theme  */
/*				          stakz@clay-cauley.com                          */
/*************************************************************************/

/* General Styling */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
}
html{
	background: url(http://static.tumblr.com/h1tloys/MfAlqt49d/bg.png) repeat;
	background-attachment: fixed;
	margin-top: 60px;
	padding-bottom: 150px;
}
ol, ul{
	list-style-type: none;
}
p, p a, a.tag, .more, .chat{
	font-family: 'Droid Serif', serif;
	font-size: 14px;
}
p{
	margin-bottom: 10px;
}
p a, .more, .source a{
	color: #8aba56;
	text-decoration: none;
}
.source{
	font-family: 'Droid Serif', serif; 
}
p a:hover, .more:hover, .source a:hover{
	color: #7aa44d;
}
h3, h3 a{
	font-family: Helvetica;
	text-transform: uppercase;
	color: #000;
	text-shadow: 1px 1px 0 #f6f6f6, 2px 2px 0 #8aba56;
	letter-spacing: -1px;
	font-weight: 700;
	text-decoration: none;
	margin-bottom: 10px;
	font-size: 26px;
}
::selection {
    background: #ea4c89;
    color: #fff;   
    text-shadow: none; 
}
::-moz-selection {
    background: #ea4c89;
    color: #fff;
    text-shadow: none;
}

/* Page Organization Styling */ 
#wrapper{
	position: relative;
	width: 1000px;
	margin: 0 auto;
}
#sideBar{
	float: left;
	width: 270px;
    position: relative;
    border-radius: 4px;
}
#mainContent{
	float: right;
	width: 620px;
}
footer{
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 40px;
	z-index: 100;
	background: #383838;
	border-top: 1px solid #000;
	box-shadow: 0 -5px 30px rgba(0,0,0,.2);
}

/* Sidebar Styling */
.portrait{
	position: relative;
	height: 128px;
	width: 128px;
	margin: 0 auto;
	border: 10px solid #434950;
	-webkit-border-radius: 4px;
	   -moz-border-radius: 4px;
		    border-radius: 4px;
}
#description{
	padding: 10px;
	margin: 20px auto 0 auto;
	text-align: center;
	width: 200px;
	border-top: 1px solid #434950;
	border-bottom: 1px solid #434950;
}
#sideBar {
    background: #f6f6f6;
    border: 1px solid #ccc;
    position: relative;
    width: 220px;
    -webkit-box-shadow: 0 0 3px hsla(0,0%,0%,.1);
       -moz-box-shadow: 0 0 3px hsla(0,0%,0%,.1);
            box-shadow: 0 0 3px hsla(0,0%,0%,.1);
    border-radius: 4px 4px 0 0;
    padding: 20px 10px 20px 10px;
}
#sideBar:after, #sideBar:before{
    background: #f6f6f6;
    border: 1px solid #ccc;
    bottom: -3px;
    content: '';
    height: 5px;
    left: 2px;
    position: absolute;
    width: 234px;
    z-index: -10;
    -webkit-box-shadow: 0 0 3px hsla(0,0%,0%,.2);
       -moz-box-shadow: 0 0 3px hsla(0,0%,0%,.2);
            box-shadow: 0 0 3px hsla(0,0%,0%,.2);
}
#sideBar:before{
    bottom: -5px;
    left: 5px;
    width: 228px;
}

/* Main Content (Post) Styling */
li.post{
	margin-top: 80px;
}
ol li.post:first-child{
	margin-top: 0;
}
.post{
    background: #f6f6f6;
    border: 1px solid #ccc;
    position: relative;
    width: 600px;
    -webkit-box-shadow: 0 0 3px hsla(0,0%,0%,.1);
       -moz-box-shadow: 0 0 3px hsla(0,0%,0%,.1);
            box-shadow: 0 0 3px hsla(0,0%,0%,.1);
    border-radius: 4px 4px 0 0;
    padding: 20px 10px 20px 10px;
}
.post:after,
.post:before{
    background: #f6f6f6;
    border: 1px solid #ccc;
    bottom: -3px;
    content: '';
    height: 5px;
    left: 2px;
    position: absolute;
    width: 614px;
    z-index: -10;
    -webkit-box-shadow: 0 0 3px hsla(0,0%,0%,.2);
       -moz-box-shadow: 0 0 3px hsla(0,0%,0%,.2);
            box-shadow: 0 0 3px hsla(0,0%,0%,.2);
}
.post:before{
    bottom: -5px;
    left: 5px;
    width: 608px;
}

/* Tag Styling */
.tags{
	margin-top: 15px;
}
.tags li {
	display: inline;
	position: relative;
	cursor: pointer;
	z-index: 3;
}
a.tag{
  display: inline-block;
  position: relative;
  height: 18px;
  line-height: 18px;
  font-size: 12px;
  color: #000;
  margin-left: 12px;
  text-decoration: none;
  text-shadow: 0 1px 1px #bde492;
  font-weight: 400;
  padding: 0 10px;
}
a.tag {
  text-transform: lowercase;
  text-align: center;
  margin-bottom: 5px;
}
a.tag{
  background: url(http://static.tumblr.com/h1tloys/XOFlqt4bb/tag.png) 0 -36px repeat-x;
}
a.tag:active {
  top: 1px;
}
a.tag:before{
  width: 12px;
  left: -12px;
  background-position: 0 0;
}
a.tag:after{
  width: 4px;
  right: -4px;
  background-position: right 0;
}
a.tag:before, a.tag:after {
  content: '';
  top: 0;
  bottom: 0;
  display: block;
  position: absolute;
  background: url(http://static.tumblr.com/h1tloys/XOFlqt4bb/tag.png) 0 0 no-repeat;
}
a.tag.subtle {
  background-position: 0 -36px;
  color: #000;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
  margin-right: 4px;
  text-shadow: 0 1px 1px #bde492;
}
a.tag.subtle:before {
  background-position: 0 0;
}
a.tag.subtle:after {
  background-position: right 0;
}
section.tags li {
  display: inline;
  margin-right: 0.5em;
}

/* Date, Notes, Playcount Styling ('.extra') */
.date{
	position: relative;
	margin-top: -6px; /* Keeps the extras tighter to the tags */
}
.extra{
	position: relative;
	top: 14px;
	padding: 8px;
	background-color: #383838;
	border: 1px solid #000;
	-webkit-border-radius: 4px;
	   -moz-border-radius: 4px;
		    border-radius: 4px;
	color: #ea4c89;
	text-shadow: 0 1px 1px #000;
	font-weight: 700;
}

/* Post Type Glyph Styling */
.textIcon, .photoIcon, .quoteIcon, .linkIcon, .chatIcon, .audioIcon, .videoIcon{
	position: absolute;
	right: -54px;
	top: 4px;
	margin: 4px;
	height: 48px;
	width: 48px;
	background-color: #f6f6f6;
	background-image: url(http://static.tumblr.com/h1tloys/47vlqt4an/posttype.png);
	border: 1px solid #ccc;
	-webkit-border-radius: 0 4px 4px 0;
	   -moz-border-radius: 0 4px 4px 0 ;
		    border-radius: 0 4px 4px 0 ;
}
.textIcon{
	background-position: 0 0;
}
.photoIcon{
	background-position: 0 -48px;
}
.quoteIcon{
	background-position: 0 -96px; 
}
.linkIcon{
	background-position: 0 -144px;
}
.chatIcon{
	background-position: 0 -196px;
}
.audioIcon{
	background-position: 0 -242px;
}
.videoIcon{
	background-position: 0 -290px;
}

/*************************/
/* For Text Post Styling */
/*  See General Styles   */
/*************************/

/*************************/
/* No Extra Post Styling */
/*    For Photo Posts    */
/*************************/

/* Quote Post Styling */
h2.quote{
	font-family: Helvetica;
	text-transform: capitalize;
	font-style: italic;
	color: #ea4c89;
	letter-spacing: -1px;
	font-weight: 700;
	text-decoration: none;
	font-size: 28px;
	padding-right: 10px;
	text-shadow: 0 -1px 1px #fff;
}
.source{
	font-size: 24px;
	margin-top: 20px;
	color: #AAA;
	color: rgba(0, 0, 0, 0.3);
}

/* Link Post Styling */
li.link a{
	font-family: Helvetica;
	text-transform: uppercase;
	color: #8aba56;
	letter-spacing: -1px;
	font-weight: 700;
	text-decoration: none;
	font-size: 28px;
	-webkit-transition: ease .5s;
	   -moz-transition: ease .5s;
}
li.link a:hover{
	color: #7aa44d;
}

/* Chat Post Styling */
.chat{
	text-indent: 6px;
}
span.label{
	color: #8aba56;
	font-style: italic;
	font-weight: 700;
}
li.odd{
	background-color: #e1e1e1;
	margin: 10px 0;
	padding: 5px 5px 5px 0;
	border: 1px solid #d6d6d6;
}
li.even{
	background-color: #f1f1f1;
	padding: 5px 5px 5px 0;
	border: 1px solid #e5e5e5;
}

/*************************/
/* No Extra Post Styling */
/*    For Audio Posts    */
/*************************/

/*************************/
/* No Extra Post Styling */
/*    For Video Posts    */
/*************************/

/* Footer Contents Styling */
.footerNav{
	position: relative;
	top: 10px;
	width: 1007px;
	height: 30px;
	margin: 0 auto;
}
.footerNav a{
	border: 1px solid #000;
	color: #383838;
	font-family: Helvetica;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 12px;
	text-decoration: none;
	text-shadow: 0 1px 1px #bde296;
	padding: 6px;
	-webkit-border-radius: 4px;
	   -moz-border-radius: 4px;
		    border-radius: 4px;
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#A3DB65), to(#6A8F42));
	background-image: -moz-linear-gradient(center bottom,#6A8F42 0%,#A3DB65 100%);
    -webkit-box-shadow:inset 0 1px 1px rgba(255,255,255,.8);
       -moz-box-shadow:inset 0 1px 1px rgba(255,255,255,.8);
            box-shadow:inset 0 1px 1px rgba(255,255,255,.8);
}
.footerNav a:active{
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#6A8F42), to(#A3DB65));
	background-image: -moz-linear-gradient(center bottom,#A3DB65 0%,#6A8F42 100%);
}
#next{
	float: right;
}
#previous{
	float: left;
}