@font-face {
	font-family: lcddot;
	src: url('./ttf/OutAEG.ttf') format('truetype');
}
html
{

font-size:100%;

}

body 
{

    padding : 0;
    font-family: arial, sans-serif;
    background:#a7a694 url(../imgs/template/aamen_bg.jpg) center 10px no-repeat;

}


img
{

border:1px solid black;
margin-bottom:15px;
margin-top:15px;
max-width:475px;

}

.floatLeft{float:left;}

form{line-height: 18px;}

a
{

color:#a7a694;

}
img{border:none;}
form img{padding:0;margin:0;border:none;cursor:pointer;}


.erreur{
    
    font-weight: bold;
    color:red;
    
}

.modalShadow{
    
    position:fixed;
    top:0;left:0;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,.5);
    
}
.closeButton{
    
    float:right;
    position:relative;
    width:32px;
    top:-32px;
    left:16px;
    border:none;
    cursor: pointer;
  
}

form, form p{
    
    display: inline;
    padding:0;
    margin:0;
    
}
label, input[type=text], input[type=password], textarea{
    
    float:left;
    clear:both;
    
}

.checkbox{
    
    display:block;
    float:left;
    padding: 5px;
    width:24px;
    height:24px;
    
} .checked{
    
    background-color: red;
    background-image: radial-gradient(white, LawnGreen) ;
    border-radius: 50%;
    border: 4px rounded #800000;
    box-shadow: 0 0 10px LawnGreen;
     
    /*background: transparent url(../imgs/template/icon_check.png) top left no-repeat;*/
    
} .unchecked{
    
    background-image: radial-gradient(white, red) ;
    border-radius: 50%;
    border: 4px rounded #800000;
    box-shadow: 0 0 10px red;
     /*background: transparent url(../imgs/template/icon_check_not.png) top left no-repeat; */
    
}

.cotisAJour{
    
	float:left;
	width:20px;
	height:20px;
        background-color: green;
	border-radius: 50%;
	
}.cotisEnRetard{
    
	float:left;
	width:20px;
	height:20px;
        background-color: orange;
	border-radius: 50%;

}.cotisNonPayee{
    
	float:left;
	width:20px;
	height:20px;
        background-color: red;
	border-radius: 50%;
    
}

table{width:95%;height:100%;}

th{
    padding:0 3px;
}
td{
    padding:0 3px;
    
}
tr{
    padding:5px 0;
    border: 1px solid red;
    
}


#adhesionsExtractions {
    
    max-width:1000px;
    
}

#adhesionsExtractions tr td {border-bottom: 1px dotted gray;}
#adhesionsExtractions tr td{text-align: center;}

div#center{

display: inline-block;

width:90%;
max-width:1600px;
margin:20px 5% 0 5%;
-moz-box-shadow: 0 0 5px #000;
-webkit-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;  

}
/*
.adhesions{
     -webkit-perspective: 150px; 
    perspective: 1500px;
    
    
}*/



.adhesion, .adherents{
    position:relative;
    background-color: gray;
    box-shadow: 0 0 3px gray;
    padding:2px;
    background-image:url(../imgs/template/aamen_texture6.png), linear-gradient(20deg, black, gray 30%, black) ;

    color: white;
    border-radius: 3px;
    text-shadow:0 0 1px black;

}

.adhesion td:first-child{
    width:20%;
    
}


.adherents td:first-child, .cotisation{
    
    padding:5px;
    margin:2px;
    width:45px;
    border:1px solid gray;
    background-color:Lavender ;
    background-image:linear-gradient(Lavender, white); 
    box-shadow: inset 0 0 3px gray;
   
}

.adherent > div{
    
    float:left;
    width:95%;
    padding:3px;
    font-weight: bold;

  
}

.cotisation{float:left;}


div#center > header, div#center > footer, div#center > section, div#center > nav {

float:left;
clear:both;
width:100%;
background-color: white;

}
div#center > header
{

    display: block;
    top:0;
    width:100%;
    height:160px;
    background: white url(../imgs/template/aamen_header.jpg) 0 0 no-repeat;
    border-bottom: 1px dotted gray;

}




div#center > header form, div#center > header form p, div#center > header form p input, div#center > header form p span {
    
    float:left;
    padding: 5px;
    
}
#loginForm{
    

    padding:0 10px 0 0;
    float:right;
    overflow: hidden;
    
}
#mainForm{
    
    z-index:10000;
    
}
#menuPrincipal{
    
    float:left;
    margin-top:130px;
    line-height:20px;
    z-index:9999;
    
}

#menuPrincipal > ul{
    
    float:right;
    width:100%;
   
    
}
#menuPrincipal > ul > li {
    
    float:left;
    width:20%;
    margin:0;
    padding:0 20px;
    text-align:center;
    z-index:9999;
    text-align:center;

    
}
#menuPrincipal > ul > li > span {
    
    display:block;
    padding:5px;
    font-weight:bold;
    cursor: pointer;
    color:gray;
        z-index:9999;
    text-align:center;

}
#menuPrincipal > ul > li > ul{
    
    position:absolute;
    border-radius: 3px;
    clear : both;
    background-image:url(../imgs/template/aamen_texture5.png), linear-gradient(90deg, Gainsboro ,gray, AliceBlue); 
    background-color: rgb(255,255,255);
    box-shadow: 0 0 3px gray;
        z-index:9999;
    text-align:center;

        transform-origin:top left;
	-moz-transform-origin:top left;
	-o-transform-origin:top left;
	-webkit-transform-origin:top left;
	-ms-transform-origin:top left;
	
 	-moz-transform: scale(0);  
	-o-transform: scale(0);  
	-webkit-transform: scale(0);  
	-ms-transform: scale(0);  
	transform: scale(0); 
	
	transition: all .5s  cubic-bezier( .6, 2, .4, 1);      
	-moz-transition: all .5s  cubic-bezier( .6, 2, .4, 1);      
	-webkit-transition: all .5s  cubic-bezier( .6, 2, .4, 1);      
	-ms-transition: all .5s  cubic-bezier( .6, 2, .4, 1);      
	-o-transition: all .5s  cubic-bezier( .6, 2, .4, 1);      
    
}#menuPrincipal > ul > li:hover > ul{
        z-index:9999;

 	-moz-transform: scale(1);  
	-o-transform: scale(1);  
	-webkit-transform: scale(1);  
	-ms-transform: scale(1);  
	transform: scale(1);     
	box-shadow: 0 0 5px black;
    text-align:center;

   
}#menuPrincipal > ul > li > ul > li{
    
	float:left;
	width:100%;
    z-index:9999;
    text-align:center;

}
#menuPrincipal > ul > li > ul > li > span{
        z-index:9999;
    text-align:center;


    
}
#menuPrincipal > ul > li > ul > li > form{
        z-index:9999;
    text-align:center;

    float:left;
    display: block;
    width:90%;
    font-weight: bold;
    color:black;    
    cursor: pointer;
	transition: all .5s  cubic-bezier( .6, 2, .4, 1);      
	-moz-transition: all .5s  cubic-bezier( .6, 2, .4, 1);      
	-webkit-transition: all .5s  cubic-bezier( .6, 2, .4, 1);      
	-ms-transition: all .5s  cubic-bezier( .6, 2, .4, 1);      
	-o-transition: all .5s  cubic-bezier( .6, 2, .4, 1);      
   
}

#menuPrincipal > ul > li > ul > li > form:hover{
    
    color:#333;
       z-index:9999;
    text-align:center;

}

#menuPrincipal > ul > li > ul > li > form p{
    
    font-weight: bold;
    margin:0;padding:0;z-index:9999;
}    



#menuPrincipal ul li form, #menuPrincipal ul li form p{
    
    float:left;
    clear:both;
    display:inline;
        z-index:9999;

}
#menuPrincipal ul{   
    
    list-style-type: none;
    margin:0;padding:0;
    float:left; 
        z-index:9999;

    
}
.menuItem{
    
    font-size: 14px;
}




section#main
{


}section#main header{
    
    position: fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background-color: rgba(0,0,0, .6);
    display: none;
    z-index:994;
    
}

section#main header #mainForm{
    
    position:fixed;
    left:25%;
    top:25%;
    max-width:60%;
    max-height:60%;
    overflow:auto;
    clear : both;
    background-color: rgb(200,200,255);
    box-shadow: 0 0 3px gray;
    border: 1px solid gray;
    border-radius: 3px;
    padding: 15px;
    margin: 20px;
    display: none;
    z-index:995;
    
}section#main header div{padding:20px;}

section#main header *{margin-left:20px;}

section#main header, section#main article, section#main footer
{

    clear:both;

}

    section#main ul
	{
	
	/*display:none;*/
	margin:0 0 0 100px;
	padding:0;
	float:left;
	
	}
	section#main ul li
	    {
	   
	    display:inline;
	    padding-right:20px;
	    
	    }



section#main article
{

margin-top:20px;
margin-left:20px;
padding-left:20px;
padding-right:40px;
float:left;
width:100%;
min-height:640px;

}

section#main article hr{

clear:both;
margin: 15px 0 15px 0;
border:none;
border-top:1px black dotted;

}

div#center > footer
{
    

    
}div#center >  form
    {
	
	display:block;
	clear:both;
	margin:auto;
	width:70%;
	
    }

div#center > header > form{
    
    float:left;
    width:100%;
    height:50px;
    overflow: hidden;
    
}

#menuPrincipal form{width:100%;}
#menuPrincipal form p{
    
    width:100%;
    
}

 .bouton{
    
    float:left;
    border-radius:3px;
    background-color:rgb(220,220,255);
    background-image:url(../imgs/template/aamen_texture5.png), linear-gradient(AliceBlue ,RosyBrown ); 
    margin: 5px;
    padding:6px;
    font-weight: bold;
    color:red;
    box-shadow: 0 0 1px #000, inset 0 -10px 8px gray;  
    transition: all .5s cubic-bezier( .6, 2, .4, 1);    
    -moz-transition: all .5s cubic-bezier( .6, 2, .4, 1);    
    -webkit-transition: all .5s cubic-bezier( .6, 2, .4, 1);    
    -ms-transition: all .5s cubic-bezier( .6, 2, .4, 1);    
    -o-transition: all .5s cubic-bezier( .6, 2, .4, 1);   
    cursor: pointer;
    text-shadow:1px 1px 1px white, -1px -1px 1px black;
    min-width:100%;
    text-align:center;
    
} .bouton:hover {
    
    padding:6px;
    box-shadow: 0 0 1px #000, inset 0 10px 4px gray;  
    color:LawnGreen; 
    text-shadow:1px 1px 1px black, 0 0 5px LawnGreen, -1px -1px 1px white;
    background-image:url(../imgs/template/aamen_texture5.png), linear-gradient(RosyBrown , AliceBlue); 
   
} .bouton, input{margin-top:0;height:18px;}

.lien{
    
    display: inline;
    padding:0 5px;
    color:blue;
    text-decoration: underline;
    cursor: pointer;

}


form{margin: 0;padding:0;}

table table{width:100%;}


.ajaxShadow{
    
    position: fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background-color: rgba(0,0,0, .3);
    
}

.ajaxDiv{
    
    position:fixed;
    left:25%;
    top:10%;
    max-width:800px;
    max-height:70%;
    clear : both;
    background-color: white;
    background-image:url(../imgs/template/aamen_texture6.png), linear-gradient(135deg, #505050, white 30%, gray);
    background-position: 50% 50%, 80% 80%;
    background-size:800px 100px, 150% 150%;  
    
	transition: all 1.5s  cubic-bezier( .6, 2, .4, 1);      
	-moz-transition: all 1.5s  cubic-bezier( .6, 2, .4, 1);      
	-webkit-transition: all 1.5s  cubic-bezier( .6, 2, .4, 1);      
	-ms-transition: all 1.5s  cubic-bezier( .6, 2, .4, 1);      
	-o-transition: all 1.5s  cubic-bezier( .6, 2, .4, 1);      box-shadow: 0 0 13px black;
    border: 1px solid gray;
    border-radius: 5px;
    padding: 3% 3% 3% 1.5%;
    margin: 3%;
    display: none;    
    
}



.ajaxDiv:hover{
    
    background-position: 50% 50%, 20% 20%;    
    
}.ajaxDiv:hover fieldset{
    
    background-position: 0 0, 80% 80%;    
    
}


.ajaxDiv fieldset{
    
    border-radius:5px;
    max-width:100%;
    background-image:url(../imgs/template/aamen_texture5.png), linear-gradient(30deg, Gainsboro ,gray, AliceBlue); 
    box-shadow: inset 1px 1px 3px gray, 0 0 3px gray;
    margin-top:30px;
    background-position: 0 0, 20% 20%;
    background-size:800px 100px, 150% 150%;  
    
	transition: all 1.5s  cubic-bezier( .6, 2, .4, 1);      
	-moz-transition: all 1.5s  cubic-bezier( .6, 2, .4, 1);      
	-webkit-transition: all 1.5s  cubic-bezier( .6, 2, .4, 1);      
	-ms-transition: all 1.5s  cubic-bezier( .6, 2, .4, 1);      
	-o-transition: all 1.5s  cubic-bezier( .6, 2, .4, 1); 
     
    
}


.ajaxDiv legend{
    
    position: relative;
    top:-25px;
    left:-3px;
    font-family: lcddot;
    background-color:rgb(70,70,70);
    font-size: 24px;
    padding:5px;
    margin:5px;
    width:100%;
    text-align:center;
    box-shadow: inset 2px 2px 3px black, 0 2px 3px white, 0 -2px 3px gray;
    border-radius:20px;
    color:white;/*#a7a694;*/
    text-shadow: 1px 1px 10px white;
    
}
.ajaxDiv input, .ajaxDiv textarea, .ajaxDiv select {width:100%;}


.vis{
    
    position:absolute;
    border-radius:50%;
    background-color:white;
    width:5px;
    height:5px;
    box-shadow: inset 2px 2px 5px white,inset -2px -2px 5px black, 2px 2px 2px black;     
    
}

.ajaxDiv .vis1{
    
    left:5%;
    top:5%;    
    
}

.ajaxDiv .vis2{
    
    left:92%;
    top:92%;    
    
}

.ajaxDiv .vis3{
    
    left:92%;
    top:5%;    
    
}

.ajaxDiv .vis4{
    
    left:5%;
    top:92%;    
    
}

.ajaxDiv textarea{
    
    height:75px;
    
}

.ajaxDiv .msgCheckbox{
    
    float: left;
    font-family: lcddot;
    background-color:#a7a694;
    font-size: 24px;
    padding:5px;
    margin:0 20px;
    width:50%;
    height:24px;
    text-align:left;
    box-shadow: inset 2px 2px 3px black;
    border-radius:3px;
    color:black;
    text-shadow: 1px 1px 1px gray;
    
    transition: all .2s cubic-bezier(.28,2.73,.81,-0.9);    
    -moz-transition: all .2s cubic-bezier(.28,2.73,.81,-0.9);    
    -webkit-transition: all .2s cubic-bezier(.28,2.73,.81,-0.9);    
    -ms-transition: all .2s cubic-bezier(.28,2.73,.81,-0.9);    
    -o-transition: all .2s cubic-bezier(.28,2.73,.81,-0.9);    
    
}

.ajaxDiv input, .ajaxDiv textarea, .ajaxDiv select{
    
    font-family: lcddot;
    background-color:#a7a694;
    font-size: 24px;
    padding:5px;
    margin:5px;
    width:100%;
    text-align:left;
    box-shadow: inset 2px 2px 3px black;
    border-radius:3px;
    color:black;
    text-shadow: 1px 1px 1px gray;
    
    transition: all .2s cubic-bezier(.28,2.73,.81,-0.9);    
    -moz-transition: all .2s cubic-bezier(.28,2.73,.81,-0.9);    
    -webkit-transition: all .2s cubic-bezier(.28,2.73,.81,-0.9);    
    -ms-transition: all .2s cubic-bezier(.28,2.73,.81,-0.9);    
    -o-transition: all .2s cubic-bezier(.28,2.73,.81,-0.9);
    
}

.ajaxDiv input:focus, .ajaxDiv textarea:focus, .ajaxDiv select:focus{
    
    
        background-color:#E8E046;
	box-shadow: 0 0 20px #E8E046;

    
}

/*.ajaxDiv select{
    
    background-color: white;
    background-image:url(../imgs/template/aamen_texture6.png);
    box-shadow: 0 0 13px black;
    border: 1px solid gray;
    border-radius: 5px;
    padding:5px;
    margin:5px;
     
}*/
.ajaxDiv select option{
    
    background-color: white;
    background-image:url(../imgs/template/aamen_texture6.png), linear-gradient(90deg ,gray, AliceBlue ,gray);
    font-weight: bold;
    font-family: arial, sans-serif;
}


.alert {
    color: white;
    -moz-animation: anim_alert 2s ease infinite;
}

@-moz-keyframes anim_alert {
    0% {
		
	text-shadow: 0 0 0 #ff0000;
	animation-timing-function: ease;
    }


    50% {
	text-shadow: 0 0 5px #ff0000;
	background-position: 50% 50%, 80% 80%;
    }

    100% {
	text-shadow: 0 0 0 #ff0000;
	animation-timing-function: ease;
    }
}