/**
 *********************************************
 * Prototype of styles for horizontal CSS-menu
 * @data 30.06.2009
 *********************************************
 * (X)HTML-scheme:
 *  <div id="menu">
 *      <ul class="menu">
 *          <li><a href="#" class="parent"><span>level 1</span></a>
 *              <div><ul>
 *                  <li><a href="#" class="parent"><span>level 2</span></a>
 *                      <div><ul><li><a href="#"><span>level 3</span></a></li></ul></div>
 *                  </li>
 *              </ul></div>
 *          </li>
 *          <li class="last"><a href="#"><span>level 1</span></a></li>
 *      </ul>
 *  </div>
 *********************************************
 */

/* menu::base */
div#menu {
	font-family: 'aracne_lightregular';
	display: inline-block;
	border-bottom: 5px solid #781f5e;
	width: 80%;
	position: relative;
	left: 15px;
	font-size: 22px;
}

div#menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

ul.menu {
	text-align: center;
}

div#menu li {
/*     position: relative; */
    margin: 0;
    padding: 0;
    display: inline-block;
    z-index: 9;
	padding-bottom: 15px;
}
div#menu a {
    position: relative;
    z-index: 10;
    display: block;
    text-decoration: none;
    text-align:center;
    margin: 0 30px 0 30px;
	color: #781f5e;
}
div#menu span {
	color: #781f5e;
}

div#menu ul.menu > li:hover /*> a span*/,
div#menu ul.menu > li.active /*> a span*/ {
	background: url('../images/bg-active.png') no-repeat bottom center;
}

/** sous menu */
ul.submenu {
	position: absolute;
	width: 100%;
	text-align: center;
	left: 0;
	top: 50px;
	font-size: 18px;
	display: none;
}
div#menu li ul.submenu li {
    position: relative;
    margin: 0;
    padding: 0;
    display: inline-block;
    z-index: 9;
}
div#menu li ul.submenu li a {
    margin: 0 20px;
}
ul.sub-active {
	display: block;
}
li.li-active a:before, li.li-active a:after {
	content: url('../images/ellipse.png');
	display: inline-block;
	position: relative;
	top: -3px;
	padding: 0 3px;
}