body {
	font-family: Helvetica, Arial, sans-serif;
}

#page {
	width:70%;
	margin:auto;
}

/******** NAVIGATION ********/
#main-menu {
	/*background: #778899;*/	
}

#main-menu ul {
	list-style-type:none;
	padding-left:10px;
	/*overflow:hidden;*/
	position:relative;	/* for all absolute ul li ul */
}

#main-menu li {
	float:left;	/* works with overflow hidden */
}

#main-menu li a {
	background: #778899;
	text-decoration:none;
	padding:10px 20px;
	display:block; /* makes the padding bigger */
}

#main-menu li a:hover {
	background:magenta;
	color:black;
}

/*************** SUB NAV *********************/
#main-menu ul li ul {
	position:absolute;
	visibility:hidden;
	opacity:0;/* delay visiblity change */
	transition: visibility 0s linear 0.5s, opacity 0.5s linear;	
}

#main-menu ul li:hover ul {
	visibility:visible;	
	opacity:1;	
	transition-delay:0s;	
}

#main-menu ul li ul li {
	float:none;
	background:darkskyblue;	
}

#main-menu ul li ul li a:hover {
	background:magenta;	
}