/* ==============================================
   FEUILLE DE STYLES DES GABARITS HTML/CSS --- 11
   © Elephorm & Alsacreations.com
   Conditions d'utilisation:
   http://creativecommons.org/licenses/by/2.0/fr/
   ============================================== */


/* --- COULEURS --- */

/* Général */
body {
	color: black;
	background: #DDE175;
}
a { color: #E29000; }
a:hover, a:focus { color: #E29000; }
strong { color: #E30045; }
hr {
	clear: both;
	border: 0;
	margin: 0 !important;
	margin: -20px 0;
	padding: 0;
	height: 1px;
	background: none white;
	color: white;
}

/* Conteneur central */
#centre { background: url(img/colgauche.png) repeat-y left top; }
#centre2 { background: url(img/colgauche2.png) repeat-y left top; }
#centre-bis { background: url(img/coldroite.png) repeat-y right top; }
#centre-bis2 { background: url(img/coldroite2.png) repeat-y right top; }

/* Gauche */
#gauche { background: white;}

/* Contenu principal */
#principal { background: white;}

/* Pied */
#pied { background:transparent url(img/footer.png) no-repeat scroll 0 0; }
#pied2 { background:transparent url(img/footer2.png) no-repeat scroll 0 0; }
#pied3 { background:transparent url(img/footer3.png) no-repeat scroll 0 0; }

/* --- POSITIONNEMENT --- */

/* Page */
#global {
	width: 977px;
	margin-left: auto;
	margin-right: auto;
}

/* En-tÍte */
#entete {
	margin: 0;
	padding: 0;
	clear:both;
}
#entete h1 {
	margin: 0;
	padding: 0;	
}
#entete h1 img {
	float: left;
	margin: 0;
	padding: 0;
}

/* Menu */
#menu {
	margin: 0;
	padding: 0;
	float: left;
	height: 50px;
	background:transparent url(img/background.png) repeat-y scroll 0 0;
}
#menu ul {
	list-style: none;
	background: #E30045;
	margin: 0;
	padding: 0;
}
#menu ul li {
	float: left;
}
#menu ul li a {
	display: block;
	height: 40px;
	text-decoration: none;
}

#menu ul li#titre-accueil a {
	width: 95px; background: #E30045 url(img/accueil-off.png) no-repeat;
}
#menu ul li#titre-animations a {
	width: 113px; background: #E30045 url(img/animations-off.png) no-repeat;
}
#menu ul li#titre-sites a {
	width: 215px; background: #E30045 url(img/sites-off.png) no-repeat;
}
#menu ul li#titre-enseignants a {
	width: 153px; background: #E30045 url(img/enseignants-off.png) no-repeat;
}
#menu ul li#titre-carte a {
	width: 65px; background: #E30045 url(img/carte-off.png) no-repeat;
}
#menu ul li#titre-outils a {
	width: 169px; background: #E30045 url(img/outils-off.png) no-repeat;
}
#menu ul li#titre-contact a {
	width: 167px; background: #E30045 url(img/contact-off.png) no-repeat;
}

#menu ul li#titre-accueil a:hover,#menu ul li#titre-accueil a:focus {
	background: url(img/accueil-on.png) no-repeat;
}
#menu ul li#titre-animations a:hover,#menu ul li#titre-animations a:focus {
	background: url(img/animations-on.png) no-repeat;
}
#menu ul li#titre-sites a:hover,#menu ul li#titre-sites a:focus {
	background: url(img/sites-on.png) no-repeat;
}
#menu ul li#titre-enseignants a:hover,#menu ul li#titre-enseignants a:focus {
	background: url(img/enseignants-on.png) no-repeat;
}
#menu ul li#titre-carte a:hover,#menu ul li#titre-carte a:focus {
	background: url(img/carte-on.png) no-repeat;
}
#menu ul li#titre-outils a:hover,#menu ul li#titre-outils a:focus {
	background: url(img/outils-on.png) no-repeat;
}
#menu ul li#titre-contact a:hover,#menu ul li#titre-contact a:focus {
	background: url(img/contact-on.png) no-repeat;
}


/* Bloc central */
#centre-bis {
	width: 100%;
	overflow: hidden;
}

/* Gauche */
#gauche {
	float: left;
	width: 220px;
	font-size: 10px;
	font-weight: normal;
	margin:0 0 0 12px;
}
#gauche h2 {
	font-size: 12px;
}
#edito {
  margin: 10px 20px;
}
#partenaires {
	border-top: 10px #7AB51D solid;
}
#partenaires h3 img {
	margin: 0 10px 10px;
}

/* Contenu principal */
#principal {
	margin-left: 242px;
	margin-right: 275px;
	font-size: 12px;
	font-weight: normal;
}
#principal > :first-child {
	margin-top: 10px;
}
#principal p, #principal li {
	line-height: 1.3;
}

#introduction {
	margin: 10px 20px;
	font-size: 11px;
}
#introduction img {
	float: left;
	margin: 10px;
}

#moteurs {
	border-top: 10px solid #7AB51D;
	background: url(img/bestiole.jpg) no-repeat right 70px;
	margin-bottom:10px;
}
#moteurs h3 img{
	margin: 5px 0 10px 20px;
}

/* Contenu page */
#contenu {
	float: left;
	font-size: 11px;
	font-weight: normal;
	margin: 10px 15px 20px 25px;
	width: 665px;
}

#detail, .fiche {
	margin-top: 20px;
}
.fiche {
	border: 1px solid #E29000;
	overflow: auto;
	width: 100%;
}
p.cadre {
	width: 150px;
	height: 150px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	position: relative;
}
p.cadre img {
	position: relative;
}
#detail img, .fiche img {
	width: 150px;
	height: auto;
	margin:5px;
}
#detail .fiche-gauche, .fiche .fiche-gauche {
	float: left;
	margin-right: 15px;
	position:relative;
	display: block;
}
#detail .fiche-droite, .fiche .fiche-droite {
	/*float:left;*/
	margin: 15px 0 0 170px;
	width: 400px;
	position:relative;
	display: block;
}
#detail .titre, .fiche .titre {
	color: #7AB51D;
	font-size: 14px;
	font-weight: bold;
	margin:0;
	padding:0;
}
#detail .numero, .fiche .numero {
	font-size: 10px;
	font-weight: normal;
}
#detail .theme, .fiche .theme {
	text-align: right;
	font-variant: small-caps;
	color: #E30045;
}
.fiche p.resume {
  text-align:justify;
}
#detail .description, .fiche .description {
	text-align: justify;
}
#detail .tarif, .fiche .tarif {
	text-align: right;
	color: #E29000;
}
#detail .bloc-structure, .fiche .bloc-structure {
	background: #DDE175;
	padding: 5px 10px;
	color: black;
}
#detail .bloc-structure .structure, .fiche .bloc-structure .structure {
	font-weight: bold;
}
.fiche .adresse {
	font-style: italic;	
}
#detail ul.liste-infos, .fiche ul.liste-infos {
	color:#E29000;
}

/* Droite */
#droite {
	float: right;
	width: 180px;
	margin-right:85px;
	font-size: 10px;
	font-weight: normal;
}
#droite h2 {
	font-size: 12px;
}
#carte, #documents {
	border-top: 10px #7AB51D solid;
	padding: 10px;
}
#documents h3 img {
	margin: 0 0 10px;
}
#documents ul {
	color: #E29000;
}
#documents ul li {
	margin-top: 10px;
}

/* Pied de page */
#pied, #pied2, #pied3 {
	margin: 0;
	padding: 20px 260px 10px 200px;
	font-size: 10px;
	color: #547F14;
}

#pied ul, #pied2 ul, #pied3 ul {
	list-style: none;
}

#pied ul li, #pied2 ul li, #pied3 ul li {
	float: left;
	margin: 0 5px;
}

#pied a, #pied2 a, #pied3 a {
	color: #547F14;
	text-decoration: underline;
	font-weight: normal;
}
#pied a:hover, #pied a:focus, #pied2 a:hover, #pied2 a:focus, #pied3 a:hover, #pied3 a:focus {
	text-decoration: none;
}

/* PAGE CARTE */
#carte-pnrl img {
	margin: 10px 0 10px 20px;
}
#carte-pnrl h1 {
  float: left;
	margin-left: 20px;
}

/* Formulaire */
form {
	width: 410px;
	margin:0;
	padding:0;
}

#form-mot {
	width: 170px;
	margin: 5px;
}
form input, form select {
	border: 1px solid orange;
	width: 175px;
	font-size: 10px;
	font-family: "Geneva", Arial, Helvetica, sans-serif;
	color: black;
}
form select {
	height: 18px;
}
form label {
	display:block;
	float:left;
	padding-right:10px;
	text-align:right;
	width: 100px;
	color: #E29000;
	font-size:11px;
}
#form-numero label {
	width: 210px;
	margin-left:10px;
}
#form-numero input {
	width: 75px;
}
#form-mot label {
	width:45px;
	padding-top:5px;
	font-size:10px;
}
#form-mot input {
	width: 80px;
}
#form-numero input#button, #form-critere input#button2, #form-mot input#button3 {
	height: 18px;
	color: #7Ab51D;
	font-size: 10px;
	background-color: #DDE175;
	border: 1px solid #7Ab51D;
	cursor: pointer;
}
#form-numero input#button, #form-mot input#button3 {
	width: 18px;
	margin: 0 5px;
	padding: 0;
}

#form-critere input#button2 {
	width: 100px;
	margin: 0 0 0 10px;
	padding: 0;
}
#principal #form-critere p:first-child {
	margin-left: 10px;
	font-size:11px;
}

form.retour {
	width: auto;
}

.formnote {
	color:#AAAAAA;
	font-size:9px;
}

/* ElČments Retour et En savoir plus*/
.retour input, .plus {
	background: #7AB51D none repeat scroll 0 0;
	border: none;
	display: block;
	padding: 5px;
	text-align: center;
	width: 60px;
	float: right;
	margin:5px 0;
}
.plus {
	width: 100px;
}
.retour input, .plus a {
	color: white;
	text-decoration: none;
	font-weight: normal;
}
.retour input:hover, .plus a:hover, .retour input:focus, .plus a:focus {
	color: white;
	text-decoration: none;
	font-weight: bold;
}

/* Pop up */
body#popup div#detail{
	background: white;
	padding: 20px;
}
body#popup #detail .bloc-structure {
	background: none;
}

.message {
  margin: 20px 0 0;
}

/* INFO BULLE */
a.infobulle {
  position:relative;
}
a.infobulle:hover {
   background: none; 
   z-index: 500; 
}
a.infobulle span {display: none;}
a.infobulle:hover span {
   color: black;
   text-decoration: none;
   display: inline; 
   position: absolute;
   white-space: nowrap;
   font-size:11px;
   font-weight:normal;
   width:300px;
   top: 15px; 
   left: 50px;
   background: white;
   padding: 3px;
   border: 2px solid #E29000;
}

.photo {
  float: left;
  clear: both;
  margin: 0 10px 10px 0;
}