/*
 * General Styles
 */

.nav{
	list-style:none;
}
.nav li{
	float:left;
	margin:0 10px 0 10px;
}
.nav li a{
	color:#282828;
	text-decoration:none;
}
.nav li a:hover{
	color:#808080;
}
.ex{
	float:left;
	width:100%;
	border-bottom:solid 1px;
	padding-bottom:20px;
}



/*
 * Example 1: Transition
 */
.nav-1 li a{
	-webkit-transition:color .1s ease-in-out;
	-moz-transition:color .1s ease-in-out;
	-o-transition:color .1s ease-in-out;
	transition:color .1s ease-in-out;
}

/*
 * Example 2: nth-of-type
 */
.nav-2 li:nth-of-type(odd){
	margin-top:5px;
}
.nav-2 li:nth-of-type(even){
	margin-top:12px;
}
.nav-2 li:nth-of-type(2n+2){
	margin-right:0;
}
.nav-2 li:nth-of-type(2n+3){
	margin-left:8px;
	margin-right:25px;
}

/*
 * Example 3: Gradient
 * Gradient info: http://www.andrewgreig.com/2010/05/utilising-css3-gradients/
 */
form{
	width:300px;
	float:left;
}
form *{
	width:100%;
	float:left;
	margin:0;
	padding:0;
}
form label{
	margin:10px 0 0 0;
	font-size:12px;
	color:#333;
}
form input[type=text],
form textarea{
	background-image:-webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0, rgb(255,255,255)),
		color-stop(1, rgb(248,248,248))
	);
	
	background-image:-moz-linear-gradient(
		center bottom,
		rgb(255,255,255) 0%,
		rgb(248,248,248) 100%
	);
	
	outline:none;
	border:solid 1px #ccc;
}
form input[type=submit]{
	margin:10px 0 0 0;
	width:auto;
	padding:3px 2px;
}

/*
 * Bonus: Browser Incompatibility
 */
 .bonus h1{
	margin:10px 0 0 0;
	width:460px;
	font-family:hevelica,sans-serif;
}
.bonus h2{
	margin: 15px 0 0 0;
}
.bonus .nav{
	margin:0;
	padding:0;
	float:left;
	width:100%;
}
.bonus .nav li{
	margin:0 10px 0 0 ;
	padding:0;
}

.bonus p{
	margin:0;
	width:600px;
	font-size:14px;
}
.one{
	margin:40px 0 0 0;
}

@media all and (min-width:2px){
	.bonus h1{
		text-shadow: #aaa -3px 3px 5px;
	}
	.bonus{
		padding:0 20px 20px 20px;
	}
	.one{
		float:left;
		margin: 0 20px 0 0 ;
	}
	.bonus h2{
		width:300px;
		font-family:verdana, sans-serif;
		text-shadow: #aaa -3px 3px 5px;
		margin:15px 0 10px 0;
	}
	.bonus .nav{
		padding: 10px;
	}
	
	.bonus .nav li{
		-webkit-transform:rotate(-30deg);
		-moz-transform:rotate(-30deg);
		-o-transform:rotate(-30deg);
		transform:rotate(-30deg);
	}
	.bonus .nav li a{
		text-shadow:1px 1px 3px #aaa;
		-webkit-transition:text-shadow .2s ease-in-out;
		-moz-transition:text-shadow .2s ease-in-out;
		-o-transition:text-shadow .2s ease-in-out;
		transition:text-shadow .2s ease-in-out;
	}
	
	.bonus .nav li a:hover{
		text-shadow:-5px 1px 3px #999;
		padding-left:4px;
		margin-right:-4px;
		padding-bottom:4px;
		margin-right:-4px;
		color:#282828;
		
	}
	.bonus p{
		float:left;
		width:300px;
		padding: 10px;
		font-size:16px;
		
		-webkit-box-shadow: -3px 3px 5px #ccc;
		-moz-box-shadow: -3px 3px 5px #ccc;
		-o-box-shadow: -3px 3px 5px #ccc;
		box-shadow: -3px 3px 5px #ccc;
		
		-webkit-border-radius:5px;
		-moz-border-radius:5px;
		-o-border-radius:5px;
		border-radius:5px;
	}
}