body {
    margin: 0;
    padding: 0;
    font-size: 12px;
    font-family: "Lucida Grande","DejaVu Sans","Bitstream Vera Sans",Verdana,Arial,sans-serif;
    color: #333;
    background-color: white;
}

a:link, a:visited {
    color: #5b80b2;
    text-decoration: underline;
}
 
a:hover {
    color: #036;
    text-decoration: none;
}


/*---------------------------------------------*/

#header {
    margin: 0ex;
    padding: 1ex;
    font-family: sans-serif;
    background-color:  #417690;
    font-size: small;
}

#header.connected {
    background-color: darkred !important;
}


#header a {
    color: white;
}

#header h1 {
    float: left;
    margin-left: 1ex;
    font-weight: normal;
    font-size: 18px;
    font-weight: normal;
    color: white;
}

#header #liste_cours_header {
    text-align: right;
}

#header #liste_cours_header ul {
    margin: 1ex 0 1ex 0;
}

#header #liste_cours_header li {
    display: inline;
    padding: 0 1ex;
}

/*---------------------------------------------*/

#footer {
    border: 1px solid #aaaaaa;
    margin: 1ex 3ex 1ex 3ex;
    padding: 1ex;
    position: relative;
}

#footer a {
    text-decoration: underline;
    color: #417690;
}
#footer a:hover {
    text-decoration: none;
}

#footer #w3c_links {
    margin-top: 1ex;
}

#footer #about {
    font-size: small;
    margin-top: 1ex;
}

#footer #current_datetime {
    position: absolute;
    top: 1ex;
    right: 1ex;
    font-size: large;
    font-weight: bold;
    font-family: sans-serif;
    background-color: #666666;
    color: white;
    padding: 2pt 6pt;
    margin: 0;
}

#footer #login {
    border: 1pt solid black;
    position: absolute;
    bottom: 1ex;
    font-size: small;
    right: 1ex;
    font-family: sans-serif;
    padding: 1pt 2pt;
    margin: 0;
}

#footer_liste_periodes {
    margin: 3ex 5ex;
    border: solid 1px #cccccc;
    text-align: center;
}

#footer_liste_periodes ul {
    margin: 1ex 0 1ex 0;
}

#footer_liste_periodes li {
    display: inline;
    padding: 0 2ex;
}
/*---------------------------------------------*/

#main {
    margin: 1ex;
    padding: 1ex;
}

#main a {
    text-decoration: underline;
    color: #417690;
}
#main a:hover {
    text-decoration: none;
}

#main h2 {
    text-align: center;
    color: #666666;
}
#main h3 {
    color: #666666;
}
#main h3 a {
}

#main form {
    margin: 2ex;
}

#main .fieldWrapper {
    margin: 1ex;
    border-bottom: 1pt solid #aaaaaa;
    padding: 1ex;
    position: relative;
}

#main .fieldWrapper label {
    width: 25ex;
    float: left;
    font-style: italic;
    text-align: right;
    padding-right: 1ex;
}

#main .helptext {
    position: absolute;
    bottom: 1ex;
    right: 0;
    width: 35ex;
    text-align: right;
    font-size: small;
    font-style: italic;
}

#main .message {
    background-color: white;
    width: 50ex;
    border: 1pt solid black;
    padding: 0 1ex;
    white-space: pre-wrap;
}

#main table.id_TP {
    border: 1pt solid black;
    border-collapse:collapse;
    margin-left: auto;
    margin-right: auto;
    font-size: smaller;
}
#main .id_TP td,tr {
    border: 1pt solid black;
    padding: .5ex 1ex;
}
#main .id_TP td:first-child {
    font-style: italic;
    text-align: right;
}

#main .liste_cours_header li {
    margin: 2ex 0;
    font-style: italic;
}

#main .liste_cours li {
    list-style-type:square;
    margin: 1ex 0;
    font-size: large;
    font-style: normal;
}

#main .erreur {
    margin: 1ex auto 3ex auto;
    padding: 5px;
    background-color: red;
    color: black;
}

#main .msg_erreur {
    margin: 10ex;
    font-size: 200%;
    text-align: center;
    font-weight: bold;
}

.DEBUG {
    color: darkorange !important;
}
div.DEBUG {
    border: dashed 10px darkorange !important;
}