* { margin: 0; padding: 0; border: 0; outline: 0;}

body {background-color:white; margin: 0px; padding: 0px; font-size:100%; 	font-family: Georgia, "Times New Roman", Serif;}

#page {margin: 25px auto; width:90%; max-width:1200px;min-width:275px;}

.center {text-align:center;}
.bold {font-weight:bold;}

#headerbox {position:relative; padding-bottom:18.51%; width:100%; min-width:250px; height:0;}
#header {position: absolute; width: 100%; height:100%; overflow:hidden;}
	#header .upper {position: relative; padding-bottom: 10.6%; width:100%; height:0; z-index:100;}
		#header .upperleft {position:absolute; left:0; width: 30%; height: 100%; z-index:150;}
			#header .upperleft img {width: 100%; z-index: 150;}
		#header .upperright {position:absolute; right:0; width: 93%; height: 100%; border-bottom: 3px solid #663300; z-index: 100;}
			#header .upperright p {position: absolute; right:0; bottom:0; text-align: right; vertical-align: bottom; 
			font-family: 'Great Vibes', Helvetica, sans-serif;
			font-size: 2em; 
			color: #0f0d0f; padding-right: 5px;}

	#header .lower {position:relative; padding-bottom: 8.75%; width: 100%; height:0; z-index:50;}
		#header .lowerleft {position:absolute; left:0; width: 22%; min-width: 250px; height: 100%; background-color: #ffcc66;}
		#header .lowerright {position:absolute; top: -1; right:0; width: 91%; height: 100%; }

#nav {float:right; }
	#nav ul {list-style:none;}
	#nav li {display: inline-block; background:#ffcc66; padding:10px; border-radius: 0 0 10px 10px; }
	#nav a {color: #222222; text-decoration:none;}
	#nav li:hover {background: #cc6600; color:#888888;}

#leftSide {clear:both; float: left; width:22%; min-width: 250px; background-color: #ffcc66;}
	#leftSide .inner {padding: 5px;}
	#leftSide p {text-align:center; margin-top: 10px; margin-bottom:5px:}
	#leftSide ul {list-style-type: none; padding-left: 10px; font-family: 'Droid Sans Mono', Courier, monospace; text-align:center;}
	#leftSide .heading {font-weight:bold; font-size:1.3em;}
	#leftSide .subheading {font-weight: 600; font-size:1.1em;}
	hr {border: 1px solid #555555; width: 75%; margin: 10px auto;}

#content {}
	#content .inside {width: 100%; background-color: white; color: black;}

#footer {clear:both; background-color: #d3d3d3; width:100%;}

#menu {display:none; }
#nav2 {display:none; }

@media screen and (max-width: 800px) {   
	
	#headerbox {padding-bottom: 46.28%; }
	#header .upper {padding-bottom: 26.51%; }
	#header .lower {padding-bottom: 19.77%; }
	#header .upperleft, lowerleft {width: 75%;}
	#header .upperright p {display: none; }

	#nav {display: none;}
	#menu {z-index:250; display:inline; width:1.4em; border-radius: 5px; background:#ffcc66; position:absolute; top:25px; right:25px; font-size:1.35em; text-align: center; padding:0; margin:0;}

	#nav2 {position:absolute; float:right; width:150px; background:#bbb; z-index:200; border-radius: 10px 10px; top:35px; right:35px;}
	#nav2 ul {list-style:none; width:100px; margin: 0 auto; padding:10px; padding-top: 20px;}
	#nav2 li {background:#ffcc66; margin-top:10px; padding:10px; border-radius: 10px 10px; text-align:center; }
	#nav2 a {color: #222222; text-decoration:none;}
	#nav2 li:hover {background: #cc6600; color:#888888;}

}

@media screen and (max-width: 600px) {   
	#nav li {display:block; border-radius:0;}	


	#header .lowerleft {width:100%;}
	#leftSide {width:100%;}
	
}