*       
{
    font-family:verdana;
}

body    
{
    padding : 0; margin : 0px;
}

#header 
{
    background : skyblue 0 bottom repeat-x ; 
    border-bottom : 1px #000 solid;
    height:50px;
    width:100%;
    margin:auto;
    text-align:center;
    font-size:17pt;
    font-family:verdana;
    color:#fff;
    line-height:40px;
    text-align:center;
    margin : auto;
}

#header a 
{
    text-decoration : none;
    color : #fff;
}

.loader 
{
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 1;
    opacity : 50%;
}

#containerloader 
{
    background-color: rgba(0, 0, 0, 0.5);
    bottom: 0;
    top: 0;
    width: 100%;
    opacity: 0.8;
    position: fixed;
    transition: opacity 100ms ease 0s;
    z-index: 12000;
    display:none;
}

#mydiv
{
    width : 100px;
    font-size : 10px;
    font-weight : bold;
    position : fixed;
    left : 50%;
    top : 60%;
    z-index : 10;
    text-align : center;
    background : #000;
    color : #ccc;
    opacity : 100%;
    padding : 5px;
    margin-left : 21px;
    margin-top : 5px;
}

@keyframes spin 
{
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#articles, #adherents, #lieux, #paiements 
{
    width : 100%;
    margin : auto;
    font-size : 8pt;
    margin-bottom: 30px;
    height:100%;
}

#general 
{
    float:right;
    margin : 5px;
    width : 230px;
}

.majactive      { background : orange; color : black; }
.majok          { background : green;  color : white; }
.etatmaj        { display:block ; width : 200px ; color : white ; font-weight:bold ; }
.progression    { display:block ; width : 200px ; color : white ; font-weight:bold ; }

form { width: 1200px;margin: auto; }
form button{ padding : 0px;margin  : 0px; }
form button.updateall { width:150px; }
form .catmere {padding-left : 10px;font-weight : bold !important;}
form > div {float: left;}

.formRef        { background : deepskyblue; }
.formRef button { display : inline; }
.formRef span   { width:20px; }
.formFiltre     { background : dodgerblue ; }
#liste          { float:left; }

ul                  
{ 
    margin:auto ; 
    padding : 0 ; 
    width : 1200px ; 
    list-style : none ; 
    border-collapse: separate;
}
ul:nth-child(even) {
    background:#FDFCF9;
}
ul:nth-child(odd) {
    background:#FCF9F5;
}
ul li               
{ 
    padding : 5px;
    
    min-height:100px;
    display: table-cell;
    vertical-align:top;
}
ul.entete li button 
{ 
    font-size : 6pt !important ; 
}
ul.last li          
{ 
    border-left : none !important ; 
    border-right : none !important ; 
}
div.toutsel         { 
    float : left ; 
    height : 50px ; 
    clear : both ; 
}
div.toutsel div     { float : left;margin-left: 25px;}

ul button           
{ 
    display : inline; 
    padding : 2px; 
    border : 1px solid #000; 
    float : right; 
    font-size : 9pt;
    font-weight : bold;
}

ul li select { width : 100% ;}
ul li input  { width : 70px ;}

ul.entete               {  }
ul.entete li            { background:#555; min-height : 20px; color : #fff; font-weight:bold; border-left : 1px solid #fff;}
ul.entete li.check      { width :  20px; }
ul.entete li.cat        { width : 120px; }
ul.entete li.ref        { width :  80px; }
ul.entete li.label      { width : 246px; }
ul.entete li.dimensions { width : 120px; }
ul.entete li.prix       { width : 120px; }
ul.entete li.stocks     { width : 100px; }
ul.entete li.web        { width :  80px; }
ul.entete li.photos     { width : 165px; }
ul.entete li.actions    { width :  50px; }

ul.filtres li            { min-height : 40px; background : aliceblue;}
ul.filtres li.check      { width :  20px; }
ul.filtres li.cat        { width : 120px; }
ul.filtres li.ref        { width :  80px; }
ul.filtres li.label      { width : 246px; }
ul.filtres li.dimensions { width : 120px; }
ul.filtres li.prix       { width : 120px; }
ul.filtres li.stocks     { width : 100px; }
ul.filtres li.web        { width :  80px; }
ul.filtres li.photos     { width : 165px; }
ul.filtres li.actions    { width :  50px; }

ul.item               { padding-top:5px; }
ul.item li.check      { width :  20px; height:100px;}
ul.item li.cat        { width : 120px; text-align:center ; }
ul.item li.ref        { width :  80px; text-align:center ; font-weight:bold }
ul.item li.label      { width : 246px; }
ul.item li.label   div{ clear:both; font-weight:bold; font-size:9pt; }
ul.item li.dimensions { width : 120px; }
ul.item li.prix       { width : 120px; text-align:right; }
ul.item li input      { width :   90%; }
ul.item li .etat0     { color : orangered;  font-weight:bold;}
ul.item li .etat1     { color : yellowgreen;font-weight:bold;}
ul.item li .enloc     { color : #aaa; }
ul.item li.stocks     { width : 100px; text-align:right;  }
ul.item li.web        { width : 80px; }
ul.item li.photos     { width : 165px; }
ul.item li.photos img { margin:5px; border : 1px solid #aaa; padding:2px;max-height:90px;max-width:65px;}
ul.item li.actions    { width :  50px; }
ul.item li div        { margin-bottom:5px; }
ul.item li span       { margin-bottom:5px;float : left; width : 50%; }
ul.item li span:nth-child(even) { text-align:right; }
ul.item li .fat       { font-weight:bold; }
ul.item li select     { width:100%;}
ul.item li.encours    { background:skyblue;}

.infowebred 
{
    text-align:center;
    background : #eee;
    color: #c20725 !important;
}

.infowebblack 
{
    text-align:center;
    background : #777 ;
    color: #fff  !important;
}

/*********************************************************************************/

button
{
    display: block;
    padding: 3px;
    margin: 0px;
    border: 1px solid #fff;
    font-family: "Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
    cursor: pointer;
    background: #dff4ff;
    font-weight: bold;
}

button:hover
{
    background : #dff4ff;
}

button.majok:hover
{
    background : none !important;
}

button.active
{
    background : orange; 
    color : #fff;
}

/***********************************************************************************/

div.pagination 
{
    color: #FFFFCC;
    display: block;
    font: 10px Verdana,Geneva,Arial,Helvetica,sans-serif;
    padding-bottom: 20px;
    padding-top: 25px;
    text-align: center;
    clear:both;
}

div.pagination a 
{
    background-color: #fff;
    border: 1px solid #ccc;
    color: #000000;
    margin: 5px;
    padding: 5px 15px;
    text-decoration: none;
}

div.pagination a:hover, active 
{
    background-color: #eee;
    border: 1px solid #ccc;
    color: #000;
    margin: 5px;
    padding: 5px 15px;
}

div.pagination span.courante
{
    background-color: #eee;
    border : 1px solid #ccc;
    color  : #000;
    font-weight: bold;
    margin: 5px;
    padding: 5px 15px;
}

div.pagination span.desactive 
{
    background-color: #FFFFFF;
    border: 1px solid #EEEEEE;
    color: #DDDDDD;
    margin: 5px;
    padding: 5px 15px;
}

#nbitem 
{
    background: #eee none repeat scroll 0 0;
    clear: both;
    margin: 10px auto;
    text-align: center;
    width: 250px;
    height:25px;
    color:#000;
    padding:5px;
    padding-top :10px;
    border-radius : 25px;
}