/*  
Theme Name: Matthew Kirk
Theme URI: http://www.matthewkirk.co.uk
Description: Theme for matthewkirk.co.uk.
Version: 2.0
Author: Matthew Kirk
Author URI: http://www.matthewkirk.co.uk
*/

@import "reset.css";

body {
	font-family:Arial, Helvetica, sans-serif;
	background:#121212 url(images/bg.gif) repeat-x;
}

p { font-size:1.1em; }
.clear { clear:both; }

.hidden {
	position:absolute;
	width:0;
	height:0;
	top:-5000px;
	left:-5000px;
}

/* --------------------------------------------------------
	STRUCTURE
-------------------------------------------------------- */

#wrapper {
	position:relative;
	margin:0 auto;
	width:900px;
}
	#header {
		float:left;
		width:105px; height:126px;
		margin:15px 0 10px;
	}
	#topArea {
		float:left;
		width:890px;
		background:#ffffff;
		padding:5px;
	}
		#topArea ul.navigation {
			position:relative; float:left;
			width:605px; height:52px;
			background:#292929;
			padding:5px 0 0 5px;
		}
			#topArea ul.navigation li { float:left; display:inline; padding-right:5px; }
				#topArea ul.navigation li a.home, #topArea ul.navigation li a.home:visited {
					float:left;
					width:93px; height:52px;
					background:url(images/button_home.png) no-repeat;	
				}
					#topArea ul.navigation li a.home:hover, #topArea ul.navigation li a.home:active, #topArea ul.navigation li a.home:focus {
						background:url(images/button_home_ro.png) no-repeat;	
					}
				#topArea ul.navigation li a.about, #topArea ul.navigation li a.about:visited {
					float:left;
					width:93px; height:52px;
					background:url(images/button_about.png) no-repeat;	
				}
					#topArea ul.navigation li a.about:hover, #topArea ul.navigation li a.about:active, #topArea ul.navigation li a.about:focus {
						background:url(images/button_about_ro.png) no-repeat;	
					}
				#topArea ul.navigation li a.portfolio, #topArea ul.navigation li a.portfolio:visited {
					float:left;
					width:93px; height:52px;
					background:url(images/button_portfolio.png) no-repeat;	
				}
					#topArea ul.navigation li a.portfolio:hover, #topArea ul.navigation li a.portfolio:active, #topArea ul.navigation li a.portfolio:focus {
						background:url(images/button_portfolio_ro.png) no-repeat;	
					}
				#topArea ul.navigation li a.contact, #topArea ul.navigation li a.contact:visited {
					float:left;
					width:93px; height:52px;
					background:url(images/button_contact.png) no-repeat;	
				}
					#topArea ul.navigation li a.contact:hover, #topArea ul.navigation li a.contact:active, #topArea ul.navigation li a.contact:focus {
						background:url(images/button_contact_ro.png) no-repeat;	
					}
			
		.search {
			float:left;
			background:#3b3b3b;
			width:244px; height:45px;
			padding:12px 18px 0;
		}
			.search input.searchinput { position:relative; float:left; background:url(images/input_search.png) no-repeat; width:189px; height:15px; border:none; margin-right:5px; padding:10px 5px; font:12px Arial, Helvetica, sans-serif; color:#ffffff; }
			.search input.searchsubmit { position:relative; float:left; background:url(images/button_search.png) no-repeat; width:37px; height:35px; border:none; cursor:pointer; }
			.searchResults { background:#292929; color:#ffffff; font-size:2em; font-weight:bold; margin-bottom:5px; padding:8px 15px 7px; }	
		
		h4.whoAmI { float:left; width:84px; height:27px; margin-left:-7px; padding:5px 0 3px; }
		p.description { float:left; width:870px; padding:10px; background:#f1f1f1; color:#454545; }
		
		h4.featuredHeader { float:left; width:92px; height:12px; padding:12px 0 7px; }
		.featuredButtons { float:right; margin:11px 0 0 0; }
		#featured {
			position:relative; float:left;
			background:#ffffff;
			width:900px;
			margin:5px 0;
		}
			#featured .featuredImage {
				float:left;
				width:445px; height:126px;
				margin:5px 10px 5px 5px;
			}
			#featured .featuredContent {
				float:left;
				width:413px; height:104px;
				border:1px solid #dcdcdc;
				padding:10px; margin:5px 5px 0 0;
			}
				#featured .featuredContent h3 { color:#292929; font-size:1.4em; margin-left:-16px; padding-left:16px; background:url(images/featured_arrow.png) no-repeat 0 2px; }
		
		.sidebar {
			font-size:1.1em;
			position:relative; float:left;
			width:250px;
			margin:5px 5px 5px 0;
		}
			.sidebar ul { }
				.sidebar ul li { }
					.sidebar ul li h2.widgettitle { width:250px; height:40px; font-size:0; background:#292929; }
					.sidebar ul li.widget_categories h2 { width:250px; height:40px; background:url(images/header_categories.png) no-repeat; }
					.sidebar ul li.widget_clients h2 { width:250px; height:40px; background:url(images/header_clients.gif) no-repeat; }
					.sidebar ul li.widget_twitter h2 { width:250px; height:40px; background:url(images/header_twitter.png) no-repeat; }
					.sidebar ul li.widget_archive h2 { width:250px; height:40px; background:url(images/header_archive.png) no-repeat; }
					
						.sidebar ul li ul { }
							
							.sidebar ul li ul.twitter li { width:230px; padding:10px; }
						
							.sidebar ul li ul li { font-size:1.1em; color:#a9a9a9; border-top:1px solid #a9a9a9; background:#3b3b3b; }
							.sidebar ul li ul li:first-child { border:none; }
							.sidebar ul li ul li.current-cat { color:#ffffff; background:#bb1d5c url(images/sidebar_rollover.png) no-repeat 235px center; }
								.sidebar ul li ul li.current-cat a, .sidebar ul li ul li.current-cat a:visited { color:#ffffff; }
								.sidebar ul li ul li a, .sidebar ul li ul li a:visited { width:230px; padding:10px; color:#a9a9a9; display:block; text-decoration:none; }
									.sidebar ul li ul li a:hover, .sidebar ul li ul li a:active, .sidebar ul li ul li a:focus { color:#ffffff; background:#bb1d5c url(images/sidebar_rollover.png) no-repeat 235px 11px; }
		
		#containerWide {
			position:relative; float:left;
			width:885px;
			margin:5px 0 5px 0; padding:10px 0 10px 15px;
			background:#ffffff;
		}
		#container {
			position:relative; float:left;
			width:645px;
			margin:5px 0 0 0;
		}
			#containerPortfolio {
				position:relative; float:left;
				width:630px;
				margin:5px 0 5px 0; padding:10px 0 10px 15px;
				background:#ffffff;
			}
			#container .post { float:left; margin-bottom:5px; padding:10px 15px; background:#ffffff; width:615px; }
			.post img.main { float:left; margin:0 15px 15px 0; }
			.post h3 { font-size:2em; margin-bottom:8px; }
			.post h2 { font-size:2em; }
				.post h3 a, .post h3 a:visited { color:#292929; text-decoration:none; }
					.post h3 a:hover, .post h3 a:active, .post h3 a:focus { color:#bb1d5c; }
			.articleInfo {
				background:#3b3b3b; color:#ffffff; float:left; font-size:1em; margin:0 0 10px 0; padding:6px 10px; width:400px;
			}
				.articleInfo a, .articleInfo a:visited { color:#ffffff; text-decoration:none; }
					.articleInfo a:hover, .articleInfo a:active, .articleInfo a:focus { text-decoration:underline; }
				.articleInfo p { float:left; }
			.entry p { margin-bottom:12px; font-size:1.3em; }
				.entry p code { float:left; width:570px; margin:0 10px 10px; padding:10px; font:1em "Lucida Console", Monaco, monospace; background:#f6f6f6; line-height:20px; }
				.entry a, .entry a:visited { margin-bottom:12px; color:#292929; text-decoration:none; }
					.entry a:hover, .entry a:active, .entry a:focus { color:#bb1d5c; text-decoration:underline; }
				
				.postmetadata { background:#f5f5f5 url(images/article_info_left.gif) no-repeat top left; color:#848484; float:left; font-size:0.9em; width:100%; height:42px; }
				
					.postmetadata a, .postmetadata a:visited { color:#848484; }
						.postmetadata a:hover, .postmetadata a:active, .postmetadata a:focus { color:#848484; text-decoration:underline; }
					
					p.posttags { float:left; padding:0; margin:15px 0 0 15px; }
					
						span.bold { font-weight:bold; }
					p.postcomments { float:right; background:url(images/icon_comments.png) no-repeat; margin: 15px 15px 0 0; padding:0 0 2px 20px; }
					button.continue { cursor:pointer; float:right; background:url(images/button_continue.gif) no-repeat; border:none; height:42px; width:124px; }
					
		h3.portfolioHeader { color:#121212; margin-bottom:10px; }
		img.portfolioNew { position:absolute; top:41px; left:17px; z-index:500; }
		.portfolioBox {
			position:relative; float:left;
			width:278px;
			font-size:1.1em;
			margin:0 27px 20px 10px;
		}
			.portfolioImage img { float:left; }
			.portfolioContent h3 { float:left; width:266px; font-size:1.2em; color:#121212; padding:10px 6px 0; }
			.portfolioContent span { float:left; font-size:1.1em; color:#676767; padding:0 6px 5px; }
				.portfolioBlurb p { float:left; color:#676767; padding:0 6px 5px; }
				.portfolioBlurb a { float:right; font-size:1.1em; padding:0 6px; color:#e72371; text-decoration:underline; font-weight:bold; }
					
					
		.comments { color:#292929; float:left; }
			.comments p.whiteText { color:#ffffff; font-size:1.1em; margin-bottom:10px; }
			.comments p.whiteText small { color:#ffffff; font-size:1em; }
			.comments input { margin-top:2px; padding:5px; font:1.1em Arial, Helvetica, sans-serif; color:#292929; }
				.comments input.commentSubmit { background:#3b3b3b; border:1px solid #848484; color:#ffffff; cursor:pointer; }
			.comments textarea { width:630px; padding:5px; font:1.1em Arial, Helvetica, sans-serif; color:#292929; }
			.comments .commentlist { float:left; margin-bottom:8px; }
			.comments h3 { margin:13px 0 12px; }
			.comments .comment { float:left; background:#ffffff; margin-bottom:5px; padding:5px; }
				.comments .comment .commentAvatar { float:left; width:96px; height:96px; }
				.comments .comment .commentInfo { float:left; width:528px; margin-left:10px; }
					.comments .comment .commentInfo h3 { float:left; margin:5px 0 8px 0; font-size:1.4em; }
						.comments .comment .commentInfo h3 a { color:#292929; text-decoration:none; }
					.comments .comment .commentInfo h4 { float:right; font-size:1.1em; font-weight:normal; color:#848484; background:url(images/icon_time.png) no-repeat top right; padding:1px 20px 0 0; }
					.comments .comment .commentInfo p { float:left; width:525px; margin-bottom:12px; }
					
		.navigation {
			float:left;
			width:100%;
		}
			.navigation .newer a {
				background:url(images/button_newer_posts.gif) no-repeat;
				float:left;
				font-size:0;
				height:15px;
				margin:10px 0 15px 0;
				width:115px;
			}
			.navigation .older a {
				background:url(images/button_older_posts.gif) no-repeat;
				float:right;
				font-size:0;
				height:15px;
				margin:10px 0 15px 0;
				width:106px;
			}
					
		#footer {
			position:relative; float:left;
			background:url(images/bg.gif) repeat-x bottom;
			width:100%;
			/*height:395px;*/
		}
			#footer .content {
				margin:0 auto;
				padding:20px 0 0 0;
				width:900px;
			}
				#footer .content #recentWork {
					float:left;
					width:605px;
				}
					#footer .content #recentWork h3 {
						background:url(images/header_recent_work.gif) no-repeat;
						border-bottom:1px solid #c7c6c6;
						height:15px;
						margin-bottom:15px;
						padding-bottom:2px;
						width:575px;
					}
					#footer .content #recentWork .workBox {
						float:left;
						height:91px;
						margin:0 30px 0 0;
						overflow:hidden;
						width:91px;
					}
					#footer .content #recentWork .workBox img {
						float:right;
						margin:-30px -18px 0 0;
					}
					
				#footer .content #followMe {
					float:right;
					width:258px;
				}
					#footer .content #followMe h3 {
						background:url(images/header_follow_me.gif) no-repeat;
						border-bottom:1px solid #c7c6c6;
						height:16px;
						margin-bottom:15px;
						padding-bottom:1px;
						width:258px;
					}
					#footer .content #followMe img {
						float:left;
						height:95px;
						margin:0 30px 0 0;
						width:94px;
					}
					
				#footer .content #friends {
					float:left;
					margin-top:20px;
					width:900px;
				}
					#footer .content #friends h3 {
						background:url(images/header_friends.gif) no-repeat;
						border-bottom:1px solid #c7c6c6;
						height:15px;
						margin-bottom:15px;
						padding-bottom:2px;
						width:900px;
					}
					#footer .content #friends .box {
						float:left;
						width:300px;
					}
						#footer .content #friends .box img {
							float:left;
							height:48px;
							width:79px;
						}
						#footer .content #friends .box h5 {
							float:left;
							font-size:1.3em;
							margin:9px 0 3px 10px;
						}
						#footer .content #friends .box p a {
							color:#121212;
							float:left;
							font-size: 1.1em;
							margin:0 0 0 10px;
							text-decoration:none;
						}
				#footer .content #main {
					float:left;
					margin:20px 0 12px 0;
					text-align:center;
					width:900px;
				}
					#footer .content #main .shadow {
						background:url(images/footer_shadow.gif) no-repeat;
						float:left;
						height:9px;
						width:900px;
					}
					#footer .content #main ul {
						color:#121212;
						font-size:1.2em;
						margin:15px 0 0 220px;
						text-align:center;
					}
						#footer .content #main ul li {
							background:url(images/footer_divider.gif) no-repeat right center;
							float:left;
							padding:0 10px;
						}
						#footer .content #main ul li.last-child {
							background:none;
						}
							#footer .content #main ul li a {
								color:#121212;
								text-decoration:none;
							}

#comment {width:525px; padding:10px;}
.commentlist li ul li {background-color: #f3f2f1; border:1px solid #e5e4e2; padding-bottom:10px; margin-bottom:10px; margin-top:13px;}
.commentlist li ul li ul li {background-color: white;}	
				
				

/* --------------------------------------------------------
	TYPOGRAPHY
-------------------------------------------------------- */

	h1 { font-size:3em; }
	h2 { font-size:2.6em; }
	h3 { font-size:2.2em; }
	h4 { font-size:1.8em; }
	h5 { font-size:1.4em; }
	h6 { font-size:1em; }
	
	em { font-style:italic; }