@charset "UTF-8";
/* CSS Document */

/*
  margin, padding, border :
	1 valeur : même valeur pour le haut, le bas, la gauche et la droite
    2 valeurs : la première correspond à la valeur pour le haut et le bas, la seconde pour la gauche et la droite
    3 valeurs : la première correspond à la valeur du haut, la seconde aux valeurs à gauche et à droite, la troisième à la valeur du bas
    4 valeurs : respectivement la valeur du haut, de la droite, du bas, de la gauche (ht dte bs gche).
   	Pour centrer le texte --> margin: 0 auto;  
	border: epaisseur style couleur;
Couleurs :
	Bleu1 #085268
	Bleu2 #279ABC
	Bleu3 #2EB4DD
	Beige #FCF6F2
	Gold #B8860B
La propriété text-shadow (text-shadow: 2px 2px 2px black;) où les 4 valeurs correspondent, dans l’ordre :
    Décalage de l’ombre vers la droite
    Décalage de l’ombre vers le bas
    Valeur du flou de l’ombre
    Couleur de l’ombre
Il est possible d’ajouter des ombres multiples en les séparant par une virgule (text-shadow:2px 2px 2px black,-2px -2px 2px white;)
Voir pour associer plusieurs ombrages : css.mammouthland.net/css3/boites-et-lettres-ombres.php
et www.creativejuiz.fr/blog/les-tutoriels/ombre-avancees-avec-css3-et-box-shadow

Site sur le effets avec CSS3 (Découvrir les CSS3!) : www.css3create.com
*/

body {
	color: #000;     /* noir */
	background-image: url(images/fond.png);
	background-repeat: repeat;
    font-family: Optima, "Trebuchet MS", Tahoma, Arial, Helvetica, sans-serif;
}

/*
###########################################
  STYLES
###########################################
*/

h1 {
	font-size: 1.60em;
	font-weight: bold;
	color: #085268;
	text-shadow: 3px 3px 5px #A0A0A4;
	margin: 0 0 27px 11px;
}

h2 {
	text-shadow: 3px 3px 5px #A0A0A4;
}

h3 {
	font-size: 1.2em;
	text-shadow: 3px 3px 5px #A0A0A4;
	color: #085268;
	margin: 7px 0 0 3px;
	padding: 0 0 0 7px;
}

sup {
	font-size: .7em;
}

.bleu {
	color: #085268;
}

.bleu_clair {
	color: #2EB4DD;
}

.vert {
	color: #008000;
}

.gold {
	color: #B8860B;
}

.gras {
	font-weight:bold;
}

.telephone {
	font-size:1.3em;
}

.pointeur {
	cursor:pointer;
}

.ombre_txt {
	text-shadow: 3px 3px 5px #A0A0A4;
}

.ombre_img_portee {
	box-shadow: 3px 3px 5px #A0A0A4; 
}

.ombre_img_contour {
	box-shadow: 1px 1px 7px #555; 
}

.coins_arrondis {
	border-radius: 8px;
}

.cartouche_coins_arrondis {
	line-height:1.9em;
	background-color:#B8B8B8;
	padding: 2px 5px 2px 5px;
	border-radius: 8px;
	text-shadow: 3px 3px 5px #FFF;
}

.bloc_centre {
	display : block;
	margin: 11px auto 11px auto;
	padding:0;
}

.texte_3D {
	font-size:1.1em;
	line-height:1.9em;
	background-color:#B8B8B8;
	padding: 2px 11px 7px 11px;
	border-radius: 8px;
	color: #fff;
	text-shadow: 0 1px 0 #ccc,
	               0 2px 0 #c8c8c8,
	               0 3px 0 #b1b1b1,
	               0 4px 0 #b8b8b8,
	               0 5px 0 #a1a1a1,
	               0 6px 1px rgba(0,0,0,.1),
	               0 0 5px rgba(0,0,0,.1),
	               0 1px 3px rgba(0,0,0,.3),
	               0 3px 5px rgba(0,0,0,.2),
	               0 5px 10px rgba(0,0,0,.25),
	               0 10px 10px rgba(0,0,0,.2),
	               0 20px 20px rgba(0,0,0,.15);
}
/* voir aussi le site www.html5-css3.fr/css3/transformations-3d-css3 */

#lettrine{
	font-size: 1em;
    line-height: 1.5;
    width: 100%;
}

#lettrine p:first-letter {
	font-size: 2.7em;
	line-height: 1;
	color: #085268;
	text-shadow: 3px 3px 5px #FFF;
	float: left;
	margin: 0 0.1em 0 0;
}

.flocon {
	position:absolute; 
	z-index:2;
}

.annee {
	float: right;
	font-size: 2.7em;
	font-family:"Arial Black", Gadget, sans-serif;
	color: #B8860B;
	margin: 257px 35px 0 0;
	text-shadow: 1px 1px 2px #085268, 0 0 1em gray, 0 0 0.2em gray;
}

img {
	border: 0;
}

.centrer {
	text-align:center;
}

/*
###########################################
  ENTETE
###########################################
*/

header {
	background: url(images/bandeau.jpg) center bottom no-repeat;
	width: 1035px;
	height: 333px;
	margin: 0 auto;
}

header[role="entete_nouvel_an"] {
	background: url(images/bandeau_nouvel_an.jpg) center bottom no-repeat;
	width: 1035px;
	height: 333px;
	margin: 0 auto;
}

#ruban_noir {
	clear: both;
	position: relative;
    top: 17rem;
	left: 30rem;
	padding: 0;
	margin: 0;
}

/*
###########################################
  CORPS DE PAGE
###########################################
*/

.globale{
	background: url(images/corps.jpg) center repeat-y;
	margin: 0 auto;
    width: 1035px;
	overflow: hidden;
}

#corps {
	overflow: hidden;
	width:1035px;
	margin: 0 auto;
	padding: 0;
}

#corps #ariane {
	float: left;
	width: 760px;
	height: 34px;
	margin: 0 0 0 22px;
	padding: 0 11px 0 21px;
}

#corps #ariane p {
	font-size: .9em;
	font-weight: bold;
	color: #000;
	margin: 0;
	padding: 0;
}

#corps #ariane a {
	font-size: 1em;
	font-weight: bold;
	color: #085268;
	margin: 0;
	padding: 0;
}

#corps #ariane a:hover {
	font-size: 1em;
	font-weight: bold;
	color: #2EB4DD;
	text-shadow: 3px 3px 5px #A0A0A4;
	margin: 0;
	padding: 0;
}

#corps #telephone {
	float:right;
	width: 180px;
	margin: 0 17px 0 0;
	padding: 0;
}

#corps #telephone p {
	text-align: center;
	font-weight: bold;
}

#corps #contenu {
	float: left;
	width: 760px;
	height: auto;
	margin: 0 0 0 11px;
	padding: 0 21px 0 21px;
}

#corps #contenu .titre_general {
	font-size: 1.60em;
	font-weight: bold;
	color: #085268;
	text-shadow: 3px 3px 5px #A0A0A4;
	margin: 0 0 27px 11px;
}

#corps #contenu p.pho_ombre img {
	margin:10px;
	box-shadow: 1px 1px 12px #555;
}

#corps #contenu p.pho img {
	margin:10px;
}

#corps #contenu p.pho_centre img {
	margin : 0 auto;
	display : block;
}

#corps #contenu figure.pho_centre img {
	margin : 0 auto;
	display : block;
}

#corps #contenu p.pho_right {
	margin:10px;
	float:right;
}

#corps #contenu figure.pho_right {
	margin:10px;
	float:right;
}

#corps #contenu p.pho_left {
	margin:10px;
	float:left;
}

#corps #contenu figure.pho_left {
	margin:10px;
	float:left;
}

#corps #contenu p {
	line-height: 1.2em;
}

#corps #contenu a {
	font-size: 1em;
	font-weight: bold;
	color: #085268;
	margin: 0;
	padding: 0;
}

#corps #contenu a:hover {
	font-size: 1em;
	font-weight: bold;
	color: #2EB4DD;
	margin: 0;
	padding: 0;
	text-shadow: 3px 3px 5px #A0A0A4;
}

#corps #contenu .liste {
	line-height:normal;
	font-size: 1em;
	list-style-position: inside;
	list-style-image: url(images/puce_grise_ul.gif);
	list-style-type: none;
	text-indent: -18px;
	padding: 0 0 0 24px;
}

#corps #contenu .annee_admin {
	color: #5E9A1C;
	text-shadow: 3px 3px 5px #A0A0A4;
	text-align: left;
	font-size: 1.2em;
	font-weight: bold;
	padding: 0 0 0 17px;
}

#corps #contenu .map {
	text-align:center;
	border-radius: 8px;
	box-shadow: 1px 1px 7px #555;
	width:600px; /* 625px */
	height:450px; /* 350px */
	margin: 11px auto 0 auto;
	padding: 7px; /* pour s'adapter au iframe de googlemap  */
}

.separateur-plan {
	border: none;
	width: 90%;
	height: 40px;
	margin-top: -10px;
	border-bottom: 1px solid #1f1209;
	box-shadow: 0 20px 20px -20px #333;
	margin: -20px auto 20px;
}

#corps #contenu .legende_map {
	margin: 7px 0 0 0;
	text-align:center;
}

#corps #contenu div.telechargements {
	margin: 0;
	padding: 0 0 0 108px;
}

#corps #contenu #charte {
	margin: 0;
	padding: 0 0 0 17px;
	text-indent: -17px;
}

figure {
	display: block;
	margin: 1em 40px;
}

figcaption {
	display: block;
	font-size: .9em;
	text-align:center;
	font-style:italic;
	font-weight: bold;
	color: #085268;
	text-shadow: 3px 3px 5px #A0A0A4;
}

/*
###########################################
  MENU
###########################################
*/

#corps #menu {
	float: left;
	width: 190px;
	height:100%;
	margin: 0;
	padding:0;
	overflow: hidden;
}

#corps #menu ul {
	font-size: .9em;
	margin: 21px 0 0 -21px;
}

#corps #menu ul li {
	list-style:none;
	text-indent: 7px;
	padding: 0;
}

#corps #menu .en_cours {
	font-size: 1em;
	font-weight: bold;
	color: #2EB4DD;
	display: block;
	background: transparent url(images/trait_clair.jpg) no-repeat left bottom;
	background-position: 65% 80%;
	line-height: 2.2em;
	padding: 0 0 0 11px;
}

#corps #menu ul li a {
	color: #085268;
	list-style:none;
	display: block;
	background: transparent url(images/trait_fonce.jpg) no-repeat left bottom;
	background-position: 65% 95%;
	line-height: 2.2em;
	padding: 0 0 0 11px;
}

#corps #menu ul li a:hover {
	color: #2EB4DD;
	display: block;
	text-shadow: 3px 3px 5px #A0A0A4;
	background: transparent url(images/trait_clair.jpg) no-repeat left bottom;
	background-position: 65% 95%;
	line-height: 2.2em;
	padding: 0 0 0 11px;
}

#corps #menu p {
	font-size: 1em;
	text-align: center;
	margin: 0 0 0 -10px;
}

#corps #menu #modif p {
	font-size: 0.9em;
	text-align:center;
	text-indent: 21px;
	padding: 0 0 0 21px;
}
#corps #menu #modif hr {
	clear: both;
	background: url(images/borderLine.gif) no-repeat center;
	width: 80%;
	margin: 8px auto;
	height: 1px;
	border: 0 none;
}

#corps #menu #modif #flashcode {
	text-align: center;
}

#corps #menu #modif #flashcode img {
	margin: 7px 0 0 0;
	box-shadow: 1px 1px 7px #555; 
}

#corps #menu #modif #sites_sociaux {
	text-align: center;
}

#___plusone_0 {
	clear:both;
	float:right !important;
	display:block !important;
	vertical-align: middle !important;
}

/*
###########################################
  PIED DE PAGE
###########################################
*/

footer {
	margin: 0 auto;
	clear: both;
	overflow: hidden;
	background: url(images/pied.jpg) center top no-repeat;
	width:1035px;
	height: 200px;
}

footer #pied_mentions p {
	text-align: center;
	font-size: 0.8em;
	font-weight: bold;
	color: #085268;
	padding: 11px 0px 0px 0px;
}

footer #pied_mentions a, a:link {
	text-decoration: none;
	font-weight: bold;
	color: #085268;
}

footer #pied_mentions a:hover {
    text-decoration: none;
	font-weight: bold;
	color: #2EB4DD;
	text-shadow: 3px 3px 5px #A0A0A4;
}

footer #pied_copyright {
	text-align: center;
	font-size: 0.9em;
	font-weight: bold;
	color: #FFF;
	padding: 17px 0px 0px 0px;
	text-shadow: 3px 3px 5px #A0A0A4;
}

footer #pied_copyright_2 {
	text-align: center;
	font-size: 0.9em;
	font-weight: bold;
	color: #FFF;
	padding: 3px 0px 0px 0px;
	text-shadow: 3px 3px 5px #A0A0A4;
}

footer #pied_copyright a.blanc {
	color:#FFF;
}

footer #pied_copyright #hcard-Jean-THIERCELIN.vcard span {
	clear: both;
	text-align: center;
	font-size: 1em;
	font-weight: bold;
	color: #FFF;
	padding: 0;
	margin: 0;
	text-shadow: 3px 3px 5px #A0A0A4;
}

p#css_validator a.responsive {
	float:none;
}

.responsive_design {
	border:0; 
	margin: 21px 0 0 0;     /* ht dte bs gche */
	padding: 0 0 0 30px;
}

/*
###########################################
  PAGE LIENS
###########################################
*/

#liens table {
	min-width : 750px;
	max-width: 730px;
	border: 0;
	margin: 0 0 0 27px;
	padding: 0;
	height: 100% !important; 
	height: 1em;
}

#liens table tr td {
	margin: 0;
	padding: 7px 0 7px 5px;
}

#liens table tr td:nth-child(1) {
	min-width: 30%;
	max-width: 70%;
	margin: 0;
	padding: 7px 5px 7px 5px;
}

#liens table tr td:nth-child(2) {
	min-width: 30%;
	max-width: 40%;
}

#liens table tr td:nth-child(3) {
	min-width: 30%;
}

#liens table tr:nth-child(2n+1) {
    background-color: #FCF6F2;
}

#liens table td, table th {
    border: 1px solid #FCF6F2;
}

#liens hr {
	clear: both;
	background: url(images/sep_ombre.jpg) no-repeat center;
	width: 100%;
	margin: 10px 0 0 21px;
	padding: 21px 0 0 0;
	height: 5px;
	border: 0 none;
}

/*
###########################################
  FORMULAIRE CONTACT
###########################################
*/

#formulaire {
	background-color:#FCF6F2;
	margin: 0 0 0 54px;
	padding: 5px 0 21px 27px;
	box-shadow: 1px 1px 7px #555; 
	border-radius: 8px;
}

/*
###########################################
  PLAN DU SITE
###########################################
*/

/* Voir le site sur les "Hover avec transitions" www.css3create.com/Hover-avec-transitions */

#corps #contenu #plan_site {
	line-height:2em;
	clear:both;
	background: transparent url(images/iPad_fond.jpg) no-repeat;
	margin: -1px 0 0 0;
    padding: 0;
}

#corps #contenu #plan_site ul li a {
	position:relative;
	display:block;
	font-size: 1em;
	font-weight: bold;
	color: #085268;
	margin: 0;
	padding: 0;
}

#corps #contenu #plan_site ul li a:hover {
	clear:both;
	position:relative;
	font-size: 1em;
	font-weight: bold;
	color: #2EB4DD;
	text-shadow: 3px 3px 5px #A0A0A4;
	margin: 0;
	padding: 0;
}

#corps #contenu #plan_site ul li a div {
	position: absolute;
	visibility: hidden;
}

#corps #contenu #plan_site ul li a:hover div {
	clear:both;
	position:relative;
	visibility: visible;
	z-index: 10;
}

.accueil { 
   display: block;
   float:right;
   background: transparent url(images/iPad_accueil.jpg) no-repeat right;
   border: 0;
   margin: -2px 55px 0 0;
   padding: 0;
   height:300px;
   width:300px;
   position:relative;
   z-index:10;
}

.activites { 
   display: block;
   float:right;
   background: transparent url(images/iPad_activites.jpg) no-repeat right;
   border: 0;
   margin: -34px 55px 0 0;
   padding: 0;
   height:300px;
   width:300px;
   position:relative;
   z-index:10;
}

.seance { 
   display: block;
   float:right;
   background: transparent url(images/iPad_seance.jpg) no-repeat right;
   border: 0;
   margin: -66px 55px 0 0;
   padding: 0;
   height:300px;
   width:300px;
   position:relative;
   z-index:10;
}

.charte { 
   display: block;
   float:right;
   background: transparent url(images/iPad_charte.jpg) no-repeat right;
   border: 0;
   margin: -98px 55px 0 0;
   padding: 0;
   height:300px;
   width:300px;
   position:relative;
   z-index:10;
}

.formation { 
   display: block;
   float:right;
   background: transparent url(images/iPad_formation.jpg) no-repeat right;
   border: 0;
   margin: -130px 55px 0 0;
   padding: 0;
   height:300px;
   width:300px;
   position:relative;
   z-index:10;
}

.liens { 
   display: block;
   float:right;
   background: transparent url(images/iPad_lien.jpg) no-repeat right;
   border: 0;
   margin: -162px 55px 0 0;
   padding: 0;
   height:300px;
   width:300px;
   position:relative;
   z-index:10;
}

.mentions_legales { 
   display: block;
   float:right;
   background: transparent url(images/iPad_mentions_legales.jpg) no-repeat right;
   border: 0;
   margin: -194px 55px 0 0;
   padding: 0;
   height:300px;
   width:300px;
   position:relative;
   z-index:10;
}

.contact { 
   display: block;
   float:right;
   background: url(images/iPad_contact.jpg) no-repeat right;
   border: 0;
   margin: -226px 55px 0 0;
   padding: 0;
   height:300px;
   width:300px;
   position:relative;
   z-index:10;
}

.carte_site { 
   display: block;
   float:right;
   background: transparent url(images/iPad_plan_site.jpg) no-repeat right;
   border: 0;
   margin: -258px 55px 0 0;
   padding: 0;
   height:300px;
   width:300px;
   position:relative;
   z-index:10;
}

/*
###########################################
  ERREUR ?????
###########################################
*/

span.erreur {
	display: block;
	color: #FF0000;
	font-weight: bold;
	margin: 5px;
	/*height: 22px;*/
	padding: 5px;
	padding-left: 30px;
	background: url(../images/alert.png) no-repeat left center;
}

/*
###########################################
  VALIDATOR
###########################################
*/

p#css_validator a {
	float:right;
	margin: 27px 27px 0 0;
}

.html_validator {
	white-space:nowrap;
	display:block;
	overflow:hidden;
	text-overflow:ellipsis
}

.logo_html5 {
	float:left;
	margin-right:5px
}

.texte_html5 {
	display:inline-block;
	max-width:85%;
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
	vertical-align:text-top
}

.copyright_html5 {
	margin-bottom:1px;
	font-size:1em;
	font-weight:normal;
	line-height:24px;
	color:#777
}

/*
###########################################
  INFOBULLE
###########################################
*/

.tooltip {
  position: relative;
  background: #FCF6F2; /* #eaeaea */
  cursor: help;
  display: inline-block;
  text-decoration: none;
  outline: none;
}

.tooltip span {
  visibility: hidden;
  position: absolute;
  bottom: 30px;
  left: 50%;
  z-index: 999;
  width: 700px;
  margin-left: -127px;
  padding: 10px;
  border: 2px solid #ccc;
  opacity: .9;
  background-color: #FCF6F2; /* #ddd */
  background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
  text-shadow: 0 1px 0 rgba(255,255,255,.4);
}

.tooltip:hover {
  border: 0; /* IE6 fix */
}

.tooltip:hover span {
  visibility: visible;
}

.tooltip span:before, .tooltip span:after {
  content: "";
  position: absolute;
  z-index: 1000;
  bottom: -7px;
  left: 17%;
  margin-left: -8px;
  border-top: 8px solid #ddd;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 0;
}

.tooltip span:before {
  border-top-color: #ccc;
  bottom: -8px;
}

#charlie {
	border: 1px solid #FFF;
	background-color:#000;
	clear: both;
	float: left;
	margin: 120px 0 0 140px;
	padding: 0;
	-moz-box-shadow: 3px 3px 7px 3px #9b9b9b;
	-webkit-box-shadow: 3px 3px 7px 3px #9b9b9b;
	-o-box-shadow: 3px 3px 7px 3px #9b9b9b;
	box-shadow: 3px 3px 7px 3px #9b9b9b;
}

</style>
<!--[if lte IE 8]>
<style type="text/css">
#charlie {
	filter:progid:DXImageTransform.Microsoft.Shadow(color=#9b9b9b, Direction=135, Strength=7);   /* Adaptation de "ombre_text" pour IE <9 */
} 
</style>
<![endif]-->