/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/final_drop2.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
/* style the outer div to give it width */
.menu
{
    
    font-size:0.85em;
    padding-bottom:0px;
/* p1 */
}
/* remove all the bullets, borders and padding from the default list styling */

.menu ul
{
    padding:0;
/* p2 */
    margin:0;
    list-style-type:none;
}

.menu ul ul
{
    width:14px;
/* w2 *//* utile */
}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */

.menu li
{
    float:left;
    width:117px;
/* w3 *//* utile *//* border:1px solid black; */
    position:relative;
}
/* style the links for the top level */

.menu a, .menu a:visited
{
    display:block;
/* font-size:11px; */
    text-decoration:none;
    color:#fff;
    width:106px; /* w4 *//* utile *//* ie6 ne réagit pas */
    height:20px;
/* h1 *//* utile */
    border:1px solid #fff;    
    border-width:0px 1px 0 0;
    background:#16347d;
/* utile */
    padding-left:10px;
/* p3 */
    line-height:21px;
/* lh1 *//* utile */
}
/* a hack so that IE5.5 faulty box model is corrected */

* html .menu a, * html .menu a:visited
{
/* width:143px; *//* w5 */
    w\idth:147px;
/* w5b */
}
/* style the second level background */

.menu ul ul a.drop, .menu ul ul a.drop:visited
{
    background:#eee;
}
/* style the second level hover */

.menu ul ul a.drop:hover
{
    background:#ddd;
}

.menu ul ul :hover > a.drop
{
    background:#eee;
}
/* style the third level background */

.menu ul ul ul a, .menu ul ul ul a:visited
{
    background:#eee;
}
/* style the third level hover */

.menu ul ul ul a:hover
{
    background:#ddd;
}

.menu ul ul ul :hover > a
{
    background:#b2ab9b;
}
/* hide the sub levels and give them a positon absolute so that they take up no room */

.menu ul ul
{
    visibility:hidden;
    position:absolute;
    height:0; /* h2 */
    top:20px; /* utile */
    left:0;
    width:150px; /* w6 */
}
/* another hack for IE5.5 */

* html .menu ul ul
{
    top:20px;
    t\op:21px;
}
/* position the third level flyout menu */

.menu ul ul ul
{
    left:150px;
    top:0;
    width:150px;
/* w7 */
}
/* position the third level flyout menu for a left flyout */

.menu ul ul ul.left
{
    left:-150px;
}
/* style the table so that it takes no part in the layout - required for IE to work */

.menu table
{
    position:absolute;
    top:0;
    left:0;
}
/* style the second level links */

.menu ul ul a, .menu ul ul a:visited
{
    background:#eee;
/* utile */
    color:#000;
    height:auto;
/* h3 */
    line-height:1em;
/* lh2 *//* utile */
    padding:5px 10px;
/* p4 */
/* w8 *//* utile */    width:200px
/* yet another hack for IE5.5 */
}

* html .menu ul ul a
{
    width:150px;
/* w9 */
    w\idth:129px;
/* w9b */
}
/* style the top level hover */

.menu a:hover, .menu ul ul a:hover
{
    color:#fff;
    /* for ie the color has to be different for hover to work. So the color is set to #16347e instead of #16347d */
    background:#16347e;
}

.menu :hover > a, .menu ul ul :hover > a
{
    color:#fff;
    background:#16347d;
/* utile */
}
/* make the second level visible when hover on first level list OR link */

.menu ul li:hover ul,

.menu ul a:hover ul
{
    visibility:visible;
}
/* keep the third level hidden when you hover on first level list OR link */

.menu ul :hover ul ul
{
    visibility:hidden;
}
/* keep the fourth level hidden when you hover on second level list OR link */

.menu ul :hover ul :hover ul ul
{
    visibility:hidden;
}
/* make the third level visible when you hover over second level list OR link */

.menu ul :hover ul :hover ul
{
    visibility:visible;
}
/* make the fourth level visible when you hover over third level list OR link */

.menu ul :hover ul :hover ul :hover ul
{
    visibility:visible;
}