/* 
Tab-u-Lator Styles
Created: 1.26.2011
Author: Sam Napolitano
URL: http://www.napolitopia.com/
*/

@import url(reset.css);

/* 

	Below are some sample tab styles, nothing here is necessary you can style the tabbed content containers as you see fit. 
	The headers will live in a <div id="tabbed_headers"></div> element after the JS runs and the articles 
	will live in <div id="tabbed_articles"></div>. Below are CSS templates for both the headers and articles. 
	The heirarchy looks like this:
	#tabbed_content	-> #tabbed_headers -> header -> a
	#tabbed_content	-> #tabbed_articles -> article -> your content
	
	and here is the template:
	
	#tabbed_content{}
	
	#tabbed_headers{}	
	#tabbed_headers header a{}
	#tabbed_headers header a:hover{}
	#tabbed headers header.active{}
	#tabbed_headers header:hover{}
	
	#tabbed_articles{}
	#tabbed_articles article{}
	#tabbed_articles article ul{}
	#tabbed_articles article ul li{}
	#tabbed_articles article a{}
	#tabbed_articles article a:hover{}
	#tabbed_articles article img{}
	
	Now for some sample styles. 
*/

#tabbed_content{
	position:relative;
	float:left;
	margin:10px 0px;
}
	
	#tabbed_headers{
		position:relative;
		z-index:98;
		margin-left:10px;
	}
	
	#tabbed_headers header{
		position:relative;
		width:inherit;
		display:inline;
		padding:10px;
		margin:0px;
		border-radius:5px 5px 0px 0px;
		-webkit-border-radius:5px 5px 0px 0px;
		-moz-border-radius:5px 5px 0px 0px;
		-webkit-box-shadow:0px 0px 10px rgba(66,66,66, .25);
		-moz-box-shadow:0px 0px 10px rgba(66,66,66, .25);
	}
	
		#tabbed_headers header.active{
			background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#fff));
			background: -moz-linear-gradient(top,  #ccc,  #fff);
		}
	
			#tabbed_headers header.active a{
				color:#333;
			}
	
		#tabbed_headers header:hover{
			background:#333;
			background:rgba(33,33,33, .90);
			color:#fff;
		}
	
			#tabbed_headers header:hover a{
				color:#fff;
			}

	#tabbed_articles{
		position:relative;
		background:#fff;
		border-radius:5px;
		-webkit-border-radius:5px;
		-moz-border-radius:5px;
		-webkit-box-shadow:0px 0px 10px rgba(66,66,66, .25);
		-moz-box-shadow:0px 0px 10px rgba(66,66,66, .25);
		display:block;
		z-index:99;
	}
	
		#tabbed_articles article{
			width:540px;
			height:225px;
			margin:10px 0px;
			padding:20px 25px;
		}

			#tabbed_articles article p{
				margin:10px 0px;
				font:12px/16px Verdana, Sans-Serif;
				color:#333;
				float:left;
			}

			#tabbed_articles article a{
				color:#666;
				text-decoration:none;
			}

			#tabbed_articles article a:hover{
				color:#ee0000;
			}

			#tabbed_articles article ul{
				list-style-type:square;
				color:#ee0000;
				margin:15px 0px;
				padding:0 18px 0 30px;
				float:left;
				border-left:1px dashed #666;
			}

					#tabbed_articles article ul.first{
						border:0px;
						padding:0px 18px;
					}

				#tabbed_articles article ul li{
					margin:5px 0px 0px;
				}

					#tabbed_articles article ul li:first-child{
						margin:0px;
					}

			#tabbed_articles article strong{
				color:#ee0000;
				font-weight:bold;
			}

			#tabbed_articles article input[type=text], input[type=email]{
				padding:0px;
				margin:0px;
				font-size:15px;
				color:#333;
				border:0px;
				border-bottom:1px dashed #999;
			}

			#tabbed_articles article input[type=submit], input[type=reset]{
				padding:5px 10px;
				background:#fff;
				background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc));
				background: -moz-linear-gradient(top,  #fff,  #ccc);
				border:0px;
				border-radius:5px;
				-webkit-border-radius:5px;
				-moz-border-radius:5px;
				-webkit-box-shadow:0px 0px 10px rgba(66,66,66, .25);
				-moz-box-shadow:0px 0px 10px rgba(66,66,66, .25);
			}

			#tabbed_articles article textarea{
				font-size:17px;
				color:#333;
				margin:10px 0px;
				padding:5px;
				width:96%;
				height:80px;
				border:1px dashed #999;

			}

/* this is all just for show but feel free to reuse my HTML5 wireframe */
body{
	margin:0px;
	padding:25px;
	background:transparent;
	font:12px Verdana;
}

a{
	color:red;
	text-decoration:none;
}

a:hover{
	color:#FFF;
	text-decoration:none;
}

h1{
	font-size:18px;
	margin:0px 0px 5px 0px;
	padding:0px 0px 5px 0px;
}

h2{
	font-size:14px;
}

strong{
	font-weight:bold;
}

#container{
	width:800px;
	margin:0 auto;
}

header{
	width:750px;
	margin:10px 0px;
	padding:25px;
	background:#000;
	display:block;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	-webkit-box-shadow:0px 0px 10px rgba(66,66,66, .25);
	-moz-box-shadow:0px 0px 10px rgba(66,66,66, .25);
}

nav{
	width:770px;
	padding:15px;
	margin:10px 0px;
	background:#000;
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc));
	background: -moz-linear-gradient(top,  #fff,  #ccc);
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	-webkit-box-shadow:0px 0px 10px rgba(66,66,66, .25);
	-moz-box-shadow:0px 0px 10px rgba(66,66,66, .25);
	display:block;
}

	nav ul{
		margin:0px;
		padding:0px;
	}
	
		nav ul li{
			margin:0px;
			padding:0px;
			display:inline;
		}
	
			nav ul li a{
				color:#000;
				padding:15px;
			}
	
			nav ul li a:hover{
				color:#000;
				background:#333;
				background:rgba(33,33,33, .90);
				border-radius:5px 5px 0px 0px;;
				-webkit-border-radius:5px 5px 0px 0px;
				-moz-border-radius:5px 5px 0px 0px;
			}
	
			nav ul li a.active{
				color:#fff;
				background:#333;
				background:rgba(33,33,33, .90);
				border-radius:5px 5px 0px 0px;;
				-webkit-border-radius:5px 5px 0px 0px;
				-moz-border-radius:5px 5px 0px 0px;
			}



aside{
	width:150px;
	margin:0px 0px 10px 10px;
	padding:25px;
	background:#000;
	float:right;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	-webkit-box-shadow:0px 0px 10px rgba(66,66,66, .25);
	-moz-box-shadow:0px 0px 10px rgba(66,66,66, .25);
	display:block;
}

footer{
	width:fit-content;
	margin:10px auto;
	padding:25px;
	background:transparent;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	-webkit-box-shadow:0px 0px 10px rgba(66,66,66, .25);
	-moz-box-shadow:0px 0px 10px rgba(66,66,66, .25);	
	display:block;
	clear:both;
}

	footer ul{
		margin:10px 0px;
		padding:10px 0px;
		border-top:1px solid #eee;
	}
	
		footer ul li{
			font-size:10px;
			margin:10px;
			display:inline;
		}
		
		footer ul li:first-child{
			margin-left:0px;
		}