/* _________________________________________________ COMMUN _______________________________________*/

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, textarea{
	margin: 0; padding: 0; border: 0;
}

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);

body{ 
	background:#f6f2ef;
	font-family: 'Open Sans', Helvetica, sans-serif;
	font-size: 18px;
	}

textarea{ 
	background:#fff;
	font-family: 'Open Sans', Helvetica, sans-serif;
	font-size: 18px;
	}
	
table{ 
	font-family: 'Open Sans', Helvetica, sans-serif;
	font-size: 16px;
	}

h2{
	color: #848484;
	margin-top: 18px;
	margin-left: 8px;
}

input{
	padding: 2px;
	border:#ababab 1px solid;
    background-color: #fff;
}

li{
	margin-left:24px;
	margin-top:6px;
	margin-bottom:6px;
}

hr{
	color: #848484;
}

a, a:active, a:visited{
	color: #c01414;
	text-decoration: none;
}
a:hover{
	color: #141414;
	text-decoration: none;
}

a:focus{
	color: #c01414;
	text-decoration: none;
    background-color: #ababab;
}

.cbpgpr .chunk img { width: 100% }

.flotte {
	float:left;
	margin: 3px;
}

#page{
	width: 85vw;
	padding-left : 15vw;
	margin-top: 8px;
	margin-left: auto;
	margin-right: auto;
}

.papier {
	background:#fff;
 box-shadow: 0 2px 2px rgba(0,0,0,0.4);
 overflow: hidden;
}

.papier:hover {
  box-shadow: 0 8px 8px rgba(0,0,0,0.8);
}

.largePage{
	width: 80vw;
	max-width: 1200px;
	margin-left:auto;
	margin-right:auto;
	margin-bottom: 12px;
	padding: 16px;
	padding-bottom: 24px;	
}
.largeBillet{
	width: 100%;
}

.titre{
	color: #c01414;
}

blockquote{
	padding-left: 16px;
}

.contenuBillet{
	padding: 2vw;
}
	
/* ___________________________________________ NOUV _____________________________________________ */

.body-text {
  padding-top: 20vh;
  text-align: center;
  position: relative;
}

.bandeau-vertical {
  position: absolute;
  z-index: 0;
  top: 15vh;
  left: 0vw;
  padding-bottom: 2vh;
}

.hamburger-icon {
/*
  position: absolute;
*/
  position: fixed;
/*
  position: sticky;
*/
  z-index: 1;
  top: 5vh;
  left: 5vw;
  padding-bottom: 2vh;
}

.hamburger-icon span {
  height: 5px;
  width: 40px;
  background-color: black;
  display: block;
  margin: 5px 0px 5px 0px;
  transition: 0.7s ease-in-out;
  transform: none;
}

#openmenu:checked ~ .menu-pane {
  left: 5vw;
  transform: translateX(5vw);
}

#openmenu:checked ~ .body-text {
display: none;
}

#openmenu:checked ~ .hamburger-icon span:nth-of-type(2) {
  transform: translate(0%, 175%) rotate(-45deg);
  background-color: white;
}

#openmenu:checked ~ .hamburger-icon span:nth-of-type(3) {
  transform: rotate(45deg);
  background-color: white;
}

#openmenu:checked ~ .hamburger-icon span:nth-of-type(1) {
  opacity: 0;
}

#openmenu:checked ~ .hamburger-icon span:nth-of-type(4) {
  opacity: 0;
}

div.menu-pane {
  background-color: #000;
  position: absolute;
  transform: translateX(-105vw);
  transform-origin: (0, 0);
  width: 85vw;
  height: 600%;
  transition: 0.6s ease-in-out;
  z-index: 2;
}

.menu-pane nav > * {
  vertical-align: top; 
}

.menu-pane p {
  color: black;
  font-size: 0.6em;
}

.menu-pane nav {
  padding: 1%;
}

.menu-links li, a, span {
      transition: 0.5s ease-in-out;
}

.menu-pane ul {
  padding: 4%;
  display: inline-block;
}

.menu-pane li {
  padding-top: 10px;
  padding-bottom: 10px;
  margin-left: 10px;
    font-size: 1em;
}


.menu-pane li:first-child {
  font-size: 1.3em;
  margin-left: -10px;
}


.menu-links li a {
  color: white;
  text-decoration: none;
}


.menu-links li:hover a {
  color: #FFAB91;
}

.menu-links li:first-child:hover a {
  color: black;  
  background-color: #FFAB91;
}

#QC-info {
  background-color: #FFAB91;
    border: 2px solid;
  border-color: #FFAB91;
display: block;
  opacity: 0;
  
}

.menu-links li:first-child:hover #QC-info {
opacity: 1;
}

.menu-links li:first-child:hover #DC-info {
opacity: 1;
}

#DC-info {
  background-color: #FFAB91;
    border: 2px solid;
  border-color: #FFAB91;
display: block;
  opacity: 0;
}


.menu-links li:first-child a {
  padding: 5px;
}



input.hamburger-checkbox {
  position: absolute;
  z-index: 3;
  top: 5vh;
  left: 5vw;
  width: 10vw;
  opacity: 0;
  height: 6vh;
}

/* ____________________ SLIDER _______________________________ */	


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

.slider .photos {
    position: relative;
    height: 25vw;
    max-height: 25vw;
}

.slider .photos img {
    width: 100%;
    position: absolute;
    left: 0;
    opacity: 0;
    transition: opacity 1s;
}

.slider .photos img.shown {
    opacity: 1;
}

.prev:before,
.next:before {
  color: #000;
  font-size: 100px;
  position: absolute;
  top: 35%;
  cursor: pointer;
}

.prev:before {
/*
  content: '';
*/
  left: 0;
}

.next:before {
/*
  content: ' &nbsp; &nbsp; <br> &nbsp; &nbsp; ';
*/
  right: 0;
}



/* ____________________ BANDEAU _______________________________ */	

#tete {
	top: 0px;
	width: 100%;
	background: #000;
	text-align: center;
}
#tete a:focus {
    background-color: transparent;
}
#teteImg{
	width: 1100px;
	margin-left: auto;
	margin-right: auto;
}
.bandFA{
	background-image:url(img/band_FA.png);
	background-repeat: no-repeat;
}
.bandIFA{
	background-image:url(img/band_IFA.png);
	background-repeat: no-repeat;
}
.bandML{
	background-image:url(img/band_ML.png);
	background-repeat: no-repeat;
}
.bandRL{
	background-image:url(img/band_RL.png);
	background-repeat: no-repeat;
}
.bandEML{
	background-image:url(img/band_EML.png);
	background-repeat: no-repeat;
}
	

/* _________________________________________________ RSS _______________________________________*/

.noPicto{
	width: 100%;
	height: 70px;
}

.rssPicto{
	width: 100%;
	height: 70px;
	background-image:url(img/picto_GROUPES.png);
	background-repeat:no-repeat;
	background-position:right top;
}

.rssTitre{
	font-size: 1.2em;
	margin: 4px;
}

.rssEtoile{
	color: #000;
}

.rssDate{
	color: #242424;
	font-size: 0.8em;
}

.rssTab {
	margin-left: 22px;
} 

#rssPage{
	width: 100%;
	float: left;
	margin-left: 8px;
	padding-bottom: 10px;	
	text-align: justify;
}


/* _________________________________________________ BILLETS _______________________________________*/

.matPicto, .mlnewsPicto, .renewsPicto, .rintnewsPicto, .publiconewsPicto, .rlnewsPicto, .emlnewsPicto{
	margin-top: 20px;
	margin-left: auto;
	margin-right: auto;
	background-color: #f6f2ef;
	height: 70px;
	width: 94%;
	text-align:center; 
    display:table;
}
.matPicto h2{
	color: #ff0000;
	text-align:center;
	display:table-cell; 
	vertical-align:middle
}
.mlnewsPicto h2{
	color: #f18500;
	text-align:center;
	display:table-cell; 
	vertical-align:middle
}
.renewsPicto h2{
	color: #00826c;
	text-align:center;
	display:table-cell; 
	vertical-align:middle
}
.rintnewsPicto h2{
	color: #ff0000;
	text-align:center;
	display:table-cell; 
	vertical-align:middle
}
.publiconewsPicto h2{
	color: #528590;
	text-align:center;
	display:table-cell; 
	vertical-align:middle
}
.rlnewsPicto h2{
	color: #ff0000;
	text-align:center;
	display:table-cell; 
	vertical-align:middle
}
.emlnewsPicto h2{
	color: #00826c;
	text-align:center;
	display:table-cell; 
	vertical-align:middle
}

.newsTitre{
	color: #a03434;
	font-size: 1.2em;
	margin: 4px;
}

.newsEtoile{
	color: #000;
}

.newsDate{
	color: #242424;
	font-size: 0.8em;
}

.newsTab {
	margin-left: 22px;
} 

#newsPage{
	background: #fff;
	width: 50vw;
	float: left;
	padding: 4px;
	padding-bottom: 10px;	
	text-align: justify;
	display: inline-block;
    vertical-align: top;
	margin-bottom: 12px;
}


/* _________________________________________________ EDITION _______________________________________*/
.editionBillet{
	text-align:right;
}
#editFormulaire{
	width:765px;
	margin-left:auto;
	margin-right:auto;
}

.edit_astuces{
	top: 0px;
	right: 0px;
	padding: 10px;
	font-size: 0.9em;
}

.edit_astuce{
	background: #fff;
	width: 200px;
	padding: 2px;
	margin-bottom: 4px;
}

#truc{
	position: absolute;
	top:0px;
	right:0px;
	background: #fff;
	padding: 10px;
	text-align: center;
}

/* _________________________________________________ TIPS _______________________________________*/

.tipsy { padding: 5px; font-size: 10px; position: absolute; z-index: 100000; }
.tipsy-inner { padding: 5px 8px 4px 8px; background-color: black; color: white; max-width: 200px; text-align: center; }
.tipsy-inner { border-radius: 3px; -moz-border-radius:3px; -webkit-border-radius:3px; }
.tipsy-arrow { position: absolute; background: url('../images/tipsy.gif') no-repeat top left; width: 9px; height: 5px; }
.tipsy-n .tipsy-arrow { top: 0; left: 50%; margin-left: -4px; }
.tipsy-nw .tipsy-arrow { top: 0; left: 10px; }
.tipsy-ne .tipsy-arrow { top: 0; right: 10px; }
.tipsy-s .tipsy-arrow { bottom: 0; left: 50%; margin-left: -4px; background-position: bottom left; }
.tipsy-sw .tipsy-arrow { bottom: 0; left: 10px; background-position: bottom left; }
.tipsy-se .tipsy-arrow { bottom: 0; right: 10px; background-position: bottom left; }
.tipsy-e .tipsy-arrow { top: 50%; margin-top: -4px; right: 0; width: 5px; height: 9px; background-position: top right; }
.tipsy-w .tipsy-arrow { top: 50%; margin-top: -4px; left: 0; width: 5px; height: 9px; }