/*************************************************************/
/*                 SEIDE MENU SECTION                        */
/*************************************************************/

/************** SIDE MENU LEFT (BACKGROUND DIV) *********************/

div#side_menu_left{
	position:relative;
	
	font-size:1em;
	width: 190px;
	height: 700px;
	top:20px;
	float:left;

	/*background-image:url(../images/side-menu-fade-left.gif);*/
	background-image:url(../images/side_menu_bg.png);
	_background-image:url(../images/side_menu_bg.jpg);
	background-repeat:no-repeat;
	opacity:0.8;
	_filter: alpha(opacity = 80);
}

/************** SIDE MENU RIGHT (BACKGROUND DIV) *********************/
/* Contains the 'button' for hiding the menu*/

div#side_menu_right{
	position:absolute;
	width: 10px;
	height: 700px;
	cursor:pointer;
	display:none;

	background-image:url(../images/side-menu-fade-button-right.png);
	background-repeat:no-repeat;
	opacity:0.8;
	_filter: alpha(opacity = 80);
}

/************** SIDE MENU RIGHT (BACKGROUND DIV) *********************/
/* Contains the 'button' for letting the menu reappear*/

div#side_menu_right_back{
	position:absolute;
	width: 10px;
	height: 700px;
	display:none;
	cursor:pointer;
	display:none;
	
	background-image:url(../images/side-menu-fade-button-left.png);

	background-repeat:no-repeat;
	opacity:0.8;
	_filter: alpha(opacity = 80);
}


/************** SIDE MENU NAVIGATION *********************/
/* overlays the background DIVS. Otherwise no opacity for navigation impossible. */

#nav{ 
	display:block;
	
	padding: 0;
	margin: 0;
	list-style: none;
	/*background-color:black;*/
	float : left;
	
	width : 177px;
	height:300px;
	
	/* IF opacity is wanted you will have to integrate the nav into div side menu. Otherwise
	the opeacity will look odd. (Remove position absolute and the left directives too.*/
	/*filter: alpha(opacity = 80);
	opacity:.8;*/
	z-index:11;
}


#nav .side_menu_title{
	color:white;
	font-weight:bold;
	margin-left:1em;
	margin-top:1em;	
	width:155px;
	border-bottom: 1px solid #DDDDDD;
}

#nav li { /* all list items */
	float : left;
	width:180px;
	
}



/* hrefs within li elements */
#nav li a {
	display : block;
	position:relative;
	left:10px;
	width:160px;
	color:#CCCCCC;
	text-decoration : none;
	padding-top:0.5em;
	padding-bottom:0.5em;
	_margin-bottom:-0.5em;
	margin-top:1ex;
	/*border-top:5px solid #FFFFFF;*/
	
}



/* hover brighter */
#nav li a:hover {
	display : block;
	position:relative;
	left:10px;
	width:160px;
	
	color:#FFFFFF;
	background-color:#222222;
}

/********************** THE SUBMENU *********************/

/* basically represents li elements and thus submenu items. Dispappears by -999px to the left */

#nav .submenu {
	position : absolute;
	list-style:none;
	left: -999em;
	
	margin-left : 180px;
	margin-top : -4ex;
	width : 180px;
	z-index:11;
	padding:0;
}


/* Shows the submenu and makes it opaque*/

#nav li:hover .submenu, #nav li.sfhover .submenu{ /* lists nested under hovered list items */
	left: auto;
	background-color:#333333;
	
	opacity:0.8;
	_filter: alpha(opacity = 80);
}

#nav .submenu li a{
	border-top:0px solid #000000;
	
}
#nav .submenu li:hover a, #nav .submenu li.sfhover a{
	border-top:0px solid #000000;
	
}