﻿Body {
   color : black;
   background-color: white;
   text-align: center;
   font-size: 1em;
   vertical-align: middle;
}

.header {
    background-image:linear-gradient(#888888, #EEEEEE);
    border-radius:20px 0px 20px 0;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding: 2px;    
}

.selectionusers{
    color : blue;
    font-size: 1.2em;
    margin-bottom : 10px;
}

.menu{
    background-color: white;
    margin : 10px;
}

/* menu déroulant*/
            #menu-demo2, #menu-demo2 ul{
               padding:0;
               margin:0;
               list-style:none;
               text-align:center;
            }
            #menu-demo2 li{
               display:inline-block;
               position:relative;
               border-radius:8px 8px 0 0;
            }
            #menu-demo2 ul li{
               display:inherit;
               border-radius:0;
            }
            #menu-demo2 ul li:hover{
               border-radius:0;
            }
            #menu-demo2 ul li:last-child{
               border-radius:0 0 8px 8px;
            }
            #menu-demo2 ul{
               position:absolute;
               max-height:0;
               left: 0;
               right: 0;
               overflow:hidden;
               -moz-transition: .8s all .3s;
               -webkit-transition: .8s all .3s;
               transition: .8s all .3s;
            }
            #menu-demo2 li:hover ul{
               max-height:15em;
            }
            /* background des liens menus */
            #menu-demo2 li:last-child{
               background-color: #65537A;
               background-image:-webkit-linear-gradient(top, #65537A 0%, #2A2333 100%);
               background-image:linear-gradient(to bottom, #65537A 0%, #2A2333 100%);
            }
            #menu-demo2 li:nth-child(2){
               background-color: #729EBF;
               background-image: -webkit-linear-gradient(top, #729EBF 0%, #333A40 100%);
               background-image:linear-gradient(to bottom, #729EBF 0%, #333A40 100%);
            }
            #menu-demo2 li:nth-child(3){
               background-color: #F6AD1A;
               background-image:-webkit-linear-gradient(top, #F6AD1A 0%, #9F391A 100%);
               background-image:linear-gradient(to bottom, #F6AD1A 0%, #9F391A 100%);
            }
            #menu-demo2 li:first-child{
               background-color: #CFFF6A;
               background-image:-webkit-linear-gradient(top, #CFFF6A 0%, #677F35 100%);
               background-image:linear-gradient(to bottom, #CFFF6A 0%, #677F35 100%);
            }
            /* background des liens sous menus */
            #menu-demo2 li:last-child li{
               background:#2A2333;
            }
            #menu-demo2 li:nth-child(2) li{
               background:#333A40;
            }
            #menu-demo2 li:nth-child(3) li{
               background:#9F391A;
            }
            #menu-demo2 li:first-child li{
               background:#677F35;
            }
            /* background des liens menus et sous menus au survol */
            #menu-demo2 li:last-child:hover, #menu-demo2 li:first-child li:hover{
               background:#65537A;
            }
            #menu-demo2 li:nth-child(2):hover, #menu-demo2 li:nth-child(2) li:hover{
               background:#729EBF;
            }
            #menu-demo2 li:nth-child(3):hover, #menu-demo2 li:nth-child(3) li:hover{
               background:#F6AD1A;
            }
            #menu-demo2 li:first-child:hover, #menu-demo2 li:last-child li:hover{
               background:#CFFF6A;
            }
            /* les a href */
            #menu-demo2 a{
               text-decoration:none;
               display:block;
               padding:8px 32px;
               color:#fff;
               font-family:arial;
            }
            #menu-demo2 ul a{
               padding:8px 0;
            }
            #menu-demo2 li:hover li a{
               color:#fff;
               text-transform:inherit;
            }
            #menu-demo2 li:hover a, #menu-demo2 li li:hover a{
               color:#000;
            }
/* fin menu déroulant */

form {
    padding-bottom: 10px;

}

table {
    border-collapse : collapse;
    padding : 10px;
    margin : 10px auto;
    vertical-align: middle;
    
}

th {
    border: 1px solid black;
    background-color: #E6E6E6;
    padding : 3px;
    /*max-width: 80px;*/
    
}

td {
    border: 1px solid black;
    background-color: #F2F5A9;
    padding : 3px;
}

h1 {
   font-size : 1.8em;
   color : #DD0000;
   text-decoration: none;
}

/* h2 -> pour erreurs */
h2 {
   color : red;
   font-size : 1.5em;
}

caption {
   color : grey;
   font-size : 1.5em;
   margin-bottom: 10px;
}

.footer {
   background-image:linear-gradient(#EEEEEE, #888888);
   border-radius:20px 0px 20px 0;
   max-width: 800px;
   margin-left: auto;
   margin-right: auto;
   margin-top: 20px;
   padding : 2px;
}

.textaccueil{
   color: blue;
   font-style: italic;
   font-weight: bold;
}

.payees{
   color: red;
}

.invisiblecell{
   border: 0;
   background-color : white;
}

.total{
   font-weight: bold;
   background-color: #EE4444;
}

OPTION.rouge {
   color: red;
}