/* ÉLÉMENTS GLOBAUX
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

body {
	background : #e7e7e7 ;
	font-family: "Verdana", sans-serif ;
	color : #222 ;
	font-size: 10pt ; /* A CHANGER */
	text-align : center ;
}

#site {
	text-align : left ;
	margin : 0px auto ;
	width : 85% ; /* largeur du cadre contenant le site */
	margin-top : 25px ;
	padding : 5px ;
	border : 2px solid #bcbcbc ;
	background : #fff ;
}

#pieddepage {
	text-align : center ;
	margin : 0px auto ;
	width : 85% ; /* largeur du cadre contenant le site */
	margin-top : 25px ;
	padding : 5px ;
	border : 2px solid #bcbcbc ;
	background : #fff ;
}

#entete { 
	height : 166px ;
	width : 100% ;
	background : url(../img/fond-carnaval2012.png) ;
	margin : 0px auto ;
	position : relative ;
	border : 2px inset ;
}

#données {
	margin : 0px ;
	width : 100% ;
	padding-top : 15px ;
	padding-bottom : 15px ;
}

#menu {
	width : 25% ;
	float : left ;
	margin-left : 1% ;
}

#contenu {
	margin-left : 27% ; /* la taille allouée au menu */
	width : 65% ;
	min-height : 250px ;
	padding : 2% ;
}

#w3c {
	text-align : center ;
	margin : 0px auto ;
	margin-top : 25px ;
}

#w3c img {
	border : none ;
}

#w3c a {
	border : none ;
}


/* CONTENEUR EN-TÊTE : DESCRIPTION ÉLÉMENTS INTERNES
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

#logo a {
	position : absolute ;
	top : 10px ;
	left : 10px ;
}

#logo a img {
	border : none ;
}

	/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#utils {
	font : bold 10px arial, verdana, Helvetica, sans-serif ;
	color: #fff ;
	text-align : right ;
	padding : 5px ;
}

#utils ul {
	list-style : none ;
	margin : 0px ;
	padding : 0px ;
}

#utils ul li {
	display : inline ;
	border-left : 1px solid ;
	padding-left : 2px ;
}

#utils ul li.first {
	border-left : none ;
	padding-left : 0px ;
}

#utils a {
	color : #fff ; /* Changement couleur lien petit menu */
	text-decoration : none ;
}

#utils a:hover {
	color : #FFFF00 ; /* Changement couleur lien dessus petit menu */
}

#utils a:active {
	text-decoration : underline ;
}


	/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#nav {
	background : #fff ; /* Changement couleur lien menu */
	opacity : .5 ; /* Transparence Mozilla */
	filter : alpha(opacity=50) ; /* Transparence IE */
	width : 100% ;	/* Transparence IE */
	position : absolute ;
	bottom : 2px ;
	left : 3px ;
}

#nav ul {
	list-style : none ;
	margin : 0px ;
	padding : 0px ;
	text-align : center ;
}

#nav ul li {
	float : left ;
	border-left : 1px solid ;
	padding-left : 0px ;
	display : inline ;
	width : 110px ;
}

html>body #nav ul li { /* Ce qui suit ne sera pas lu par IE : redonner la largeur auto */
	width : auto ;
}

#nav ul li.first {
	border-left : none ;
}


#nav a {
	display : block ;
	height : 25px ;
	line-height : 25px ;
	letter-spacing : 2px ;
	color : #000 ; /* Changement couleur texte menu */
	font-family: "Microsoft Sans Serif", sans-serif ;
	font-weight : bold ;
	text-decoration : none ;
	padding-left : 5px ;
	padding-right : 5px ;
}

#nav a:hover {
	color : #000 ; /* Changement couleur lien dessus menu */
	background : #5eb0e5 ; /* Changement couleur fond dessus menu */
	opacity : .4 ;
	filter : alpha(opacity=40) ;
}

#nav a:active {
	text-decoration : underline ;
}

#switcher { /* Changement pour afficheur */
	position : absolute ;
	bottom : 5px ;
	right : 1px ;
	font : bold 10px arial, verdana, Helvetica, sans-serif ;
	color: #333 ;
	padding : 2px ;
	padding-top : 3px ;
	background : #fff ;
	opacity : .90 ;
	filter : alpha(opacity=90) ;

}

#switcher img {
	border : none ;
	margin-left : 2px ;
	margin-right : 2px ;

}

/* CONTENEUR MENU : DESCRIPTION ÉLÉMENTS INTERNES
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

#menu div.titre {
	height : 45px ;
	border-left : 1px solid #909090 ; /* Changement couleur bord menu à gauche */
}

#menu div.titre a {
	display : block ;
	height : 45px ;
	font : bold 1.6em "Trebuchet MS" ;
	padding-left : 50px ;
	background : url(../img/menu-ombre-left.jpg) repeat-y right ;
	text-decoration : none ;
	text-align : right ;
	padding-right : 15px ;
	color : #5eb0e5 ; /* Changement couleur titre princip menu à gauche */
}

#menu #cours {
	background : url(../img/menu-cours.gif) no-repeat ;
}

#menu #kinball {
	background : url(../img/menu-kinball2.gif) no-repeat ;
}

#menu #ecole {
	background : url(../img/menu-ecole.gif) no-repeat ;
}

#menu #formations {
	background : url(../img/menu-formations.gif) no-repeat ;
}

#menu #sporthiver {
	background : url(../img/menu-sporthiver.gif) no-repeat ;
}

#menu #sportentreprise {
	background : url(../img/menu-entreprise.gif) no-repeat ;
}

#menu #prive {
	background : url(../img/menu-prive.gif) no-repeat ;
}

#menu #stages {
	background : url(../img/menu-stages.gif) no-repeat ;
}

#menu ul {
	margin : 0 ;
	padding : 0 ; /* centrer */
	padding-top : 10px ;
	padding-bottom : 10px ;
	list-style : none ;
	list-style-image : none ;
	text-align : center ;
	border-left : 1px solid #909090 ;
	background : #e6e7eb url(../img/menu-ombre-left.jpg) repeat-y right ; /* Changement couleur fond menu à gauche */
}

#menu ul li {
	padding : 0px ;
	margin : 0px ;
	margin-right : 8px ;
	border : 1px solid #e6e7eb ; /* règle un problème dans IE */
}

#menu ul li a {
	text-decoration : none ;
	color : #3a5826  ; /* Changement couleur texte (liens) menu à gauche */
	font : 1em tahoma ;
	display : block ;
	padding-top : 2px ;
	padding-bottom : 2px ;
}

#menu ul li a:hover {
	background : #f2f3f7 ; /* Changement couleur surlignement liens menu à gauche */
}

#menu div#barre {
	background : #5eb0e5 url(../img/menu-ombre-left.jpg) repeat-y right ; /* Changement couleur ligne |e| Titre et liens menu à gauche */
	border-left : 1px solid #909090 ;
	color : #fff ;
	font : 1em arial, sans-serif ;
	text-align : right ;
	padding-right : 15px ;
}

#menu div#dessus {
	height : 16px ;
	border-left : 1px solid #909090 ;
	background : url(../img/menu-top.jpg) repeat-x ;		
}

#menu div#dessus p {
	background : url(../img/menu-coin.jpg) no-repeat right ;
	line-height : 16px ;
}

#menu div#dessous {
	height : 10px ;
	border-left : none ;
	background : url(../img/menu-ombre-bottom.jpg) repeat-x ;		
}

#menu div#dessous p {
	margin-top : 0px ; 
	background : url(../img/menu-ombre-coin.jpg) no-repeat right ;
	line-height : 10px ;
}


/* CONTENEUR EMBALLER : DESCRIPTION ÉLÉMENTS INTERNES
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.emballer {
	width : 80% ;
	margin : 0 auto ;
	margin-top : 10px ;
}

.emballer div#lundi,
.emballer div#mardi,
.emballer div#mercredi,
.emballer div#jeudi,
.emballer div#vendredi,
.emballer div#samedi,
.emballer div#citation,
.emballer div.citation,
.emballer div#premier-jour,
.emballer div#deuxieme-jour {
	height : 30px ;
	background : url(../img/boite-barre.png) right ;
}

.emballer div#lundi p {
	height : 30px ;
	width : 123px ;
	background : url(../img/boite-lundi.png) no-repeat ;
}

.emballer div#mardi p {
	height : 30px ;
	width : 123px ;
	background : url(../img/boite-mardi.png) no-repeat ;
}

.emballer div#mercredi p {
	height : 30px ;
	width : 123px ;
	background : url(../img/boite-mercredi.png) no-repeat ;
}

.emballer div#jeudi p {
	height : 30px ;
	width : 123px ;
	background : url(../img/boite-jeudi.png) no-repeat ;
}

.emballer div#vendredi p {
	height : 30px ;
	width : 123px ;
	background : url(../img/boite-vendredi.png) no-repeat ;
}

.emballer div#samedi p {
	height : 30px ;
	width : 123px ;
	background : url(../img/boite-samedi.png) no-repeat ;
}

.emballer div#citation p,
.emballer div.citation p {
	height : 30px ;
	width : 123px ;
	background : url(../img/boite-citation.png) no-repeat ;
}

.emballer div#premier-jour p {
	height : 30px ;
	width : 180px ;
	background : url(../img/boite-premier-jour.png) no-repeat ;
}

.emballer div#deuxieme-jour p {
	height : 30px ;
	width : 180px ;
	background : url(../img/boite-deuxieme-jour.png) no-repeat ;
}

.emballer .horaire, 
.emballer .cite {
	background : #fbfcfd ; /* Changement couleur fond cadre cours --> horaire */
	border-left : 2px solid #d7deee ;
	border-right : 2px solid #d7deee ;
	border-bottom : 2px solid #d7deee ;
	padding : 10px ;
}

.emballer .horaire span {
	color : #555 ;
	font-size : x-small ;
	font-style : italic ;
}

.emballer .cite {
	font-family : "Times new roman", sans-serif ;
	font-size : medium ;
}

.emballer .cite span {
	text-align : right ;
	font-style : italic ;
	width : 100% ;
	display : block ;
}

/* CONTENEUR NEWS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.news {
	width : 40% ;
	float : right ;
	margin : 0px auto ;
	margin-left : 5% ;
}

.news div.titre {
	height : 33px ;
	border-left : none ;
	background : url(../img/news-dessus.png) repeat-x ;	
}

.news div.titre p {
	margin-top : 0px ; 
	padding-left : 85px ;
	background : url(../img/news-ombre-titre.gif) no-repeat right ;
	line-height : 33px ;
	color : #5a537d ;
}

.news div.contenu {
	border-left : none ;
	background : #f7f296 ;
}

.news div.contenu p {
	margin-top : 0px ; 
	background : url(../img/news-ombre-contenu.gif) repeat-y right ;
	margin-bottom : 0px ;
	padding-left : 10px ;
	padding-right : 10px ;
}

.news div.dessous {
	height : 13px ;
	border-left : none ;
	background : url(../img/news-dessous.gif) repeat-x ;	
}

.news div.dessous p {
	margin-top : 0px ; 
	background : url(../img/news-ombre-dessous.gif) no-repeat right ;
	line-height : 13px ;
}


/* ÉLÉMENTS PRÉDÉFINIS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

h1 {
	background : url(../img/croco-pt2.jpg) no-repeat ;
	line-height : 25px ;
	border-bottom : 1px solid #025dad ; /* Changement couleur barre /s titre texte zone centrale */
	color : #5eb0e5 ; /* Changement couleur Titre zone texte centrale */
	padding-left : 2em ;
	font : bold 1.6em "Trebuchet MS" ;
}

h2 {
	color : #5eb0e5 ; /* Changement couleur Titre zone centrale (niveau 2) */
	font : bold 1em "Verdana" ;
	letter-spacing : 1px ;
}

h3 {
	color : #5eb0e5 ;
	font : bold 1em "Verdana" ;
	padding-left : 2em ;
	font-style : italic ;
	margin-bottom : 1px ;
}

h4 {
	color : #000 ;
	font : bold 1em "Verdana" ;
	padding-left : 2em ;
	margin-bottom : 1px ;
}
p {
	text-indent : 2em ;
	line-height : 1.4em ;
}

p.pasalinea {
	text-indent : 0 ;
}

ul {
	line-height : 1.4em ;
	list-style-image : url(../img/puce-bleue-vif.gif) ; /* Changement puce flèche */
}

li {
	padding-left : 10px ; 
}

ul li ul li {
	list-style-image : url(../img/puce-puce-bleue-vif.gif) ; /* Changement puce flèche (petite) */
}

.spacer {
	clear : both ;
}


/* TABLEAUX PERSOS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

table#tarifs {
	border : 2px solid #5eb0e5 ; /* Changement couleur cadre --> tarifs */
	margin : 0px auto ;
	width : 80% ;
	border-collapse : collapse ;
	background : #fbfcfd ; /* Changement couleur fond cadre --> tarifs */
}

table#tarifs th {
	color : #fff ;
	text-align : center ;
	background : #5eb0e5 ; /* Changement couleur cadre --> tarifs */
}

table#tarifs td {
	border-top : 2px solid #5eb0e5 ; /* Changement couleur cadre --> tarifs */
}

table#tarifs td.prix {
	text-align : center ;
}

table#stage {
	border : 2px solid #5eb0e5 ; /* Changement couleur cadre --> tarifs */
	margin : 1px auto ;
	width : 80% ;
	border-collapse : collapse ;
	background : #fbfcfd ; /* Changement couleur fond cadre --> tarifs */
}

table#stage th {
	color : #fff ;
	margin : 1px auto ;
	text-align : center ;
	background : #5eb0e5 ; /* Changement couleur cadre --> tarifs */
}

table#stage td {
	border : 2px solid #5eb0e5 ; /* Changement couleur cadre --> tarifs */
	margin : 1px auto ;
}

table#stagetd.prix {
	text-align : center ;
	border : 2px solid #5eb0e5 ; /* Changement couleur cadre --> tarifs */
	margin : 1px auto ;
	width : 80% ;
	border-collapse : collapse ;
	background : #ffffff; /* Changement couleur fond cadre --> tarifs */
}



/* DIVERS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.images {
	width : 100% ;
	text-align : center ;
}

.images img {
	border : none ;
	margin : 10px ;
	border : 1px solid ;
}

.alerte,		/* peut continuer */
.erreur {		/* fatale -> entraîne die() */
	text-align : center ;
	color : #f00 ;
	background : url(../img/divers/ko.gif) no-repeat center left ;
	width : 40% ;
	margin : 0px auto ;
	padding-top : 50px ;
	padding-bottom : 50px ;
}

.notification {
	text-align : center ;
	color : #0b0 ;
	background : url(../img/divers/ok.gif) no-repeat center left ;
	width : 40% ;
	margin : 0px auto ;
	padding-top : 50px ;
	padding-bottom : 50px ;
}

.information {
	text-align : center ;
	color : #0b0 ;
	background : url(../img/divers/ok.gif) no-repeat center left ;
	width : 40% ;
	margin : 0px auto ;
	padding-top : 50px ;
	padding-bottom : 50px ;
}

.alerte a ,
.erreur a,
.notification a,
.information a {
	background : none ;
	margin-top : 0px ;
	display : block ;
}

.action-admin {
	margin : 0 auto ;
	margin-top : 10px ;
	text-align : center ;
	border : 1px dotted #b8bdc6 ;
	background : #e3e9f4 ;
	width : 60% ;
}

.action-admin a {
	color : #333 ;
	text-decoration : none ;
	display : block ;
	padding : 5px ;
}

.action-admin a:hover {
	background : #b8bdc6 ;
	text-decoration : underline ;
}
	/* dans les tableaux privés : code couleur pour le statut */
.erreur-dates {
	color : #f00 ;
}

.pre {
	background : #e5e5ff ;
}

.post,
.stage-encours {
	background : #ffe5e5 ;
}

.active {
}

.complet {
	color : #999 ;
}


/* FORMULAIRES
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.obligatoire,
.obligatoirenum,
.obligatoireemail {
	border : 1px solid #00f ;
}

.invalide-email,
.invalide-num,
.invalide-oblig,
.invalide-oblig-num,
.invalide-oblig-email {
	border : 2px solid #f00 ;
}

.invalide-email,
.invalide-oblig-email {
	background : #fff url(../img/divers/email-rouge.gif) no-repeat right ;
}

.invalide-num,
.invalide-oblig-num {
	background : #fff url(../img/divers/num-rouge.gif) no-repeat right ;
}


.num,
.obligatoirenum {
	background : #fff url(../img/divers/num.gif) no-repeat right ;
}

.email,
.obligatoireemail {
	background : #fff url(../img/divers/email.gif) no-repeat right ;
}

form label {
	cursor : pointer ;
}

form.std {
	width : 100 % ; 
}

.titreform, .piedform {
	width : 100% ;
	font : bold 1.1em sans-serif ;
	color : white ;
	background : #ade ;
	padding : 2px ;
	border-left : 1px solid #555 ;
	border-right : 1px solid #555 ;
	background : url(../img/divers/fondform.gif) repeat-x ;
}

.piedform {
	text-align : right ;
}

.corpsform {
	width : 100% ;
	background : #efefef ;
	padding : 2px ;
	border-left : 1px solid #555 ;
	border-right : 1px solid #555 ;
}

.corpsform fieldset {
	padding: 5px ;
	margin: 10px ;
	border : 1px solid #ccc ;
	background : #ddd ;
}

.corpsform select,
.corpsform input {
	margin-right : 40px ;
}

.corpsform legend {
	color: #00a ;
	background : #ddd ;
	padding : 5px ;
}

input.recherche {
	background : url(../img/icones/loupe.gif) no-repeat right ;
	padding-right : 16px ;
}
/* TABLEAUX
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

table.std {
	width : 100% ;
	border : 1px solid #ccc ;
	border-collapse : collapse ;
}

table.std th {
	text-align : center ;
	border-bottom : 1px solid #ccc ;
	background : #eaeaea ;
}

table.std th a {
	color : #aaa ;
}

table.std th a:hover {
	color : #444 ;
}

table.std td {
	border-bottom : 1px solid #ccc ;
	text-align : center ;
}

/* CONTENEURS STAGE
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.conteneur-stage {
	width : 100% ;
	border : 1px solid ;
	margin : 10px ;
	padding : 0 ;
}

.nom-stage {
 	background : #b4d0ff ;
	padding : 5px ;
}

.details-stage {
	font-size : x-small ;
	background : #d6e5ff ;
	padding : 5px ;
}

.prec-suiv {
	width : 80% ;
	position : relative ;
	margin : 0 auto ;
	padding : 10px ;
}

.prec-suiv #suiv {
	position : absolute ;
	right : 1px ;
	top : 1px ;
}

.prec-suiv #prec {
	position : absolute ;
	left : 1px ;
	top : 1px ;
}

.prec-suiv #suiv a,
.prec-suiv #prec a {
	text-decoration : none ;
	font-weight : bold ;
	color : #0a0 ;
}

.prec-suiv #suiv a:hover,
.prec-suiv #prec a:hover {
	text-decoration : underline ;

}

/* INFO BULLE
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

a.info {
	position : relative; 
	z-index : 24 ;
	background-color : #fff ; /* IMPORTANT ! Résoud un pb sous IE */
	color : #000 ;
	text-decoration : none ;
}

a.info:hover {
	z-index : 25 ;
	background-color : #ffe ; /* IMPORTANT ! Résoud un pb sous IE */
}

a.info span {
	display : none ;
}

a.info:hover span{ 
	display : block ; 
	position : absolute ;
	top : 2em ; left : 2em ; width : 250px ;
	border : 1px solid #6699cc ;
	background-color : #eeeeee ;
	color : #6699cc ;
	font-weight : none ;
	padding : 1px ;
	font-size : x-small ;
}

a.info:hover span p { 
}

/* ÉTAPES
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.etapes {
	width : 100% ;
	margin : 0px auto ;
	text-align : center ;
}

.etapes span {
	float : left ;
	border : 1px dotted #ccc ;
	padding : 2px ;
	display : block ;
	line-height : 31px ;
}

.etapes span.etapeSelect {
	font-size : 20px ;
	width : 31px ;
	background : #eee ;
}

.etapes div.lignes-entre {
	display : block ;
	width : 50px ;
	height : 30px ;
	float : left ;
	background : url(../img/divers/fond-etapes.gif) repeat-x ;
}


/* PIED DE PAGE
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */


#pieddepage a {
	color : #000000 ; /* Changement couleur texte pieddepage */
	text-decoration : none ;
}

#pieddepage a:hover {
	color : #666666 ; /* Changement couleur texte dessus pieddepage */
	text-decoration : underline ;
}

#pieddepage a:active {
	text-decoration : underline ;