/* Reset
--------------------------------------------- */

/*
Copyright (c) 2008, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.6.0
*/
html{color:#000;background:#FFF;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
li{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym {border:0;font-variant:normal;}
/* to preserve line-height and selector appearance */
sup {vertical-align:text-top;}
sub {vertical-align:text-bottom;}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}
/*because legend doesn't inherit in IE */
legend{color:#000;}
del,ins{text-decoration:none;}



/* Layout
-------------------------------------------------- */

#wrapper
{
	width: 960px;
	margin: auto;
	margin-bottom: 20px;
}

#meat.has-sidebar #content
{
	width: 650px;
	margin-right: 50px;
	float: left;
}

#meat.has-sidebar #sidebar
{
	width: 260px;
	float: left;
}

#header h1 { clear: left; }

#nav ul
{
	width: 960px;
	margin: auto;
	padding: 0;
	list-style: none;
}

#nav ul li
{
	float: left;
	display: block;
	padding: 10px 0;
	margin-right: 30px;
}

#column-wrapper .column
{
	width: 290px;
	float: left;
	display: block;
}

#column-wrapper .skills,
#column-wrapper .latest-post 
{ 
	margin-right: 45px; 
}

* html #column-wrapper .skills,
* html #column-wrapper .latest-post 
{
	margin-right: 40px;
}

#footer
{
	margin: auto;
	clear: left;
}

#content .project-entry { margin-bottom: 30px;}

#content .entry-excerpt
{
	margin-bottom: 25px;
	padding-bottom: 30px;
	border-bottom: 1px dotted #ddd;
}

iframe { width: 100%; }


	/* grid 
	------- */
	
	.grid-container 
	{
		display: block;
		float: left;
		width: 950px;
		height: auto;
		margin: 5px 0;
	}
	
	.grid-container .column
	{
		float: left;
		width: 70px;
		margin-right: 10px;
	}
	
	.grid-container .cols-12
	{
		width: 950px;
		margin-right: 0;
	}
	
	.grid-container .cols-8
	{
		width: 630px;
	}
	
	.grid-container .cols-6
	{
		width: 470px;
	}
	
	.grid-container .cols-4
	{
		width: 310px;
	}
	
	.grid-container .cols-3
	{
		width: 230px;
	}
	
	.grid-container .cols-2
	{
		width: 150px;
	}
	
	.grid-container .last
	{
		margin-right: 0;
	}



/* Self-Clearing Rules
-------------------------------------------------- */

#nav:after,
#meat:after,
#column-wrapper:after
{
	content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

* html #nav,
* html #meat,
* html #column-wrapper 
{
	height: 1px;
}

#nav,
#meat,
#column-wrapper
{
	min-height: 1%;
}



/* Typography 
-------------------------------------------------- */

body 
{
	font-family: Georgia, "Times New Roman", serif;
	font-size: 62.5%;
	color: #555;
}

h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.25em; }
h4 { font-size: 1.1em; }

h1,
h2,
h3,
h4
{
	font-family: "Helvetica Neue", Helvetica, Verdana, sans-serif;
	font-weight: 500;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #420;
	margin: 5px 0;
	line-height: 1.5em;
}

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

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

p
{
	font-size: 1.3em;
	line-height: 1.8em;
	margin-bottom: .5em;
	color: #555;
}

strong
{
	color: #222;
	font-weight: 700;
}

pre
{
	margin: 20px 0;
	color: #555;
	font-size: 1.2em;
	font-family: courier, serif;
}

dl dt,
em 
{  
	font-style: italic;
	color: #222;
}

ul,
ol,
dl 	
{ 
	font-size: 1.3em;
	color: #555;
	margin: 10px 0;
}

ul li,
ol li,	
dl dd	
{
	padding-bottom: 10px;
	line-height: 1.5em;
}

small
{
	font-family: "Helvetica Neue", Helvetica, Verdana, sans-serif;
	font-size: .9em;
	text-transform: uppercase;
	color: #6f6f6f;
}

p > small
{
	font-size: .692em;
}

#nav a
{
	font-family: "Helvetica Neue", Helvetica, Verdana, sans-serif;
	font-size: .75em;
	font-weight: 500;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #ccc;
	background: #444;
}

#nav a:hover { text-decoration: none; }

#short-intro p
{
	font-size: 3.6em;
	font-weight: 100;
	letter-spacing: 1px;
	line-height: 1.5em;
	margin-bottom: 0;
	color: #999;
}

#short-intro p em { font-weight: normal; }

#footer p
{	
	font-family: "Helvetica Neue", Helvetica, Verdana, sans-serif;
	font-size: .9em;
	line-height: 1.5em;
	text-transform: uppercase;
	color: #777;
	margin-bottom: 5px;
}

.strike { text-decoration: line-through; }


/* Miscellaneous Styles
-------------------------------------------------- */

html,
body 
{ 
	background: #fcfcfc; 
}

img 
{ 
	border: 1px solid #ddd; 
	padding: 5px;
}

.grid-container ul li 
{
	padding-top: 10px;
	border-top: 1px dotted #ddd;
}



/* #navigation
-------------------------------------------------- */

#nav 	{  background: url('images/nav_gradient.jpg') bottom left repeat-x #444; }
	
#nav a 	{ border-bottom: 1px dotted #999;}

#nav a:hover 	
{ 
	border-bottom: 1px dotted #fff; 
	color: #fff;
}

#nav a.current
{
	border: none;
	text-decoration: none;
	background: url('images/triangle.gif') bottom center no-repeat;
	padding-bottom: 15px;
	color: #fff;
}



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

#header h1 a
{
	display: block;
	text-indent: -9999px;
}

#header h1.not-home a
{
	background: url('images/logo_small.gif') bottom left no-repeat;
	width: 32px;
	height: 152px;
	position: absolute;
	left: -1px;
	top: 3em;
}

#header h1.home a
{
	width: 292px;
	height: 62px;
	background: url('images/logo.gif') bottom left no-repeat;
	margin: 30px 0;
}



/* #content
-------------------------------------------------- */

h2#page-title
{
	font-family: Georgia, "Times New Roman", serif;
	font-size: 2.4em;
	font-weight: 100;
	text-transform: capitalize;
	color: #999;
	margin: 1em 0 .5em 0;
}

h2#page-title.home-page
{ 
	margin: 1em 0;
	position: absolute;
	left: -9999px; 
}


	/* #short-intro
	--------------- */
	
	#short-intro
	{
		padding: 15px 0;
		margin: 15px 0;
		border-top: 1px dotted #ddd;
		border-bottom: 1px dotted #ddd;
	}
	
	
	/* #column-wrapper
	------------------ */
	
	#column-wrapper { margin: 20px 0 0 0; } /* change footer(margin-top) and p(margin-botom) */
	
	
		/* .latest-post
		--------------- */
		
		#column-wrapper .latest-post h3
		{
			line-height: 1.5em;
		}
	
	
		/* .recent-work
		--------------- */
		
		#column-wrapper .recent-work ul.projects-preview { margin-top: 1em; }
		
		#column-wrapper .recent-work ul.projects-preview li
		{
			display: block;
			width: 290px;
			height: 120px;
		}
		
		#column-wrapper .recent-work ul.projects-preview li img { padding: 0; }
		
		#column-wrapper .recent-work ul.projects-preview li a
		{
			position: relative; 
			display: block;
			width: 270px;
			height: 100px;
			padding: 9px;
			margin-bottom: 10px;
			background: #fff;
			border: 1px solid #ddd; 
		}
		
		#column-wrapper .recent-work ul.projects-preview li span
		{
			position: absolute;
			bottom: 0;
			right: 0;
			padding: 2px 4px;
			font-family: "Helvetica Neue", Helvetica, Verdana, sans-serif;
			font-size: .6em;
			line-height: 1em;
			letter-spacing: 1px;
			text-transform: uppercase;
			color: #fff;
			background: #222;
		}
		
		#column-wrapper .recent-work ul.projects-preview li a:hover			{ text-decoration: none; }
		#column-wrapper .recent-work ul.projects-preview li a:hover span 	{ background: #a00; }
		
		
		/* Comments
		----------- */
		
		ol.comments { font-size: 1em; }
		
		ol.comments small 	
		{ 
			font-size: .7em;
			font-weight: 500;
			padding-left: .5em;
		}
		
		ol.comments li
		{
			padding-top: 10px;
			border-top: 1px dotted #ddd;
		}
		
		ol.comments li:last-child 
		{ 
			border-bottom: 1px dotted #ddd; 
			padding-bottom: 5px;
			margin-bottom: 20px;
		}
		
		ol.comments li .gravatar	{ float: left; }
		
		ol.comments li p			{ padding-left: 110px; }
		
		ol.comments li img			{ background: #fff; }
		
		ol.comments .admin-comment 				
		{
			background: #f5f5f5;
			border-bottom: 2px solid #555; 
			border-top: 2px solid #555; 
		}
		
		ol.comments .admin-comment:last-child { border-bottom: 2px solid #555; }
		
		ol.comments li:after
		{
			content: '.';
			clear: both;
			display: block;
			height: 0;
			visibility: hidden;
		}
		
		ol.comments li { display: inline-block; }
		ol.comments li { display: block; }
		
		
		/* Forms
		-------- */
		
		.form-container
		{
			margin-top: 20px;
			padding-top: 10px;
			border-top: 1px dotted #ddd;	
		}
		
		.form-container h3 { margin-bottom: 1em; }
		
		form input,
		form textarea
		{
			border: 1px solid #ddd;
			margin: 0 0 10px 0;
			padding: 5px;
			font-family: Verdana, sans-serif;
			font-size: .8em;
			line-height: 1.5em;
			color: #555;
			max-width: 300px;
		}
		
		form p { position: relative; }
		
		form img
		{
			border: 1px solid #555;
			padding: 0;
		}
		
		form input.input
		{
			font-size: .85em;
			font-weight: 300;
			line-height: 1.55em;
			width: 134px;
		}
		
		form input#comment-captcha-answer
		{
			margin: 0 0 10px 0;
		}
		
		form input#comment_form_submit
		{
			background: #f00;
			color: #fff;
			font-family: "Helvetica Neue", Helvetica, sans-serif;
			font-size: .65em;
			font-weight: 300;
			text-transform: uppercase;
			letter-spacing: .2em;
			padding: 3px 5px;
			border: 1px solid #c00;
			cursor: pointer;
		}
		
		form input#comment_form_submit:hover	
		{
			color: #000;
			background: #eee;
			border: 1px solid #ccc;
			font-weight: 700;
		}	
		
		form label
		{
			color: #444;
			font-family: Georgia, serif;
			font-style: italic;
			font-weight: 700;
			font-size: .9em;
			margin: 0;
		}
		
		form label small
		{
			font-size: .8em;
			font-style: normal;
			font-weight: 500;
			padding-left: 1em;
		}	
		
		form label span.required
		{
			color: #f00;
		}
		


/* #sidebar
-------------------------------------------------- */

#sidebar p 				{ line-height: 1.5em; }

#sidebar .side-section	{ margin-bottom: 30px; }

#sidebar #technorati-button img
{
	border: none;
	margin: 30px 0 0 0;
	padding: 0;
}

#sidebar ul li,
#sidebar ol li
{
	padding: 5px 0;
	line-height: 1.5em;
	border-top: 1px dotted #ddd;
}

#sidebar ul li:last-child,
#sidebar ol li:last-child,
#sidebar dl dd:last-child
{
	border-bottom: 1px dotted #ddd;
}	

#sidebar dl dt	
{
	border-top: 1px dotted #ddd;
	padding-top: 10px;
}

	/* #twitter_div
	--------------- */
	
	#twitter_div ul li span 							{ display: block; }
	#twitter_div ul#twitter_update_list li span a 		{ color: #a00; }
	#twitter_div ul#twitter_update_list li span a:hover	{ color: #000; }
	#twitter_div ul#twitter_update_list li a			{ color: #999; }
	


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

#footer
{
	padding-top: 15px;
	margin-top: 20px; /* margin-top + p(margin-bottom) = 20 */
	border-top: 1px dotted #ddd;
}