/* BEG xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
/* BEG xxxxxxxxxxxxxxxxxxxxxx ELEMENTS GENERAUX xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
/* BEG xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

/* ATTENTION : 
	le code css sur html est TRES IMPORTANT, il permet aux transition entre pages de rester bien noire et d'éviter un éclair blanc lors du changement de page
*/
html
{
	background-color: #000000;
}

body, a
{
	color: #ffffff;
}

#trace
{
	color: #ffffff;
}
.etat_visible
{
	display:block;
	visibility: visible;
}
.etat_invisible
{
	display:none;
	visibility: hidden;
}

li
{
	/* ATTENTION ruse
		ORIGINAL /
		background : url(images/sprites/sprite_monitor_png.png) no-repeat 15px 15px;
		background-position: 0px -750px;
		+> Je diminue background-position(.top) à -746 et j'agrandis background(.height) à 19 pour décaler la puce vers le bas 
	*/
	list-style:none;
	padding:0px 0px 0px 21px;
	margin: 0px 0px 0px 0px;
}


/* BEG ====== ATTENTION : toute la gestion de la transition sur les liens se gère ici */
a
{
	/* -------------- C S S 3 -------------- */
/*
	-moz-transition: color 0.3s ease-in-out, opacity 0.3s ease-in-out;
	-webkit-transition: color 0.3s ease-in-out, opacity 0.3s ease-in-out;
	-o-transition: color 0.3s ease-in-out, opacity 0.3s ease-in-out;
	-ms-transition: color 0.3s ease-in-out, opacity 0.3s ease-in-out;
	transition: color 0.3s ease-in-out, opacity 0.3s ease-in-out;
*/
	transition: color 0.3s ease-in-out;
}
a:link      {color:rgba(255, 255, 255,1);}
a:visited   {color:rgba(255, 255, 255,1);}
a:hover     {color:rgba(175, 137,  63,1);}
a:active    {color:rgba(175, 137,  63,1);}
a:focus     {color:rgba(175, 137,  63,1);}
/* END ====== ATTENTION : toute la gestion de la transition sur les liens se gère ici */

/* END xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
/* END xxxxxxxxxxxxxxxxxxxxxx ELEMENTS GENERAUX xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
/* END xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */


/* BEG xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
/* BEG xxxxxxxxxxxxxxxxxxxxxx GESTION DES BLOCKS xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
/* BEG xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

/* BEG xxxxxx ORGANISATION GENERALE DE LA PAGE xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
#central_min_block {
	position: relative;
	top: 0px;
}
#central_max_block {
	margin: auto;
	overflow: hidden;
}
#central_max_block {
/*	background: rgba(0, 0, 0, 0) url("images/sprites/sprite_monitor_jpg_v3_part_1.jpg") no-repeat scroll 0 -330px; */
}
.flexcontainer {
	position: relative;
	top: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.flexcontainer > * {
	/* CES DEUX LIGNES POUR VOIR LES CONTAINERS */
    /* background-color: #e46119; */
    /* border: 1px solid #626262; */
	/* On généralise un margin-top à tous les éléments fils */
	margin-top:20px;
}
.flexcontainer .left {
    align-self: flex-start;
}
.flexcontainer .right {
    margin-left: auto;
}
.flexcontainer .margin_right_10 {
    margin-right: 10px;
}
/* END xxxxxx ORGANISATION GENERALE DE LA PAGE xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

/* END xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
/* END xxxxxxxxxxxxxxxxxxxxxx GESTION DES BLOCKS xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
/* END xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */


/* BEG xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
/* BEG xxxxxxxxxxxxxxxxxxxxxx STACK 1 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
/* BEG xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

/* BEG xxxxxx BACKGROUND xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
#bg > img {
/*	width: 100%;*/
	position: absolute;
	transition: opacity 1s ease-in-out;
}
#bg > img.transparent {
opacity:0;
}
/* END xxxxxx BACKGROUND xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */


/* BEG xxxxxx HEADER xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
header .bgtitle {
	border-radius: 10px;
	width: 100%;
	margin-bottom: 6px;
	opacity: 0.5; filter:alpha(opacity=50);	
}
header > nav {
	display: table;
	margin: auto;
	border: 1px dotted white;
    border-radius: 10px;
}
header > nav ul {
	padding: 6px;
}
/* END xxxxxx HEADER xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */


/* BEG xxxxxx SECTION SECTION_TITLE xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
#section_galerie_title > div {
	height: 40px;
	border-radius: 10px;
}
/* END xxxxxx SECTION SECTION_TITLE xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */


/* BEG xxxxxx SECTION SECTION_GALERIE_CONTENU xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
#section_galerie_contenu  #div_case {
	height:198px;
	margin-bottom: 3px;
}
#section_galerie_contenu  #div_bt {
	height:30px;
}
/* -------------------------------------------- */
#section_galerie_contenu .gal_case {
	float:left;
	width:255px;
	height:198px;
	border-radius: 10px;
	margin-right: 10px;
	background-color: black;
	border-radius: 10px;
}

#section_galerie_contenu .gal_case > * {
	display: block;
}
#section_galerie_contenu .gal_case > img {
	width: 255px;
	height: 170px;
	position: absolute;
	transition: opacity 1s ease-in-out;
	border-radius: 10px;
}
#section_galerie_contenu .gal_case > img.transparent {
opacity:0;
}

#gp_1 > img
{
	background-position: 0px 0px;
}

#gp_2 > img
{
	background-position: -255px 0px;
}
#gp_3 > img
{
	background-position: -510px -0px;
}
#pp_1 > img
{
	background-position: -765px 0px;
}
#pp_2 > img
{
	background-position: 0px -200px;
}
#pp_3 > img
{
	background-position: -255px -200px;
}
#pp_4 > img
{
	background-position: -510px -200px;
}
#nm_1 > img
{
	background-position: -765px -200px;
}
#nm_2 > img
{
	background-position: 0px -400px;
}
#nm_3 > img
{
	background-position: -255px -400px;
}
#nm_4 > img
{
	background-position: -510px -400px;
}

/* -------------------------------------------- */
#section_galerie_contenu .gal_case a {
	width:255px;
	text-align: center;*/
	text-decoration: underline;
	margin-top: 170px;
}
#section_galerie_contenu .bt {
	display: block;
	width:40px;
	height:30px;
	margin-right: 10px;
}
#section_galerie_contenu .bt_prev{
	background: url(images/bt/bt_boussole_pp.gif) no-repeat;
	float:left;
}
#section_galerie_contenu .bt_next{
	background: url(images/bt/bt_boussole_ps.gif) no-repeat;
	float:right;
}
/* END xxxxxx SECTION SECTION_GALERIE_CONTENU xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */


/* BEG xxxxxx SECTION SECTION_SEP_BATON xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
#section_sep_baton
{
	/* Pour annuler le margin-top par défaut sur tous les objets de la flex box */
	margin-top:0px;
}
/* END xxxxxx SECTION SECTION_SEP_BATON xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

/* BEG xxxxxx SECTION SECTION_POLAROID xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
#section_polaroid {
	/* Pour annuler le margin-top par défaut sur tous les objets de la flex box */
	margin-top:0px;
}
/* END xxxxxx SECTION SECTION_POLAROID xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */


/* BEG xxxxxx FOOTER xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
#footer_info {
	border: 1px dotted #ffffff;
	border-radius: 10px;
}
#footer_info nav ul {
	margin: auto;
	padding-bottom: 5px;
	padding-top: 10px;
}
#footer_info nav ul li {
	display: inline;
}

#footer_contact_fermer
{
	float:right;
	width: 32px;
	height: 32px;
	color: black;
}
#footer_thanks_fermer {
	float:right;
	width: 32px;
	height: 32px;
	color: black;
}
#footer_info p {
	text-align: center;
	margin-left: 10px;
	margin-right: 10px;
}

/* END xxxxxx FOOTER xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

/* END xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
/* END xxxxxxxxxxxxxxxxxxxxxx STACK 1 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
/* END xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */


/* BEG xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
/* BEG xxxxxxxxxxxxxxxxxxxxxx STACK 2 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
/* BEG xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

#stack_2 {
	position: absolute;
/*	left: 0px; */
	top: 0px;
}

#stack_2 > #a_menu {
	background : url(images/sprites/sprite_monitor_png.png) no-repeat;	
	background-position: -600px -450px;
	width:32px;
	height:21px;
	float:left;
	margin: 10px;
	transition: visibility 1s ease-in-out 0s;
}

#stack_2 > aside {
	position: absolute;
/*	width:155px;
	height:475px;
	background : url(images/sprites/sprite_monitor_png.png) no-repeat;	
	background-position: 0px -225px;*/
	transition: top 3s ease-in-out 0s;
}

#stack_2 > aside > * {
	display: block;
	margin: auto;
	margin-top: 15px;
}


#stack_2  .aside_show {
	top: 0px;
}

#stack_2_aside_menu_mode img {
	position: absolute;
	margin: auto;
	transition: opacity 1s ease-in-out;
}
#stack_2_aside_menu_mode img.transparent {
opacity:0;
}
#stack_2_aside_menu_mode {
cursor:pointer;
}

/* END xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
/* END xxxxxxxxxxxxxxxxxxxxxx STACK 2 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
/* END xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */