/*
Theme Name: Retrospective
Theme URI: http://www.blog.spoongraphics.co.uk/
Description: A premium theme by Chris Spooner of Blog.SpoonGraphics.
Version: 1.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, fieldset, input, blockquote {
	margin: 0; padding: 0; border: 0;
}

body {
	font-family: "Helvetica", Arial, Sans-Serif; 
	background: #e8e8e8 url(images/texture-bg.png);
}

#wrapper {
	background: url(images/lines-bg.png) 0 0 repeat-x; border: 14px solid rgba(244,244,244,0.4);
} 

#container {
	width: 994px; margin: 0 auto;
	background: url(images/content-repeat.png) repeat-y;
}

#content {
	background: url(images/main-bg.png) 0 0 no-repeat; overflow: auto;
}

	#header {
		min-height: 104px;
	}
		#header h1 a {
			display: block; float: left; margin: 42px 0 0 27px;
			font-size: 36px; color: #b4adba; text-decoration: none; text-transform: uppercase; text-shadow: 0 3px 3px #d7d7d7;
		}
			#header h1 a:hover {
				color: #a9a0b0;
			}
		
		#header ul {
			float: right; margin: 55px 27px 0 0;
		}
			#header ul li {
				list-style:none; float: left; margin: 0 0 0 60px;
			}
				#header ul li a {
					font-size: 17px; font-weight: bold; color: #bd7094; text-transform: uppercase; text-shadow: 0 2px 3px #c3c3c3;
					text-decoration: none;
				}
					#header ul li a:hover {
						color: #ae5f84;
					}
	
	#main {
		clear: left; float: left; width: 649px; padding: 10px 0 0 18px; color: #707070;
	}
		#main .post {
			padding: 40px 40px 60px 40px; background: url(images/post-divider.png) 0 bottom repeat-x;
		}
		
			#main h2.title {
				margin: 40px 0 0 40px;
			}
	
			#main .post h2 {
				font-size: 28px; margin: 0 0 25px 0; line-height: 32px;
			}
			
			#main .post a {
				color: #bd7094; text-decoration: none;
			}
				#main .post a:hover {
					color: #ae5f84;
				}
	
			#main .post p {
				font-size: 15px; line-height: 24px; color: #707070; margin: 0 0 20px 0;
			}
			
			#main .post h3 {
				font-size: 24px; margin: 0 0 15px 0; line-height: 28px;
			}
			#main .post h4 {
				font-size: 20px; margin: 0 0 10px 0; line-height: 24px;
			}
			#main .post h5 {
				font-size: 16px; margin: 0 0 10px 0; line-height: 20px;
			}
			#main .post h6 {
				font-size: 14px; margin: 0 0 10px 0; line-height: 16px;
			}
			
			#main .post blockquote {
				padding: 20px 15px 5px 20px; margin: 0 0 15px 0; background: #d6d2d9; border-left: 3px solid #a8b8bf;
			}
				#main .post blockquote p {
					font: italic 18px Georgia, Serif; 
				}
				
			#main .post p img, #main .post p a img {
				border: 5px solid #f9f9f9; display: block; margin: 0 auto;
			}
				#main .post p a:hover img {
					border: 5px solid #eee;
				}
				
			#main .post ul, #main .post ol {
				margin: 0 0 15px 40px;
			}
				#main .post ul li, #main .post ol li {
					list-style-position: inside; margin: 0 0 5px 0;
				}
			
			#main .post .meta {
				width: 562px; height: 31px; padding: 18px 50px 0 20px; 
				background: #d6d2d9 url(images/meta-bg.png);
			}
				#main .post .meta ul {
					margin: 0;
				}
					#main .post .meta ul li {
						list-style: none; float: left; padding: 0 0 0 34px; margin: 0 19px 0 0;
						background: url(images/list-bg.png) left 1px no-repeat; color: #fff; line-height: normal;
					}
						#main .post .meta ul li:first-child { padding: 0; background: none; }
						#main .post .meta ul li a {
							color: #fff; text-decoration: none;
						}

	
		#main .pagination {
			margin: 25px 0 20px 0; overflow: hidden;
		}
	
			#main .pagination ul li {
				list-style: none;
			}
				#main .pagination ul li.older {
					float: left; margin: 0 0 0 30px;
				}
				#main .pagination ul li.newer {
					float: right; margin: 0 40px 0 0;
				}
					#main .pagination ul li a {
						display: block; width: 108px; height: 22px; padding: 15px 10px;
						background: #d6d2d9 url(images/btn-bg.png);
						font-size: 28px; font-weight: bold; text-decoration: none; text-align: center; color: #bd7094; line-height: 24px;
					}
						#main .pagination ul li a:hover {
							color: #ae5f84;
						}
		
		#main #comments {
			padding: 40px 40px 60px 40px;
		}
			#main #comments a {
				color: #bd7094; text-decoration: none;
			}
				#main #comments a:hover {
					color: #ae5f84;
				}
			#main #comments h3 {
				font-size: 22px; margin: 0 0 20px 0; clear: both;
			}
			#main #comments p#toggle-comments {
				float: right; margin: -36px 0 0 0; font-size: 12px;
			}
		
		#main #comments ol.commentlist, #main #comments ol.commentlist ul {
				margin: 0; list-style: none;
			}
				#main #comments ol.commentlist li {
					background: #f9f9f9; padding: 20px; margin: 0 0 20px 0; clear: both;
				}
				
				#main #comments .comment {
					overflow: hidden;
				}
					#main #comments .comment .avatar {
						float: left; margin: 0 15px 10px 0;
						border: 3px solid #ececec;
					}
					#main #comments .comment .commenttext {
						width: 404px; float: left; 
					}
						#main #comments .comment p {
							margin: 0 0 5px 0; font-size: 13px; line-height: 20px;
						}
							#main #comments .comment cite {
								font: italic 18px Georgia, Serif;
								margin : 0 0 5px 0;
							}
								#main #comments .comment span { display: none; }
					
					#main #comments .comment .comment-meta {
						float: right; font: italic 11px Georgia, Serif; margin: -92px 0 0 0; 
					}
					#main #comments .comment .reply a {
						display: block; clear: both; float: right; font: italic 15px Georgia, Serif; 
					}
					#main #comments .comment .cancel a {
						display: block;  float: right; clear: both; font: italic 15px Georgia, Serif;
					}
			
			#main #comments #respond {
				margin: 0 0 50px 0; clear: both;
			}
				#main #comments #respond form label {
					float: left; clear: left; width: 80px; text-align: right; margin: 9px 10px 0 0;
					font-size: 17px;
				}
				#main #comments #respond form input {
					float: left; width: 250px; height: 16px; margin: 0 20px 10px 0; padding: 10px; 
					background: #f9f9f9; border: 1px solid #dedede; font: 15px Helvetica, Arial, Sans-Serif; color: #666;
				}
				#main #comments #respond form textarea {
					float: left; width: 400px; height: 120px; margin: 0 0 10px 0; padding: 10px;
					background: #f9f9f9; border: 1px solid #dedede; font: 15px Helvetica, Arial, Sans-Serif; color: #666;
				}
					#main #comments #respond form input.commentsubmit {
						width: 128px; height: 52px; padding: 5px 0 0 0; margin: 10px 0 0 89px;
						background: #d6d2d9 url(images/btn-bg.png); border: none;
						font-size: 28px; font-weight: bold; text-decoration: none; text-align: center; color: #bd7094; cursor: pointer; 
					}
						#main #comments #respond form input:focus, #content #main #comments #respond form textarea:focus {
							border: 1px solid #cccccc;
						}	
	
	#side {
		float: left; width: 262px; padding: 30px 45px 0 20px
	}
		
		#side #search {
			margin: 0 0 30px 0;
		}
			#side #search form input.searchbar {
				width: 176px; height: 27px; float:left; padding: 7px 60px 0 30px;
				background: url(images/search-bar.png) no-repeat;
				font-size: 16px; color: #d1cdd4;
			}

			#side #search form input.searchsubmit {
				width: 27px; height: 28px; float: right; margin: -31px 15px 0 0;
				background: url(images/search-btn.png); text-indent: -9999px; cursor: pointer;
				
				padding: 0 0 0 27px;
			}
	
		#side h3 {
			font: bold italic 26px Georgia, Serif; color: #fff; margin: 0 0 15px 0; 
			text-shadow: 0px 3px 3px #afafaf;
		}
	
		#side #categories {
			margin: 0 0 30px 0; overflow: auto;
		}
			#side #categories ul {
				list-style: none;
			}
				#side #categories ul li {
					width: 110px; float:left; margin: 0 21px 10px 0;
				}
					#side #categories ul li a {
						display: block; font-size: 20px; color: #fff; text-decoration: none;
						background: url(images/list-bg.png) left 3px no-repeat; padding: 0 0 0 20px;
					}
						#side #categories ul li a:hover {
							padding: 0 0 0 23px;
						}
					
		#side #twitter {
			margin: 0 0 30px 0;
		}
			#side #twitter ul li {
				list-style: none; font-size: 11px; margin: 0 0 25px 0;
			}
				#side #twitter ul li span {
					font-size: 14px; line-height: 20px; color: #fff;
				}
			#side #twitter a {
				color: #bd7094; text-decoration: none;
			}
				#side #twitter a:hover {
					color: #ae5f84;
				}

			#side #twitter p#follow a {
				display: block; float: right; background: url(images/twitter-bird.png) left 0 no-repeat; padding: 0 0 0 35px;
				font: italic 20px Georgia, Serif;
			}
					

	#footer {
		background: url(images/footer-bg.png) no-repeat; padding: 45px 0 30px 27px; overflow: auto;
	}
		#footer ul#logos {
			float: left;
		}
			#footer ul#logos li {
				list-style: none; float: left;
			}
				#footer ul#logos li a {
					display: block; float: left; margin: 0 10px 0 0; text-indent: -9999px;
				}
				#footer ul#logos li a.wordpress {
					width: 22px; height: 22px; background: url(images/wordpress.png);
				}
				#footer ul#logos li a.spoongraphics {
					width: 27px; height: 22px; background: url(images/spoongraphics.png);
				}
				#footer ul#logos li a.jquery {
					width: 53px; height: 22px; background: url(images/jquery.png);
				}
		
		#footer p#top {
			float: right; margin: 0 27px 0 0;
		}
			#footer p#top a {
				font-size: 11px; color: #bd7094; background: url(images/top-arrow.png) left 3px no-repeat; padding: 0 0 0 14px; text-decoration: none;
			}
				#footer p#top a:hover {
					color: #ae5f84;
				}
	
	
a:focus { outline: 1px dotted; overflow: hidden; }
a, a:hover, a:active { 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;
}