/*
Theme Name: Chris Spooner V3
Theme URI: http://www.chrisspooner.com/
Description: Chris Spooner WordPress Theme Version 3.
Version: 3.0
Author: Chris Spooner
Author URI: http://www.blog.spoongraphics.co.uk
*/

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, input, fieldset, blockquote, iframe {
	margin: 0; padding: 0; border: 0;
}

body {
	background: #f6f5ee url(images/bg.png);
	font: 14px/22px Helvetica, Sans-Serif;
}

@font-face {
	font-family:'Tallys';
	src: url('images/Tallys.otf') format('opentype');
}


#container {
	background: url(images/top-bar.png) top repeat-x;
	background: url(images/top-bar.png) top repeat-x, url(images/footer-top.png) bottom repeat-x;
	padding: 0 0 31px 0;
}

#header {
	width: 961px; margin: 0 auto; position: relative;
	overflow: hidden;
}
	#header h1 a {
		position: absolute; top: 5px; left: 376px;display: block; width: 208px; height: 213px; 
		background: url(images/logo.png); text-indent: -9999px;
	}
		#header h1 a:hover, #header h1 a:focus {
			background-position: bottom;
		}
	
	#header ul#nav {
		float: left; margin: 22px 0 0 24px; list-style: none;
	}
		#header ul#nav li {
			float: left; margin: 0 0 0 45px;
		}
			#header ul#nav li:first-child {
				margin: 0;
			}
				#header ul#nav li a {
					display: block; font: 13px Georgia, Serif; letter-spacing: 2px; color: #eeede6;
					text-decoration: none;
				}
					#header ul#nav li a:hover, #header ul#nav li a:focus {
						color: #d0cfc8;
					}
	
	#header ul#subscribe {
		float: right; margin: 22px 24px 0 0; list-style: none;
	}
		#header ul#subscribe li {
			float: left; margin: 0 0 0 32px;
		}
			#header ul#subscribe li a {
				display: block; height: 16px; font: 13px Georgia, Serif; letter-spacing: 2px; color: #eeede6;
				text-decoration: none; padding: 1px 0 0 27px;
				background: url(images/icons.png) left 1px no-repeat;
			}
				#header ul#subscribe li.rss a {
					background-position: left -16px;
				}
					#header ul#subscribe li a:hover, #header ul#subscribe li a:focus {
						color: #d0cfc8;
					}
				
	#header h2 {
		margin: 250px 0 0 0; min-width: 500px; clear: both; text-align: center;
		background: url(images/top-divider.png) center bottom no-repeat; padding: 0 0 30px 0;
		font: 24px Tallys, Georgia, Serif; letter-spacing: 4px; color: #afada2; 
		text-shadow: 0px 1px 0px #fff;
	}
	
#content {
	width: 917px; margin: -240px auto 0 auto; padding: 280px 22px 0 22px;
	background: url(images/container-lines.png) repeat-y;
}	

/* Overflow hidden breaks about image, switch to clearfix */
	#content:after {
		content: "";
		display: block;
		clear: both;
	}

	#content h2 {
		font: 34px Tallys, Georgia, Serif; letter-spacing: 3px; color: #6c695e; 
		text-shadow: 0px 1px 0px #fff; margin: 0 0 30px 0;
	}

	#content h3 {
		font: 28px Tallys, Georgia, Serif; letter-spacing: 3px; color: #6c695e; 
		text-shadow: 0px 1px 0px #fff; margin: 0 0 15px 0;
	}

	#content h4 {
		font: 22px Tallys, Georgia, Serif; letter-spacing: 3px; color: #6c695e; 
		text-shadow: 0px 1px 0px #fff; margin: 0 0 15px 0;
	}

	#content p {
		color: #474747; margin: 0 0 30px 0;
	}

	#content a {
		color: #88344b; text-decoration: none; text-shadow: 0px 1px 0px #fff;
	}
		#content a:hover, #content a:focus {
			color: #5c1629;
		}

	#content ul, #content ol {
		margin: 0 0 30px 0; color: #474747; list-style-position: inside;
	}

	#content .video {
		background: url(images/lines.png); width: 648px; padding: 20px 18px; text-align: center;
		margin: 0 auto 30px auto;
	}
		 #content #main .post img {
		 	display: block; background: url(images/lines.png); padding: 20px 18px; text-align: center;
		 	margin: 0 auto;
		 }

	#content blockquote {
		background: url(images/lines.png); padding: 20px 18px 0 20px;
		overflow: hidden; margin: 0 0 30px 0;
	}
	

	#content #main {
		width: 684px; float: left; 
	}	
		#content #main .post {
			position: relative; margin: 0 0 60px 0; padding: 0 0 36px 0; overflow: hidden;
			background: url(images/underline.png) bottom repeat-x;
		}
			#content #main .post h2 {
				float: left; margin: 0 0 10px 75px;
				font: 24px Lucida Grande, Lucida Sans Unicode, Helvetica, Sans-Serif; letter-spacing: normal;
			}
			#content #main .post p.date {
				position: absolute; left: 0; top: 0; padding: 4px 7px 4px 7px; 
				background: url(images/lines.png);
				font: bold 40px Helvetica, Sans-Serif; color: #b6b6b1; text-align: center;
			} 
				#content #main .post p.date span {
					font: normal 20px Helvetica, Sans-Serif;
					display: block; margin: -5px 0 0 0; 
				}
			#content #main .post ul.meta {
				float: left; list-style: none; margin: 0 0 30px 75px; overflow: hidden;
				font: 16px Helvetica, Sans-Serif; color: #b6b6b1;
			}
				#content #main .post ul.meta li {
					float: left; margin: 0 20px 0 0;
				}
					#content #main .post ul.meta li.comments {
						padding: 0 0 0 32px; background: url(images/star.png) left center no-repeat;
					}
			#content #main .post .post-content {
				clear: both;
			}	
	
		
			#content #main .pagination {
				margin: 0 0 60px 0; overflow: hidden;
			} 
				#content #main .pagination p {
					margin: 0;
				}
	
			#content #main .pagination p a {
				display: block; width: 102px; height: 33px; overflow: hidden;
				background: url(images/pagination-bg.png); font-size: 16px;
			}
				#content #main .pagination p.prev a {
					float: left; padding: 14px 0 0 46px;
				}
				#content #main .pagination p.next a {
					float: right; text-align: right; padding: 14px 46px 0 0;
					background-position: 0 -47px;
				}
	
			#content a#profile-pic {
				display: block; width: 388px; height: 533px; float: left; margin: 0 30px 30px -48px;
				background: url(images/chrisspooner.jpg); text-indent: -9999px;
			}
				#content a#profile-pic:hover, #content a#profile-pic:focus {
					margin: -3px 30px 33px -48px;
				}
				
			
			#content #main #share, #content #main #similar {
				background: url(images/lines.png); padding: 20px 18px;
				margin: 0 0 30px 0;
			}	
				#content #main #share ul {
					list-style: none; overflow: hidden;
				}
					#content #main #share ul li {
						float: left; margin: 0 30px 0 0;
					}
				
				#content #main #similar ul li {
					font-size: 16px; list-style: none; margin: 0 0 10px 0;
				}
	
		
		#main #archives h2 {
			text-align: center; background: url(images/underline.png) bottom repeat-x; padding: 0 0 10px 0;			
		}
		#main #archives ul {
			list-style: none;
			font: 18px Lucida Grande, Lucida Sans Unicode, Helvetica, Sans-Serif;
		}
			#main #archives ul li {
				margin: 0 0 10px 0;
			}
			#main #archives ul#smart-archives-block {
				font: 24px Tallys, Georgia, Serif; padding: 0 0 30px 0;
				background: url(images/underline.png) bottom repeat-x;
			}
				#main #archives ul#smart-archives-block strong, #main #archives ul#smart-archives-block span, #main #archives ul#smart-archives-block a {
					margin: 0 12px 20px 0;
				}
				#main #archives ul#smart-archives-block span.empty-month {
					color: #afada2; text-shadow: 0px 1px 0px #fff;
				}
		
		#main comments {
	
		}
		
		#main #comments ol.commentlist {
				margin: 0 0 40px 0; list-style: none; 
			}
				#main #comments ol.commentlist li {
					margin: 0 0 24px 0; padding: 0 0 24px 0; clear: both;
					background: url(images/underline.png) bottom repeat-x;
				}
				
			#main #comments ol.commentlist ul {
				margin: 0 0 0 20px; 
			}
				#main #comments ol.commentlist ul li {
				margin: 0 0 24px 20px; padding: 0; border: none; 
			}
				#main #comments .comment {
					overflow: hidden; 
				}
					#main #comments .comment .avatar {
						float: left; margin: 0 15px 10px 0;
						padding: 5px; background: url(images/lines.png);
					}
					#main #comments .comment .commenttext {
						width: 404px; float: left; 
					}
						#main #comments .comment p {
							margin: 0 0 5px 0; font-size: 14px; line-height: 24px;
						}
							#main #comments .comment cite {
								font: 18px Georgia, Serif;
								margin : 0 0 5px 0;
							}
								#main #comments .comment span { display: none; }
					
					#main #comments .comment .comment-meta {
						float: right; font: 11px Georgia, Serif; margin: -18px 0 0 0; 
					}
					#main #comments .comment .reply a {
						display: block; clear: both; float: right; font: 15px Georgia, Serif; 
					}
					#main #comments .comment .cancel a {
						display: block;  float: right; clear: both; font: 15px Georgia, Serif;
					}
			
			#main #comments #respond {
				margin: 0 0 66px 0; clear: both;
			}
				#main #comments #respond form label {
					float: left; clear: left; width: 80px; text-align: right; margin: 7px 10px 0 0;
					font: 17px Georgia, Serif; color: #474747; text-shadow: 0px 1px 0px #fff;
				}
				#main #comments #respond form input {
					float: left; width: 250px; height: 30px; margin: 0 20px 10px 0; padding: 4px 15px 0 15px; 
					background: #cfcdbf url(images/input-bg.png) repeat-x; border: 1px solid #c9c8b9; font: 15px Helvetica, Arial, Sans-Serif; color: #474747;
				}
				#main #comments #respond form textarea {
					float: left; width: 400px; height: 120px; margin: 0 0 10px 0; padding: 10px;
					background: #cfcdbf url(images/input-bg.png) repeat-x; border: 1px solid #c9c8b9; font: 15px Helvetica, Arial, Sans-Serif; color: #474747;
				}
					#main #comments #respond form input.commentsubmit {
						margin: 10px 0 0 80px; width: auto; height: auto; background: none; border: none;
						font: 28px Tallys,Georgia,Serif; letter-spacing: 3px; color: #88344b; text-shadow: 0px 1px 0px #fff; cursor: pointer;
 
					}
						#main #comments #respond form input:focus, #main #comments #respond form textarea:focus {
							border: 1px solid #adac9f;
						}	

	
	
	
	#content #side {
		width: 196px; float: left; margin: 0 0 0 37px;
	}
	
		#content #side h3 {
			font: 22px Tallys, Georgia, Serif; letter-spacing: 4px; color: #afada2; text-align: center; text-shadow: 0px 1px 0px #fff;
			background: url(images/underline.png) bottom repeat-x; padding: 0 0 15px 0; margin: 0 0 20px 0;
		}
	
		#content #side #categories {
			margin: 0 0 66px 0;
		}
			#content #side #categories ul {
				list-style: none;
			}
				#content #side #categories ul li {
					position: relative; width: 156px; height: 29px; padding: 11px 20px 0 20px; margin: 0 0 10px 0;
					background: url(images/category-bg.png); font-size: 16px; text-align: right;
					color: #afada2; text-shadow: 0px 1px 0px #fff;
				}
				#content #side #categories ul li a {
					float: left; background: url(images/category-fill.png); padding: 0 10px 0 0; 
				}
				
	
					
		#content #side #my-sites {
			margin: 0 0 66px 0;
		}	
			#content #side #my-sites dl dt {
				font-size: 16px; padding: 0 0 0 26px;
				background: url(images/favicons.png) no-repeat;
			}			
				#content #side #my-sites dl dt.bsg {
					background-position: 0 1px;
				}
				#content #side #my-sites dl dt.l25 {
					background-position: 0 -24px;
				}
				#content #side #my-sites dl dt.jakethelab {
					background-position: 0 -51px;
				}
				#content #side #my-sites dl dt.spoongraphics {
					background-position: 0 -76px;
				}
			
				#content #side #my-sites dl dd {
					font-size: 14px; color: #bcbbb5; margin: 0 0 10px 0;
				}
	
		#content #side #facebook {
			margin: 0 0 66px 0;
		}
			.fan_box .full_widget { 
				background: none; border: none;
			}
			.fan_box .connections_grid .grid_item {
				padding: 5px 7px 5px 7px;
			}
			.fan_box .full_widget .connect_top {
				background: url("http://www.chrisspooner.com/wp-content/themes/ChrisSpooner-V3/images/underline.png") repeat-x bottom;
			}
			.fan_box .connections {
				border-top:medium none;
				padding:10px 0 0;
			}
		
		
#footer-container {
	background: #2f2f28 url(images/footer-bg.png);
}	

#footer {
	width: 917px; margin: 0 auto; padding: 20px 22px 66px 22px; overflow: hidden;
	
}
	#footer a {
		color: #eeede6; text-decoration: none;
	}
		#footer a:hover, #footer a:focus {
			color: #d0cfc8;
		}
	#footer h4 {
		font: 22px Tallys, Georgia, Serif; letter-spacing: 4px; color: #afada2; margin: 0 0 14px 0;
	}

	#footer #tweet {
		width: 897px; height: 39px; margin: 0 auto 38px auto; padding: 19px 10px 0 10px; 
		background: url(images/twitter-bg.png) repeat-x;
	}
		#footer #tweet p#message {
			float: left; color: #afada2; padding: 0 0 0 25px; font-size: 12px;
			background: url(images/twitter-bubble.png) left 2px no-repeat;
		}
		#footer #tweet p#follow a {
			float: right; display: block; width: 85px; height: 27px; margin: -3px 0 0 20px;
			background: url(images/twitter-btn.png); text-indent: -9999px;
		}
			#footer #tweet p#follow a:hover, #footer #tweet p#follow a:focus {
				background-position: bottom;
			}
	
	
	#footer #latest-posts {
		width: 430px; float: left;
	}
		#footer #latest-posts ul {
			list-style: none;
		}	
			#footer #latest-posts ul li {
				font-size: 16px; margin: 0 0 27px 0;
			}
			
			#footer #latest-posts ul li.subscribe {
				margin: 0 0 10px 0;
			}
				#footer #latest-posts ul li.subscribe a {
					display: block; height: 17px;
					font: 13px Georgia, Serif; letter-spacing: 2px; color: #eeede6;
					padding: 0 0 0 27px; background: url(images/icons.png) left -16px no-repeat;
				}
					#footer #latest-posts ul li.subscribe a:hover, #footer #latest-posts ul li.subscribe a:focus {
						color: #d0cfc8;
					}
					
	#footer #music {
		width: 278px; float: left; margin: 0 0 30px 22px;
	}	
		#footer #music img {
			width: 75px; height: 75px; border: 3px solid #262620; margin: 0 11px 11px 0;
			background: #000;
		}	
	
	#footer #socialize {
		width: 165px; float: left; margin: 0 0 30px 22px;
	}
		#footer #socialize ul {
			list-style: none;
		}
			#footer #socialize ul li {
				float: left; 
			}
				#footer #socialize ul li a {
					display: block; width: 24px; height: 24px; margin: 0 22px 22px 0;
					background: url(images/social-icons.png); text-indent: -9999px;
				}
					#footer #socialize ul li.twitter a { background-position: 0 0; }
					#footer #socialize ul li.facebook a { background-position: -24px 0; }
					#footer #socialize ul li.youtube a { background-position: -48px 0; }
					#footer #socialize ul li.dribbble a { background-position: -72px 0; margin-right: 0; }
					#footer #socialize ul li.behance a { background-position: -96px 0; }
					#footer #socialize ul li.tumblr a { background-position: -120px 0; }
					#footer #socialize ul li.flickr a { background-position: -144px 0; }
					#footer #socialize ul li.lastfm a { background-position: -168px 0; margin-right: 0; }
					#footer #socialize ul li.stumbleupon a { background-position: -192px 0; }
					#footer #socialize ul li.digg a { background-position: -216px 0; }
					#footer #socialize ul li.designbump a { background-position: -240px 0; }
					#footer #socialize ul li.vimeo a { background-position: -264px 0; margin-right: 0; }
				
					#footer #socialize ul li.twitter a:hover { background-position: 0 -24px; }
					#footer #socialize ul li.facebook a:hover { background-position: -24px -24px; }
					#footer #socialize ul li.youtube a:hover { background-position: -48px -24px; }
					#footer #socialize ul li.dribbble a:hover { background-position: -72px -24px; }
					#footer #socialize ul li.behance a:hover { background-position: -96px -24px; }
					#footer #socialize ul li.tumblr a:hover { background-position: -120px -24px; }
					#footer #socialize ul li.flickr a:hover { background-position: -144px -24px; }
					#footer #socialize ul li.lastfm a:hover { background-position: -168px -24px; }
					#footer #socialize ul li.stumbleupon a:hover { background-position: -192px -24px; }
					#footer #socialize ul li.digg a:hover { background-position: -216px -24px; }
					#footer #socialize ul li.designbump a:hover { background-position: -240px -24px; }
					#footer #socialize ul li.vimeo a:hover { background-position: -264px -24px; }
					
		
	#footer #photos {
		width: 465px; float: left; margin: 0 0 30px 22px;
	}
		#footer #photos a {
			width: 75px; height: 75px; float: left; overflow: hidden;
			border: 3px solid #262620; margin: 0 11px 11px 0; 
			background: #000;
		}	
			#footer #photos img {
				margin: -40px 0 0 -60px;
			}
	
	#footer p#back-top {
		clear: both; text-align: right;
		font: 11px Georgia, Serif; letter-spacing: 2px; color: #eeede6;
	}

	
a { outline: none; }

/* Wordpress Alignment Stuff */

.centered {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.alignright {
	float: right;
	margin-left: 15px;
}

.alignleft {
	float: left;
	margin-right: 15px;
}