/*
Theme Name: The CSS Ninja
Theme URI: http://www.thecssninja.com/
Description: Custom theme for the <a href="http://www.thecssninja.com/">cssninja</a> blog.
Version: 1
Author: Ryan Seddon
Author URI: http://www.thecssninja.com/
Tags: css, ninja, cssninja, thecssninja

	Kubrick v1.5
	 http://www.thecssninja.com/

	This theme was designed and built by Ryan Seddon,
	whose blog you will find at http://www.thecssninja.com/

*/

*, html
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

body, form, ul, li, p, h1, h2, h3, h4, h5
{
	margin: 0;
	padding: 0;
}
html, body 
{
	height: 100%;
}
body { background: #606061 url(assets/gr_bg_header.jpg) 0 0 repeat-x;}
body#error { background: #000000; text-align: center; height: auto !important; }

.clear
{
	height: 0 !important;
	line-height: 0 !important;
	clear: both !important;
	font-size: 1px !important;
	margin: 0;
	padding: 0;
	float: none !important;
	display: block !important;
}
img
{
	border: none;
}
p
{
	font-size: 1em;
	margin: 0 0 1em 0;
}

::selection { background: #109610; color: #fff; /* Safari */ }
::-moz-selection { background: #109610; color: #fff; /* Firefox */ }


/* Styles for scalable font consistency */

html { font-size: 100%; height: 100%; /* IE hack */ }
body { font-size: 0.75em; } /* Base font 12px */
table { font-size: 100%; /* IE hack */ }

input, select, textarea, th, td { font-size:1em; }

h1, .title01 { font-size: 5.416em; line-height: 1em; } 
h1.title02, h2 { font-size: 2em; line-height: 1em; margin: 0 0 0.792em 0; }
h2 .search-term { color: #1A1A1D; }
h2.subtitle01 { color: #ffffff; margin-bottom: 118px; }
h2.subtitle02 { font-size: 1.167em; line-height: 1em; margin: 0 0 0.5em 0; } /* 14px/14px/6px */
h2.subtitle03 { margin-bottom: 1.833em; }

h3 { font-size: 1.167em; line-height: 1em; margin: 0 0 0.5em 0; } /* 14px/14px/6px */
h3.subtitle01 { color: #fff; margin: 0 0 0.5em 27px; }

/* START: @Structural styling */
#maincontainer
{
	background: url(assets/gr_bg_content.gif) 0 234px no-repeat;
}
#maincontainer #innermaincontainer,
#footer #innerfooter
{
	width: 988px;
}

#maincontainer 
{
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -186px; /* the bottom margin is the negative value of the footer's height */
}
#errorcontainer
{
	margin: 159px auto 0;
	width: 988px;
}

.multi-column01
{
	
}
	.multi-column01 .column
	{
		width: 648px;
		float: left;
		background: url(assets/gr_border01.gif) 100% 0 repeat-y;
	}
		.multi-column01 .column .column-padding
		{
			padding: 0 25px 0 0;
		}
		.multi-column01 h2,
		.multi-column01 h1.title02
		{
			color: #ffffff;
		}
		.multi-column01 h2.subtitle02
		{
			color: #1a1a1d;
		}
	.multi-column01 .column02
	{
		width: 285px;
		float: left;
	}
		.multi-column01 .column02 .column-padding
		{
			padding: 0 15px 0 24px;
		}
/* END: Structural styling */

/* START: @Header styles */
#header
{
	height: 234px;
	background: url(assets/gr_header-ninja.jpg) 0 0 no-repeat;
}
#header .navigation
{
	height: 35px;
	float: right;
}
.navigation ul
{
	float: left;
}
.navigation ul li
{
	list-style: none;
	float: left;
	display: block;
	padding: 10px 0 0 9px;
	background: url(assets/gr_nav-seperator.gif) 4px 13px no-repeat;
}
.navigation ul li a
{
	color: #ffffff;
	font-size: 1em;
	line-height: 1em;
	text-decoration: none;
}
.navigation ul li a:hover
{
	text-decoration: underline;
}
.navigation ul li.first
{
	padding: 10px 0 0 0;
	background: none;
}

.search
{
	background: #ffffff url(assets/gr_search-icon.gif) 0 0 no-repeat;
	margin: 6px 0 0 20px;
	float: left;
	width: 222px;
}
	.search .search_inner
	{
		background: url(assets/gr_search-right.gif) 100% 0 no-repeat;
		border: none;
		height: 19px;
		margin: 0;
		padding: 3px 8px 0 27px;
	}
	.search label { display: none; }
	.search input
	{
		border-width: 0;
		width: 180px;
		height: 16px;
		padding: 0;
		margin: 0;
	}
	
#banner
{
	padding: 41px 0 0 269px;
	color: #ffffff;
}
	#banner h1,
	#banner .title01
	{
		margin: 0 0 17px 0;
		color: #ffffff;
		text-indent: -9999em;
		background: url(assets/tl_css-ninja.gif) 0 0 no-repeat;
		height: 57px;
	}
	#banner a
	{
		display: block;
		width: 202px;
		height: 216px;
		float: left;
		margin: -60px 0 0 -244px;
		text-indent: -9999em;
		outline: none;
	}
/* END: Header styles */
	
/* START: Content styling */
#content
{
	padding: 54px 0 0 55px;
}
#content a
{
	color: #18191D;
}
#content a:hover
{
	text-decoration: none;
}
#content p
{
	color: #ffffff;
	margin: 0 0 1.833em 0;
	line-height: 1.5em;
	text-align: justify;
}

.error input,
.error textarea,
.error select
{
	background-color: #F1CFCF;
}
.error label
{
	color: #74011B !important;
	font-weight: bold;
}

.caption01 /* Appears below article image */
{
	margin: -30px 0 0;
	display: block;
}

#content .shorty01 
{ 
	padding: 5px; 
	background-color: #1E528C; 
	border: 1px solid #FFFFFF;
	float: right; 
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px; 
	border-radius: 5px;
}
	#content .shorty01 a { color: #ccc; }

#adverts
{
	overflow: hidden;
	margin: 0 -15px 1.25em -1px;
}
	#adverts img
	{
		float: left;
		margin: 0 5px 5px 0;
		border: 0 none;
	}
		
.article
{
	border-bottom: 1px dotted #fff;
	margin: 0 0 3.33em 0;
	padding: 0 0 2.917em;
	position: relative;
	width: 100%;
}
	#content .article h1.title02,
	#content .article h2
	{
		line-height: 1.458em;
		background: url(assets/ico_ninja-star.gif) 0 0 no-repeat;
		padding: 0 0 0 48px;
		color: #1a1a1d;
		margin: 0 0 0.5em 0;
		float: left;
		width: 487px;
	}
	#content .article h2.subtitle02
	{
		line-height: 1em;
		background: none;
		padding: 0;
		float: none;
		width: auto;
	}
	#content .article code { font-style: italic; }
.article-detail
{
	margin: 0 0 3.167em 0;
	padding: 0;
	border: none;
}
	.article-img
	{
		border: 5px solid #bebebe;
		display: block;
	}
	.left-img
	{
		float: left;
		margin: 3px 13px 13px 0;
	}
	.display-img
	{
		float: left;
		margin: 3px 13px 1.636em 0;
	}
	.main-img
	{
		margin: 0 0 1.636em 0;
	}
	.article .right-img,
	.article-detail .right-img,
	.search-item .right-img
	{
		float: right;
		margin: 0 0 13px 13px;
	}
	
	.article blockquote,
	blockquote.pull-quote01
	{
		background: url(assets/gr_bg_pull-quote01.gif) 0 0 no-repeat;
		padding: 0.33em 0 0 39px;
		margin: 0;
	}
		.article blockquote p,
		blockquote.pull-quote01 p
		{
			font-style: italic;
		}
	blockquote.breakaway-quote01
	{
		background: url(assets/gr_bg_pull-quote01.gif) 0 0 no-repeat;
		padding: 0 0 0 39px;
		margin: 0;
		float: right;
		width: 200px;
	}
		blockquote.breakaway-quote01 p
		{
			font-style: bold;
			border: 5px solid #18191d;
			border-width: 5px 0;
			padding: 8px 3px 10px;
			font-style: italic;
		}
	
	.code
	{
		padding: 10px 13px 15px;
		margin: 0 0 2.083em 0;
		background: #000000;
		color: #318df2;
		font-size: 1.083em;
		-moz-border-radius: 0 0 11px 0; -webkit-border-bottom-right-radius: 11px;border-radius: 0 0 11px 0;
	}
		.code .css,
		.code .html4strict,
		.code .javascript
		{
			font-family:Verdana,Arial,Helvetica,sans-serif !important;
			overflow: auto;
			width: 593px;
		}
		.code .html4strict, .code .html4strict * { color: #318df2 !important; font-weight: normal !important; }
		.code .css, .code .css * { color: #da2427 !important; font-weight: normal !important; }
		.code .javascript, .code .javascript * { color: #109610 !important; font-weight: normal !important; }
		
	.article-detail .resources01
	{
		background-color: #1E528C;
		border: 1px solid #ffffff;
		margin: 0 0 1.636em;
		padding: 0.833em 0;
		text-align: center;
		border-radius: 0.5em;
		-moz-border-radius: 0.5em;
		-webkit-border-radius: 0.5em;
	}
		#content .article-detail .resources01 a.demo
		{
			background: url(assets/ico_demo.png) 0 50% no-repeat;
			margin: 0 16px 0 0;
			padding: 5px 0 5px 28px;
			line-height: 2em;
			color: #ffffff;
		}
		#content .article-detail .resources01 a.demo.source
		{
			background: url(assets/ico_source.png) 0 50% no-repeat;
		}
	.article-detail .resources02
	{
		background-color: #6b6b6c;
	}
		.article-detail .resources02 ul
		{
			margin: 0 0 0 50px;
		}
		.article-detail .resources02 li
		{
			float: left;
			margin: 0 5px 0 0;
			padding: 2px 0;
			background: none;
		}
			.article-detail .resources02 li a
			{
				padding: 0 0 0 24px;
			}
		
.comments-listing
{
	padding: 2em 0 1.5em 27px;
	margin: 0;
}
	.comments-listing .item
	{
		margin: 0 0 1.667em 0;
		position: relative;
		list-style: none;
	}
		.comments-listing .item img
		{
			float: left;
			border: 3px solid #bebebe;
		}
		.comments-listing .comment
		{
			margin: 0 0 0 70px;
			background: #606061;
			width: 522px;
		}
			.comments-listing .comment-padding
			{
				border: 2px solid #fff;
				margin: 0 0 0 33px;
				-moz-border-radius: 10px;
				-webkit-border-radius: 10px;
				border-radius: 10px;
			}
			.comments-listing .comment-content
			{
				background: url(assets/gr_comment-arrows.gif) 0 12px no-repeat;
				padding: 10px 10px 10px 41px;
				margin: 0 0 0 -33px;
			}
			.comments-listing  .item .comment-content img { border: 0 none; float: none; }
			.comments-listing .comment p
			{
				margin: 0 0 1.583em 0;
			}
			
			.comments-listing .author-comment .comment-padding
			{
				background: #2d80dc;
				background: -moz-linear-gradient(top, #2d80dc, #225d9f); /* Firefox 3.6+ */
				background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2d80dc), to(#225d9f)); /* Safari */
				background: -o-linear-gradient(top, #2d80dc, #225d9f); /* Opera Next */
				background: linear-gradient(top, #2d80dc, #225d9f); /* standard */
			}
			.comments-listing .author-comment .comment-content
			{
				background: url(assets/gr_comment-arrows.png) -522px 12px no-repeat;
			}
			.comments-listing .comment-author,
			#content .comments-listing .comment-author a
			{
				color: #010101;
			}
			.comments-listing .comment-author
			{
				font-size: 0.833em;
			}
	
	.comments-listing .trackback
	{
		border-top: 2px solid #fff;
		margin-bottom: 1.667em;
		padding: 5px;
	}

a.comment-count-link
{
	text-decoration: none;
	display: block;
	cursor: pointer;
	width: 36px;
	height: 31px;
	background: url(assets/ico_comments.png) 0 100% no-repeat;
	position: absolute;
	top: 9px;
	left: -50px;
	display: block;
}
a.comment-count-link:hover
{
	text-decoration: none;
}
	a.comment-count-link .counter
	{
		height: 24px;
		line-height:24px;
		text-align: center;
		display: block;
	}
		a.comment-count-link:hover .counter
		{
			color: #000;
			font-weight: bold;
		}
		
.datebox
{
	float: right;
	width: 2.667em;
	background-color: #2c7ad0;
	border: 1px solid #000000;
	color: #ffffff;
}
	.datebox .month
	{
		display: block;
		text-align: center;
		font-size: 0.666em;
		line-height: 1em;
		padding: 2px 0;
		background-color: #1e528c;
		text-transform: uppercase;
	}
	.datebox .day
	{
		display: block;
		text-align: center;
		font-size: 1.333em;
		line-height: 1em;
		font-weight: bold;
		padding: 2px 0;
	}
	
.rss,
.twitter
{
	background: url(assets/ico_rss.gif) 0 0 no-repeat;
	padding: 0 0 1.5em 20px;
	color: #18191d;
	display: block;
}
.twitter { background: url(assets/ico_twitter.gif) 0 0 no-repeat; }

.search-item
{
	padding: 0 0 1.33em 0;
}
	.search-item .date
	{
		font-size: 0.83em;
		display: block;
		margin: -4px 0 3px 0;
	}

.post-nav .left { float: left; }	
.post-nav .right { float: right; }
	#content .post-nav a
	{
		padding: 6px;
		font-weight: bold;
		color: #ffffff;
		text-decoration: none;
		background: #2C7AD0;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		-webkit-transition: background 1s ease;
	}
	#content .post-nav a:hover
	{
		background: #1E528C;
	}
/* END: Content styling */

/* START: @List styles */
ul.list01,
.article ul
{
	margin: 0 0 1.25em 0;
}
	.article ul,
	.search-item ul
	{
		margin: 0 0 1.25em 10px;
	}
	ul.list01 li,
	.article ul li,
	.search-item ul li
	{
		list-style: none;
		color: #18191d;
		background: url(assets/ico_ninja-star02.gif) 0 0.333em no-repeat;
		padding: 0 0 0.333em 12px;
	}
	ul.list01 li
	{
		list-style: none;
		color: #18191d;
		background: url(assets/ico_ninja-star02.gif) 0 0.333em no-repeat;
		padding: 0 0 0.5em 12px;
		line-height: 1.33em;
	}
	.article ul li,
	.search-item ul li
	{
		color: #ffffff;
	}
	ul.list01 li.title
	{
		font-size: 1.167em;
		line-height: 1em;
		margin: 0 0 0.5em 0;
		background: none;
		padding: 0;
		font-weight: bold;
	}
	ul.list01 li a,
	.article ul li a
	.search-item ul li a
	{
		color: #18191d;
		text-decoration: underline;
	}
	
ul.list02
{
	margin: 0 0 1.25em 0;
}
	ul.list02 li
	{
		color: #fff;
	}
/* END: List styles */

/* START: @Form styles */
.form-container01
{
	padding: 0 0 0 27px;
}
	.form-container01 h3
	{
		color: #ffffff;
		margin: 0 0 2.167em 0;
	}
.cform fieldset
{
	border: none;
	margin: 0;
	padding: 0;
}
	.linklove,
	.cform legend
	{
		display: none;
	}
	.cform ol.cf-ol
	{
		padding: 0;
		margin: 0;
	}
		.cform ol.cf-ol li
		{
			list-style: none;
			float: left;
			width: 617px;
			margin: 0 0 1em;
		}
		.cform ol.cf-ol li.cf_li_err
		{
			background: #BE1515;
			padding: 10px;
			border: 1px solid #ffffff;
			width: 597px;
			border-radius: 0.5em;
			-moz-border-radius: 0.5em;
			-webkit-border-radius: 0.5em;
		}
	.cform .cf-sb
	{
		padding: 0 0 0 110px;
	}
.field01,
#content .fieldwrap
{
	margin: 0 0 0.833em 0;
	overflow: hidden;
}
	.field01 label,
	ol.cf-ol li label
	{
		width: 110px;
		display: block;
		float: left;
		color: #ffffff;
		text-align: right;
		margin: 0 10px 0 0;
	}
	.field01 input,
	ol.cf-ol li input
	{
		width: 464px;
		border: 1px solid #343434;
		float: left;
		line-height: 1.5em;
		padding: 3px 3px 4px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border-radius: 5px;
	}
	ol.cf-ol li input
	{
		margin-right: 3px;
	}
	.field01 textarea,
	ol.cf-ol li textarea
	{
		width: 463px;
		border: 1px solid #343434;
		overflow: auto;
		margin: 0;
		padding: 3px 3px 4px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border-radius: 5px;
	}
	.field01 input.button01,
	ol.cf-ol li input.button01,
	.form-container01 .button01
	{
		width: auto !important;
		border: none;
		padding: 0 0 0.833em 120px;
	}
	
	.field01.field02 textarea
	{
		width: 508px;
		height: 132px;
	}
	.failure,
	.success
	{
		margin-bottom: 1.833em;
		border:1px solid #ffffff;
		background: #BE1515 url(assets/ico_error.gif) 10px 50% no-repeat;
		padding: 10px 10px 10px 50px;
		min-height: 20px;
		height: auto !important;
		height: 20px;
		color: #ffffff;
		border-radius: 0.5em;
		-moz-border-radius: 0.5em;
		-webkit-border-radius: 0.5em;
	}
	.success
	{
		background: #109610 url(assets/ico_success.gif) 10px 50% no-repeat;
	}
	
#recaptcha_widget_div,
#recaptcha-submit-btn-area
{
	padding: 0 0 0.833em 148px;
}
#content p.recaptcha-error
{
	background-color: #be1515;
	margin-left: 238px;
	border: 1px solid #000;
	text-align: center;
	padding: 10px;
}

.subscribe-to-comments { padding: 0 0 0 146px; }
/* END: Form styles */

/* START: @Footer styles */
#footer, .push 
{
	height: 186px; /* .push must be the same height as .footer */
}
#footer
{
	background: url(assets/gr_bg_footer.gif) 0 0 repeat-x;
}
	#footer #innerfooter
	{
		background: url(assets/gr_bg_footer02.gif) 0 0 no-repeat;
		height: 186px;
	}
	#footer p
	{
		font-size: 0.917em;
		color: #ffffff;
		text-align: center;
		padding: 148px 0 0 0;
	}
/* END: Footer styles */

/* START: Coming soon styles */
.ninja
{
	position: absolute;
	left: 50%;
	bottom: 0;
	margin-left: -200px;
	cursor: pointer;
}
#ninja-attack
{
	width: 200px;
	height: 206px;
	position: absolute;
	top: 47%;
	right: 0;
	visibility: hidden;
}
/* END: Coming soon styles */