/*----------------------------------------------------------------------------------------------------------------------
   This deals with the MAIN MENU inside the "right" div   
-----------------------------------------------------------------------------------------------------------------------*/

/* Handles menu line {Background} */
.main-menu-line {
	position:absolute; 
	width:100%; 
	height: 2.7em; 
	background-color:#DDDDDD; 
	opacity: 0.10; 
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=10);
}
/* Handles menu line {Container for text} */
.main-menu {
	position:absolute; width:100%; height: 2.7em; font-size:180%;
}
	/* Handles menu line {Container for text} >> link style (normal) */
	.main-menu a {
		display:block;
		color: #DDDDDD;
		
	}
		/* Handles menu line {Container for text} >> link style (normal) >>
		div gives link its size and shape */
		.main-menu div {
			width:25%; float:left;  text-align:center; padding: 0.2em 0em 0.1em 0em;
			color:#DDDDDD;
		}
			/* Handles menu line {Container for text} >> link style (normal) >>
			div gives link its size and shape >> span gives padding and border */
			.main-menu div span {
				border-left: 0.1em solid; 
				border-right: 0.1em solid; 
				padding: 0.2em 0.7em 0.1em 0.7em;
			}
	
	/* Handles menu line {Container for text} >> link style (hover) */
	.main-menu a:hover {
		display:block;
		background-color:#DDDDDD; /*Needed for stupid IE*/
		text-decoration:none;
		cursor: pointer; cursor: hand;  /*Needed for stupid IE*/
	}
		/* Handles menu line {Container for text} >> link style (hover) >>
		div gives link its size and shape */
		.main-menu a:hover div{
			background-color:#DDDDDD;
			color: #000000;
		}
			/* Handles menu line {Container for text} >> link style (hover) >>
			div gives link its size and shape >> span gives padding and border */
			.main-menu a:hover div span{
				background-color:#000000;
				color: #DDDDDD;
			}