/* In order to not affect the rest of ul tags, for every subdirectory/child in the navigation, make sure to check that the padding and margin is 0px, otherwise it will get confused. */

ul#nav, ul#nav li, ul#nav li ul {
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
}

/* The navigation bar container. */

ul#nav{
	list-style: none;
	font-family: "Comic Sans MS", "MarkerFelt-Thin", cursive, sans-serif;
	width: 100%;
	text-align: center;
	font-size: 14px;
	color:#CFF;
}

/* The 'main' items in the navigation bar, i.e. 'Forces etc'. */

ul#nav li{
	float:left;
	position:relative;
	width:16.6%;
}
ul#nav li{
	float:left;
	position:relative;
	width:16.6%;
}

ul#nav a, ul#nav p{
	display: block;
	text-decoration:none;
	padding-left: 5%;
	line-height: 28px;
	background-color: transparent;
	color: #F2FFFF;
}

#nav a:hover {
	color: #344E4E;
	cursor: pointer; /* Hand pointer */
}

/* The following is the style for the sub menus. */

ul#nav ul{
	list-style:none;
	position:absolute;
	display:none;
	font-size:12px;
	padding-top:1px;
	text-align:left;
}

ul#nav ul li{
	float:left;
}

ul#nav ul#topic li {
	width:200px;
}

ul#nav ul#extras li {
	width:265px;
}
ul#nav ul#user li {
	width:195px;
}

ul#nav ul#exam li {
	width:310px;
}

ul#nav ul#thinking li {
	width:255px;
}

ul#nav ul#contact li {
	width:255px;
}

#nav li:hover ul{ /* Display the dropdown on hover */
	display: block;
	margin-left:0px;
}

/* This is the settings of the selected menu. */

ul#nav li:hover a, ul#nav li:hover p{
	color:#F2FFFF;
	background-color:#004262;
	background-image:url(graphics/backgrounds/choicebgteal2.png);
	border-bottom: 3px #006666 solid;
	opacity:1;
}

/* What any given sub menu item will look like when the cursor hovers over it. */

#nav li:hover ul li a:hover{
	background-image:none;
	background-color: #A4E1FF;
	color:#006084;
}

#nav li:hover  li:hover ul li a:hover{
	background-image:none;
	background-color: #F00;
	color:#FFFF00;
}