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


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

/************************************************************************************
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: ActiveCaption; display: block; padding: 4px 15px }
#nav a:hover   { background: ActiveCaption }

/* nav dropdown */
#nav ul      { background: ActiveCaption; 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: white }
	
	/* main nav */
	#nav      { color: #fff; background: #acec0a; display: none; padding: 5px; position: absolute; z-index: 10000; top: 38px; width: 100px; clear: both; border: solid 1px black }
	#nav li {
		clear: both;
		float: none;
		margin: 5px 0 5px 10px;
	}
	#nav a, 
	#nav ul a  { color: black; font: inherit inherit inherit inherit/inherit inherit; background: transparent; display: inline; padding: 0; 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: center }

}
}