/* CSS Document */
/* common styling */
.menu {
	font-family: "Comic Sans MS", Verdana, Arial, Helvetica, sans-serif;
	position:relative; 
	margin:0; 
	font-size:18px; 
	z-index:900;
}

.menu ul {
	padding:0; 
	margin:0;
	list-style-type: none; 
}

.menu ul li {
	float:left;
	line-height:20px;
}

.menu ul li a, .menu ul li a:visited {
	display:block; 
	text-decoration:none; 
	color:#36009b;
	height:100%;
	text-align:center;
	line-height:20px;
}


.menu ul li ul {
	display: none;
}

 /*.menu a:active, .menu a:focus {
  reduce the link size to zero when the link is in the 
  active/focus state.
  This literally removes the dotted border which is ONLY applied
  to the link itself and not any containing elements WHEN THOSE
  ELEMENTS HAVE A POSITION ABSOLUTE! 
  width:0; height:0;
  outline:0; /* for browsers that understand 
}*/

/* specific to non IE browsers */

.menu ul li:hover ul {
	display:block; 
	position:absolute;
	width:150px;
	left:362px;
	top:75px;
	line-height:30px;
}

.menu ul a.home, .menu ul a.home:visited {
	background:transparent url(images/home.gif);
	width:236px;
	height:55px;
	padding:0;
	top:0;
	left:0px;
	position:absolute;
}

.menu ul a.game, .menu ul a.game:visited {
	background:transparent url(images/game.gif);
	width:213px;
	height:51px;
	top:18px;
	left:191px;
	padding:0;
	position:absolute;
}

.menu ul a.orders, .menu ul a.orders:visited {
	background:transparent url(images/orders.gif);
	width:186px;
	height:45px;
	top:34px;
	left:362px;
	padding:0;
	position:absolute;
}

.menu ul a.fyi, .menu ul a.fyi:visited {
	background:transparent url(images/fyi.gif);
	width:169px;
	height:42px;
	top:48px;
	left:512px;
	padding:0;
	position:absolute;
}

.menu ul a.contact, .menu ul a.contact:visited {
	background:transparent url(images/contact.gif);
	width:147px;
	height:38px;
	top:61px;
	left:650px;
	padding:0;
	position:absolute;
}



.menu ul li:hover ul li a {
	display:block; 
	background:#fff;
	border:#36009b solid 1px;
	color:#36009b;
	width:150px;
	height:30px;
	padding-top:5px;
}

.menu ul li:hover ul li a#non {
	border-top:none;
}

	
.menu ul li:hover ul li a:hover {
	color:#fff; 
	background:#36009b;
}