/* * * * * * * * * * * * * * * * * * * * * * * * *
   * * * * * * * * * * * * * * * * * * * * * * * *
   * *                                         * *
   * *               CSS Menu                  * *
   * *                                         * *
   * * * * * * * * * * * * * * * * * * * * * * * *
   * * * * * * * * * * * * * * * * * * * * * * * *
*/
/* * * * * * * * * * * * * * * * 
 * Level 1 li's hover effects  *
 * * * * * * * * * * * * * * * */
/*In my menu, the blocks that you see are the <a>, not the <li>. It is important tu understand that.
*/
#sommaire2 li:hover a {
		background-color: #bbb;
		z-index: +1;					/* over the previous <ul> */
		position: relative;
		}
#sommaire2 li:hover > a {
		color: black;
		-moz-box-shadow: rgba(0,0,255,.4) 2px 2px 20px;
		-webkit-box-shadow: rgba(0,0,255,.4) 2px 2px 20px;
		-khtml-box-shadow: rgba(0,0,255,.4) 2px 2px 20px;
		box-shadow: rgba(0,0,255,.4) 2px 2px 20px;
		text-shadow: white 1px 1px .7em;
		}
#sommaire2 li:hover li a:hover { /* the 'hovered' <a> will be above the others */
		z-index: +2;
		}

												/* * * * * * * * * * * * * * * * 
												 * Level 2 li's hover effects  *
												 * * * * * * * * * * * * * * * */
#sommaire2 li:hover li:hover a {
		background-color: #aaa;
		z-index: +2;
		}
#sommaire2 li:hover li:hover li a:hover {
		background-color: #888;
		z-index: +3;					/* the second level <li> is above the first level <li> */
		}
											/* First ul's hover effect */	
#sommaire2 ul {
		padding: 0;
		list-style-type: none;
		display:none;
		}
#sommaire2 li {
		height: 45px;
		list-style-type: none;
		margin: 1px;
		}
#sommaire2 li a {
		display: block;
		height: 42px;
		color: white;
		text-decoration: none;
		padding: 13px 10px 0px;
		}
											/* Level 2 ul's hover effect */
#sommaire2 :hover > ul {
		display: block;
		margin: -40px 0px auto 230px;
		position: absolute;
		z-index: +1;
		min-width: 200px;
		}
#sommaire2 :hover > ul li a {
		-moz-box-shadow: rgba(0,0,255,.4) 2px 2px 20px;
		}

#sommaire2 :hover ul:hover ul {
		position: absolute;
		z-index: +2;
		min-width: 300px;
		}

/* Général styles */
#sommaire2 {
	width: 400px;
	font-weight: bold;
	text-align: left;
	}
#sommaire2 a {
	background-color: #ccc;
	-moz-border-radius: 18px;
	-webkit-border-radius: 18px;
	-khtml-border-radius: 18px;
	border-radius: 18px;
	border: 1px solid white;
	border-right-width: 0;
	}
a.plus {
	background: url(flecheg.png) no-repeat 95%;
	}
/* I use this CSS counter. Why not use <ol> ? > because my blocks are the <a>, the list items will be outside the boxes. Now they are in. */
#sommaire2 { counter-reset: nav0; }
#sommaire2 > li > a:before { counter-increment: nav0; content: counter(nav0,upper-roman)" - "; }
#sommaire2 > li {counter-reset: nav1; }
#sommaire2 > li > ul > li > a:before { counter-increment: nav1; content:counter(nav1) " - "; }
#sommaire2 > li > ul > li { counter-reset: nav2; }
#sommaire2 > li > ul > li > ul > li > a:before { counter-increment: nav2; content:counter(nav1)"."counter(nav2)" - "; }