@charset "utf-8";

/*
	CSS Document For Red  Root
	Author: Luke Williams
*/

* { margin: 0; padding: 0; }

body {font-family:"Lucida Sans Unicode","Lucida Sans",Verdana,Arial,Helvetica,sans-serif;
line-height:22px; background: #11242e; font-size:12px;text-align: center; clear:both;}

/*
	Layout
	n.b : width between each column is 20px, 10px at the ends
*/

#wrapper { position: relative; width: 960px; text-align:left; margin: 0 auto; background: #0c0f18 url(images/main_bg.jpg) repeat-y left top; }
	#main {  background: transparent url(images/body_bg.jpg) no-repeat left top; }
	
	h1#logolink { position: absolute; width: 205px; height: 63px; top: 34px; left: 22px; }
		#logolink a, #logolink a:visited {	background: transparent url(images/logobg.jpg) no-repeat left top; display: block; height: 63px; width: 205px;}
		#logolink a:hover { background-position: left bottom;}

	#sidebar-wrap { float: left; width: 240px; padding-top: 120px; }
		
		#nav { list-style: none; font-family: Arial, Helvetica, sans-serif;  }
			#nav li { padding-bottom: 15px; }
			#nav li a, #nav li a:visited {color: #5c5e64 !important; display: block; }
			#nav li a strong { display:block; font-size: 28px; width: 200px; color: #e0e0e0;  -webkit-transition:all .2s; }
			#nav li a:hover {color: #b1b2b5 !important;}
			#nav li a:hover strong { color: #fff !important;   }
			#nav li a.current_page strong { color: #579!important; }
			
		.sidesec-wrap{background: #050711; width:240px; position: relative; left: -25px; margin-bottom: 15px; }
			#search { padding: 12px; }
			#q { padding: 3px; width: 140px; }
			#searchbutton { background: #579; color: #fff; padding: 3px; width: 60px; font-size: 12px; border: 2px solid #11242e; font-variant:small-caps;}
			#searchbutton:focus { background: #0c0f18;}
			
		#sidebar { color: #ddd; padding: 10px 10px 10px 25px; }
		
		#sidebar li a:hover { color: #eee; }
		
		.feed { padding: 0px 12px 12px 28px !important; background: transparent url(images/socialicons/feed.png) no-repeat left top; font-weight: bold; }
		
		.twitter { background: #0c0f18 url(images/socialicons/twitter.png) no-repeat 66px 3px; }
		#twitter_update_list { margin-bottom: 15px; }
		
			#sidebar h4 { font-size: 20px; margin: 7px 0px 15px 0px; }
				.sideul {	list-style: none; padding: 15px;}
					.sideul li { color: #515359; }
		
	#content-wrap { background-color: #fff; float: left; width: 680px; }
	
	/*
		homepage
	*/
	
		.featuredbg{background-position: 0px 210px; background-repeat: no-repeat; background-color: #fff;}
		#featured_work { height: 170px; margin-left: 20px; margin-top: 30px; colour: #fff; font-weight: bold; font-family: Arial, Helvetica, sans-serif;  }
			#featured_work a, #featured_work a:visited { color: #fff; }
			#featured_work a:hover {color: #f00;}
				#featured_work a span { padding: 3px; background: #000; }
				.feat_label {font-size: 14px; line-height: 18px;}
				.feat_name { font-size: 32px; line-height: 36px;}
		
		#spikes { background: transparent url(images/spikebg.png) repeat-x left bottom; height: 30px;  position: relative;color: #fff !important;}
			body#homepage #spikes { height: 210px; padding: 15px 20px;  }
			#spikes a, #spikes a:visited { color: #fff; text-decoration: underline;}
			#spikes a:hover { color: #f0f0f0; text-decoration: none; }
			#spikestext{ height: 110px; background: #000 url(images/home_banner.jpg) no-repeat left top; text-indent: -9999px;font-family: Arial, Helvetica, sans-serif; line-height: 26px; }
			#pixelme { position: absolute; top: 50px; right: 30px; }
			#visitortext { width: 520px; padding: 20px 5px 10px 5px; font-size: 14px;}
			
		#indexlists { margin-top: 10px; padding-top: 10px; border-top: 1px solid #ddd;}
			
		ul.postslist { margin: 0 !important; }
		ul.postslist li { list-style: none; padding: 8px 0px; margin: 0px; border-bottom: 1px solid #ddd; }
			.postslist li a.postlink, a.postlink:visited { color: #303; font-weight: bold; font-size: 12px; }
			.postslist li a.postlink:hover { color: #f30; text-decoration: underline;}
			
		.homeworklist{ font-size: 12px; font-weight: bold;  line-height: 60px;}
			.homeworklist li {list-style: none; padding: 8px 0px; margin: 0px; border-bottom: 1px solid #ddd; height: 65px; }
			
			.homeworklist li a{display:block;}
				.homeworklist li a span {display: block; float: left; margin-right: 8px;-webkit-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.5);border-radius: 5px;-moz-border-radius: 5px; -webkit-border-radius: 5px; background-color: #000; background-position: -100px -100px; background-repeat: no-repeat; height: 60px; width: 60px;}
				.homeworklist li img {border-radius: 5px;-moz-border-radius: 5px; -webkit-border-radius: 5px;}
		
		#breadcrumb { padding-bottom: 15px; }
		
		#content { padding: 5px 25px 15px 25px; color: #444; }
		
	/* posts */
		
		.entrytitle h2{ color:#303; font-size:32px;}
		.entrytitle h2 a{color:#302;}
		.entrytitle h2 a:hover{color:#f30; text-decoration: underline;}
		.entrytitle h3{color:#6F6F6F;font-size:20px;;margin-bottom: 32px;}
		body#homepage h2 { width: 540px; }
		ol.footnotes {	font-size: 9px; margin: 20px 20px 20px 35px; }
		
		#content ul, #content ol, .entrybody ol, .entrybody ul { margin: 20px; }
			#content .dp-highlighter ol { margin: 0 0 1px 45px !important; } /* Syntax highlighter Fix */
			
			/* Comments */
			
			.comments-list h2 { padding-top: 20px; margin-top: 20px; border-top: 1px solid #ddd !important; }
			.comments-list div.entry { margin-bottom: 15px; padding: 15px; border: 1px solid #dcedf0; background: #fff;}
			.comments-list div.alt { background: #f0f0f0; border: none; margin-bottom: 15px;}
			.comments-list p.name {letter-spacing: -1px; font-size:14px; color:#000; margin-bottom: 0px;}
			.comments-list p.avt { padding: 0px; margin: 0px; float: right;}
			.comments-list p.avt img { border: solid 1px #ccc;}
			* html .comments-list p.avt { left: -60px; }
			.comments-list p.date { font-size: 11px; margin-bottom: 5px;}
			.comments-list p.date a, .comments-list p.date a:visited, .comments-list p.date a:hover { color:#96b1bc; text-decoration: underline;}
			
			.comments-list .con { margin-right: 90px; color:#333;}
			.comments-list .con p {  padding: 5px 0px; margin: 0px; color:#333;}
			.comments-list .con blockquote { font: italic 13px Georgia, "Times New Roman", Times, serif; color:#666; margin: 10px 20px; }
			.comments-list .con blockquote p { font: italic 13px Georgia, "Times New Roman", Times, serif; color:#666; }
			
			.highlighted { background: #0c0f18 !important; }
			.highlighted p.avt img { border-color: #f90; }
			.highlighted, .highlighted .con p, .highlight .con, .highlighted .con blockquote, .highlighted .con blockquote p{ color: #eee; }
	
			
			
			/* Comments Form*/
			.comments-form { background: #f2f5fd; padding: 20px; margin: 10px 0px;}
			.comments-form h3 { color:#272d36; padding-bottom: 5px; margin-bottom: 5px; border-bottom: solid 1px #c5e1ed; }
			.comments-form p { padding: 7px 0px; color:#808080;}
			.comments-form .required { font-weight: normal; color:#ff0000;}
			.comments-form input { padding: 5px; width: 210px; margin-right: 7px; }
			.comments-form input.formid { border: 1px solid #a8d3e4; background: #fff;}
			.comments-form input.formemail { border: 1px solid #a8d3e4; background: #fff;}
			.comments-form input.formuri { border: 1px solid #a8d3e4; background: #fff ;}
			
			.comments-form textarea { border: 1px solid #a8d3e4; background: #fff; padding: 4px; width: 97%;}
			.comments-form .button { border: 1px solid #272d36; background: #fff; color:#000; width: auto; font-size: 11px; font-weight: bold; padding: 4px 6px 4px 6px;}
			
		
		/* 
			Work pages
		*/
		
		ul#wkmnlist {margin: 0 !important; padding-top: 10px; border-top: 1px solid #ddd;}
			#wkmnlist li {list-style: none; margin: 10px 0px 15px;}
				#wkmnlist li a, #wkmnlist a:visited  { width: 100%; font-family: Arial, Helvetica, sans-serif; height: 150px; display: block; -webkit-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.5);border-radius: 5px;-moz-border-radius: 5px; -webkit-border-radius: 5px; background: #f0f0f0;}
					#wkmnlist li a:hover {}
				
				#wkmnlist li a span {filter: alpha(opacity = 0);opacity: 0; display: block;width: 100%; height: 150px;  background: #050711; background: rgba(5,7,17,0.95); color: #fff;  border-radius: 5px;-moz-border-radius: 5px; -webkit-border-radius: 5px; -webkit-transition: opacity 0.3s ease-in; -moz-transition: opacity 0.3s ease-in; -o-transition: opacity 0.3s ease-in; transition: opacity 0.3s ease-in;}
					#wkmnlist li a span strong { font-size: 18px;  padding: 15px 10px 5px; display: block;}
					#wkmnlist li a span em { font-family: Rockwell, Times New Roman, serif;color: #79b; padding: 0px 10px 0px 10px; display: block;}
						#wkmnlist li a:hover span {filter: alpha(opacity = 100); opacity: 1;}
			
		
		.cont_half { width: 48%; }
			/*
			#work_big { background-color: #000; overflow: hidden; height: 420px; }
			#workbigover { position: absolute; top: 152px; left: 265px; z-index: 10; }*/
			
			#carousel {width: 600px; position: relative; height: 380px; margin-bottom: 5px;}
				.workItem {width: 100%; background-position: center top;  -moz-border-radius: 5px; -webkit-border-radius: 5px; height: 350px; background-color: #579; background-repeat: no-repeat; z-index: 8; position: absolute; top: 0; left: 0;}
					.workItem.current {z-index: 10; }
					.workItem .workItemText{background: #000; height: 25px; padding: 5px 0px; position: absolute; width: 100%; bottom: 10px; color: #f0f0f0;}
						.workItemText p { padding: 0px 8px; }
				
				#carouselButtons { width: 200px; position: absolute; bottom: 0px; left: 0px;}
					#carouselButtons ul { margin: 0 !important; }
					#carouselButtons ul li { background: #0c0f18;-moz-border-radius: 5px; -webkit-border-radius: 5px; list-style: none; cursor: pointer; float: left;display: block; height: 18px; width: 18px; text-indent: -9999px; margin-right: 5px;}
					#carouselButtons ul li.currentLink {background: #579; cursor: auto !important; }
				
			#work_url, #work_url:visited {position: absolute; bottom: 0; right: 0; font-size: 12px; font-family: Arial, Tahoma, sans-serif; font-size: 14px; font-weight: bold;}
			#work_url:hover { color: #050711; text-decoration: none; }
			
					#work-desc { border-top: 1px solid #aaa; padding-top: 10px; margin-top: 10px; }
			
		
		#gototop { background: transparent url(images/gototop.jpg) no-repeat left top; display: block; width: 59px; height: 60px; position: absolute; right: -22px; top: 100px; display: none; }
		#gototop:hover { background-position: left bottom; }
		
	#footer { background: #0c0f18 url(images/footer_bg.jpg) no-repeat left top; position: relative; height: 80px;  color: #fff;}
		.red { color: #f00; }
		#copyright { position: absolute; top: 40px; left: 360px; color: #999; }

	/* Profile */
	
	.iconli { padding: 0px 12px 12px 28px !important; background: #fff url(images/socialicons/linkedin.png) no-repeat left top; line-height: 16px;  font-weight: bold; margin-top: 10px !important; }
			.icon_linkedin { background-image: url(images/socialicons/linkedin.png); }
			.icon_twitter { background-image: url(images/socialicons/twitter.png); }
			.icon_facebook { background-image: url(images/socialicons/facebook.png); }
			.icon_delicious { background-image: url(images/socialicons/delicious.png); }
			.icon_lastfm { background-image: url(images/socialicons/lastfm.png); }
			.icon_readernaut { background-image: url(images/socialicons/readernaut.jpg); }
			.icon_google { background-image: url(images/socialicons/google.png); }
			.icon_dribbble { background-image: url(images/socialicons/dribbble.png); }
			.icon_github { background-image: url(images/socialicons/github.png); }
			.icon_forrst { background-image: url(images/socialicons/forrst_16.png); }
	.prof_div { padding-top: 10px; margin-top: 10px; border-top: 1px solid #ddd; }
	
	/* search results */
	
	.archiveentry{ padding: 15px 0px; margin-top: 15px; border-top: 1px solid #ddd;}
	.archiveentry.archivework { padding-bottom: 0px; }
		.archivework h3 { margin-bottom: 5px !important; }
	h2.pagetitle { margin-bottom: 20px; }
	
	.posts_nav { text-align: center; font-weight: bold; font-family:Arial, Helvetica, sans-serif; font-size: 14px; margin-top: 10px; }

/*
	Typography and Links
*/ 

h1,h2,h3,h4,h5,h6 { font-family: "Helvetica Neue",Arial, Helvetica, sans-serif; letter-spacing: -1px; }
h2{color: #999; font-size: 24px; font-weight: bold; margin-bottom: 15px;}
h3{ font-size: 18px; margin-bottom: 15px; color: #555; }
	h3.dlink { background: #f1f4f4; padding: 12px; font-size: 14px;}
h4{}

.headerborder { border-top: 1px solid #ddd; padding-top: 15px; padding-bottom: 10px; }

a, a:visited { text-decoration: none; outline: none; color:#579;}
a:focus { outline: none;}
a:hover { color: #c00; }
a img { border: none; }
p:hover a { text-decoration: underline; }

blockquote { padding: 15px; background: #f2f5fd; font-style:italic; margin: 15px;}
.wp-caption { padding: 5px 0px 5px 5px; background: #f2f5fd; }

p { line-height: 24px; margin-bottom: 15px; }
/*
	Useful classes
*/

.left, .alignleft { float:left;}
.right, .alignright { float: right; }
img.left, .alignleft { margin: 10px 10px 10px 0px; }
img.right, .alignright { margin: 10px 0px 10px 10px; }
.kill { clear: both; font-size: 1px; height: 1px;}
.clear { clear: both; }
.hide { display: none; }
.hidetext { text-indent: -9999px; }

/*
	Media Queries
*
@media (min-width: 1140px)
{
	#wrapper {width: 1080px;background-image: url('images/main_bg_large.jpg');}
	#main {background-image: url('images/body_bg_large.jpg');}
		#content-wrap {width:800px;}
			#wkmnlist li a, #wkmnlist a:visited,#wkmnlist li a span  { height: 180px; }
			
			
			#work-desc { float: right; }
			#carousel { width: 100%; }
				.workItem { background-size: 100%; }
			
	#footer { background-image: url('images/footer_bg_large.jpg'); }
}
*/
@media (max-width: 600px)
{
	#content-wrap { float: none; width: 99%; clear: both; }
	#content,#wrapper{ float: none; width:90%; }
		
		#wrapper { background: #fff;width: 100%; }
		#spikes { display: none; }
		body#homepage #spikes {display: block; padding: 10px 0px 10px 10px; width: 98%; }
		
		#sidebar-wrap { padding-top: 90px; width: 100%; clear: both; float: none; }
			#sidebar { padding: 10px 0px 0px; width: 100%;}
				.sidesec-wrap { background: #0c0f18; width: auto; position: static; margin-bottom:0px; }
				#q { width: 70%; clear: both; }
		
		#content-wrap { background: #fff !important; }
			#featured_work { display: none; }
			
			#spikes { width: 100%; padding: 0px; }
				#spikestext { background-size: 90%; height: 60px;}
				#visitortext { font-size: 90%; width: 70%; }
			
				#pixelme { width: 42px; height: 142px; }
			
			body#homepage h2 {width: auto; }
			
			#indexlists h3 { margin-top: 10px; }
				.homeworklist { margin: 10px 0px 10px !important; }
					

			#content { padding: 5px 10px 5px 15px; }
				
			#carousel { width: 100%; height: 180px; }
				.workItem { height: 150px; background-size: 100%;}
					.workItemText { display: none; }
				
				#carouselButtons { width: 220px; }
				#carouselButtons ul li { height: 22px !important; width: 22px !important; }
		
		#nav { font-size: 14px; display: absolute; top: 10px; right: 5px; }
			#nav li { float: left; padding-left: 15px;}
			#nav a strong { font-size: 14px !important; width: auto !important; margin: 5px; }
				#nav a span { display: none; }
				
		#footer { background: #050711; width: 100%;}
			#copyright { position: static; padding: 10px; }
				
		.cont_half { width: 99%; }
		.hideinMb { display: none; }

	#wkmnlist li a span {
		opacity: 1;
		filter: alpha(opacity = 1);
		height: 60px; 
		padding-bottom: 10px;
		position: relative;
		top: 70px;
	
	}
}
*/