/*
	Styles for my Tumblelog theme. 
	I was gonna go crazy and use some @font-face niceness, 
	etc but times a bit tight atm. 
	
	Hopefully this is good enough, 
	I've got some pure CSS drop shadows in there.
	Thought about creating the logo with CSS rounded corners,
	but seemed like overkill to me.
	The logo is, afterall, the only graphic in the layout.
	
	Anyway, usual rules apply, have a look through, if you
	pick up some tips then that's great. Just don't rip it off
	wholesale, or Santa will burn down your house at Christmas...


	Let's begin with Basic Elements
*/
html{
	background-color: #EEE;
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEE), to(#FFF));
	background-image: -moz-linear-gradient(0% 0% 90deg, #EEE, #FFF);
}

body{
	position: relative;
	margin: 0 auto;
	width: 600px;
	text-shadow: #FFF 0 1px 0;
	font: 12px/1.5 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Arial, Helvetica, sans-serif;
	background: transparent;
	color: #666;
}

p{
	margin: 18px 0;
}

a{
	text-decoration: none;
	color: #e21c83;
}

a:hover{
	color: #000;
}

/* Headings */

h1{
	margin-top: 40px;
	width: 103px;
}
	 h1 a{
		display: block;
		height: 104px;
		text-indent: -9000px;
		background: url(img/logo.png) top no-repeat;
	}
	
h2{
	font-size: 36px;
}

/* Layouts */

#header{
	margin-top: 10px;
	width: 400px;
}

#header:before{
	content: ':::';
	position: fixed;
	top: 0;
	display: block;
	text-indent: -9000px;
	width: 400px;
	height: 10px;
	background: #FFF;
	
	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

#header:after, #left-col ol li:after{
	margin-top: 30px;
	content: ':::';
	display: block;
	text-indent: -9000px;
	width: 400px;
	height: 2px;
	background: #FFF;
	
	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

	#rss-link{
		position: absolute;
		top: 0;
		left: 430px;
		margin: 0;
		z-index: 1338;
	}
	
		#rss-link a{
			display: block;
			width: 15px;
			height: 16px;
			text-indent: -9000px;
			background: url(img/rss.png);
		}

#content{
	
}

	#left-col{
		margin-right: 30px;
		width: 400px;
		float: left;
	}
	
		#left-col ol{
			
		}
		
			li.post{
				padding-top: 30px;
			}
			
			/* Content styles */
			
			li.text .the-content p:first-child{
				font-size: 18px;
				color: #888;
			}
			
			li.quote blockquote{
				margin: -35px 0 0 -50px;
				padding: 15px 0 0 50px;
				font-size: 36px;
				background: url(img/quote.png) 0 15px no-repeat;
				color: #6588e2;
			}
			
			li.quote p cite{
				font-weight: bold;
				color: #333;
			}
			
			li.photo .caption{
				padding: 10px;
				background: #e21c83;
			}
			
				li.photo .caption *{
					margin: 0;
					text-shadow: none;
					text-align: right;
					font-size: 18px;
					color: #FFF;
				}
				
				.tweet{
					padding: 3px 0 0 40px;
					background: url(img/tweet.png) left no-repeat;
				}
	
	#right-col{
		margin-top: -120px;
		width: 170px;
		float: right;
	}
	
		#right-col p:first-child{
			font-size: 18px;
			color: #888;
		}
		
			#right-col p:first-child span{
				color: #e21c83;
			}
			
/* Clearing floats */
#content{
	display: inline-block;
	_height: 1%;
}

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

/* Repositioning tumblr controls */
#tumblr_controls{
	top: -35px !important;
}