/*    Fichier CSS
_________________________
_________________________

Créé par LM SYSTEM
###Michaël LEBREF###
Copyright © mars 2020
Tous droits réservés
_________________________
_________________________

*/
html, body { 
min-height:100%;
width:100%;
}

body {
background-color:#8e8ae9;
}

/*  ------------------------------ HEADER --------------------------------------- */
div#header {
position:relative;
margin-left:15%;
margin-right:15%;
width:70%;
height:135px;
background-color:bab7f3;
}

/* ----------------------- START OF HORIZONTAL MENU ----------------------------- */

div#nav {
display:flex;
width:auto;
height:auto;
margin-right:50px;
background: transparent no-repeat center center;
}

 ul.nav{
    display: table;
    width: 530px;
    margin: 10px auto;
    padding: 0;
 
    background: linear-gradient(deepskyblue, dodgerblue);
    background: -webkit-linear-gradient(deepskyblue, dodgerblue);
    background:    -moz-linear-gradient(deepskyblue, dodgerblue);
    background:     -ms-linear-gradient(deepskyblue, dodgerblue);
    background:      -o-linear-gradient(deepskyblue, dodgerblue);
    background:         linear-gradient(deepskyblue, dodgerblue);
    background: dodgerblue;
	border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3),
                0 3px 5px rgba(0, 0, 0, .2),
                0 5px 10px rgba(0, 0, 0, .2),
                0 20px 20px rgba(0, 0, 0, .15);
}

ul.nav li.nav{
    display: table-cell;
}

ul.nav li.nav a.nav{
    display: block;
    text-align: center;
    color: rgba(0, 0, 0, .7); 
    text-decoration: none;
    padding: 8px 8px 17px 8px;
	text-shadow: 0 1px 0 rgba(255, 255, 255, .4);
	box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 
                0 -1px 0 hsl(210, 100%, 32%) inset, 
                0 -2px 0 hsl(210, 100%, 38%) inset, 
                0 -3px 0 hsl(210, 100%, 44%) inset, 
                0 -4px 0 hsl(210, 100%, 50%) inset, 
                0 -5px 0 hsl(210, 100%, 60%) inset;
 	transition: all .3s .1s;
	position: relative;
}

ul.nav li.nav:first-child a.nav{
    border-radius: 3px 0 0 3px;
}

ul.nav li.nav:last-child a.nav{
    border-radius: 0 3px 3px 0;
}

ul.nav li.nav a.nav:hover, 
ul.nav li.nav a.nav:focus{
    background: rgba(255,255,255,.2);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 
                0 -1px 0 hsl(210, 100%, 42%) inset, 
                0 -2px 0 hsl(210, 100%, 48%) inset, 
                0 -3px 0 hsl(210, 100%, 54%) inset, 
                0 -4px 0 hsl(210, 100%, 60%) inset, 
                0 -5px 0 hsl(210, 100%, 70%) inset; 
	padding: 8px 25px 17px 25px;
	transition: all .3s 0s;
} 

ul.nav li.nav a.nav:active{
    background: linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.1)); 
    box-shadow: 0 0 2px rgba(0,0,0,.3) inset;
}

ul.nav li.nav a.nav::before{
    content: '';
    position: absolute;
    left: 50%;
    bottom: 9px;
    margin-left: -2px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .5);
}

/*  ------------------------- END OF HORIZONTAL MENU  -------------------------------  */

div#banner {
display:flex;
width:70%;
height:100px;
background-color:#bab7f3;
background-image:url('../IMG/blue-banner-t-e-600x90.jpg');
background-repeat: no-repeat;
background-position: left top;
box-shadow:0px 0px 20px #3d3d3d;
border-radius:0px;
padding:0px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
margin-left:15%;
margin-right:15%;
padding:0;
}

/* --------------------------------- CONTENT ----------------------------------------- */
/* ------------------------------- CENTER PAGE --------------------------------------- */

div#center {
position:absolute;
margin-left:25%;
margin-right:25%;
width:auto;
height:auto;
margin-top:50px;
margin-bottom:20px;
padding-left:auto;
padding-right:auto;
background-color:#bab7f3;
box-shadow:0px 0px 20px #3d3d3d;
border-radius:0px;
padding:0px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}

div#content {
text-align:center;
margin-left:auto;
margin-right:auto;
padding-right:3px;
padding-left:3px;
padding-bottom:20px;
}

table	{
border-collapse:separate;
border-spacing:10px;
padding-left:5%;
padding-right:5%;
}

td, tr {
border-top: 1px solid #566181;
border-left:1px solid #566181;
border-right:3px solid #566181;
border-bottom:3px solid #566181;
padding:2px;
text-align:left;
margin-left:5px;
padding-left:5px;
padding-right:5px;
}

h1 {
text-align:center;
font-size:18px;
font-family:Trebuchet MS, verdana, times new roman, arial;
color:#ab1717;
}

h2 {
text-align:center;
margin-left:15px;
margin-right:15px;
font-size:16px;
font-family:Trebuchet MS, verdana, times new roman, arial;
color:#ab1717;
}

h3 {
text-align:center;
margin-left:25px;
margin-right:25px;
font-size:14px;
font-family:Trebuchet MS, verdana, times new roman, arial;
color:#ab1717;
}

p {
text-align:justify;
margin-left:15px;
font-size:14px;
font-family:Trebuchet MS, verdana, times new roman, arial;
color:#000;
}

ul {
text-align:left;
}

a:link {
text-decoration:none;
font-family:Trebuchet MS, verdana, times new roman, arial;
background-color:transparent;
color:#000;
font-size:14px;
}

a:visited {
text-decoration:none;
color:#000;
font-size:14px;
}

a:hover {
text-decoration:underline;
color:#333;
}

.intro	{
font-size:16px;
text-align:center;
}

.img	{
max-width:100%;
max-height:100%;	
}

/*  -------------------------------- END OF CENTER --------------------------------------  */

/* ------------------------------------ FOOTER ------------------------------------------  */

div#footer {
position:relative;
margin-left:15%;
margin-right:15%;
margin-bottom:0;
margin-top:980px;
padding-top:10px;
width:70%;
height:80px;
background-color:#8e8ae9;
}

.footer {
clear:booth;
text-align:center;
margin-top:10px;
font-size:12px;
font-family:Trebuchet MS, verdana, arial;
}