/* CSS Document */

/* We use three div for the styles: 
#header = generic styles used by both menus
#mainmenu = specific styles for the main menu
#topmenu = specific styles for the top menu
*/

/* MAIN MENU - first level */ 

#mainmenu {
	height: 30px;
	margin: 0;
	padding: 0;
	position: relative;
	float: none;
	width: 100%;
	font-size: 11px;
	letter-spacing: 1px;
}

#mainmenu ul {
	float: left;
	list-style: none;
	padding: 0;
	margin: 0;
	height: 30px;
	position: relative;
}


#mainmenu a {
	text-decoration: none;
	cursor: pointer;
	height: 30px;
	line-height: 30px;
	float: left;
}

#mainmenu ul li a {
	display: block;
	background: url(../images/backgrounds/mainbutton_right.png) no-repeat 100% 0%;
	padding-left: 17px;
	padding-right: 17px;
	color: #333;
}

#mainmenu ul li {
	position: relative;
	background: transparent url(../images/backgrounds/mainbutton_left.png) no-repeat 0px 0px;
}


/*MAIN MENU - first level - ACTIVE*/
#mainmenu ul li.active {
	background: url(../images/backgrounds/mainbutton_left.png) no-repeat 0 -30px;
}
#mainmenu ul li.active a {
	display: block;
	background: url(../images/backgrounds/mainbutton_right.png) no-repeat 100% -30px;
	color: #fff;
}

/*MAIN MENU - first level - HOVER*/
#mainmenu ul li:hover, #mainmenu ul li.iehover, #mainmenu ul li a:hover {
	background: url(../images/backgrounds/mainbutton_left.png) no-repeat 0 -30px;
}

#mainmenu ul li:hover a:hover, #mainmenu ul li:hover a,
#mainmenu ul li.iehover a:hover, #mainmenu ul li a:hover, #mainmenu ul li.iehover a {
	display: block;
	background: url(../images/backgrounds/mainbutton_right.png) no-repeat 100% -30px;
	color: #fff;
}

#header li {
	float: left;
	padding: 0;
	background: none;
}

/* ============ */
/* = Top Menu = */
/* ============ */

/* TOP MENU - first level */ 
#topmenu {
	height: 25px;
	margin: 0px 0px 0px 0px;
	padding: 0;
	position: relative;
	float: left;
	width: 100%;
	letter-spacing: 1px;
}

#topmenu ul {
	float: right;
	padding: 0pt 2pt 0pt 0pt;
	margin: 0 !important;
	height: 25px;
	position: relative;
}

#topmenu ul li {
	position: relative;
	background: transparent url(../images/backgrounds/topbutton_left.png) no-repeat 0px 0px;
}

#topmenu a {
	text-decoration: none;
	cursor: pointer;
	height: 25px;
	line-height: 25px;
	float: left;
}

#topmenu ul li a {
	display: block;
	background: url(../images/backgrounds/topbutton_right.png) no-repeat 100% 0%;
	padding-left: 17px;
	padding-right: 17px;
	color: #333;
}

/* TOP MENU - first level - with arrow indicating childs */ 
#topmenu ul li a.haschild {
	background: url(../images/backgrounds/topbutton_right_child.png) no-repeat 100% 0%;
}

/* TOP MENU - first level - ACTIVE*/

#topmenu ul li.active {
	background: url(../images/backgrounds/topbutton_left.png) no-repeat 0 -25px;
}

#topmenu ul li.active a {
	display: block;
	background: url(../images/backgrounds/topbutton_right.png) no-repeat 100% -25px;
	color: #ffffff;
}

#topmenu ul li.active a.haschild {
	background: url(../images/backgrounds/topbutton_right_child.png) no-repeat 100% -25px;
}

/* TOP MENU - first level - HOVER */
#topmenu ul li:hover, #topmenu ul li.iehover {
	background: url(../images/backgrounds/topbutton_left.png) no-repeat 0 -25px;
}

#topmenu ul li:hover a:hover, #topmenu ul li:hover a,
#topmenu ul li.iehover a:hover, #topmenu ul li.iehover a {
	background: url(../images/backgrounds/topbutton_right.png) no-repeat 100% -25px;
	color: #ffffff;
}

#topmenu ul li:hover a.haschild:hover, #topmenu ul li:hover a.haschild,
#topmenu ul li.iehover a.haschild:hover, #topmenu ul li.iehover a.haschild {
	background: url(../images/backgrounds/topbutton_right_child.png) no-repeat 100% -25px;
	color: #ffffff;
}


/* Stuff for the megamenu !!! */



ul.menu div {
display: none;
}

ul.menu li.mega div {
	border-top: 1px solid #ddd;
	border-right: 1px solid #aaa;
	border-bottom: 1px solid #aaa;
	border-left: 1px solid #ddd;
	min-width: 190px;
	position: absolute;
	top: 2.7em;
	left: 0em;
	padding: 0;
	background-color: #f5f5f5;
	color: #222;
	z-index: 99;
}

#topmenu ul.menu li.mega div {
top: 2.4em;
}


ul.menu li.hovering div {
display: block;
}

/* controling the parts */


#header div h5 {
	background-color: #eee;
	white-space: nowrap;
	font-weight: normal;
}

#header div h5.active {
	background-color: #d2d2d2;
}

#header ul li.mega div h5 a
 {
    font-size: 1em;
	border-bottom: 1px solid #ccc;
	padding: 4px 20px 2px 10px;
	margin-bottom: 0px;
	float: none;
	text-decoration: none;
	cursor: pointer;
	height: auto;
	line-height: normal;
	letter-spacing: 1px;
	min-width: 240px;
}

#header ul li.mega div h5 a:hover
 {
	background-color: #d0d0d0;
	color: #c00;
	border-bottom: 1px solid #ddd;
}


#header ul li div p {
	position: relative;
	float: none;
	padding: 2px 16px 6px 16px;
}

#header ul.menu li div p a,
#header ul.menu li div p a:link,
#header ul.menu li div p a:hover,
#header ul.menu li div p a:visited {
	float: none;
	display: inline;
	padding: 0;
	margin: 0;
	line-height: normal;
	color: #444;
}

#header ul.menu li div p a:hover,
#header ul.menu li div p a.active {
	text-decoration:underline;
	color: #c00;
}


#header ul.menu li.mega div a,
#header ul.menu li:hover div a,
#header ul.menu li.active:hover div a, 
#header ul li div li,
#header ul.menu li div a,
#header ul.menu li div a:hover
{
  background-image: none;
  color: #333;
}