/* Note dont forget to use a DOCTYPE of ...strict... for IE to work */
ul#nav {
	position:relative;
	top:0px
      z-index: 9999;
      font: 11px Helvetica;
      margin: 0;
	padding: 0;
	list-style: none;
      width: 100%;
}
ul#nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
ul#nav li {
	position: relative;
	float: left;
	width:102px;
	height:15px;
	line-height:15px;
      z-index: 9999;
}
#nav li ul {
	left: 100%;
	bottom:15px;
	margin-left:-999em;
}
#nav li ul ul {
	position: relative;
	left:100%;
	bottom: 15px;
}
/* Styles for Menu Items */
ul#nav li ul a {
	display:block;
	text-decoration: none;
	color: #000;
	height:15px;
	line-height:15px;
	width:102px;
	text-align:left;
	background:url(../images/menuback4.jpg) no-repeat 0 0;
}
ul#nav li a {
	display:block;
	text-decoration: none;
	color: #000;
	height:15px;
	line-height:15px;
	width:102px;
	text-align:left;
	background:url(../images/menuback.jpg) no-repeat 0 0;
}
ul#nav li ul li ul a {
	background:url(../images/menuback2.jpg) no-repeat 0 0;
}
ul#nav li ul li ul li ul a {
	background:url(../images/menuback3.jpg) no-repeat 0 0;
}

ul#nav li li {
	clear:left
}
/* this sets all hovered lists to red and current item */
#nav li.current a, #nav li:hover a, #nav li.over a, #nav li:hover li:hover a, #nav li.over li.over a, #nav li:hover li:hover li:hover a, #nav li.over li.over li.over a, #nav li:hover li a:hover, #nav li.over li a:hover, #nav li:hover li:hover li:hover a:hover, #nav li.over li li a:hover, #nav li:hover li:hover li:hover li:hover a:hover, #nav li.over li.over li.over li.over a:hover {
	color: red;
	background-position:0 -15px
}
/* set dropdown to default */
#nav li:hover li a, #nav li.over li a, #nav li:hover li:hover li a, #nav li.over li.over li a, #nav li:hover li:hover li:hover li a, #nav li.over li.over li.over li a {
	color: #000;
	background-position:0 0;
}
ul#nav li:hover ul ul, ul#nav li:hover ul ul ul, ul#nav li.over ul ul, ul#nav li.over ul ul ul {
	margin-left:-999em;
}
ul#nav li:hover ul, ul#nav li li:hover ul, ul#nav li li li:hover ul, ul#nav li.over ul, ul#nav li li.over ul, ul#nav li li li.over ul {
	margin-left:0;
}
ul#nav2 {
	position:relative;
	top:0px
      z-index: 9999;
      font: 11px Helvetica;
      margin: 0;
	padding: 0;
	list-style: none;
      width: 100%;
}
ul#nav2 ul {margin: 0; padding: 0; list-style: none;}
ul#nav2 li {
	position: relative;
	float: left;
  	width:102px;
	height:15px;
	line-height:15px;
      z-index: 9999;
}
#nav2 li ul {
	position: absolute;
	left: 0;
	bottom:15px;
	margin-left:-999em;
}
#nav2 li ul ul {position: absolute; left:100%; bottom: 0;}
/* Styles for Menu Items */
ul#nav2 li ul a {
	display:block;
	text-decoration: none;
	color: #000;
	height:15px;
	line-height:15px;
	width:102px;
	text-align:left;
	background:url(../images/menuback4.jpg) no-repeat 0 0;
}
ul#nav2 li a {
	display:block;
	text-decoration: none;
	color: #000;
	height:15px;
	line-height:15px;
	width:102px;
	text-align:left;
	background:url(../images/menuback.jpg) no-repeat 0 0;
}
ul#nav2 li ul li ul a {background:url(../images/menuback2.jpg) no-repeat 0 0;}
ul#nav2 li ul li ul li ul a {background:url(../images/menuback3.jpg) no-repeat 0 0;}
ul#nav2 li li { clear:left }
/* this sets all hovered lists to red and current item */
#nav2 li.current a, #nav2 li:hover a, #nav2 li.over a, #nav2 li:hover li:hover a, #nav2 li.over li.over a, #nav2 li:hover li:hover li:hover a, #nav2 li.over li.over li.over a, #nav2 li:hover li a:hover, #nav2 li.over li a:hover, #nav2 li:hover li:hover li:hover a:hover, #nav2 li.over li li a:hover, #nav2 li:hover li:hover li:hover li:hover a:hover, #nav2 li.over li.over li.over li.over a:hover {
	color: red;
	background-position:0 -15px;
}
/* set dropdown to default */
#nav2 li:hover li a, #nav2 li.over li a, #nav2 li:hover li:hover li a, #nav2 li.over li.over li a, #nav2 li:hover li:hover li:hover li a, #nav2 li.over li.over li.over li a {
	color: #000;
	background-position:0 0;
}
ul#nav2 li:hover ul ul, ul#nav2 li:hover ul ul ul, ul#nav2 li.over ul ul, ul#nav2 li.over ul ul ul {
	margin-left:-999em;
}
ul#nav2 li:hover ul, ul#nav2 li li:hover ul, ul#nav2 li li li:hover ul, ul#nav2 li.over ul, ul#nav2 li li.over ul, ul#nav2 li li li.over ul {
	margin-left:0;
}
/* Note: IE 6 and & 7 cause a z-index problem especially with top menu because it creates a 
new stacking order for z-index when it finds 
position:relative 
So put the z-index in the ul style section so the menu gets priority over the photo flip.
Note bookflip uses z-index of 0,1,2*/

@-ms-viewport{
  width: device-width;
}