html, body {
	font-family: Arial, sans-serif;
	font-size: 16px;
	color: #555555;
	margin : 0;
	padding: 0;
	overflow: auto;
	background-color: #000; 
	height: 100%;
}

html >body #top, #droite, #bas, #gauche  {
  position: fixed;
}

#contener {
	width: 1000px;
	margin: auto;
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 1;
	border: 7px solid red;
}

#fond {
	width: 975px;
	margin: auto;
	padding: 0px 0 0px 0;
	background-color: #200; 
	height: 100%;
}

/*####### DEBUT bandeau TOP ###########*/
#top {
	height: 82px;
	width: 776px;
	margin: 0px 0 0 194px;
	text-align: center;
	z-index: 99999;
	padding: 0px 2px;
	color: #bbbccc; 
	background-color: #333444;
}

#top h2 {
	text-align: center; 
	margin: -90px 0px; 
	color: #edd; 
	line-height: 160%; 
	background-color: #200; 
	font-weight: 400;
	color: #fFbfef;  
}

#top .imag {
	height: 82px;
	padding: 0px;
	z-index: 9999;
}

  /* Zoom sur image */
 .conteneur_images {
	height: 82px;
	width: 776px;
	margin: 0px;
	text-align: center;
	padding: 0px;
	border: 0;
	display: block;
}
.imagh {
    float: left;
    height: 72px;
    margin: 5px 8px;
    width: 160px;
	border: 0;
	display: block;
	text-align: center;
}
.imagv {
    float: left;
    height: 72px;
    margin: 5px 8px;
    width: 64px;
	border: 0;
	z-index: 9999;
}
.imagh img {  
    height: 100%;
    width: 100%;
	border: 0;
	transition: all 1.2s ease 0.1s;
	-moz-transition: all -moz-transform 1.2s ease 0.1s;
	-o-transition: all -o-transform 1.2s ease 0.1s;
	-ms-transition: all -ms-transform 1.2s ease 0.1s;
		-webkit-transition-property: all;
		-webkit-transition-duration: 1.2s;
		-webkit-transition-timing-function: ease 0.1s;
}
.imagv img {  
    height: 100%;
    width: 100%;
	border: 0;
    background: transparent; 
	transition: all 1.2s ease 0.1s;
	-moz-transition: all -moz-transform 1.2s ease 0.1s;
	-o-transition: all -o-transform 1.2s ease 0.1s;
	-ms-transition: all -ms-transform 1.2s ease 0.1s;
		-webkit-transition-property: all;
		-webkit-transition-duration: 1.2s;
		-webkit-transition-timing-function: ease 0.1s;
}
.imagh img:hover {
    height: 130%;
    width: 180%;
	border-radius: 5px 5px 5px 5px;
	border: 0;
    margin: -5px 0px 0px -70px;
    position: relative; 
}
.imagv img:hover {
    background-color: #200; 
    height: 300%;
    padding: 0px;
    position: relative; 
    width: 230%;
	border-radius: 4px 4px 4px 4px;
	border: 0;
    margin: -5px 0px 0px -40px;
}
.conteneur_images a, a:hover, a:active, a:focus {
	text-decoration: none;
	color: #ffff00;
	font-weight:400; 
 	padding-left: 0px;
	background-color: transparent;
}
  /* FIN Zoom sur image */
  
/*####### FIN bandeau TOP ###########*/

/*####### DEBUT contenu PAGE ###########*/
#page {
	width: 756px;
	color: #ffdafa;
	position: relative;
	top: 85px;
	z-index: 1;
	text-align: justify;
	padding: 12px;
	border: 0px; 
	background-color: #200; 
	float: right;
}

#texte {
	padding: 10px; 
	margin: 20px;
	border: 1px solid #800;
}
#texte p {
	padding: 5px 10px ; 
	margin: 0;
	font-size: 14px; 
}
#texte h3 {
	padding: 5px 10px ; 
	margin: 0;
	font-weight: 400;
	font-size: 17px;
}

.video {
	text-align: center; 
	width: 750px; 
	margin: 0px auto 0 auto; 
}

#fram_vid {
	width: 560px;
	height: 420px;
	z-index: 1;
	margin: 12px auto 0 auto;
}

#h2video {
	color: #fFbfef;  
	padding: 40px 0 10px 0; 
	line-height: 140%;
	font-weight: 400; 
	margin: 0;
}
#hrvideo {
	margin: 40px 0 20px 0; 
	color: #a00;
}
#h3video {
	color: #fFbfef;  
	margin: 30px 0 0 0; 
	line-height: 100%; 
	font-weight: 400; 
	font-size: 14px;
}
#pvideo {
	font-weight: 400; 
	font-size: 16px;
}
/*####### FIN contenu PAGE ###########*/

/*####### DEBUT Bandeau GAUCHE ###########*/
#gauche {
	width: 186px;
	margin: auto;
	background-color: #333444;
	color: #bbbccc;
	top: 1px;
	bottom: 0px;
	z-index: 9;
	padding: 6px 3px 1px 5px;
	float: left;
	overflow: auto;
	overflow-x: hidden;
}
#gauche .p {
	margin: -6px 0 0 0; 
	text-align: center; 
	color: #cc9999;
	font-weight: 400;
	font-size: 15px
}
#gauche .liste {
	margin: 8px 0 8px 6px;
	padding: 0;
	line-height: 100%;
	text-indent: -10px
}
#gauche .list {
	margin: 8px 0 10px 6px;
	padding: 0;
	line-height: 135%;
	list-style-type: none;
	text-indent: -10px;
}
#gauche .imag {
	text-align: center;
	margin: 3px auto 0 auto;
	width: 164px;
}
#choix {
	text-align: center; 
	padding: 7px 0px 8px 0px; 
	margin: 12px 3px 10px 1px; 
	border-bottom: 1px solid;
	border-top: 1px solid;
}
/*####### FIN Bandeau GAUCHE ###########*/

#droite {
	width: 172px;
	margin-left: 804px;
	background-color: #333366;
	color: #ccccfa;
	position: absolute;
	display: block;
	top: 125px;
	bottom: 42px;
	z-index: 9;
	padding: 6px;
}

/*####### DEBUT Bandeau BAS ###########*/
#bas {
	bottom: 0;
	z-index: 999;
	width: 780px;
	border-radius: 0; 
	border: 0; 
	text-align: center;
	margin: 0 0 0 195px;
	padding:0;
}

.bas {
	height: 25px;
	width: 780px;
	position: relative;
	bottom: 0px;
	float: right;
	color: transparent;
	text-decoration: none;
	line-height: 75%;
	z-index: 999;
	margin: 0;
	padding: 0px;
	border: 0; 
	background-color: #333444; 
}
.bas img {
	width: 780px;
	border: 0;
	margin: 0;
	padding: 0;
}
.bas a, a:hover, a:active, a:focus {
	text-decoration: none;
	color: #ffff00;
	font-weight:400; 
 	padding-left: 0px;
	background-color: transparent;
	background-image: 0;
}
/*####### FIN Bandeau BAS ###########*/

/*####### DEBUT Bords Ronds pour les <div> ###########*/
.bord_rond div {
	border-radius: 7px 7px 7px 7px;
}

.bords_5 {
	border: 5px solid #ff22ff;
	border-radius: 25px 25px 25px 5px;
}

.bords_7 {
	border: 1px solid yellow;
	border-radius: 7px 7px 7px 7px;
}

.bords_10 {
	border: 1px solid yellow;
	border-radius: 10px 10px 10px 10px;
}

.bords_15 {
	border: 1px solid yellow;
	border-radius: 15px 15px 15px 15px;
}
/*####### FIN Bords Ronds pour les <div> ###########*/

/*####### DEBUT Formats des liens ###########*/
a:link {
	color: rgb(255,255,255);
	text-decoration: none;
/* 	font-size: 14px; */
}
a:visited { 
	font-size:14px; 
	color:rgb(255,220,220); 
	text-decoration:none; 
	background-color: transparent;}
a:focus, a:active {
	font-size: 14px;
	color: rgb(255,240,240);
	text-decoration: none;
	background-color: transparent;
}
a:hover {
	font-style: italic;
	font-weight: 400;
	color: rgb(250,20,20);
	text-decoration: underline;
	background-color: rgb(0,0,0);
 }

.lien_1 a {
	font-size: 100%;
	color: rgb(255,220,220);
	text-decoration: none;
 	padding-left: 12px;
	background: url(../ressources/fleche_droite-20.gif) no-repeat top 9px left -4px;
	background: url(../ressources/fleche_droite-20.gif) no-repeat 9px -4px;
}
.lien_1 a:hover { 
	color: rgb(250,20,20);
	font-weight:400; 
	font-style:italic; 
	text-decoration:underline;
 	padding-left: 12px;
	background: rgb(0,0,0) url(../ressources/fleche_droite.gif) no-repeat top 8px left -7px;
	background: rgb(0,0,0) url(../ressources/fleche_droite.gif) no-repeat 8px -7px;
 }

.lien_2 a  {
	font-size: 90%;
	color: rgb(255,220,220);
	text-decoration: none;
 	padding-left: 12px;
	background: url(../ressources/fleche-left-red-smal.png) top 6px left 5px no-repeat; ;/**/
	background: url(../ressources/fleche-left-red-smal.png) 6px 5px no-repeat; ;/**/
}
.lien_2 a:hover, a:active, a:focus { 
	color: rgb(250,20,20);
	font-weight:400; 
	font-style:italic; 
	text-decoration:underline;
 	padding-left: 12px;
	background: rgb(0,0,0) url(../ressources/fleche-left-red-smal-active.png) no-repeat top 9px left 5px;
	background: rgb(0,0,0) url(../ressources/fleche-left-red-smal-active.png) no-repeat 5px 9px;
 }
 .lien_a_h a, a:active {
	color: #ffff00;
	font-weight:400; 
	font-style:italic; 
 	padding-left: 12px;
	background: rgb(0,0,0) url(../ressources/fleche-left-red-smal-active.png) no-repeat 9px left 5px;
	background: rgb(0,0,0) url(../ressources/fleche-left-red-smal-active.png) no-repeat 5px 9px;
 }

.lien_0 a, a:hover, a:active a:focus {
	text-decoration: none;
	color: #ffff00;
	font-weight:400; 
 	padding-left: 0px;
	background-color: transparent;
	background-image: 0;
 }