/*********************************************************

	Theme Name:		The Jordan Theme
	Theme URI:		http://jordansatok.com/
	
	Description:	He has a theme named after him!
	Version:		1.0
	
	Author:			Chris Voll
	Author URI:		http://chrisvoll.com

*********************************************************/


		body {
			font:			12px Helvetica;
			line-height:	21px;
			color:			#333;
			margin:			0;
			background:		#F5F5F5;
		}
		
		a			{ color: #4A9900; }
		a:hover		{ color: #000;    }
		h2 a		{ text-decoration: none; font-weight: normal; }
		
		#headerSpan {
			background:		#000;
			width:			100%;
			height:			84px;
		}
		
		#wrapper {
			width:			985px;
			margin:			0 auto;
			background:		#FFF url(img/bg.png) 700px 0 no-repeat;
		}
	
	
	/*************************************
	
	              Navigation
	              
	*************************************/
	
		ul#nav {
			list-style:		none;
			margin:			0 auto;
			padding:		50px 0 0 0;
			width:			960px;
			font:			11px "Gotham HTF", "Helvetica Neue", Helvetica, sans-serif;
		}
		
		ul#nav li   { float: right; margin: 2px 0 0; }
		ul#nav li.l { float: left;  margin: 0; }
		
		ul#nav a {
			color:			#FFF;
			text-decoration:none;
			padding:		2px 15px 1px;
			display:		block;
			-webkit-border-radius:	11px;
			-moz-border-radius:		11px;
			border-radius:			11px;
			margin-left:	5px;
		}
		
		ul#nav a.selected {
			color: #000;
			background: #FFF;
		}
		
		ul#nav a:hover      { color: #000; background: #FFF; }
		ul#nav a:active		{ background: #666; color: #FFF; }
		ul#nav li.l a		{ color: #FFF; font-size:  14px; }
		ul#nav li.l a:hover { color: #000; }
		
		ul#nav a.logo		{ font-size: 20px !important; }
	
	
	/*************************************
	
	               Columns
	              
	*************************************/
	
		#main {
			float:			left;
			width:			620px;
			padding:		40px;
		}
		
		#sidebar {
			float:			left;
			width:			205px;
			padding:		40px;
		}
	
	
	/*************************************
	
	            Sidebar Buttons
	              
	*************************************/
	
		#getintouch {
			margin-top:		5px;
			display:		block;
			width:			204px;
			height:			40px;
			background:		url(img/getintouch.png) no-repeat;
			background-position: top;
		}
		
		#getintouch:hover,  #twitter:hover  { background-position: center; }
		#getintouch:active, #twitter:active { background-position: bottom; }
		#getintouch span,
		#twitter span       { display: none; }
		
		#twitter {
			display:		block;
			width:			204px;
			height:			40px;
			background:		url(img/twitter.png) no-repeat;
			background-position: top;
		}
		
	
	/*************************************
	
	               Main Page
	              
	*************************************/
	
		.thinColumn {
			width:			170px;
			padding:		20px 30px 30px 0;
			border-right:	1px solid #DDD;
			float:			left;
			font-size:		18px;
			color:			#333;
			line-height:	30px;
		}
		
		.wideColumn {
			width:			370px;
			padding:		12px 0 30px 30px;
			float:			left;
			font-size:		14px;
			color:			#555;
			line-height:	24px;
		}
		
		.widestColumn {
			font-size:		14px;
			color:			#555;
			line-height:	24px;
		}
		
		#footer {
			margin:			30px;
			padding:		5px 0 20px;
			border-top:		4px double #CCC;
			color:			#555;
			font-size:		12px;
		}
		
		#sidebar p {
			color:			#555;
			line-height:	20px;
		}
		
		#sidebar h2 {
			font-family:	Times, Georgia, serif;
			font-size:		25px;
			margin-bottom:	10px;
		}
		
		.curlyQuote {
			color:			#57b200 !important;
			font-size:		70px !important;
			float:			left;
			margin:			20px 0 0px 0;
			width:			40px;
			font-family:	Times, Georgia, serif;
		}
		
		.curlyQuote+p {
			float:			left;
			width:			165px;
			margin-top:		0;
		}
		
	
	/*************************************
	
	              Formatting
	              
	*************************************/
	
		h1 {
			font:			13px "Gotham HTF", "Helvetica Neue", Helvetica, sans-serif;
			border-bottom:	4px double #CCC;
			text-transform:	uppercase;
			padding:		0 0 5px 0;
			margin:			30px 0 0 0;
		}
		
		h1.pageTitle { margin-top: 0; margin-bottom: 20px; font-size: 15px; }
		
		.alignleft  { float: left;  }
		.alignright { float: right; }
		
		img.alignleft  { margin-right: 20px; margin-bottom: 20px; }
		img.alignright { margin-left:  20px; margin-bottom: 20px; }
		
		blockquote { border-left: 10px solid #DDD; margin-left: 20px; margin-right: 0; padding: 10px 10px 10px 20px; background: #EFEFEF; }
		blockquote p:last-child { margin-bottom: 0; }
		cite { display: block; text-align: right; }
		
		
	/*************************************
	
	                Forms
	              
	*************************************/
	
		form { margin-top: 15px; }
		input[type="text"] {
			width:			250px;
			padding:		5px 10px;
			border:			1px solid #CCC;
			margin:			0 0 5px 8px;
		}
		
		textarea {
			width:			498px;
			height:			100px;
			padding:		10px;
			border:			1px solid #CCC;
			margin:			0 0 5px 0;
		}
		
		input[type="text"]:focus,
		textarea:focus { border: 1px solid #777; }
		
		label { cursor: pointer; width: 90px; display: inline-block; }
		
		#respond input[type="text"] { width: 400px; }
	
	
	/*************************************
	
	               Projects
	              
	*************************************/
	
		.project {
			clear:			both;
			padding:		10px 0 15px;
			border-bottom:	1px solid #CCC;
		}
		
		.projectMeta {
			float:			left;
			width:			180px;
		}
		
		.project h2 {
			font-weight:	normal;
			line-height:	30px;
			margin-bottom:	0;
		}
		
		.projectDesc {
			float:			left;
			width:			405px;
			padding:		20px 0 20px 30px;
		}
		
		.project p {
			margin:			0;
			font-size:		13px;
			line-height:	20px;
		}
		
		.project p + p { margin-top: 20px; }


	/*************************************
	
	               Articles
	              
	*************************************/
		
		article { display: block; margin-bottom: 40px; padding-bottom: 40px; border-bottom: 1px solid #CCC; }
		
		article h2 {
			font-size:		30px;
			font-family:	Times, Georgia, serif;
			margin-bottom:	10px;
			margin-top:		0;
		}
		
		article p,
		article li {
			margin:			0 0 20px 0;
			font:			12px Helvetica;
			line-height:	21px;
			color:			#333;
		}
		article li { margin:     0 0 10px 0; }
		article h3 { margin-top: 30px;       }
		
		article .tags,
		article .date {
			font-size:		10px;
			text-transform:	uppercase;
			margin: 		0 0 5px 0;
			padding-bottom:	20px;
			display:		inline-block;
		}
		article .tags a { text-decoration: none; }

	/*************************************

	             Linkblog

	*************************************/
				
		article.links h2 {
			font-size: 		16px;
			margin-bottom: 	0px;
		}

		article.links .date,
		article.links .tags {
			margin: 		0 0 5px 0;
			padding-bottom: 0px;
		}

	/*************************************

	             Quotes

	*************************************/

		article.quote {
			margin-bottom: 	10px;
			padding-bottom: 0px;
		}

		article.links .date,
		article.links .tags {
			margin: 		0px;
			padding-bottom: 0px;
		}
				
	/*************************************
	
	               Comments
	              
	*************************************/
	
		#commentsTemplate	{ width: 550px; }
		#commentsList		{ padding-left: 0; padding-bottom: 30px; }
		#commentsList,
		#commentsList ul 	{ list-style: none; }
		#commentsList li	{ padding-bottom: 25px; border-bottom: 1px solid #DDD; }
		#commentsList li li { padding-bottom: 0;    border: 0; margin: 0 !important; clear: both; }
		.comment			{ min-height: 75px; margin: 0 0 20px 0; color: #3E3E3E; }
		ul ul .comment		{ min-height: 50px; }
		
		.commentMeta span	{ font-size: 10px; color: #888; }
		
		.reply a			{
			background-image:	url(img/reply.png);
			display:			inline-block;
			width:				16px;
			height:				16px;
			background-position:top;
			position:			relative;
			top:				4px;
		}
		.reply a:hover		{ background-position: center; }
		.reply a:active		{ background-position: bottom; }

		ul #respond			{ margin-left: 95px; clear: both; }
		
		.avatar				{ float: left; margin: 0 10px 10px 0; }
		.avatar img			{ -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
		.children			{ clear: both; }
		.commentText p:first-child { margin-top: 5px; }
		.commentText		{ margin-left: 95px; font-size: 14px; line-height: 22px; margin-bottom: 20px; }
		ul ul .commentText	{ margin-left: 70px; font-size: 12px; }
		ul ul				{ background: #EFEFEF; margin: 0 0 0 15px; padding: 10px; }