html, body {
    width: 88% !important;
    margin: 0;
    padding: 0;
}

body {
    position: relative;
    margin: 0;
    padding: 0;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 100%;
    color: black ;
}

#container {
    position: relative;
}


#main {
    margin: 1px -10% 0 0;
    padding: .5em 0 5em 20%;
    min-height: 15em;
/*    min-height: 30em; */
/*    border-right: 1px solid gray;  */
/*    border-left:  1px solid gray;  */
/*    border-top:   3px double gray; */
}

#panel {
    position: absolute;
    width: 20%;
    right: 0;
    top: -2px;
    padding: 0;
    margin: 0;
    font-family: "Times New Roman"; 
    border-left: 1px solid gray;
}

#footer {
    margin: 0;
    padding: 0.5em;
    background: gray;
    border-top: 3px double gray;
}

/* title */

#title {
    margin: 0;
    padding: 0 0 0.5em;
    background: gray;
/*    border-bottom: 1px solid gray; */
    border-left: 1em solid gray;
}

#title h1 {
    margin: 0;
    padding: 0 0.5em 0 0.25em;
    font-family:  "Arial Helvetica sans-serif" ;
    font-size: 1em;
    letter-spacing: 0.25em;
    background: gray ;
    color: black ;
}

/* main */

#main h3, #main h4 {
    margin: 1em 0 0 0;
    padding-left: .5em;
/*    border-bottom: 1px solid black ; */
}

#main h2 {
    margin: 0 0;
    padding: 0.25em 0 0.125em;
    font-family: sans-serif;
    font-size: 110%;
    color: black ;
    border-bottom: 1px solid black ; 
    margin-bottom: 0.8em;
}
#main h2 { margin-left: 0.0em; }
#main h4 { margin-left: 2em; }

#main h1 {
    margin: 1.5em 0;
    padding: 0.25em 0 0.125em;
    font-size: 100%;
    color: red ;
    border-bottom: 1px solid red ; 
    margin-bottom: 0.8em;
}

#main p, #main ul, #main ol, #main dl { margin-right: 1%; }

/* panel */

#panel    { background:  gray ;}
/* #panel h3 { color: blue ; background: lightblue ; }  */
#panel h3 { color: blue ; background: #99ccff ; }
#panel ul { background: #000099 ; }
/* #panel ul { background: skyblue ; } */

#panel h2 { display: none; }
#panel h3 {
    margin: 0 0 1px 0;
    padding: 0.25em 0.5em 1px 0.5em;
    font-size: 1em; line-height: 1em;
    border-top: 1px solid;
    border-bottom: 1px solid;
}
#panel ul {
    margin: 0 0 0 8px;
    padding: 0 0 1em 0.5em;
    list-style: none;
    font-size: 90%;
}
#panel ul li { padding-top: 0.25em; }
#panel ul ul { padding: 0 0 0 1.25em; margin: 0; border-left: none; font-size: 90%; }
#panel ul ul li { padding-top: 1px; text-indent: -0.5em; }
#panel ul li.actif { font-weight: bold; }
#panel ul li.actif ul { font-weight: normal; }

/* footer */

#footer p { margin: 0; }
#footer #logos { text-align: center; }
#footer #mis-a-jour {
    text-align: right;
    font-size: smaller;
    font-style: italic;
}

/* liens */
a { color: #6e76c9 /* #007ba4 */ /* rgb(0%,50%,58%)> */; text-decoration: none; }
a:hover { text-decoration: underline; }
#panel a { color: rgb(40%,20%,60%); }