@media all and (max-width: 800px){
header , nav , main , footer {
        width: 95%;
        margin: auto;
}
fieldset {
    width: 85%;
    margin: auto;
}
}
@media all and (min-width : 801px){
header , nav , main , footer {
        width: 750px;
        margin: auto;
}
fieldset {
    width: 500px;
    margin: auto;
}
}
body , * , ::before , ::after {
    margin : 0;
    padding : 0;
    box-sizing: border-box;
}
nav , header , main , footer {
    border: #000080 1px solid;
    padding : 5px;
}
body {
    margin-top: 5px;
    font-family: Tahoma, Geneva, sans-serif;
    background-color: #F5F5F5;
}

a:hover {
    text-decoration: none;
}
header img {
    width: 50%;
    display: block;
    margin: auto;
}
nav , footer {
    text-align: center;
    background-image: linear-gradient(to bottom, #5CC3FF, #FFFFFF);
}
h1 {
    font-size: 100%;
    text-align: center;
}
h2 {
    font-size: 75%;
}
h4 {
    background-color: #A9A9A9;
}

h5 {
    display: inline-block;
}
ul {
    margin-left: 15px;
}
li {
    list-style: square;
}

fieldset {
    background-image: linear-gradient(to bottom, #C0C0C0, #D3D3D3);
    padding: 15px;
}
legend {
    color: #008080;
}
label , input , textarea , select {
    display: block;
}
input , select {
    width: 100%;
    height: 25px;
}
textarea {
    width: 100%;
    height: 100px;
    resize: none;
    overflow: auto;
}
input:valid , textarea:valid , select:valid  {
    box-shadow: inset 1px 1px 1px 1px #00FF00 ;
}
input:invalid , textarea:invalid , select:invalid {
    box-shadow: inset 1px 1px 1px 1px #FF0000;
}

button {
    padding: 5px;
    margin : 5px;
    background-image: linear-gradient(to bottom, #5CC3FF, #AFEEEE);
    color: #000080;
    font-weight: bold;
}
nav , footer {
    font-size: 75%;
    font-weight: bold;
}
footer img {
    width: 65px;
    height: auto;
}

/* class */
.msg-success {
    width: 100%;
    height: auto;
   padding: 5px;
    background-color: greenyellow;
    color:green;
}
.msg-info {
    width: 100%;
    height: auto;
   padding: 5px;
    background-color:lightskyblue;
    color:midnightblue;
}
.msg-alert {
    width: 100%;
    height: auto;
   padding: 5px;
    background-color:moccasin;
    color:olive;
}
.msg-danger {
    width: 100%;
    height: auto;
   padding: 5px;
    background-color:lightpink;
    color:red;
}
.pub {
    background-color: #D3D3D3;
    color: #00008B;
    font-size: smaller;
    font-weight: bolder;
}
.pub a {
    color: #00008B;
}
.breadcrumb {
    font-size: x-small;
    margin: 10px;
}
.breadcrumb a {
    color: #008000;
}

/* id */
#msg-email {
    background-color: #D3D3D3;
    color: #00008B;
    font-size: smaller;
    font-weight: bolder;
}
#liste-associations table, #liste-visiteurs table {
    width: 100%;
    background-color: #DCDCDC;
    font-size: small;
    text-align: left;
    border: #000080 1px solid;
    overflow: auto;

}
#liste-associations th , #liste-visiteurs th {
    background-color: #A9A9A9;
    color: #800000;
}