/*######################################
#				éléments HTML
######################################*/

html {
	background: #151515;
	margin: 0;
	padding: 0;
	height : 100%;
}

body {
	margin: 0;
	padding: 0;
	height : 100%;
	font: 80% verdana, arial, sans-serif;
	color: #f1deac;
}

a, a:hover, a:active {
	text-decoration: none;
	color : #f1deac;
	border: 0 none;
}

img {
	border : 0px;
	margin : 0px auto 0px auto;
}

img.border {
	margin:0px auto 0px auto; 
	border:2px solid #dddddd;
}

dl, dt, dd, ul, li {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

fieldset {
	border:none;
}

label {
	font-weight : bold;	
	font-size : 0.85em;
}

input, textarea, select {
	font-family : Verdana,Arial,Geneva,Helvetica,sans-serif;
	font-size : 0.8em;
	border-width : 1px;
	background : #666666;
	color : #dddddd;
}

textarea {	width : 95%;}

h3 { 
	background: transparent url('/img/puce_titre3.gif') no-repeat bottom left;
	padding: 0px 0px 2px 5px;
	margin-top : -10px;
	/*font-size : 1.2em;*/
}

/*######################################
#				DIV container
######################################*/

#screen{
	margin: 0;
	padding: 0;
	width:980px;
	margin: 0 auto 0 auto;
	min-height:100%;
}

#banniere {
	height: 112px;
	margin : 0 auto 0 auto;
	background: transparent url('/img/banniere3.jpg') no-repeat top;
}

#body {
	clear:both;
	/*position:relative;
	top:-85px;*/
	margin-top : 30px;
	z-index:1;
}

#colonne {
	float:left;
	clear:left;
	width:130px;
	background:url('/img/collonnearrondihaut.png') no-repeat top;
}

#colonne_content {
	width:130px;
	margin-top:20px;
	background:url('/img/fond2.png') right;
}

#colonne_bas {
	width:130px;
	height:30px;
	background:url('/img/colonnearrondibas.png') no-repeat bottom;
}

#center {
	width:830px;
	float:right;
	clear:right;
	background:url('/img/centerarrondihaut.png') no-repeat top;
}

#center_content {
	width:830px;
	background:url('/img/fond.png') right;
	margin : 20px auto 0px auto;
	padding-top:10px;
}

#center_bas {
	width:830px;
	height:30px;
	background:url('/img/centerarrondibas.png') no-repeat bottom;
}

/*######################################
#					Menu Horizontal dynamique
######################################*/

#menu {
	/*position:relative;
	top : -27px;
	left : 302px;*/
	position : absolute;
	height:28px;
	width:980px;
	/*margin-bottom : 41px;*/
	z-index:10;
}

#menu dl {
	float : left;
}

#menu dt {
	cursor: pointer;
}

#menu dt:hover {
	cursor: pointer;
}

#menu dd {
	/*position : absolute;*/
	border: 1px solid #666666;
	margin: -3px 0px 0px 0px;
	background: #151515;
	/*max-width : 185px;*/
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	-khtml-border-radius:5px;
	border-radius:5px;
}
/*
#smenu1 li {
	min-width: 98px;
	max-width: 102px;
}

#smenu2 li {
	min-width: 133px;
	max-width: 145px;
}

#smenu5 li {
	min-width: 188px;
	max-width: 193px;
}
*/
#menu li {
	text-align: center;
	background: #151515;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	-khtml-border-radius:5px;
	border-radius:5px;
}

#menu li a {
	display: block;
	font-size : 0.95em;
	/*-moz-border-radius:5px;
	-webkit-border-radius:5px;
	-khtml-border-radius:5px;
	border-radius:5px;*/
}

#menu li a:hover{
	background: #333333;
	font-weight: bolder;
	color: #dddddd;
	/*-moz-border-radius:5px;
	-webkit-border-radius:5px;
	-khtml-border-radius:5px;
	border-radius:5px;*/
}


/*######################################
#					Menu Vertical
######################################*/

#menuV {
	width:115px;
	padding-top:15px;	
}

#menuV ul {
	padding-left:25px;
}

#menuV li {
	padding-bottom:10px;
	list-style-type: disc;
	color:#dddddd;
}

#menuV li a {
	color:#f1deac;
	display:block;
}

#menuV li:hover {
	color: #dddddd;
	list-style-type: circle;
}

#menuV li a:hover {
	color: #dddddd;
	font-weight:bold;
}

/*######################################
#					Choix de la langue
######################################*/

#lang {
	width:120px;
	padding-top:15px;
	padding-bottom:15px;
	border-bottom:solid 1px #666666;
}

#lang img {
	padding: 0px 16px 0px 16px;
}

/*######################################
#					Le contenu de la page (Include)
######################################*/

#include {
	margin : -20px auto 0px auto;
	padding : 0px 15px 0px 5px;
	width:810px;
}

#include img {
	margin : 0px auto 0px auto;
	display : block;
}

#include h3 {
	text-indent : 60px;
	color : #dddddd;
}

#include p {
	margin : 0px 20px 10px 20px;
	text-align : justify;
}

#include p.paragraphe { 
	text-indent: 20px;
	text-align : justify;
}

#include p.paragraphe:first-letter {
	font-size : 120%;
}

#include a {
	text-decoration: underline;
	color : #dddddd;
	border: 0 none;
	font-size : 0.85em;
}

#include a:hover {
	text-decoration: none;
	color : #666666;
	border: 0 none;
	font-size : 0.85em;
}

td.entete {
	background : #666666;
	border : 1px solid #666666;
	color : #333333;
	font-weight : bold;
	font-size : 0.85em;
	padding : 2px;
}

td.message {
	background : #333333;
	border : 1px solid #666666;
	color : #f1deac;
	padding : 2px;
	text-align : justify;
}

td.transition {
	height : 5px;
}

em.source {
	font-size : 0.85em;
}

/*#######################
Rollover
########################*/
#rollover table {
	margin:0 auto;
}

#rollover a.equilibre {
	display:block;
	width: 152px ;
	height : 350px;
	background: url(/img/equilibre3.jpg) no-repeat 0 0 ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */
	border : 1px solid #ddd;
	margin : 0 20px;
}

#rollover a.equilibre:hover
{
	background: url(/img/equilibre3.jpg) no-repeat 0 -350px ; /* Et ici on décale l'image du background de 30px vers le haut pour laisser apparaître la 2eme partie de l'image */
	border : 1px solid #ddd;
}

#rollover a.nus {
	display:block;
	width: 152px ;
	height : 350px;
	background: url(/img/nus3.jpg) no-repeat 0 0 ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */
	border : 1px solid #ddd;
	margin : 0 20px;
}

#rollover a.nus:hover
{
	background: url(/img/nus3.jpg) no-repeat 0 -350px ; /* Et ici on décale l'image du background de 30px vers le haut pour laisser apparaître la 2eme partie de l'image */
	border : 1px solid #ddd;
}

#rollover a.danse {
	display:block;
	width: 152px ;
	height : 350px;
	background: url(/img/danse3.jpg) no-repeat 0 0 ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */
	border : 1px solid #ddd;
	margin : 0 20px;
}

#rollover a.danse:hover
{
	background: url(/img/danse3.jpg) no-repeat 0 -350px ; /* Et ici on décale l'image du background de 30px vers le haut pour laisser apparaître la 2eme partie de l'image */
	border : 1px solid #ddd;
}

#rollover a.patinage {
	display:block;
	width: 152px ;
	height : 350px;
	background: url(/img/patinage.jpg) no-repeat 0 0 ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */
	border : 1px solid #ddd;
	margin : 0 20px;
}

#rollover a.patinage:hover
{
	background: url(/img/patinage.jpg) no-repeat 0 -350px ; /* Et ici on décale l'image du background de 30px vers le haut pour laisser apparaître la 2eme partie de l'image */
	border : 1px solid #ddd;
}


/*#######################
Last Creation
########################*/
ul.last_creation  {
	margin-left : 10px;
}

ul.last_creation li {
	padding-bottom : 4px;
	list-style-type : disc;
}

ul li.current {
	font-weight : bold;
	color : #f1deac;
	list-style-type: circle;
}

ul li.current  a{
	color : #f1deac;
	text-decoration : none;
}