/*_________
 _/ general \_______________________________________________*/
 
 @font-face {
    font-family: 'JosefinSansStdLight';
    src: url('JosefinSansStd-Light-webfont.eot');
    src: url('JosefinSansStd-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('JosefinSansStd-Light-webfont.woff') format('woff'),
         url('JosefinSansStd-Light-webfont.ttf') format('truetype'),
         url('JosefinSansStd-Light-webfont.svg#JosefinSansStdLight') format('svg');
    font-weight: normal;
    font-style: normal;
}

 @font-face {
    font-family: 'josefinregular';
    src: url('josefinsans-regular-webfont.eot');
    src: url('josefinsans-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('josefinsans-regular-webfont.woff') format('woff'),
         url('josefinsans-regular-webfont.ttf') format('truetype'),
         url('josefinsans-regular-webfont.svg#josefinsansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
  
   @font-face {
    font-family: 'JosefinSanssemibold';
    src: url('JosefinSans-semibold-webfont.eot');
    src: url('JosefinSans-semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('JosefinSans-semibold-webfont.woff') format('woff'),
         url('JosefinSans-semibold-webfont.ttf') format('truetype'),
         url('JosefinSans-semibold-webfont.svg#JosefinSanssemibold') format('svg');
    font-weight: normal;
    font-style: normal;
}
  
   @font-face {
    font-family: 'redressed';
    src: url('redressed.eot');
    src: url('redressed.eot?#iefix') format('embedded-opentype'),
         url('redressed.woff') format('woff'),
         url('redressed.ttf') format('truetype'),
         url('redressed.svg#redressed') format('svg');
    font-weight: normal;
    font-style: normal;
}
   @font-face {
    font-family: 'go';
    src: url('go.eot');
    src: url('go.eot?#iefix') format('embedded-opentype'),
         url('go.woff') format('woff'),
         url('go.ttf') format('truetype'),
         url('go.svg#go') format('svg');
    font-weight: normal;
    font-style: normal;
}
  
body{
margin:0;
padding:0;
font-family: 'JosefinSansStdLight',"Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", "Luxi Sans", sans-serif;
font-size:20px;
line-height:22px;
width:100%;
background-color:#00000;
/*background-image:url('../tl/bobinetestbis.jpg');*/
background-position:-360px 0;
background-repeat:no-repeat;
color:#000;
}

/* _______________________
 _/ général : typographie \_______________________________________________*/

a {text-decoration:none;background-color:transparent;}
a:hover , a:active, a:focus {text-decoration:none;background-color:transparent;}
a:visited {background-color:transparent;}

p{
	font-family: 'JosefinSansStdLight',"Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", "Luxi Sans", sans-serif;

padding-bottom:0;
padding-top:0;
padding-left:60px;
padding-right:40px;
text-align:justify;
color:#000;
margin-top:5px;
margin-bottom:20px;

clear:both;
}
.onde{
background-color:transparent;
/*background-image:url('../tl/slip2.png');
background-position: bottom left;
background-repeat:repeat-x;*/
border-bottom: 0 dashed black;
padding-bottom:50px;


}

p a {color:#E54314;}
p a:hover, a:active, a:focus  {color:blue;background-color:transparent;}
p a:visited {color:#E54314;background-color:transparent;}


h1{
	font-family:  'redressed', "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", "Luxi Sans", sans-serif;
position:absolute;
top:80px;
right:-30px;
display:block;
margin-top:10px;
text-align:center;
background-color:#ffffff;
border:0 solid black;
font-size:28px;
line-height:17px;
color:#be0b1e;
height:60px;
font-weight:normal;
z-index:900;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
behavior: url('./tl/PIE.php');
}
h2{
	font-family: 'go',"Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", "Luxi Sans", sans-serif;
font-size:20px;
font-weight:bold;
text-align:left;
margin-right:60px;
margin-left: 60px;
margin-top: 10px;
margin-bottom: 20px;
padding:0;
line-height:36px;
border-style: solid;
border-width: 1px 0px 1px 1px;
-moz-border-image: url(../tl/tiret.jpg) 1 0 repeat;
-webkit-border-image: url(../tl/tiret.jpg) 1 0 repeat;
-o-border-image: url(../tl/tiret.jpg) 1 0 repeat;
border-image: url(../tl/tiret.jpg) 1 0 repeat;
}
h3{font-size:24px;	font-family: 'JosefinSansStdLight',"Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", "Luxi Sans", sans-serif;
line-height: 28px;
clear:both;
padding-left:15px;
margin-right:60px;
clear:both;
font-variant:small-caps;
border-left: 10px solid Crimson;
border-bottom: 1px solid Crimson;
background-color: ;
}

h4{font-size:22px; font-family: 'JosefinSansStdLight', "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", "Luxi Sans", sans-serif;
clear:both;line-height:40px;margin-left:60px;margin-top:20px;margin-bottom:-10px; }
/* classes pour flêches vers le bas en haut à gauche d'un bloc ou d'un h */
.ocre{background-image:url('../tl/flecheocre.png');background-position:top left;background-repeat:no-repeat;}
.rose{background-image:url('../tl/flecherose.png');background-position:top left;background-repeat:no-repeat;}
.jaune{background-image:url('../tl/flechejaune.png');background-position:top left;background-repeat:no-repeat;}
.bleu{background-image:url('../tl/flechebleue.png');background-position:top left;background-repeat:no-repeat;}
.violet{background-image:url('../tl/flecheviolet.png');background-position:top left;background-repeat:no-repeat;}
.vert{background-image:url('../tl/flecheverte.png');background-position:top left;background-repeat:no-repeat;}
.orange{background-image:url('../tl/flecheorange.png');background-position:top left;background-repeat:no-repeat;}

h2,h3{color:#000;}
h5,h6{font-size:14px;}
h5,h6{color:#999;}
h3,h5,h6{margin-left:60px;margin-top:40px;margin-bottom:35px;}
h3,h5,h6{font-weight:bold;}
.menubas{
	margin-top:100px;
font-size:16px;
background-image:none;
text-align:center;
padding:0;
border:0;
}


/* ___________
 _/ structure \_______________________________________________*/
 
#contenu{
position:absolute;
top:20px;
left:200px;
width:75%;
margin-bottom:20px;
padding-top:180px;
padding-left:0;
padding-right:0;
z-index:700;
background-color:white;
/*-moz-box-shadow: 0 2px 7px #000; 
-webkit-box-shadow: 0 2px 7px #000; 
box-shadow: 0 2px 9px #000;*/
behavior: url('./tl/PIE.php');
clear:both;
}
ul{
	font-family: 'josefinregular', "georgia", "garamond", "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", "Luxi Sans", sans-serif;
   font-weight: normal;
    font-style: normal;
    font-size:20px;
position: fixed;
top:40px;
left:20px;
margin-top:0;
display:block;
width:160px;
min-height:40%;
background-color: #ffef49;
list-style-type:none;
text-align:right;
padding-top:20px;
padding-left:0;
padding-right:0;
padding-bottom:20px;
line-height:26px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0 2px 7px rgba(0, 0, 0, 0.5); 
-webkit-box-shadow: 0 2px 7px rgba(0, 0, 0, 0.5); 
box-shadow: 0 2px 7px rgba(0, 0, 0, 0.5);
behavior: url('./tl/PIE.php');
z-index:900;
}
li{
width:160px;
padding:0;
display:block;
float:right;
margin-right:20px;
z-index:750;
}
li a{display:block;background-color:transparent;color:#000;width:160px;}
li a:hover, a:active, a:focus{background-color: red;color:#fff;font-weight:normal;}
.courant {background-color:#000;color:#fff;font-weight:normal;
}
#accessibilite{
position: absolute;
top:0;
left:0;
width:100%;
z-index:800;
height:20px;
font-style:italic;
background-color:black;
color:#fff;
-moz-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); 
-webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); 
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
behavior: url('./tl/PIE.php');
}
#accessibilite a {color:white;}
#accessibilite a:hover {color:#F15A22;background-color:transparent;}
#accessibilite a:visited {color:#fff;background-color:transparent;}

#accessibilite p{
font-family: 'JosefinSansStdLight',"Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", "Luxi Sans", sans-serif;
font-style:normal;
font-size:18px;
line-height:20px;
border:0;
margin-top:20px;
margin-left:0;
color:black;
background-image:none;
padding:0;
}
#accessibilite p a{
color:green;
}
#accessibilite span{
font-family: 'JosefinSansStdLight',"Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", "Luxi Sans", sans-serif;
font-style:italic;
display:block;
clear:both;
margin-left:10px;
margin-bottom:0;
margin-top:0;
margin-right:0;
}


/* ________
 _/ images \_______________________________________________*/

 
img {	
	
	margin-top:10px;
margin-bottom:30px;
margin-left:60px;
border:0 solid #000;
max-height:90%;
max-width:90%;
-moz-box-shadow: 2px 2px 10px #000; 
-webkit-box-shadow: 2px 2px 10px #000; 
box-shadow: 2px 2px 10px #000; 
behavior: url('./tl/PIE.php');
	margin-right:0;
}

.pic-l{
	max-height:80%;
	max-width:50%
	margin-right:0;
	}
.pic-m{
	max-height:50%;
		max-width:30%
margin-right:0;
	}
.pic-ml{
	max-height:60%;
		max-width:40%
margin-right:0;

	}
.pic-ms{
	max-height:40%;
		max-width:30%
margin-right:0;
}

.pic-s{
	max-height:30%;
		max-width:25%
	margin-right:0;
}
.pic-ml{
	max-height:60%;
		max-width:505%
	margin-right:0;
}

.noshadow{
	
border:0 solid black;
-moz-box-shadow: 0 0 0 transparent; 
-webkit-box-shadow: 0 0 0 transparent; 
box-shadow: 0 0 0 transparent; 
behavior: url('./tl/PIE.php');

}
.center {
    text-align:center;
    width:100%;
    float:left;
    border:0 solid black;
}

.tete{
	float:left;
min-width:500px;
min-height:65px;
max-width:500px;
max-height:65px;
margin-top:20px;
margin-left:260px;
margin-right:64px;
border:0;
-moz-box-shadow: 0 0 0 transparent; 
-webkit-box-shadow: 0 0 0 transparent; 
box-shadow: 0 0 0 transparent; 
behavior: url('./tl/PIE.php');
}



#btn_up
{
position: fixed;
bottom: 15px;
right: 35px;
cursor: pointer;
display:none;
z-index:900;
font-decoration:none;
}
#btn_up img
{
-moz-box-shadow: 0 0 0 transparent; 
-webkit-box-shadow: 0 0 0 transparent; 
box-shadow: 0 0 0 transparent; 
behavior: url('./tl/PIE.php');
border:0;
}
.biopic{
margin:0;
-moz-box-shadow: 0 0 0 transparent; 
-webkit-box-shadow: 0 0 0 transparent; 
box-shadow: 0 0 0 transparent; 
behavior: url('./tl/PIE.php');
border:0;
}
/* __________
 _/ éventail \_______________________________________________*/
 
.even1 {

	z-index:600;
margin-top:10px;
margin-bottom:30px;
margin-left:60px;
border:0 solid #000;
max-height:200px;
max-width:90%;
-moz-box-shadow: 2px 2px 10px #000; 
-webkit-box-shadow: 2px 2px 10px #000; 
box-shadow: 2px 2px 10px #000; 
-webkit-transform: rotate(-15deg);
			-moz-transform: rotate(-15deg);
			-ms-transform: rotate(-15deg);
			-o-transform: rotate(-15deg);
			transform: rotate(-15deg);
			
			-webkit-transform-origin: 50% 50%;
			-moz-transform-origin: 50% 50%;
			-ms-transform-origin: 50% 50%;
			-o-transform-origin: 50% 50%;
			transform-origin: 50% 50%;

behavior: url('./tl/PIE.php');
	margin-right:0;
	
}
.even2 {
	
		z-index:800;
margin-top:-15px;
margin-bottom:30px;
margin-left:-100px;
border:0 solid #000;
max-height:270px;
max-width:90%;
-moz-box-shadow: 2px 2px 10px #000; 
-webkit-box-shadow: 2px 2px 10px #000; 
box-shadow: 2px 2px 10px #000; 
-webkit-transform: rotate(-7deg);
			-moz-transform: rotate(-7deg);
			-ms-transform: rotate(-7deg);
			-o-transform: rotate(-7deg);
			transform: rotate(-7deg);
			
			-webkit-transform-origin: 50% 50%;
			-moz-transform-origin: 50% 50%;
			-ms-transform-origin: 50% 50%;
			-o-transform-origin: 50% 50%;
			transform-origin: 50% 50%;
behavior: url('./tl/PIE.php');
	margin-right:0;
}
.even3 {
		z-index:700;
margin-top:-15px;
margin-bottom:30px;
margin-left:-100px;
border:0 solid #000;
max-height:200px;
max-width:90%;
-moz-box-shadow: 2px 2px 10px #000; 
-webkit-box-shadow: 2px 2px 10px #000; 
box-shadow: 2px 2px 10px #000; 
-webkit-transform: rotate(7deg);
			-moz-transform: rotate(7deg);
			-ms-transform: rotate(7deg);
			-o-transform: rotate(7deg);
			transform: rotate(7deg);
			
			-webkit-transform-origin: 50% 50%;
			-moz-transform-origin: 50% 50%;
			-ms-transform-origin: 50% 50%;
			-o-transform-origin: 50% 50%;
			transform-origin: 50% 50%;

behavior: url('./tl/PIE.php');
	margin-right:0;
}
.even4 {
	
		z-index:600;
margin-top:10px;
margin-bottom:30px;
margin-left:-100px;
border:0 solid #000;
max-height:200px;
max-width:90%;
-moz-box-shadow: 2px 2px 10px #000; 
-webkit-box-shadow: 2px 2px 10px #000; 
box-shadow: 2px 2px 10px #000; 
-webkit-transform: rotate(15deg);
			-moz-transform: rotate(15deg);
			-ms-transform: rotate(15deg);
			-o-transform: rotate(15deg);
			transform: rotate(15deg);
			
			-webkit-transform-origin: 50% 50%;
			-moz-transform-origin: 50% 50%;
			-ms-transform-origin: 50% 50%;
			-o-transform-origin: 50% 50%;
			transform-origin: 50% 50%;
behavior: url('./tl/PIE.php');
	margin-right:0;
}


.courbe1 {
	float:left;
	z-index:600;
margin-top:0;
margin-bottom:30px;
margin-left:60px;
border:0 solid #000;
max-height:200px;
max-width:90%;
-moz-box-shadow: 2px 2px 10px #000; 
-webkit-box-shadow: 2px 2px 10px #000; 
box-shadow: 2px 2px 10px #000; 
-webkit-transform: rotate(-5deg);
			-moz-transform: rotate(-5deg);
			-ms-transform: rotate(-5deg);
			-o-transform: rotate(-5deg);
			transform: rotate(-5deg);
			
			-webkit-transform-origin: 50% 50%;
			-moz-transform-origin: 50% 50%;
			-ms-transform-origin: 50% 50%;
			-o-transform-origin: 50% 50%;
			transform-origin: 50% 50%;
behavior: url('./tl/PIE.php');
	margin-right:0;

}
.courbe2 {
	float:left;
		z-index:800;
margin-top:-5px;
margin-bottom:30px;
margin-left:-100px;
border:0 solid #000;
max-height:200px;
max-width:90%;
-moz-box-shadow: 2px 2px 10px #000; 
-webkit-box-shadow: 2px 2px 10px #000; 
box-shadow: 2px 2px 10px #000; 


-webkit-transform: rotate(-7deg);
			-moz-transform: rotate(-7deg);
			-ms-transform: rotate(-7deg);
			-o-transform: rotate(-7deg);
			transform: rotate(-7deg);
			
			-webkit-transform-origin: 50% 50%;
			-moz-transform-origin: 50% 50%;
			-ms-transform-origin: 50% 50%;
			-o-transform-origin: 50% 50%;
			transform-origin: 50% 50%;

behavior: url('./tl/PIE.php');
	margin-right:0;
}
.courbe3 {
	float:left;
		z-index:700;
margin-top:-15px;
margin-bottom:30px;
margin-left:-100px;
border:0 solid #000;
max-height:200px;
max-width:90%;
-moz-box-shadow: 2px 2px 10px #000; 
-webkit-box-shadow: 2px 2px 10px #000; 
box-shadow: 2px 2px 10px #000; 


-webkit-transform: rotate(-10deg);
			-moz-transform: rotate(-10deg);
			-ms-transform: rotate(-10deg);
			-o-transform: rotate(-10deg);
			transform: rotate(-10deg);
			
			-webkit-transform-origin: 50% 50%;
			-moz-transform-origin: 50% 50%;
			-ms-transform-origin: 50% 50%;
			-o-transform-origin: 50% 50%;
			transform-origin: 50% 50%;

behavior: url('./tl/PIE.php');
	margin-right:0;
}
.courbe4 {
	float:left;
		z-index:600;
margin-top:-20px;
margin-bottom:30px;
margin-left:-100px;
border:0 solid #000;
max-height:200px;
max-width:90%;
-moz-box-shadow: 2px 2px 10px #000; 
-webkit-box-shadow: 2px 2px 10px #000; 
box-shadow: 2px 2px 10px #000; 


-webkit-transform: rotate(-15deg);
			-moz-transform: rotate(-15deg);
			-ms-transform: rotate(-15deg);
			-o-transform: rotate(-15deg);
			transform: rotate(-15deg);
			
			-webkit-transform-origin: 50% 50%;
			-moz-transform-origin: 50% 50%;
			-ms-transform-origin: 50% 50%;
			-o-transform-origin: 50% 50%;
			transform-origin: 50% 50%;

behavior: url('./tl/PIE.php');
	margin-right:0;
}

.etal1 {
	float:left;
	z-index:600;
margin-top:0;
margin-bottom:30px;
margin-left:60px;
border:0 solid #000;
max-height:200px;
max-width:90%;
-moz-box-shadow: 2px 2px 10px #000; 
-webkit-box-shadow: 2px 2px 10px #000; 
box-shadow: 2px 2px 10px #000; 
-webkit-transform: rotate(-5deg);
			-moz-transform: rotate(-5deg);
			-ms-transform: rotate(-5deg);
			-o-transform: rotate(-5deg);
			transform: rotate(-5deg);
			
			-webkit-transform-origin: 50% 50%;
			-moz-transform-origin: 50% 50%;
			-ms-transform-origin: 50% 50%;
			-o-transform-origin: 50% 50%;
			transform-origin: 50% 50%;
behavior: url('./tl/PIE.php');
	margin-right:0;

}
.etal2 {
	float:left;
		z-index:800;
margin-top:-5px;
margin-bottom:30px;
margin-left:30px;
border:0 solid #000;
max-height:200px;
max-width:90%;
-moz-box-shadow: 2px 2px 10px #000; 
-webkit-box-shadow: 2px 2px 10px #000; 
box-shadow: 2px 2px 10px #000; 


-webkit-transform: rotate(7deg);
			-moz-transform: rotate(7deg);
			-ms-transform: rotate(7deg);
			-o-transform: rotate(7deg);
			transform: rotate(7deg);
			
			-webkit-transform-origin: 50% 50%;
			-moz-transform-origin: 50% 50%;
			-ms-transform-origin: 50% 50%;
			-o-transform-origin: 50% 50%;
			transform-origin: 50% 50%;

behavior: url('./tl/PIE.php');
	margin-right:0;
}
.etal3 {
	float:left;
		z-index:700;
margin-top:-15px;
margin-bottom:30px;
margin-left:30px;
border:0 solid #000;
max-height:200px;
max-width:90%;
-moz-box-shadow: 2px 2px 10px #000; 
-webkit-box-shadow: 2px 2px 10px #000; 
box-shadow: 2px 2px 10px #000; 


-webkit-transform: rotate(-10deg);
			-moz-transform: rotate(-10deg);
			-ms-transform: rotate(-10deg);
			-o-transform: rotate(-10deg);
			transform: rotate(-10deg);
			
			-webkit-transform-origin: 50% 50%;
			-moz-transform-origin: 50% 50%;
			-ms-transform-origin: 50% 50%;
			-o-transform-origin: 50% 50%;
			transform-origin: 50% 50%;

behavior: url('./tl/PIE.php');
	margin-right:0;
}
.etal4 {
	float:left;
		z-index:600;
margin-top:10px;
margin-bottom:30px;
margin-left:30px;
border:0 solid #000;
max-height:200px;
max-width:90%;
-moz-box-shadow: 2px 2px 10px #000; 
-webkit-box-shadow: 2px 2px 10px #000; 
box-shadow: 2px 2px 10px #000; 


-webkit-transform: rotate(5deg);
			-moz-transform: rotate(5deg);
			-ms-transform: rotate(5deg);
			-o-transform: rotate(5deg);
			transform: rotate(5deg);
			
			-webkit-transform-origin: 50% 50%;
			-moz-transform-origin: 50% 50%;
			-ms-transform-origin: 50% 50%;
			-o-transform-origin: 50% 50%;
			transform-origin: 50% 50%;

behavior: url('./tl/PIE.php');
	margin-right:0;
}