ul#nav {
	position: absolute;
	background: url(../images/bGrounds/tabs02.png) no-repeat;
	width: 675px;
	height: 48px;
	top: -10px;
	left: 350px;

}

ul#nav li {
	float: left;
	margin-left: 30px;
	cursor: pointer;
	position: relative;
	top: 10px;
	z-index: 1;
	/* allows "The War" link to be on top of the fillerDiv div */
}

ul#nav li#first {
	margin-left: 20px;
}

ul#nav a#theArt {
	/*
	background: url(../images/navLinks/nav04.png) no-repeat left top;
	height: 30px;
	width: 64px;*/
	margin-left: 15px;
}

ul#nav a#theLibrary {
	/*
	background: url(../images/navLinks/nav05.png) no-repeat left top;
	height: 30px;
	width: 66px;*/
	margin-left: 20px;
}


/* Menu style */
.subMenu {
	background-color: rgba(0, 0, 0, 0.2);
	width: 41.5rem;
	transform: scale(1.2);
	/*width:100%;        stretch container div over width of page */
	overflow: hidden;
	/* hide any overflow of this div */
	position: relative;
	margin: 0 auto;
}

/* Selects the <ul> inside the .subMenu class (div) */
.subMenu ul {
	/*height:350px;*/
	height: 340px;
	position: relative;
	display: block;
	/* display as a block-level element */
	width: 1000px;
	/* give the <ul> enough width so <li>'s don't wrap */
}

/* Selects all <li>'s in the <ul> inside the .subMenu div */
.subMenu ul li {
	float: left;
	/*width:75px;*/
	width: 120px;
	/*height:350px;*/
	height: 340px;
	position: relative;
	overflow: hidden;
	/* hide any overflow for these <li> elements */
	border-right: 2px solid #111;
}

/* Selects the .menuPreview <span> which will contain the
   black and white background image positioned absolutely */
.menuPreview {
	width: 120px;
	height: 340px;
	cursor: pointer;
	position: absolute;
	top: 0px;
	left: 0px;
	background: transparent url(../images/bw.png) no-repeat top left;
}

/* Selects the .menuImage <span> which will contain the
   color background image positioned absolutely.  Its position
   and opacity will be animated via jquery...   */
.menuImage {
	position: absolute;
	left: 120px;
	/* note this is positioned further to the right */
	top: 0px;
	/*width:75px;*/
	width: 120px;
	/*height:350px;*/
	height: 340px;
	opacity: 0.2;
	/* set its beginning opacity to 20% */
	background: transparent url(../images/color.png) no-repeat top left;
}

/* Define the positioning of the background for both the 
   .menuPreview and .menuImage <span>'s within their parent
   link (<a>) elements (.pos1, .pos2, etc... classes) */
.pos1 span {
	background-position: 0px 0px;
}

.pos2 span {
	background-position: -120px 0px;
	/*background-position:-75px 0px;*/
}

.pos3 span {
	background-position: -240px 0px;
	/*background-position:-152px 0px;*/
}

.pos4 span {
	background-position: -360px 0px;
	/*background-position:-227px 0px;*/
}




.menuDescription {
	position: absolute;
	width: 270px;
	height: 320px;
	border-right: 7px solid #bbb090;
	padding: 20px;
	left: 140px;
	top: 10px;
	background: #fff;
}


.menuDescription h2 {

	font-size: 26px;
	color: #6b634c;
	padding: 10px;
	text-shadow: 0px 0px 1px #fff;
}


.menuDescription h3 {

	color: #d8cfb4;
	font-size: 16px;
	text-shadow: 0px 0px 1px #000;
	font-style: normal;
	padding: 10px;
	background: #6b634c
}


.menuDescription p {
	color: #000;
	padding: 10px 5px 0px 5px;
	line-height: 18px;
	font-size: 12px;
	text-align: justify;
}

ul.subNav {
	margin-top: -10px;
	/*display: inline;*/
	list-style-type: square;
	list-style-position: inside;
	margin-left: 0px;
	padding-left: 10px;
	width: 270px;
	color: #000;
}

ul.subNav li {
	border-right: none;
	float: left;
	margin: 0;
	padding: 0;
	height: auto;
	width: 210px;
	text-align: left;
	overflow: visible;
	/*text-transform:uppercase;*/
}

ul.subNav li a {
	color: #6b634c;
	font-size: 12px;
}

ul.subNav li a:hover {
	color: #bbb090;
}

.shadowPic {
	background: #6b634c url(../images/bottomShadow.png) no-repeat center top;
	height: 14px;
}

#picDiv {
	/*background: #dbccae url(../images/Uhlans.png) no-repeat center top;*/
	background: #6b634c url(../images/Uhlans.png) no-repeat center top;
	width: 960px;
	height: 260px;
	position: relative;
}