/*
Theme Name: Gurafiku
Theme URI: http://www.ryanhageman.com
Description: A theme for Gurafiku
Version: 0.01
Author: Ryan Hageman
Author URI: http://www.ryanhageman.com
*/


/*------------------------------------------------*/
/*-----------------[RESET]------------------------*/
/*------------------------------------------------*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }

body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q {	quotes: none; }

blockquote:before, blockquote:after,q:before, q:after { content: ''; content: none; }

/* remember to define focus styles! */
:focus { outline: 0; }

/* remember to highlight inserts somehow! */
ins { text-decoration: none; }
del { text-decoration: line-through; }

/* tables still need 'cellspacing="0"' in the markup */
table { border-collapse: collapse; border-spacing: 0; }

/*------------------------------------------------*/
/*-------------------[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%;
}

/*------------------------------------------------*/
/*-----------------[BASIC STYLES]-----------------*/
/*------------------------------------------------*/

body{
	font-family: Helvetica, Arial, Sans-serif;
	font-size: 12px;
	background: #fff;
	color: #000;
	padding: 25px;
}

#wrapper {
	width: 1000px;
}

#sidebar {
	width: 230px;
	margin: 0 170px 0 0;
	float: left;
	list-style: none;
}

#title {
	height: 300px;
}

#title img {
	position: relative;
	top: -28px;
	left: -36px;
	margin: 0 0 2px 0;
}

#side-description {
	margin: -25px 0 25px 0;
}

#side-nav {
	border-top: solid 1px #000;
	padding: 25px 0 10px 0;
}

#side-tags {
	border-top: solid 1px #000;
	padding: 25px 0 0 0;
}

#side-footer {
	border-top: solid 1px #000;
	padding: 25px 0 0 0;
}

#main {
	width: 600px;
	float: left;
}

#main p {
	width: 500px;
	margin: 0 0 25px 0;
}

#caption p {
	width: 600px !important;
}

.post {
	margin: 0 0 80px 0;
}

.post img {
	margin: 0 0 15px 0;
}

#meta {
	margin: -75px 0 50px 0 !important;
}

#meta p {
	width: 600px !important;
	margin: 0 0 0 0 !important;
}

#pagination {
	background-color: #F0F0F0;
	padding: 20px 15px 10px 15px;
	height: 25px;
	width: 500px !important;
}

#pagination li {
	float: left;
	min-width: 155px;
}

.perma .previous {
	margin: 0 190px 0 0;
}

#pagination li.pages {
	text-align: center;
}

#pagination li.next {
	text-align: right;
}

#footer {
	margin: 25px 0 0 0;
}


/*------------------------------------------------*/
/*------------------[TYPOGRAPHY]------------------*/
/*------------------------------------------------*/

#main h3 {
	font-size: 2.5em;
	line-height: 1.2em;
	font-weight: bold;
	margin: 0 0 10px 0;
}

#main p {
	font-size: 1.5em;
	line-height: 1.4em;
}

#sidebar li {
	font-size: 2.5em;
	font-weight: bold;
	margin: 0 0 10px 0;
}

#sidebar h4 {
	font-size: 1.5em;
	font-weight: bold;
	margin: 0 0 5px 0;
}

#sidebar p {
	font-size: 1em;
	line-height: 1.6em;
	font-weight: bold;
	margin: 0 0 25px 0;
}

#caption h3 {
	font-size: 1em !important;
	line-height: 1.2em !important;
	font-weight: bold !important;
	margin: 0 0 5px 0 !important;
}

#meta p {
	font-size: 1em;
	line-height: 2em;
}

#pagination {
	font-size: 1.5em;
	line-height: 1.2em;
	font-weight: bold;
}

#copyright p {
	font-size: 1em;
	line-height: 1.2em;
}

/*------------------------------------------------*/
/*--------------------[LINKS]---------------------*/
/*------------------------------------------------*/

a:link, a:visited{
	text-decoration: none; 
	color: #000;
}

a:hover{
	color: #000;
	text-decoration: underline;
}

.text a:link, a:visited{
	text-decoration: underline; 
	color: #000;
}

.text a:hover{
	color: #000;
	text-decoration: none;
}

.readmore a:link, a:visited{
	text-decoration: underline; 
	color: #000;
	font-size: 1.5em;
	font-weight: bold;
	margin: 0 0 5px 0;
}

.readmore a:hover{
	color: #000;
	text-decoration: none;
	font-size: 1.5em;
	font-weight: bold;
	margin: 0 0 5px 0;
}

h3 a:link, a:visited{
	text-decoration: none; 
	color: #000;
}

h3 a:hover{
	color: #000;
	text-decoration: underline;
}



/*------------------------------------------------*/
/*--------------------[FOOTER]---------------------*/
/*------------------------------------------------*/



/*------------------------------------------------*/
/*--------------------[INLINK]---------------------*/
/*------------------------------------------------*/


#tumblrinlink {
	clear: both;
	border-top: 1px solid #000 !important;
	padding: 25px 0 25px 0 !important;
	color: #000 !important;
	min-height: 350px !important;
	display: none !important;
}

#tumblrinlink h2 {
	font-size: 1.5em !important;
	line-height: 1.2em !important;
	font-weight: bold !important;
	margin: 0 0 10px 0 !important;
}

li.inlink-item {
	display: block;
	float: left;
	margin-right: 5px;
	margin-bottom: 5px;
	height: 150px !important;
	padding: 0 !important;
	position: relative;
	overflow: hidden;
}

li.inlink-item img {
	max-width: 250px;
	display: block;
}

/*Clipout trick from http://www.seifi.org/css/creating-thumbnails-using-the-css-clip-property.html*/
.clipout {
	position: relative;
	width: 120px !important;
	height: 250px !important;
	top: -1px;
	left: -1px;
}

.clipin {
	position: absolute;
	clip: rect(50px 50px 50px 50px) !important;
	top: -50px;
	left: -50px;
	/*
	clip: rect(50px 218px 155px 82px);
	top: -50px;
	left: -82px;
	*/
}

.shade1 {
	width: 120px !important;
	height: 250px !important;
	background-color: #F0F0F0 !important;
}

.shade2 {
	display: none !important;
}

.shade3 {
	display: none !important;
}

li.inlink-item p {
	display: none !important;
}

#inlink-list { min-height: 160px; }

#inlink-logo {
	display: none !important;
}