/*Reset CSS*/
*{
    margin: 0px;
    padding: 0px;
    font-family: Arial;
}
nav{
    width: 100%;
    margin: 0 auto;
    background-color: white;
    position: relative;
    top: 0px;
}
.conteneur-nav{
    position: relative;
    width: 100%;
}
nav input[type=checkbox]{
    display: none;
}
nav label{
    display: inline-block;
    width: 100%;
    padding: 10px 0px;
    text-align: left;
    background-color: #EEEEEE;
}
nav ul{
    display: none;
    list-style-type: none;
    background-color: #EEEEEE;
}
nav input[type=checkbox]:checked + ul{
    display: flex;
    flex-flow : column wrap;
}
nav ul li{
    flex: 1 1 auto;
    text-align: left;
    font-size: 12px;
}
nav > div > ul > li > a{
    color: white;
	font-size: 12px;
}
nav a{
    display: block;
    text-decoration: none;
    color: black;
    padding: 5px 0px;
}
.sous{
    display: flex;
    flex-flow: column wrap;
    z-index: 1000;
	font-size: 12px;
}

.sous li{
    flex: 1 1 auto;
    text-align: left;
	font-size: 10px;
}
.sous a{
    padding: 10px;
    background-color: #EEEEEE;
}

@media screen and (min-width: 980px){
    .conteneur-nav{
        position: static;

    }
    nav label, nav input{
        display: none;
		font-size: 16px;
    }
    nav input[type=checkbox]:checked + ul, nav ul{
        display: flex;
        flex-flow: row wrap;
        background-color: #EEEEEE;
    }
    nav ul li{
        position: relative;
		font-size: 16px;
    }
    nav > div > ul > li > a{
        color: black;
		font-size: 16px;
    }
    nav a{
        border-bottom: 2px solid transparent;
		font-size: 16px;
    }
    nav a:hover{
        color: white;
        border-bottom: 2px solid gold;
		font-size: 16px;
    }
    .sous{
        display: none;
        box-shadow: 0px 1px 2px #EEEEEE;
        background-color: #EEEEEE;
        position: absolute;
        width: 100%;
		font-size: 16px;
    }
    nav > div > ul li:hover .sous{
        display: flex;
        flex-flow: column wrap;
		font-size: 16px;
    }
    .sous a{
        border-bottom: none;
        background-color: #EEEEEE;
		font-size: 16px;
    }
    .sous a:hover{
        border-bottom: none;
        background-color: #EEEEEE;
		font-size: 16px;
    }
    .deroulant > a::after{
        content:">";
        font-size: 16px
    }
}

.conteneur-contenu{
  margin: 10px 50px;
  height: 1500px;
}

body {
font-size: 16px; 
font-family: Arial;
}
#lightbox{
	background-color:#eee;
	padding: 10px;
	border-bottom: 2px solid #666;
	border-right: 2px solid #666;
	}
#lightboxDetails{
	font-size: 0.8em;
	padding-top: 0.4em;
	}	
#lightboxCaption{ float: left; }
#keyboardMsg{ float: right; }
#closeButton{ top: 5px; right: 5px; }

#lightbox img{ border: none; clear: both;} 
#overlay img{ border: none; }

#overlay{ background-image: url(overlay.png); }

* html #overlay{
	background-color: #333;
	back\ground-color: transparent;
	background-image: url(blank.gif);
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="overlay.png", sizingMethod="scale");
	}
	
	h1{
		font-size:180%;
		font-weight:normal;
		margin:0;
		padding:0 20px;
		}
	h2{
		font-size:160%;
		font-weight:normal;
		}	
	h3{
		font-size:140%;
		font-weight:normal;
		}	
	img{border:1px;}
	pre{
		display:block;
		font:12px "Courier New", Courier, monospace;
		padding:10px;
		border:1px solid #bae2f0;
		background:#e3f4f9;	
		margin:.5em 0;
		width:396px;
		}	
			
    /* image replacement */
        .graphic, #prevBtn, #nextBtn, #slider1prev, #slider1next{
            margin:0;
            padding:0;
            display:block;
            overflow:hidden;
            text-indent:-8000px;
            }
    /* // image replacement */
			
	#container{	
		margin:0 auto;
		border:1px solid #bae2f0;
		position:relative;
		text-align:left;
		width:396px;
		background:#fff;		
		margin-bottom:2em;
		}	
	#header{
		height:80px;
		line-height:80px;
		background:#5DC9E1;
		color:#fff;
		}				
	#content{
		position:relative;
		}			

/* Easy Slider */

	#slider ul, #slider li,
	#slider2 ul, #slider2 li{
		margin:0;
		padding:0;
		list-style:none;
		}
	#slider2{margin-top:1em;}
	#slider li, #slider2 li{ 
		/* 
			define width and height of list item (slide)
			entire slider area will adjust according to the parameters provided here
		*/ 
		width:396px;
		height:220px;
		overflow:hidden; 
		}	
	#prevBtn, #nextBtn,
	#slider1next, #slider1prev{ 
		display:block;
		width:30px;
		height:77px;
		position:absolute;
		left:-30px;
		top:71px;
		z-index:1000;
		}	
	#nextBtn, #slider1next{ 
		left:396px;
		}														
	#prevBtn a, #nextBtn a,
	#slider1next a, #slider1prev a{  
		display:block;
		position:relative;
		width:33px;
		height:60px;
		background:url(../images/btn_prev.gif) no-repeat 0 0;	
		}	
	#nextBtn a, #slider1next a{ 
		background:url(../images/btn_next.gif) no-repeat 0 0;	
		}	
		
	/* numeric controls */	

	ol#controls{
		margin:1em 0;
		padding:0;
		height:28px;	
		}
	ol#controls li{
		margin:0 10px 0 0; 
		padding:0;
		float:left;
		list-style:none;
		height:28px;
		line-height:28px;
		}
	ol#controls li a{
		float:left;
		height:28px;
		line-height:28px;
		border:1px solid #ccc;
		background:#DAF3F8;
		color:#555;
		padding:0 10px;
		text-decoration:none;
		}
	ol#controls li.current a{
		background:#5DC9E1;
		color:#fff;
		}
	ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}
	
/* // Easy Slider */


@media only screen and (max-width:980px) {
 body {
font-size: 30px; 
font-family: Arial;
 }
}

.tableaux{
  display:inline-block;
  vertical-align:top;
}

.tabfont{
font-size: 18px; 
font-family: Arial;
}
@media only screen and (max-width:980px) 
{
.tabfont{
font-size: 22px;
font-family: Arial;
}
}

.tabfontitre{
font-size: 20px; 
font-family: Arial;
}
@media only screen and (max-width:980px) 
{
.tabfontitre{
font-size: 24px;
font-family: Arial;
}
}


.tabfontitrecom{
font-size: 20px; 
font-family: 'Comic Sans MS';
src: url("comic-sans-ms/comici.ttf");
}
@media only screen and (max-width:980px) 
{
.tabfontitrecom{
font-size: 24px;
font-family: 'Comic Sans MS';
src: url("comic-sans-ms/comici.ttf");
}
}

.tabtitre{
font-size: 22px; 
font-family: Arial;
}
@media only screen and (max-width:980px) 
{
.tabtitre{
font-size: 26px;
font-family: Arial;
}
}

.tabpara{
font-size: 16px; 
font-family: Arial;
}
@media only screen and (max-width:980px) 
{
.tabpara{
font-size: 20px;
font-family: Arial;
}
}

.tabparacom{
font-size: 16px; 
font-family: 'Comic Sans MS';
src: url("comic-sans-ms/comici.ttf");
}
@media only screen and (max-width:980px) 
{
.tabparacom{
font-size: 20px;
font-family: 'Comic Sans MS';
src: url("comic-sans-ms/comici.ttf");
}
}

.imgcache {
 
}
@media only screen and (max-width:980px) 
{
.imgcache{
display: none;
}
}

.imgdim {
 
}
@media only screen and (max-width:980px) 
{
.imgdim{
  width: auto ;
  max-width: 40% ;
  height: auto ;
}
}

.tableaux{
  display:inline-block;
  *zoom: 1;
  *display: inline;
  vertical-align:top;
  border-width:0px; 
  border-style:solid; 
  border-color:black;
}

.tableaux2{
  display:inline-block;
  *zoom: 1;
  *display: inline;
  vertical-align:top;
  border-width:1px; 
  border-style:solid; 
  border-color:black;
}

.tabinter{
  display:inline-block;
  *zoom: 1;
  *display: inline;
  vertical-align:top;
  border-width:0px; 
  border-style:solid; 
  border-color:black;
}

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

.retrait {
margin-left:80px;
}