/* CSS Document */

/*------------------------------------*\
	NAV
\*------------------------------------*/

#menu {
	width:300px;
	margin:0 auto;
	padding:10px 10px 10px;
	background-color:#CDE8F9;
}
#menu h2 {
	font-weight:normal;
	margin:0;
	background-color:#FFFDEC;
	color:#FFF;
	border-radius:10px;
	padding-left:20px;
	padding:0 0 4px 10px;
}
#menu a {
	color:#E0001C;
}

#nav{
	display:none;
	margin:0;
	padding:0;
	list-style:none;
	font-weight:bold;
	margin-bottom:10px;
	/* Clear floats */
	float:left;
	width:280px;
	position:relative;
	z-index:5;
}
#nav li{
	margin:0;
	padding:0;
	position:relative;
	width:100%;
	padding-left:10px;
}
#nav a{
	display:block;
	padding:5px;
	color:#009;
	text-decoration:none;
}
#nav a:hover{
	color:#006;
	background:#fff;
	text-decoration:none;
}

/*--- DROPDOWN ---*/
#nav ul{
	display:none;
	background-color:#FFFDEC;
	list-style:none;
	margin:0;
	width:100%;
}
#nav ul li{
	padding-top:1px; /* Introducing a padding between the li and the a give the illusion spaced items */
	float:none;
}
#nav ul a{
	white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
}
#nav li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
	text-decoration:none;
}
#nav li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
	text-decoration:none;
}
.submenu {
    display: none;
}