/* ----------------------------- */
/*  =     Styles de base         */
/* ----------------------------- */

@font-face {
	font-family:Helvetica;
	/*font-family: 'NewRegular';
	src: local('NewRegular'), local('HittheRoad'), url('fonts/HITROAD.ttf') format('truetype');*/
}


/* Page */ 
html { 
  font-size: 100%;
} 

body { 
  margin: 0; 
  padding: 0; 
  font-family: Helvetica, "Century Gothic", "Lucida Grande", "Trebuchet MS", Arial, Helvetica, FreeSans, sans-serif;
  font-size: 12px;
  line-height: 1.3;
  color: #4d4d4d;
  background: #4e5251;
} 


/* Liens */ 
a { 
  text-decoration: none; 
  color:#4e4c4d;
} 
a:link { 
  text-decoration: none;
  color:#4e4c4d;
} 
a:visited { 
  text-decoration: none;
} 
a:hover, a:focus, a:active { 
  text-decoration: none;
} 
/* Pas de bordure pointillée ou halo lors du clic sur un lien */ 
a:focus, a:active { 
  outline: none; 
} 


/* Pas de bordure autour des images dans les liens */ 
a img { 
  border: none; 
} 

span {
font-size:12px;
margin:0;
padding:0;
}

/* Titres */ 
logo { 
  position: absolute;
} 


/* Titres */ 
h1 { 
  display: block;
  margin-top: 348px;
  padding-top:0px;
  margin-left:80px;
  padding-left: 5px;
  height: 20px;
  font-family: Helvetica,"NewRegular", "Lucida Grande","Trebuchet MS", Arial, FreeSans, sans-serif;
  font-weight: normal;
  font-size: 24px; 
  text-align: left;
  line-height: 1.2;
  color: #4d4d4d;
} 
h1 span { 
  display: inline-block;
  margin-left: 20px;
  line-height: 1.2;
  font-weight: normal;
  font-size: 10px; 
  color: #4d4d4d;
} 
h1 a, h1 a:visited {
  color: white;
  text-decoration: none;
}
h1 a:hover, h1 a:focus {
  text-decoration: none;
  outline: none;
  text-shadow: 0px 0px 15px #fff; 
}

h2 { 
  font-size:16px; 
  color: #4d4d4d;
} 
 
/* Listes */ 
ul, ol { 
  
} 
li {
 
}
 
/* Paragraphes */ 
p { 
  margin: 0;
  color:#333;
} 
 
.submit {

	font-size:11px;
	line-height:15px;
	text-decoration: none;
	padding-left:3px;
	padding-bottom:0px;
	padding-right:0px;
	background:#5c8189;
	border:solid 3px #5c8189;
	height:28px;
	color:#FFFFFF;
 	SCROLLBAR-FACE-COLOR: #5c8189;
    SCROLLBAR-HIGHLIGHT-COLOR:#5c8189;
    SCROLLBAR-SHADOW-COLOR: #5c8189;
    SCROLLBAR-3DLIGHT-COLOR: #5c8189;
    SCROLLBAR-ARROW-COLOR: #5c8189;
    SCROLLBAR-TRACK-COLOR: #5c8189;
    SCROLLBAR-DARKSHADOW-COLOR: #5c8189;
}
 
/* Divers éléments de type en-ligne (8) */ 
em { 
  font-style: italic; 
} 
strong { 
  font-weight: bold; 
} 

/* ----------------------------- */
/*  =     Blocs                  */
/* ----------------------------- */

header, nav, footer, figure, section {
  display: block;
}

.recherche {
display:block;
background:#ebebeb;
position:inherit;
margin-bottom:20px;
margin-right:10px;
width:850px;
}

.cadregris {
display:block;
background:#ebebeb;

position:relative;
margin-bottom:20px;
margin-right:10px;
width:630px;
}


.stitre {
display:block;
background: url(../images/stitre.png) left top no-repeat; 
position:inherit;
width:150px;
height:24px;
text-align:center;
font-size:12px;
color:#FFFFFF;
padding-top:5px;
font-weight:bold;
}
.bhg {
position:absolute;
background: url(../images/bhg.png) left top no-repeat; 
width:8px;
height:8px;
}
.bhd {
position:absolute;
right:0px;
background: url(../images/bhd.png) left top no-repeat; 
width:9px;
height:9px;
}
.bbg {
position:absolute;
bottom:0px;
left:0px;
background: url(../images/bbg.png) left top no-repeat; 
width:9px;
height:9px;
}
.bbd {
position:absolute;
bottom:0px;
right:0px;
background: url(../images/bbd.png) left top no-repeat; 
width:9px;
height:9px;
}
.bhg2 {
position:absolute;
background: url(../images/HG-ebebeb.png) left top no-repeat; 
width:8px;
height:8px;
}
.bhd2 {
position:absolute;
right:0px;
background: url(../images/HD-ebebeb.png) left top no-repeat; 
width:8px;
height:8px;
}
.bbg2 {
position:absolute;
bottom:0px;
left:0px;
background: url(../images/BG-ebebeb.png) left top no-repeat; 
width:8px;
height:8px;
}
.bbd2 {
position:absolute;
bottom:0px;
right:0px;
background: url(../images/BD-ebebeb.png) left top no-repeat; 
width:8px;
height:8px;
}
.contentzone {
padding:10px;
margin-left:0px;
font-size:12px;
font-weight:normal;
}
.tformulaire {
padding-left:13px;
font-size:13px;
font-weight: bold;
background: url(../images/fleche.png) left center no-repeat; 
margin-bottom:8px;
margin-top:5px;
}



.txtp {
font-size:11px;
}

#wrapper {  
  min-height:800px;
  height:100%;
}

/* Header */ 

header {
  position: relative;
  height: 359px;
  background: #4e5251 url(../images/fdh.png) left top no-repeat; 
}

header nav {
  position: absolute;
  left: 30px;
  top: 283px;
  font: 1.2em Helvetica,"NewRegular", "Lucida Grande", "Trebuchet MS", Arial, Helvetica, FreeSans, sans-serif;
  height:50px;
}
header nav a {
  position: relative;
  color: white;
  text-decoration: none;
}
header nav a:hover, header nav a:focus {
  text-decoration: none;
}

header nav a[href^="http:"]:hover {

}


header #libinfo {
  position: absolute;
  padding: 0px;
  vertical-align: top;
  margin-left:350px;
  margin-top: 38px;
  height: 20px;
  width:100px;
  font-size: 10px; 
  font-weight:bold;
}


header #infodefil {
  padding: 0px;
  position:absolute;
  vertical-align: top;
  margin-left:465px;
  margin-top: 35px;
  padding-left:0px;
  height: 35px;
  width:300px;
  font-size: 12px; 
}
header #infodefil  a {
  color: #4d4d4d;
  text-decoration:none;
}


header .espacem {  
  position: absolute;
  display:block;
  top : 325px;
  right: 0px;
  height:40px;
  overflow: hidden;
  font-size:10px;
  text-align:right;
  width:432px;
}

header .chemin {  
  position: absolute;
  display:bloc;
  top : 337px;
  left: 40px;
  height:20px;
  width:350px;
  overflow: hidden;
  font-size:9px;
  color: #767676;
  z-index:10;
  
}
header .chemin a:,header .chemin a:visited,header .chemin a:hover, header .chemin a:focus{

text-decoration:underline;
}

header .picto {  
  position: absolute;
  top : 396px;
  left: 55px;
  height:19px;
  width:20px;
  overflow: hidden;
  display: inline-block;
  margin:0;
  padding:0;
  z-index:5;
}
header .trait {  
  position: absolute;
  top : 416px;
  left: 60px;
  height:1px;
  overflow: hidden;
  display: inline-block;
  margin:0;
  padding:0;
  /*background: url(../images/traittitre.png) left top repeat-y; */
}


header .chemin a,header .chemin a:hover, header .chemin a:focus{
color: #777777;
text-decoration:none;
}



/* Content */ 

#content {
  width: 980px; 
  min-height:600px;
  margin: 0 auto;
  padding-top: 0px;
  background: #4e5251 url(../images/fdc.png) left top repeat-y;
}

#content p#presentation {
  clear: both;
  font-size: 1.6em;
  padding-left: 40px;
}

#content #container {
    position: relative;
 }

#content section {
  position: inherit;
  vertical-align:top;
  left :40px;
  display: inline-block;
  padding-left: 60px;
  padding-right: 0px;
  margin-bottom: 50px;
  margin-right:7px;
}

.section {
  position: relative;
  vertical-align:top;
  top: 70px;
  left : 25px;
  display: inline-block;
  width: 850px;
  margin-top: 0px;
  padding-left: 40px;
  padding-right: 20px;
  margin-bottom: 50px;
  min-height:200px;
  height:auto;
}
.section1 {
  position: relative;
  vertical-align:top;
  display: inline-block;
  width: 865px;
  top:0px;
  left:40px;
  margin-top: 0px;
  padding-left: 30px;
  padding-right: 20px;
  margin-bottom: 50px;
  min-height:200px;
}
#content .menu2{
  display: inline-block;
  position: relative;
  vertical-align:top;
  width: 200px;
  margin-top: 50px;
  padding-left: 0px;
  margin-bottom: 20px;

}
section a {
  padding: 0;

}
section a:hover, section a:focus {
  text-decoration: underline;
}
section a[href^="http:"] { 
  padding-right: 0px;

}

#content section.presentation, #content section.contact {
  padding: 0px 15px;
}
#content section h2 {
  margin: 10px 0 5px 0;
  padding: 0;
}

#content section.presentation h2, #content section.contact h2 {
  display: inline-block;
  font-family: Helvetica, "NewRegular", "Lucida Grande",Tahoma, "Trebuchet MS", Arial, Helvetica, FreeSans, sans-serif;
  padding: 5px 5px;
  background: rgba(255,255,255,0.2);
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px; 
}



#content figure {
	display:inline-block;
	position: relative;
	vertical-align:top;
	width:260px;
	height:168px;
	background:rgba(255,255,255,0.2);
	border:12px solid rgba(255,255,255,0.2);
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	-moz-box-shadow:1px 1px 13px #999;
	-webkit-box-shadow:1px 1px 13px #999;
	box-shadow:1px 1px 13px #999;
	margin:0 30px 30px 0
}
#content figure a {
  text-decoration: none;
  padding: 0;
}
#content figure a[href^="http:"]:after { 
content: ""; 
}
#content figure h2 {
	position: absolute;
	top: -27px;
	display:block;
	margin:0;
	padding:0;
	font-size:20px;
	color:#fff;
	font-family: Helvetica, "NewRegular", "Lucida Grande",Tahoma, "Trebuchet MS", Arial, Helvetica, FreeSans, sans-serif;
	text-shadow:0 0 10px #000;
	opacity:0.7;
}
#content figure:hover, #content figure:focus {
  border: 12px solid rgba(255,255,255,0.4);
}
#content figure:hover h2, #content figure:focus h2 {
  opacity: 0.9;
}

#content p.contact {
  margin-top: 20px;
}
#content p.contact img {
  float: left;
  margin-right: 20px;
}
#content p.livres img {
  float: right;
  margin-left: 20px;
}

/* Footer */ 

footer {
  position: relative;
  width: 980px;
  bottom: 0;
  vertical-align:bottom;
  margin-bottom: 0px;
  padding-right: 0px;
  height:80px;
  background: #4e5251 url(../images/fdb.png) left top no-repeat;
}
footer nav {
  float: right;
  margin-bottom: 0px;
}
footer nav a {
  display: inline-block;
  vertical-align: top;
  height: 30px;
  line-height: 65px;
  margin-left: 5px;
  padding: 0 10px;
  background: rgba(255,255,255,0.1);
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
}
footer nav a img {
  vertical-align: middle;
}

footer nav a:hover, footer nav a:focus {
  -moz-transform: rotate(8deg); 
  -webkit-transform: rotate(8deg);
}


footer #logo {
  clear: both;
  padding-top:-30px;
  margin-top: 20px;
  width:950px;
  text-align:center;
}

footer #adresse {
  padding: 0px;
  vertical-align: top;
  display: inline-block;
  margin-left:160px;
  margin-top: 15px;
  height: 20px;
  width:750px;
  font-size: 10px; 
  color:#eee;
}
footer #adresse a {
  color: #eee;
  text-decoration:underline;
}


footer #logo img {
	-moz-transform: rotate(0deg); 
  -webkit-transform: rotate(0deg);
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  transition: all .5s;
}
footer #logo img:hover, footer #logo img:focus {
  -moz-transform: rotate(5deg); 
  -webkit-transform: rotate(5deg);
}

/* ----------------------------- */
/*  =     Flickr Badge           */
/* ----------------------------- */

/*
      Les images sont emballées dans des classes divs "flickr_badge_image" avec des ids "flickr_badge_imageX" où "X" est un integer spécifiant une position ordinale. Pour commencer, des styles vous sont proposés! 
      */
#flickr_badge_uber_wrapper {
  position: relative;
  left: -20px;
  width:350px; 
  margin-left: 0px;
}
.flickr_badge_image {display: inline;line-height: 1;}

#flickr_badge_uber_wrapper img {
  display: inline-block;
  background:#555;
  padding:2px;
  margin: 0 15px 15px 15px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -moz-box-shadow: 1px 1px 9px #999; 
  -webkit-box-shadow: 1px 1px 9px #999; 
  box-shadow: 1px 1px 9px #999;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
}

#flickr_badge_uber_wrapper a:hover img, #flickr_badge_uber_wrapper a:focus img {
  background:#fff;
  -moz-transform: scale(1.15);
  -webkit-transform: scale(1.15);
  transform: scale(1.15);
}


/* ----------------------------- */
/*  =     Web mobile             */
/* ----------------------------- */

@media only screen and (max-device-width:480px) {
    html {-webkit-text-size-adjust: 150% !important;}
    #wrapper { background: black !important; }
    body {font-size:1.2em !important;}
    h1 span {color:#fff!important;}
    header nav {position:static!important; font-size:2em!important;}
    header nav a {padding:10px 20px!important;}
    #content {height: auto!important;width: auto!important;}
    #content section {width:auto!important;margin: 70px 0!important;}
    #content figure {margin:0 10px 10px 0!important; border: 0!important;}
}

@media only screen and (max-device-width:640px), only screen and (max-width:640px) {
	#wrapper, #content, #content section, #content figure, footer {
  	width: auto !important;
	}
	img,table,td,blockquote,object,embed,video,input,code,pre,textarea {
	max-width:90% !important
	}	
	code,pre,textarea {
	word-wrap:break-word!important;
	white-space: pre-wrap!important;
	}
	body {
		background:none!important;
		background-color:#000!important;
		padding: 0 10px;
		font-size: 80%!important;
	}
	#wrapper {
		background:none!important;
		background-color:#000!important;
	}
	#content {
		height: auto!important;
	}
	#content section {
		margin-top: 30px!important;
	}
	#content p#presentation {font-size: 1em!important; margin-bottom:0;}
	#content section h2 {margin:0!important;}
	#content section a {background:none!important;background-color:#000!important;}
	h1 {font-size: 2em!important;}
	h1 span {color:#fff!important;text-shadow:0 0 15px #FFFFFF;}
    header nav {position:static!important; font-size:1.2em!important;}
    header nav a {display:inline-block;padding:10px!important; margin-bottom: 2px!important;}
    #content {height: auto!important;width: auto!important;}
    #content section {width:auto!important;}
    #content figure {margin:0 10px 10px 0!important; border: 0!important; width:130px!important; height:auto!important; -moz-box-shadow:1px 1px 13px #fff;-webkit-box-shadow:1px 1px 13px #fff;}
	#content figure h2 {position: static!important;font-size: 1em!important; margin-left: 4px!important; color: #fff!important}
	#content figure a {color: #fff!important}
}
@media only screen and (max-device-width:640px) and (orientation:landscape)  {
	body {
	-webkit-text-size-adjust: 90% !important;
	}
}