/*
Theme Name: benmacgowan.co.uk
Version: 1
Author: Ben MacGowan
Author URI: http://ww.benmacgowan.co.uk
*/

html {
	height: 			100%;
}

body {
	background:			#1693a5 url('images/bg.jpg') no-repeat top center;
	color: 				#292929;
	font: 				0.75em Arial, Sans-serif;
	height: 			100%;
	margin:  			0;
	padding:  			0;
}

/* Page Elements */

p {
	margin: 			6px 0;
	line-height: 		1.6em;
	padding: 			0;
}

a {
	color: 				#1693a5;
	outline: 			0!important;
	text-decoration: 	none;
}

a:hover {
	text-decoration: 	underline;
}

img {
	border: 			0;
}

.main_post .content img {
	background: 		#c8e9eb;
	border:				1px solid #1693A5;
	padding: 			5px;
}

.main_post .content img.left {
	float: 				left;
	margin: 			0 10px 10px 0;
}

.main_post .content img.right {
	float: 				right;
	margin: 			0 0 10px 10px;
}

.clear {
	clear: 				both;
	display: 			block;
	font-size: 			1px;
	height: 			1px;
	line-height: 		0;
}

h2 {
	font: 				2.00em Arial, Verdana, Sans-serif;
	margin: 			0;
	padding: 			0;
}

h2 a {
	color: 				#1693a5;
}

blockquote {
	background:  		#F8FBFD url('images/blockquote_bg.jpg') no-repeat left top;
	border:				1px solid #1693a5;
	margin:				6px 0;
	padding:			5px 10px;
}

span.blue {
	color:	 			#1693a5;
	font-weight: 		bold;
}

/* Enable JS Bar */				
#enable_js {
	background: 		#292929;
	border: 			1px solid #FFF;
	border-width: 		0 0 1px 0;
	left: 				0;
	padding: 			5px 0;
	position: 			absolute;
	text-align: 		center;
	top: 				0;
	width: 				100%;
	z-index: 			999;
}

#enable_js p {
	color: 				#FFF;
	margin: 			0;
	padding: 			0;
}				

/* Page Structure */

#page_wrapper {
	margin: 			0 auto;
	position: 			relative;
	width:				920px;
}

/* Header */

#header {
	height:				140px;
	width:  			920px;
}

#logo a {
	background: 		url('images/logo.png') no-repeat;
	display:			block;
	float: 				left;
	font-size: 			1px;
	height: 			135px;
	line-height: 		0px;
	margin: 			1px 0 0 25px;
	text-indent:		-9999em;
	width: 				108px;
}

#header h1 {
	float: 				left;
	margin: 			35px 300px 0 12px;
	padding: 			0;
}

#header h1 a {
	background: 		url('images/benmacgowan.png') no-repeat top left;
	display: 			block;
	height:				70px;
	margin:				0;
	padding: 			0;
	text-indent: 		-9999px;
	width: 				394px;
}

#header h1 a:hover {
	background: 		url('images/benmacgowan.png') no-repeat bottom left;
}

#header h2 {
	color: 				#b4e3e3;
	float:  			left;
	margin:  			-15px 0 0 17px;
	padding:  			0;
}

#header h2 span {
	color: 				#f8fbfd;
}

/* Top Navigation */

#top_navigation {
	background: 		url('images/top_navigation_bg.png') no-repeat;
	border-bottom: 		1px solid #000;
	height: 			40px;
	width: 				920px;
	overflow: 			hidden;
	position: 			relative;
}

#top_navigation ul {
	list-style-type: 	none;
	margin: 			0 21px;
	padding: 			0;
}

#top_navigation ul li {
	float: 				left;
	margin:				0;
	padding: 			0;
}

#top_navigation ul li a {
	color: 				#f2ece4;
	cursor: 			pointer;
	display: 			block;
	font: 				1.50em Arial, Verdana, Sans-serif;
	font-weight: 		bold;
	height: 			30px;
	line-height: 		1em;
	margin: 			0;
	padding: 			10px 24px 0 24px;
	position: 			relative;
	text-align: 		center;
	text-decoration: 	none;
	z-index: 			10;
}

#top_navigation ul li.back {
    background: 		url('images/top_navigation_hover.jpg') no-repeat center top;
    height: 			40px;
    display: 			list-item;
    margin: 			0;
    padding: 			0;
    position: 			absolute;
    width: 				9px;
    z-index: 			8;
}

#top_navigation ul li.back .left {
	display: 			none;
}

#top_navigation ul li.home a {
	width: 				45px;
}

#top_navigation ul li.about a {
	width: 				68px;
}

#top_navigation ul li.projects a {
	width: 				66px;
}

#top_navigation ul li.archives a {
	width: 				70px;
}

#top_navigation ul li.contact a {
	display: 			none;
	width: 				65px;
}

#top_navigation ul li.contact2 a {
	display: 			block;
}

#top_navigation ul li a:hover, #top_navigation ul li.current a {
	background: 		url('images/top_navigation_hover.jpg') no-repeat center top;
}

#top_navigation.js ul li a:hover, #top_navigation ul li.current a {
	background: 		none;
}

#top_navigation.js ul li.contact a {
	display: 			block;
}

#top_navigation.js ul li.contact2 a {
	display: 			none;
}

/* Contact Form */
#contact_form {
	background: 		#282828;
	border-top: 		1px solid #5e5e5e;
	display: 			none;
	height: 			130px;
	padding: 			10px 20px 0 20px;
}

#contact_form p {
	color: 				#FFF;
	margin: 			0 0 10px 0;
	padding: 			0;
}

#contact_form span {
	color:	 			#1693a5;
	font-weight: 		bold;
}

#contact_form label {
	clear: 				both;
	color: 				#FFF;
	cursor: 			pointer;
	float: 				left;
	margin: 			4px 0 0 0;
	width: 				70px;
}

#contact_form label.error {
	display: 			none!important;
}

#contact_form .details {
	float: 				left;
	width: 				260px;
}

#contact_form .details input {
	background: 		#2d2d2d;
	border: 			1px solid #5e5e5e;
	color: 				#FFF;
	float:  			left;
	font: 				1em Arial, Sans-serif;
	height: 			14px;
	margin: 			0 0 10px 10px;
	padding: 			3px;
	width: 				172px;
}

#contact_form .details input.required {
	border-left: 		3px solid #1693a5;
	width: 				170px;
}

#contact_form .message {
	float: 				left;
	margin: 			0 0 0 40px;
	width: 				370px;
}

#contact_form .message textarea {
	background: 		#2d2d2d;
	border: 			1px solid #5e5e5e;
	color: 				#FFF;
	float:  			left;
	font: 				1em Arial, Sans-serif;
	height: 			76px;
	padding: 			5px;
	width: 				260px;
}

#contact_form .message textarea.required {
	border-left: 		3px solid #1693a5;
	width: 				258px;
}

#contact_form .buttons {
	float: 				left;
	padding: 			5px 0 0 0;
	width: 				85px;
}

#contact_form .buttons p {
	margin: 			10px 0 0 0;
}

#contact_form .required_message {
	display: 			none;
	float: 				left;
	padding: 			15px 0 0 15px;
	width: 				110px;
}

/* Content */

#content {
	background: 		#f8fbfd;
	margin: 			0;
	padding: 			20px 20px 10px 20px;
	overflow: 			hidden;
}

#wide {
	float: 				left;
	position: 			relative;
	width: 				580px;
}

#small {
	float:  			left;
	padding:			0 0 0 20px;
	width: 				280px;
}

/* Posts Page */

#content.posts {
	background: 		#f8fbfd url('images/post_meta_bg.jpg') repeat-y;
	padding: 			0 20px 20px 0;
}

#content.posts #wide {
	width: 				600px;
}

#content.posts #small .side_module {
	margin: 			20px 0 0 0;
}

/* Main Post */

.main_post {
	clear: 				both;
	display: 			inline-table;
	margin: 			0 0 20px 0;
}

.main_post .meta {
	background: 		url('images/post_meta_arrow.jpg') no-repeat 127px 24px;
	float: 				left;
	padding: 			23px 16px 15px 15px;
	width: 				112px;
}

.main_post .meta p {
	display: 			block;
	font: 				1.17em Arial, Verdana, Sans-serif;
	line-height: 		1.17em;
	margin: 			0 0 6px 0;
	padding: 			3px 0 0 21px;
	
}

.main_post .meta p span {
	font-size: 			1.29em;
}

.main_post .meta p.date {
	background: 		url('images/post_meta_calendar.jpg') no-repeat 0 2px;
}

.main_post .meta p.category {
	background: 		url('images/post_meta_category.jpg') no-repeat 0 2px;
}

.main_post .meta p.comments {
	background: 		url('images/post_meta_comments.jpg') no-repeat 0 2px;
}

.main_post .meta a {
	color: 				#292929;
}

.main_post .content {
	float:				left;
	padding: 			20px 0 0 20px;
	//width: 				420px;
	width: 				730px;
}

.main_post h2 {
	color:				#1693A5;
}

.main_post .content ul {
	line-height: 		1.6em;
}

/* Main Post - Side Module */

.side_module {
	background: 		#e6f4f8 url('images/side_bg.jpg') no-repeat left top;
	border: 			1px solid #afdae1;
	clear: 				both;
	display: 			inline-block;
	margin: 			0 0 20px 0;
	padding:			10px;
	width:  			258px;
}

.side_module h3 {
	background: 		url('images/side_head_bg.jpg') no-repeat center top;
	color: 				#fafafa;
	font: 				1.50em Arial, Verdana, Sans-serif;
	height: 			25px;
	margin: 			-11px -11px 0;
	padding: 			5px 10px 0;
}

.side_module h3 a {
	color: 				#1693a5;
}

.side_module ul.posts {
	list-style-type: 	none;
	margin:				10px 0 0 0;
	padding: 			0;
	width: 				200px;
}

.side_module ul.posts li {
	margin: 			2px 0;
	padding: 			0;
}

.side_module ul.posts li a {
	background:			url('images/post.gif') no-repeat left center;
	display: 			block;
	padding: 			4px 0 4px 25px;
	width:  			175px;
}

p.social {
	padding: 			0 11px;
}

p.social a {
	color: 				#e6f4f8;
	display: 			block;
	float: 				left;
	height: 			43px;
	margin: 			0 5px 0 0;
	overflow: 			hidden;
	text-indent: 		-9999em;
	width: 				42px;	
}

p.social a:hover {
	background-position: left bottom !important;
}

p.social a.twitter {
	background: 		url('images/twitter.gif') no-repeat left top;
}

p.social a.stumbleupon {
	background: 		url('images/stumbleupon.gif') no-repeat left top;
}

p.social a.digg {
	background: 		url('images/digg.gif') no-repeat left top;
}

p.social a.delicious {
	background: 		url('images/delicious.gif') no-repeat left top;
}

p.social a.reddit {
	background: 		url('images/reddit.gif') no-repeat left top;
}

/* Side Post */

.side_post {
	background: 		#e6f4f8 url('images/side_bg.jpg') no-repeat left top;
	border: 			1px solid #afdae1;
	clear: 				both;
	display: 			inline-block;
	margin: 			20px 0 0 0;
	padding:			10px 10px 0;
	width:  			258px;
}

.side_post h3 {
	background: 		#242424 url('images/side_head_bg.jpg') no-repeat center top;
	color: 				#fafafa;
	font: 				1.50em Arial, Verdana, Sans-serif;
	min-height: 		20px;
	margin: 			-11px -11px 0;
	padding: 			5px 10px;
}

.side_post h3 a {
	color: 				#fafafa;
}

.side_post .meta {
	color:				#f8fbfd;
	margin: 			10px -10px 0;
	padding: 			0 10px 5px;
}

.side_post .meta:after {
	clear: 				both;
	content: 			'';
	display: 			block;
}

.side_post .meta a {
	color: 				#1a95a6;
}

.side_post .meta p {
	display: 			block;
	font: 				1em Arial, Verdana, Sans-serif;
	float: 				left;
	height: 			17px;
	line-height: 		1em;
	margin: 			0;
	padding: 			3px 0 0 21px;
}

.side_post .meta p span {
	font-size: 			1.29em;
}

.side_post .meta p.date {
	background: 		url('images/sidepost_meta_calendar.gif') no-repeat 0 1px;
	margin: 			0 15px 0 0;
}

.side_post .meta p.comments {
	background: 		url('images/sidepost_meta_category.gif') no-repeat 0 1px;
	padding: 			5px 0 0 21px;
}

/* Comments */
#comments {
	clear: 				both;
	display: 			inline-table;
	margin: 			0;
}

#comments .title {
	background: 		url('images/post_meta_arrow.jpg') no-repeat 127px 24px;
	float: 				left;
	padding: 			23px 16px 15px 15px;
	width: 				112px;
}

#comments .title h3 {
	background: 		url('images/post_meta_comments.jpg') no-repeat 0 2px;
	display: 			block;
	font: 				1.17em Arial, Verdana, Sans-serif;
	line-height: 		1.17em;
	margin: 			0 0 6px 0;
	padding: 			3px 0 0 21px;
	
}

#comments .comments_list {
	float:				left;
	padding: 			0 0 0 20px;
	width: 				429px;
}

.comment {
	background: 		#EBF6FA;
	border: 			1px solid #afdae1;
	display: 			block;
	margin: 			20px 0 0 0;
	padding: 			10px 10px 0 60px;
	position: 			relative;
}

.comment img.avatar, .leave_comment img.avatar {
	left:				-10px;
	margin: 			0 10px 10px 0;
	position: 			absolute;
	top: 				-10px;
	z-index:			5;
}

.comment .avatar-bubble, .leave_comment .avatar-bubble {
	background: 		url('images/avatar-bubble.png') no-repeat;
	height: 			60px;
	left: 				-10px;
	overflow: 			hidden;
	position: 			absolute;
	top: 				-10px;
	width: 				60px;
	z-index: 			10;
}

.comment .content {
	margin: 			-6px 0 0 0;
	min-height: 		55px;
}

.comment .details {
	background: 		#2a2a2a url('images/comment_meta_bg.jpg') no-repeat;
	clear: 				both;
	height: 			30px;
	margin: 			0 -11px -1px -61px;
}

.comment .details p {
	color: 				#FFF;
	margin: 			0;
	padding:			5px 0 0 40px;
}

.comment .details a {
	color: 				#FFF;
}

/* Leave a Comment Form */

.leave_comment {
	clear: 				both;
	display: 			inline-table;
	margin: 			0;
}

.leave_comment .title {
	background: 		url('images/post_meta_arrow.jpg') no-repeat 127px 24px;
	float: 				left;
	padding: 			23px 16px 15px 15px;
	width: 				112px;
}

.leave_comment .title h3 {
	display: 			block;
	font: 				1.17em Arial, Verdana, Sans-serif;
	line-height: 		1.17em;
	margin: 			0 0 6px 0;
	padding: 			3px 0 0 0;
}

.leave_comment .title span {
	color: 				#1693A5;
	font-weight: 		bold;
}

.leave_comment .form_container {
	float:				left;
	padding: 			0 0 0 20px;
	width: 				429px;
}

.form {
	background: 		#e6f4f8;
	border: 			1px solid #afdae1;
	display: 			block;
	margin: 			20px 0 0 0;
	min-height: 		65px;
	padding: 			10px 10px 0 60px;
	position: 			relative;
}

.form .content {
	float: 				left;
	margin: 			0;
}

.form .content label {
	cursor: 			pointer;
}

.form .content textarea {
	background: 		#FFF url('images/textarea_bg.gif') repeat-x left bottom;
	border: 			1px solid #65b7c4;
	color: 				#292929;
	font: 				1em Arial, Sans-serif;
	height: 			100px;
	margin: 			5px 0 10px;
	padding: 			5px;
	width:				340px;
}

.form .details {
	background: 		#2a2a2a url('images/comment_meta_bg2.jpg') no-repeat;
	clear: 				both;
	height: 			26px;
	margin: 			0 -11px -1px -61px;
	padding: 			4px 0 0 10px;
}

.form .details label {
	color: 				#FFF;
	cursor:				pointer;
	float: 				left;
	margin: 			4px 5px 0 0;
	padding: 			0;
}

.form .details input {
	background: 		#2D2D2D url('images/input_bg.gif') repeat-x left bottom;
	border: 			1px solid #5E5E5E;
	color: 				#FFF;
	float: 				left;
	font: 				1em Arial, Sans-serif;
	height: 			13px;
	margin:				0 5px 0 0;
	padding: 			3px;
	width: 				76px;
}

.form .details input.required {
	border-left: 		3px solid #1693a5;
	width: 				74px;	
}

.leave_comment .submit {
	margin: 			10px 0 0 0;
	text-align: 		right;
}

/* Zoom Image */

.zoom_cnt {
	display: 			none;
	left: 				0;
	position: 			absolute;
	top: 				0;
}

.zoom_cnt .zoom {
	background: 		#282828 url('images/loader.gif') no-repeat center center;
	display: 			block;
	line-height: 		1px;
	padding: 			5px;
	position: 			relative;
}

.zoom_cnt .zoom a.close {
	cursor: 			pointer;
	position: 			absolute;
	right: 				-10px;
	top:				-10px;
	z-index: 			5;
}

.zoom_cnt .zoom .title {
	background: 		#282828;
	color: 				#FFF;
	left: 				10px;
	display: 			block;
	padding: 			10px;
	position: 			absolute;
	top: 				10px;
}

/* Side Modules - About */

#small.about .side_module img {
	background: 		#FFF;
	float: 				left;
	margin: 			10px 5px 0 0;
	padding: 			3px;
}

/* Projects */

div.projects {
	margin: 			20px auto 10px;
	width: 				600px;
}

div.project {
	border: 			1px solid #292929;
	cursor: 			pointer;
	height: 			450px;
	position: 			relative;
	width: 				600px;
}

div.project.cssbake {
	background: 		url('/images/cssbake.jpg') no-repeat;
}

div.project .details_bg {
	background: 		url('images/details-bg.png');
	height: 			450px;
	position:			absolute;
	right: 				0;
	top: 				0;
	width: 				230px;
	z-index: 			3;
}

div.project .details {
	color: 				#FFF;
	height: 			430px;
	padding: 			10px;
	position:			absolute;
	right: 				0;
	top: 				0;
	width: 				210px;
	z-index: 			5;
}

div.project .details h3 {
	margin: 			0;
	padding: 			0;
}

div.project .details a {
	color: 				#FFF;
}

/* No JS Contact Form */

form.contact_form label {
	clear: 				both;
	float: 				left;
	margin: 			13px 0 0 0;
	width: 				80px;
}

form.contact_form input {
	border: 			1px solid #525252;
	color: 				#525252;
	float: 				left;
	font: 				1em Arial, Sans-serif;
	height: 			14px;
	margin: 			10px 0 0 0;
	padding: 			3px;
	width: 				176px;
}

form.contact_form textarea {
	border: 			1px solid #525252;
	color: 				#525252;
	float: 				left;
	font: 				1em Arial, Sans-serif;
	margin: 			10px 0 0 0;
	padding: 			3px;
	width: 				176px;
}

form.contact_form input.submit {
	border: 			0;
	clear: 				both;
	height: 			auto;
	margin: 			10px 0 0 80px;
	padding: 			0;
	width: 				auto;
}

form.contact_form input.required, form.contact_form textarea.required {
	border-left: 		3px solid #1693a5;
	width: 				173px;
}

/* Archives */

#wide.archives h3 {
	font-size: 			1.3em;
	margin-left: 		-20px;
}

#wide.archives h4 {
	margin: 			0;
}

#wide.archives h4 a {
	color: 				#292929;	
}

#wide.archives ul {
	margin:  			10px auto;
}

#wide.archives .archives-by-post {
	margin: 			0 20px;
}

#wide.archives .archives-by-year {
	font-size: 			1.2em;
	margin: 			10px 20px;
}

#wide.archives .archives-by-year h3 {
	font-size: 			1.1em;
}

#wide.archives .archives-by-year strong a {
	color: 				#292929;
}

#wide.archives .archives-by-year .emptymonth {
	color: 				#ccc;
}

/* Footer */

#footer {
	background: 		#246771;
	clear: 				both;
	color: 				#f8fbfd;
	overflow: 			hidden;
	padding: 			0;
	width:				920px;
}

#footer h4 {
	color: 				#f8fbfd;
	font: 				1.50em Arial, Verdana, Sans-serif;
	font-weight: 		bold;
	margin: 			0;
	padding:			0;
}

#footer a {
	color: 				#b4e3e3;
}

#footer_bottom {
	background: 		url('images/footer_bottom_bg.png') no-repeat;
	clear: 				both;
	height: 			10px;
	width: 				920px;
}

#footer_bubbles {
	background: 		url('images/footer_bubbles.jpg') no-repeat;
	bottom: 			0;
	display: 			none;
	height: 			241px;
	position: 			absolute;
	right: 				-66px;
	width: 				656px;
	z-index:			-1;
}

/* Blogroll Column */

#blogroll_column {
	background:			url('images/blogroll_bg.jpg') no-repeat center top;
	float: 				left;
	margin: 			20px 0 20px 20px;
	min-height: 		105px;
	padding: 			15px 15px 0 15px;
	width: 				200px;
}

#blogroll_column ul {
	list-style-type: 	none;
	margin:				10px 0 0 0;
	padding: 			0;
	width: 				200px;
}

#blogroll_column ul li {
	margin: 			2px 0;
	padding: 			0;
}

#blogroll_column ul li a {
	background:			url('images/arrow.gif') no-repeat left 5px;
	display: 			block;
	height: 			17px;
	padding: 			3px 0 0 25px;
	width:  			175px;
}

/* Twitter Feed Column */

#twitter_column {
	background:			url('images/twitter_bg.jpg') no-repeat center top;
	float: 				left;
	margin: 			20px 0 20px 20px;
	min-height: 		105px;
	padding: 			15px 15px 0 15px;
	width: 				250px;
}

#twitter_column ul {
	list-style-type: 	none;
	margin:				10px 0 0 0;
	padding: 			0;
	width: 				240px;
}

#twitter_column ul li {
	margin: 			5px 0;
	padding: 			0;
	background:			url('images/arrow.gif') no-repeat left 5px;
	display: 			block;
	padding: 			4px 0 0 25px;
	width:  			215px;
}

/* Search Form & RSS Feed */

#search_rss_column {
	float: 				left;
	margin: 			20px 0 20px 20px;
	padding: 			0;
	width:  			330px;
}

.search_cnt {
	display:			block;
	height: 			85px;
	padding: 			25px 0 0 0;
	width: 				330px;
}

.search {
	margin: 			10px 0 0 0;
}

.search_input {
	background: 		#273F49 url('images/search_input.jpg') no-repeat;
	float: 				left;
	height: 			30px;
	margin: 			0;
	padding: 			0;
	width: 				245px;
}

.search_input input.input {
	background: 		transparent;
	border: 			0;
	color: 				#f8fbfd;
	font: 				1em Arial, Sans-serif;
	height: 			22px;
	margin: 			0;
	padding: 			8px 9px 0 15px;
	width: 				215px;
}

.search p {
	margin: 			0;
	padding: 			0;
}

.rss {
	display:			block;
	float:				left;
	height: 			100px;
	padding: 			15px 0 0 0;
	width: 				230px;
}

a.rss_balloon {
	background: 		url('images/rss_balloon.jpg') no-repeat left center;
	display: 			block;
	float: 				left;
	height: 			104px;
	margin: 			10px 0 0 15px;
	padding: 			0;
	text-indent: 		-9999em;
	width: 				85px;
}

a.rss_balloon:hover {
	background: 		url('images/rss_balloon.jpg') no-repeat right center;
}

/* Copyright */

#copyright {
	margin: 			0;
	padding: 			0 20px 20px 20px;
	width: 				880px;
}

#copyright p {
	color: 				#f8fbfd;
	font: 				1.5em Arial, Verdana, Sans-serif;
	text-align: 		right;
}

#copyright a {
	color: 				#f8fbfd;
}

#copyright a:hover {
	text-decoration: 	none;
}