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


body {
	font-family: Helvetica, Arial, Verdana, sans-serif;
	background:#bfbfbf;

	
}


.menuBtn {

	background: center center no-repeat transparent;
	background: #000;
	display: block;
	width: 40px;
	height: 40px;
	position: absolute;
	top: 0;
	left: 10px;

}

.active {
	background: #3B5323;
}
.clear {
	clear: both;
}
.wrap {
		/*background:url(../images/bg.png) top left repeat-x;*/
		width: 100%;
		z-index: 10;
		position: relative;
		margin: 0 auto;
		padding: 0;

}



.section {
	width: 100%;
	z-index: 10;
	position: relative;
	margin: 0 auto;
	padding: 0;
}


.inner {
	width: 100%;
	margin: 0 auto;
	position: relative;
	min-height: 50px;
	padding:30px 0;
	padding:30px 0;
}


/* This is the selector i used for my menu, it needs to be set as position:absolute; */
.subMenu {
	position: absolute;
	top: 446px;
	height: 114px;
	z-index: 1000;
	width: 100%;
	background: #314755;
}

.subMenu .inner {
	padding:0;
}


.subNavBtn {
	background:url(../images/nav.png) 0 0 no-repeat;
	display: block;
	height: 114px;
	width: 140px;
	float: left;
	margin: 0px 0px 0 0;
	text-decoration: none;
	text-indent: -9999px;
}

a#sTop { background-position:      0 0; }
a#s1   { background-position: -140px 0; }
a#s2   { background-position: -280px 0; }
a#s3   { background-position: -420px 0; }
a#s4   { background-position: -560px 0; }

a#sTop:hover { background-position:      0 100%; }
a#s1:hover   { background-position: -140px 100%; }
a#s2:hover   { background-position: -280px 100%; }
a#s3:hover   { background-position: -420px 100%; }
a#s4:hover   { background-position: -560px 100%; }

/*a#sTop.active { background-position:      0 100%; }*/
a#s1.active   { background-position: -140px 100%; }
a#s2.active   { background-position: -280px 100%; }
a#s3.active   { background-position: -420px 100%; }
a#s4.active   { background-position: -560px 100%; }

.end {
	margin: 0;
}