/*
	SITE: houseofninja
	FILE: layout.css
	GEEK: @philsherry
	DATE: 2011-09-26
	WHAT: main layout files for all sizes

	Copyright 2002-2011 houseofninja. All rights reserved.
*/

/* ---- grid --------------------------------------------------------------- */
.row { height: 1%; }
.row-end { clear: both; font: 1px/1px sans-serif; height: 1px; overflow: hidden; }

.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 { float: left; margin-left: 30px; }
.col1:first-child, .col2:first-child, .col3:first-child, .col4:first-child, .col5:first-child, .col6:first-child, .col7:first-child, .col8:first-child, .col9:first-child, .col10:first-child, .col11:first-child, .col12:first-child { margin-left: 0; }
.col1 { width: 54px; }
.col2 { width: 138px; }
.col3 { width: 222px; }
.col4 { width: 306px; }
.col5 { width: 390px; }
.col6 { width: 474px; }
.col7 { width: 558px; }
.col8 { width: 642px; }
.col9 { width: 726px; }
.col10 { width: 810px; }
.col11 { width: 894px; }
.col12 { width: 978px; }

.alpha { margin-left: 0; }

.omega { margin-right: 0; }

li { list-style: square; }

/* ---- page --------------------------------------------------------------- */
body {
	background: #000 url(../images/back-tile.png);
}

#wrapper {
	background: #0c0c0c;
	border: 1px solid #7d0000;
	border-top: none;
	margin: 0 auto 2em;
	padding: 3em 2em 0;
	position: relative;
	width: 978px;
}

/* ---- header ------------------------------------------------------------- */
#site-header {
	height: 100px;
	text-indent: -31337px;
}

#site-header, 
#site-header a {
	display: block;
	height: 89px;
	width: 603px;
}

#site-header a {
	background: url(../images/house_of_ninja_title.gif) no-repeat;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
	filter: alpha(opacity=60);
	-moz-opacity: 0.6;
	-khtml-opacity: 0.6;
	opacity: 0.6;
	-moz-transition: all .25s ease-in-out;
	-webkit-transition: all .25s ease-in-out;
	transition: all .25s ease-in-out;
}

#site-header a:hover {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	-moz-opacity: 1;
	-khtml-opacity: 1;
	opacity: 1;
}

/* ---- site nav ----------------------------------------------------------- */
#site-nav {
	clear: both;
	display: block;
	float: left;
	margin-bottom: 20px;
}

#site-nav .col3 {
	color: #8a130f;
	letter-spacing: 1px;
}

#site-nav ul {
	background: #262626;
	border-left: 1px solid #7d0000;
	height: 6em;
	list-style: square;
	margin: 0;
	padding: 10px 0 0 20px;
}

#site-nav ul li {
	font: 10px Geneva, Arial, Helvetica, sans-serif;
	line-height: 1.3;
}

/* ---- content ------------------------------------------------------------ */
#areahead {
	border-bottom: 1px solid #181818;
	margin-bottom: 1em;
}

#content {}
	
	#content-main {}
		
	#content-sub {
		margin-bottom: 10px;
		padding-bottom: 10px;
	}
	
		#content-sub,
		#content-sub ins {
			background: #111;
		}

/* ---- lesson ------------------------------------------------------------- */
#lesson-pics {}
	
	#lesson-pics li {
		float: left;
		width: 100%;
	}
		
		#lesson-pics .thumb {
			background: #222;
			-moz-border-radius: 8px;
			-webkit-border-radius: 8px;
			border-radius: 8px;
			border: 1px solid #000;
			-moz-box-shadow: inset 0 0 5px rgba(0,0,0,.8);
			-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,.8);
			box-shadow: inset 0 0 5px rgba(0,0,0,.8);
			float: left;
			margin-right: 2em;
			padding: 10px;
		}

		#lesson-pics .description {
			overflow: hidden;
		}

/* ---- footer ------------------------------------------------------------- */
#site-footer {
	border-top: 1px dotted #650e0b;
	clear: both;
	color: #777;
	display: block;
	font: 10px Geneva, Arial, Helvetica, sans-serif;
	margin-top: 10px;
	padding-top: 10px;
}

/* ---- google ads --------------------------------------------------------- */
.gads {
	
}

#gads-foot {
	background-color: #000; 
	border-spacing: 0px; 
	border: 1px solid #600; 
	list-style: none; 
	margin: 1em 0; 
	overflow: hidden; 
	padding: 0;
	width: 100%; 
}

	#gads-foot li {
		clear: none; 
		display: inline;
		float: left; 
		margin: 0; 
		padding: 0; 
		width: 33%; 
	}
	
		#gads-foot li span {
			padding: 10px;
		}
	
		#gads-foot li a,
		#gads-foot li span {
			color: #c00;
			font-size: 10px; 
		}

#gads-side {
	
}

/* ---- gallery ------------------------------------------------------------ */
#album {
	display: block;
	clear: both;
	width: 810px;
}

#album td a {
	border-bottom-style: none;
	text-decoration: underline;
}