
/* 
Drop-o-matic Styles
Created: 8.12.2010
Author: Sam Napolitano
URL: http://www.napolitopia.com/
*/

/* this is the only class selector you need. */ 
.drop{
	padding:15px;
	color:#fff;
	background:#333;
	background:rgba(33,33,33, .95);
	border-radius:0px 0px 5px 5px;
	-webkit-border-radius:0px 0px 5px 5px;
	-moz-border-radius:0px 0px 5px 5px;
	-webkit-box-shadow:7px 7px 10px rgba(66,66,66, .5);
	-moz-box-shadow:7px 7px 10px rgba(66,66,66, .5);

}

	.drop p{
		font:12px/16px Verdana, Sans-Serif;
		color:#fff;
	}
	
	.drop a{
		color:#fff;
		text-decoration:none;
	}
	
	.drop a:hover{
		color:#999;
	}

	.drop ul{
		list-style-type:square;
		color:#ee0000;
		margin:0px 0px;
		padding-left:30px;
		float:left;
		border-left:1px dashed #666;
	}
	
	.drop ul:first-child{
		border:0px;
		padding:0px 18px;
	}

		.drop ul li{
			margin:5px 0px 0px;
		}
		
		.drop ul li:first-child{
			margin:0px;
		}
		
	.drop strong{
		color:#ee0000;
		font-weight:bold;
	}
	
	.drop input[type=text], input[type=email]{
		padding:0px;
		margin:0px;
		font-size:12px;
		color:#ccc;
		border:0px;
		background:none;
		border-bottom:1px dashed #fff;
	}
	
	.drop input[type=submit]{
		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);
		float:right;
	}
	
	.drop textarea{
		font-size:12px;
		color:#ccc;
		margin:10px 0px;
		padding:5px;
		width:65px;
		height:50px;
		background:none;
		border:1px dashed #fff;

	}


/* this is all just for show but feel free to reuse my HTML5 wireframe */
body{
	margin:0px;
	padding:25px;
	background:#eee;
	font:12px Verdana;
}

a{
	color:#999;
	text-decoration:none;
}

a:hover{
	color:#666;
	text-decoration:none;
}

h1{
	font-size:18px;
	margin:0px 0px 5px 0px;
	padding:0px 0px 5px 0px;
	border-bottom:1px solid #eee;
}

h2{
	font-size:14px;
}

strong{
	font-weight:bold;
}

#container{
	width:800px;
	margin:0 auto;
}

header{
	width:750px;
	margin:10px 0px;
	padding:25px;
	background:#fff;
	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);
}

	header hgroup{
	
	}


nav{
	position: fixed; 
	top: 10px; 
	right:300px;
	width:100px;
	padding:15px;
	margin:10px 0px;
	text-align: left;
	background:#fff;
	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{
		text-align:left;
		margin:0px;
		padding:0px;
	}
	
		nav ul li{
			text-align:left;
			margin:0px;
			padding:0px;
			display:inline;
		}
	
			nav ul li a{
				color:#000;
				padding:15px;
			}
	
			nav ul li a:hover{
				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;
			}
	
			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;
			}

article{
	width:540px;
	margin:10px 0px;
	padding:25px;
	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;
}

	article p{
		margin:15px 0px;
		line-height:20px;
	}

section{
	display:block;
}

aside{
	width:150px;
	margin:0px 0px 10px 10px;
	padding:25px;
	background:#fff;
	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:750px;
	margin:10px auto;
	padding:25px;
	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;
	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;
		}