body {
	font-family: 'Open Sans', sans-serif;
	background: url(i/sky.jpg) #bfe1f7 repeat-x left top;
	color: #000;
}

* { margin: 0; padding: 0; }

img { border: 0;}

a { color: #363; }

#main {
	width: 1100px;
	margin: 0 auto;
}

#becker_drive_sign {
	display: block;
	width: 236px;
	height: 583px;
	background: url(i/becker_drive.png) no-repeat left top;
	margin: 15px 0 0 12px;
	float: left;
	padding-left: 5px;
}

#guts {
	padding-left: 245px;
}

#nav { 
	list-style: none;
	width: 700px;
	height: 65px;
	margin: 0 auto;
	}
	
	#nav li { 
		float: left; 
		margin: 0 9px;
	}

	#nav li a {
		display: block;
		background: url(i/nav_sprite.png) no-repeat 0 0;
		width: 157px;
		height: 47px;
	}
	#nav li a:hover, #nav li a.on { height: 65px; }
	
	#nav li#home a { background-position: 0 -18px; }
	#nav li#aboutme a { background-position: -170px -18px; }
	#nav li#contact a { background-position: -341px -18px; }
	#nav li#examples a { background-position: -517px -18px; }
	
	#nav li#home a:hover, #nav li#home a.on { background-position: 0 0; }
	#nav li#aboutme a:hover, #nav li#aboutme a.on { background-position: -170px 0; }
	#nav li#contact a:hover, #nav li#contact a.on { background-position: -341px 0; }
	#nav li#examples a:hover, #nav li#examples a.on { background-position: -517px 0; }
	
#inner_guts {
		padding: 80px 80px 40px 80px;
		font-size: 1.4em;
		text-align: center;
	}
	
	h2, h3, h4 { margin-bottom: .4em; }

	.subheader { 
		font-size: .55em;
		font-weight: normal;
		margin-left: .5em;
	}
	
	#inner_guts p { margin-bottom: 1em; }
	
	
	/****EXAMPLES****/
	.example_block { margin: 1.5em 0; }	
	
#footer {
		clear: both;
		text-align: center;
		margin: 15px auto;
	}
	
	#footer .fp1 { font-weight: bold; }
	#footer .fp2 { font-size: 1.5em; }
	#footer .fp2 li { 
		background: url(i/dot.png) no-repeat 0 13px;
		display: inline; 
		padding: 0 9px 0 20px;
	}
	#footer .fp2 li.first { 
		background: none;
		padding-left: 5px;
	}
	#footer .fp3 { font-size: .9em; }
	

/********************RESPONSIVE PART*/
/* SCREEN < 1120 PIXELS WIDE -- SQUISH IT A BIT */
@media screen and (max-width: 1120px) {
	#main { width: 960px; }
	#nav { width: 653px; }
	#nav li { margin: 0 3px; }
}

/* SCREEN < 980 PIXELS WIDE -- PERCENT FLEX */
@media screen and (max-width: 980px) {
	#main { width: 100%; }
	
	#nav { width: 480px; }
	#nav li { margin: 0 2%; }
	
	#nav li a {
		width: 100px;
		height: 31px;
	}
	#nav li a:hover, #nav li a.on { height: 41px; }
	
	#nav li#home a { background-position: 0 -98px; }
	#nav li#aboutme a { background-position: -170px -98px; }
	#nav li#contact a { background-position: -341px -98px; }
	#nav li#examples a { background-position: -517px -98px; }
	
	#nav li#home a:hover, #nav li#home a.on { background-position: 0 -89px; }
	#nav li#aboutme a:hover, #nav li#aboutme a.on { background-position: -170px -89px; }
	#nav li#contact a:hover, #nav li#contact a.on { background-position: -341px -89px; }
	#nav li#examples a:hover, #nav li#examples a.on { background-position: -517px -89px; }
}

/* SCREEN < 750 PIXELS WIDE / MOBILE WIDE -- STACKED */
@media screen and (max-width: 750px) {
	#becker_drive_sign { 
		height: 124px;
		float: none;
		margin: 0 auto 10px auto;
		background-position: 0 -77px;
	}
	#guts { 
		padding: 0; 
		border-top:2px solid #000;
	}
	
	#nav { width: 400px; }
	#nav li { margin: 0 0; }
}

/* SCREEN < 750 PIXELS WIDE / MOBILE SKINNY -- STACKED */
@media screen and (max-width: 400px) {
	#guts { border: none; }
	
	#nav { width: 220px; }
	#nav li { 
		margin: 0 5px 5px 5px; 
		border-top:2px solid #000; 
	}
	#nav li#contact { clear: left; }
}