/************************************************************************************
GENERAL
*************************************************************************************/
body  { color: #fff; font: 0.9em/150% "Trebuchet MS", Arial, Helvetica, sans-serif }
a {
	text-decoration: none;
	color: #39C;
}
h1, h2 {
	line-height: 120%;
	margin: 0 0 10px;
	color: #000;
}
header {
	content: " "; 
	display: table; 
}


/************************************************************************************
STRUCTURE
*************************************************************************************/
#pagewrap {
	width: 960px;
	max-width: 94%;
	margin: 30px auto 0;
}
#content {
	clear: both;
	border-top: solid 1px #ccc;
	padding-top: 20px;
	margin: 20px 0;
}

/************************************************************************************
NAV
*************************************************************************************/
#nav-wrap   { margin-top: 20px; position: relative }

/* menu icon */
#menu-icon  { display: none }

#nav, 
#nav li {
	margin: 0;
	padding: 0;
}
#nav li {
	list-style: none;
	float: left;
	margin-right: 5px;
}

/* nav link */
#nav a  { color: #000; background: #d57715; display: block; padding: 4px 15px }
#nav a:hover  { background: #d57715 }

/* nav dropdown */
#nav ul     { background: #d57715; display: none; padding: 2px; position: relative; width: 100px; border: solid 1px }
#nav ul li {
	float: none;
	margin: 0;
	padding: 0;
}
#nav li:hover > ul {
	display: block; /* show dropdown on hover */
}

/************************************************************************************
MOBILE
*************************************************************************************/
@media screen and (max-width: 600px) {

	/* nav-wrap */
	#nav-wrap    { position: relative }

	/* menu icon */
	#menu-icon   { color: white; background-image: none; background-repeat: repeat; background-attachment: scroll; background-position: 0 0; cursor: pointer; display: block; padding: 8px 10px 0 42px; position: relative; width: 43px; height: 30px }
	#menu-icon:hover    { color: lime }
	#menu-icon.active   { color: #ffff9a }
	
	/* main nav */
	#nav    { color: #fff; background: #e18700; display: none; padding: 5px; position: absolute; z-index: 10000; top: 38px; width: 100px; clear: both; border: solid 1px #999 }
	#nav li {
		clear: both;
		float: none;
		margin: 5px 0 5px 10px;
	}
	#nav a, 
	#nav ul a {
		font: inherit;
		background: none;
		display: inline;
		padding: 0;
		color: #666;
		border: none;
	}
	#nav a:hover, 
	#nav ul a:hover {
		background: none;
		color: #FFFFC1;
	}
	
	/* dropdown */
	#nav ul {
		width: auto;
		position: static;
		display: block;
		border: none;
		background: inherit;
	}
	#nav ul li {
		margin: 3px 0 3px 15px;
	}

}

@media screen and (min-width: 600px) {

	/* ensure #nav is visible on desktop version */
	#nav  { display: block !important; position: relative }

}
}