/* global font */
* {
		font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular, Sans-serif;
}

/* general page styles */
a { color: #d2691e; }	 
h1 { color: #000080; font-size: 100%; font-weight: bold; }
h2 { color: #000; font-size: 100%; font-weight: bold }
h3 { color: #000; font-size: 100%; font-weight: bold }
p { color: black; font-size: 100%; }
li { color: black; font-size: 100%; }
dd { color: black; font-size: 100%; }
li li { color: black; font-size: 100%; }


/* background colour */
body {
		background-color: #eeeeee;
}

/* main page content */
.main-content {
		margin: 50px;
		width: 680px;
}

/* bug fix */
.clearfix:after {
		display: block;
    clear: both;
}


/* main menu */
.menu {
		margin: 0;
		padding: 0;
		position: fixed;
		top: 0;
		left: 0px;
}

.menu ul {
    margin: 0;
}

.menu li {
		float: left;
    list-style: none;
    position:relative;
/*    box-shadow: 4px 4px 2px rgba(0,0,0,0.2);*/
}

.menu a {
		display: block;
		width: 90px;
		height: 20px;
		color: #000000;
		background-color: #eeeeee;
/*		background-color: #e4e4e4;*/
		text-align: center;
/*		text-shadow: 2px 2px #cccccc;*/
		text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
		padding: 4px 4px 4px 4px;
/*		border-bottom: 28px solid #e4e4e4;*/
		border-bottom: 28px solid #eeeeee;
		text-decoration: none;
		transition: background-color 0.5s;
}

.menu li:hover > a {
		background-color: #c2ef56;
		transition: background-color 0.2s;
}

.menu .current-item > a {
		font-weight: bold;
		text-shadow: 2px 2px 1px rgba(0,0,0,0.2);
}

.menu .logo > a, .menu .logo:hover > a {
		display: block;
		width: 90px;
		height: 40px;
/*		background-color: #e4e4e4;*/
		background-color: #eeeeee;
		text-align: center;
		padding: 8px;
		border: 0px;
		text-decoration: none;
}


/* sub menus */
.menu li:hover .sub-menu {
    z-index:1;
    opacity:1;
}
 
.sub-menu {
    width: 90px;
		height: 40px;
    position: absolute;
    top: 60%;
    left: 0px;
    z-index: -1;
    opacity: 0;
		padding: 0px;
    transition: opacity linear 0.2s;
/*    box-shadow: 20px 20px 0px rgba(0,0,0,0.2);*/
/*    background-color: #eeeeee;*/
/*    background-color: #aaaaaa;*/
}

.sub-menu li {
    display: block;
    box-shadow: 4px 4px 2px rgba(0,0,0,0.2);
}
 
.sub-menu li a {
    display: block;
		border: 0px;
		padding: 4px;
		background-color: #dddddd;
}
 
.sub-menu .current-sub-item > a {
		font-weight: bold;
		text-shadow: 2px 2px 1px rgba(0,0,0,0.2);
}

.sub-menu li a:hover {
    background-color: #c2ef56;
}