.menutop {
	z-index: 2;

	height: 16px;
	width: 240px;
	
	background: #000 url(../img/index.menu.top.png) top left no-repeat;
}

.menubottom {
	z-index: 2;
	
	height: 7px;
	width: 240px;
	
	background: #000 url(../img/index.menu.bottom.png) bottom left no-repeat;
}

#menu {
	z-index: 1;
	
	width: 220px;
	height: auto;

	margin: 0;
	padding: 10px;
	padding-bottom: 1px;	/* à régler en fonction de #menu ul {margin_bottom} */
	
	list-style-type: none;
	background: #000 url(../img/index.menu.middle.png) top repeat-y;
}

#menu ul {
	float: none;
	width: 216px;
	height: 14px;
	position: relative;
	left: 0px;
	top: 0px;
	margin: 0;
	margin-bottom: 10px;	/* espacement entre les menus racines */
	padding: 0;
  padding-top: 2px;
	padding-bottom: 2px;
	background-color: #cdcdcd;

	border-left: solid 2px #000;
	border-right: solid 2px #fff;
}

#menu ul:hover {
	z-index: 10;
	padding: 0;
	text-align: right;
	font-weight: bold;
	height: 14px;
	position: relative;
	top: 0px;
	border: dotted 1px;
	background-color: #bbb;
	border-top: solid 2px transparent;
	border-left: solid 2px #fff;
	border-right: solid 2px #000;
	border-bottom: solid 2px #fff;
}

#menu ul.sousmenu:hover > * li {
	display: block;
}

.sousmenu li {
	z-index: 20;
	width: 60%;
	position: relative;
  left: 40%;
  top: 2px;

	margin-top: -1px;
	margin-right: 2px;
	list-style-type: none;
	text-align: right;
	
	border: dotted 1px;
	background-color: #bbb;
	border-top: dotted 1px #000;
	border-left: solid 2px #fff;
	border-right: solid 2px #000;
	list-style-type: none;
	display: none;
}

.sousmenu li:hover {
  color: white;
  background-color: #888;
}

#menu a {
  color: black;
  text-decoration: none;
  font: normal;
  font-weight: normal; 
}