/* I have selected Menu as a place holder binding all kind of

menus related styles together into one ID. Here, I am defining

the bar-menu which will be required in administrators section.*/

*{margin:0; padding:0;}

div#menu.bar {

    z-index: 1;

	height:35px;

	width:100%;

    background: #397B89;

	border: 1px solid #397B89; /* width,style,color */

	border-width: 1px 0 2px 0; /* top,right,bottom,left */

}

div#menu.bar ul {

    margin: 0;

	margin-left: 10%;

	margin-right: 10%;

    padding: 0;

    list-style-type:none;

	color: #397B89;

	font: normal 12px consolas;

}

div#menu.bar li {

    position: relative;

    z-index: 2;

	margin:0;

    padding: 0;

    display: block;

    float: left;

	width: inherit;

}

div#menu.bar li.last{

	float: right;

	background: url(components/main-delimiter.png) 2% 4px no-repeat;

}

div#menu.bar a{

	color: #FFF;

	padding:0 10px 0 10px;

}

div#menu.bar a.parent{

	border-top: 2px solid #397B89;

}

div#menu.bar a:link{

	height: 35px;

    display: block;

    text-decoration: none;

    font: normal 12px Trebuchet MS;

}

div#menu.bar a:hover{

	color: #fff;

    background: #397B89;

}

div#menu.bar a.parent:hover{

	border-top: 2px solid #397B89;

}

div#menu.bar a.current{

    background: #397B89;

	border-top: 2px solid #397B89;

	color: #ccc;

	font-family:verdana,helvetica,arial,sans-serif;
	font-weight:bold;
	font-size:15px;
}

div#menu.bar a.current:hover {

	background: #418E9E;

	border-top: 2px solid #397B89;

	color: #fff;

}

div#menu.bar img{

	margin-top: 2px;

	color: #397B89;

	border: none;

}

div#menu.bar a:hover span {

	color: #fff;

}

div#menu.bar span {

    display: block;

    cursor: pointer;

	background-repeat: no-repeat;

    background-position: 95% 0;

	margin-top: 5px;

font-family: verdana,helvetica,arial,sans-serif;
font-weight: bold;
}

div#menu.bar span.reverse {

	margin: 5px 15px 0 0;

	padding: 0 5px 0 0;

	border: none;

	text-align: center;

}

/**********************************************/

div#menu.bar li:hover a.parent{

	border-top: 2px solid #418E9E; /*#FFF;*/

	background: #418E9E;

	color: #fff;

}

div#menu.bar li:hover a.current{

	border-top: 2px solid #418E9E; /*#FFF;*/

	background: #418E9E;

	color: #fff;

}

div#menu.bar li:hover>ul {

    left: 0px;

	right: auto;

	top: 30px;

}

div#menu.bar li.last:hover>ul {

	left: auto;

    right: 0px;

	top: 30px;

}

div#menu.bar ul ul a.child span.reverse {

	background-position: 5% 5px;

    background-image: url(components/item-pointer.gif);

}

div#menu.bar ul ul a.child:hover span.reverse {

    background-image: url(components/item-pointer.gif);

}

div#menu.bar ul ul a.child span {

    background-position:95% 8px;

    background-image: url(components/item-pointer.gif);

}

div#menu.bar ul ul a.child:hover span {

    background-image: url(components/item-pointer.gif);

}

/* menu.bar::level 2 */

div#menu.bar ul ul {

    position: absolute;

    top: 32px;

    left: -999em;

    width: 163px;

	max-height: 500px;

    padding: 0;

    background: #418E9E;/*rgba(19,68,2,0.2); #83C1FC*/

}

div#menu.bar ul ul li {

	background: #418E9E;

    display: block;

    text-decoration: none;

	font: normal 12px Trebuchet MS;

}

div#menu.bar ul ul a {

    padding: 0 0 0 15px;

    height: auto;

    float: none;

    display: block;

    color: rgb(255,255,255);

}

div#menu.bar ul ul span {

    padding: 5px 0 0 0;

    color: #eee;

}

span.list{

	white-space:nowrap; 

	width:163px; 

	overflow:hidden; 

}

div#menu.bar ul ul a:hover span {

    color: #fff;

}

/* menu.bar::level3 */

div#menu.bar ul ul ul {

    padding: 0;

    margin: -25px 0 0 163px !important;

    margin-left:172px;

}

div#menu.bar ul ul.reverse ul.reverse{

    padding: 0;

    margin: -25px 0 0 -163px !important;

    margin-right: 172px;

}

/* colors */

div#menu.bar ul ul { background:  rgba(101,162,23,0.95);

	-moz-box-shadow: -1px 5px 5px rgba(0, 0, 0, 0.5);

	-webkit-box-shadow: -1px 5px 5px rgba(0, 0, 0, 0.5);

	box-shadow: -1px 5px 5px rgba(0, 0, 0, 0.5);

}

div#menu.bar ul ul ul { background:  rgba(101,162,23,0.95); 

	-moz-box-shadow: -1px 5px 5px rgba(0, 0, 0, 0.5);

	-webkit-box-shadow: -1px 5px 5px rgba(0, 0, 0, 0.5);

	box-shadow: -1px 5px 5px rgba(0, 0, 0, 0.5);

}

div#menu.bar ul ul ul ul { background:  rgba(101,162,23,0.95);

 	-moz-box-shadow: -1px 5px 5px rgba(0, 0, 0, 0.5);

	-webkit-box-shadow: -1px 5px 5px rgba(0, 0, 0, 0.5);

	box-shadow: -1px 5px 5px rgba(0, 0, 0, 0.5);

}

div#menu.bar .time{

	float: right;

	margin-top: 5px;

	margin-right: 5px;

}

div#menu.bar .userButton{

	position: relative;

    z-index: 2;

	width: 223px;

    height: 24px;

	margin: 0px;

    text-decoration: none;

}

div#menu.bar img.thumbnail{

	overflow: hidden;

	position: relative;

	float: right;

	margin-left: 0px;

	margin-top: 10px;

	margin-right: 10px;

	margin-bottom: 5px;

	padding: 2px;

	height: 58px;

	width: 48px;

	border: 1px solid #8d8d8d;

}

div#menu.bar span.thumbnail{

	position: relative;

	float: left;

	top: 25px;

	left: 10px;

	width: 125px;

	font-family:Century Gothic;

	font-size: 14px;

	color:#000;

	text-align: left; 

}