@CHARSET "UTF-8";

/************************   background items
 * header and body types
 *
 */
 
* {
	margin: 0;
	padding: 0;
}

img.logo {
	z-index:1;
	width:250px;
	position:absolute;
	top:5px;
	right:50px;
}

body {
	font-family: verdana, Tahoma, Helvetica, Arial;
}


table.background {
		width:107%;
        border-collapse: collapse;
        position: absolute;
        top:0px;
        left:0px;
        z-index:-1;
}
table.background tr td.left {
	width:250px;
}
table.background tr td.top {
	height:114px;
}

table.background tr td img.left {
	position: relative;
	top: -2px;
	left:-1px;
	width:271px;
}

table.background tr td img.top {
	position:relative;
	left:-3px;
	top:-2px;
	width:100%;
	height:100%;
}
table.background tr td.bottom {
	height:120px;
}


div.content {
	border: 0px;
	position: absolute;
	top: 120px;
	width: 100%;
	z-index: 0;
}


/***************************  Menu Bar
 * the first level shall be called menuBarL1, second level menuBarL2, and so on.
 * Should have a div named body, which would appear below the menus, but it can be anything
 * also, it is good to clear float at the end just in case you have horizontal second layers
 */


div.body {
	position: absolute;
	top:135px;
}
.clear {
	clear: both;
}

div.username {
	color: white;
	font-size: 80%;
	position:absolute;
	top: 62px;
	right: 20px;
}

ul.menuBarL1 {
	margin:0;
	padding:0;
	display: block;
	position: absolute;
	left: 220px;
	top: 85px; 
	border-right-style: solid;
	border-width: 1px;
	border-color: #a0a0ff;
	z-index:3;
}
ul.menuBarL1 li {
	list-style:none;
	float: left;
	border-left-style: solid;
	border-width: 1px;
	border-color: #a0a0f0;
	padding: 0px 0px 2px 0px;
}

ul.menuBarL1 li a{
	display: block;
	cursor: pointer;
	padding: 0px 10px 5px 10px;
	text-align: center;
	color: white;
	font-size: 80%;


}

ul.menuBarL1 li a.selected {
	background-color : #ffcc99;
	color: #996633;
}

ul.menuBarL1 li:hover a {
	background-color : #cc9966;
	color: #663300;
}

ul.menuBarL1 li a:active {
	background-color : #bb6633;
}

ul.menuBarL2 {
	margin:0;
	padding:0;
	display: none;
	width: 100%;
	position: absolute;
	z-index:3;
}

ul.menuBarL2 li {
	clear: both;	/* clear float from menuBar L1; remove if you want horizontal 2nd menu */
	list-style:none;
	margin-left:-40px;	/* remove/adjust for horizontal 2nd menu */
	background-color:white;
	width:150px;

}

ul.menuBarL2 li a {
	border: none;
	cursor: pointer;
	text-align: center;
	font: 90%;
	background-color : #ffcc99;
	color: #996600;
}


ul.menuBarL1 li:hover ul.menuBarL2 {
	display: block;
}

ul.menuBarL2 li a:hover {
	background-color : #ffcc66;
}

ul.menuBarL2 li a:active {
	background-color : #ff6600;
}

div.menuBarL3 {
	position:absolute;
	left:220px;
	top:105px;
	width:70%;
	height:1.25em;
	background-color: #ffcc99;

}

ul.menuBarL3 {
	margin:0;
	padding:0;
	display: block;
	position: absolute;
	left: 220px;
	top:105px;
	border-right-style: solid;
	border-width: 1px;
	border-color: #996633;

}


ul.menuBarL3 li {
	list-style:none;
	float: left;
	border-left-style: solid;
	border-width: 1px;
	border-color: #996633;
	padding-top:2px;

}

ul.menuBarL3 li a{
	display: block;
	cursor: pointer;
	padding: 0px 10px 0px 10px;
	text-align: center;
	color: #996633;
	font-size: 80%;


}
ul.menuBarL3 li a:hover {
	background-color : #ffcc99;
	color: #996633;
}

ul.menuBarL3 li a:active {
	background-color : #bb6633;
}