/*	===============================================================
	CONTENEURS --- Début -- Bien lire les instructions suivantes
	===============================================================	
*/


body{
  font-size: 87.5%;
  color: #252e35;
  font-family: 'Comic Sans MS', Helvetica, Arial, sans-serif; /* 	AFAIRE_INSTALL_CSS_FONT_FAMILY */
  line-height: 1.5em;
  background: #f6f6f6;
}



ol,ul {
padding-left:25px;
}


/* Container parent racine de tout le contenu --- DEBUT */
#allcontents { 
	max-width:1000px; /* AFAIRE_INSTALL_CSS_01 : gérer la largeur maximum de tout le contenu */
	margin: 0 auto;
	/* 
	AFAIRE_INSTALL_CSS_04 : Il est possible aussi d'ajouter une couleur de fond par esthétique en cas d'utilisation d'une image de fond
	Si couleur de fond précisée ici, elle prendra toute la place à l'exception des limites de max-width et de l'éventuelle image de fond,
	et donc il sera INUTILE de préciser une couleur de fond pour pereducontainerid, container; en revanche, footerbackgroundcolor ne sera pas affecté */
/*  
	background:#eeeeee; 
*/ 
}




/* Container des textes (hors banniére, menu et footer) + container qui gére son padding -- DEBUT */
/* AFAIRE_INSTALL_CSS_02 : gérer EVENTUELLEMENT la couleur de fond ou transparence */
/*	
	Le réel intérét de ce conteneur est de mettre un fond qui englobale 'container' mais de largeur 'allcontents'. 
	On peut y mettre une couleur de fond en fonction de l'image/couleur de fond globale, une transparence, etc 
*/	
#pereducontainerid{

/* background:#111111; */
/* OU */
background-image: url("../v1/resources/fond-trans.png");
}




/* Ici on overdide #container qui est déjé défini dans style.css mais ici c'est une éventuelle personnalisation */
#container {
/* AFAIRE_INSTALL_CSS_03 : gérer EVENTUELLEMENT le container des textes */
/* background:#ff0023;*/
}



.footerbackgroundcolor{
/* AFAIRE_INSTALL_CSS_05 : gérer la couleur de fond de l'ensemble du footer */
background:#3d91a9;
}



/*	===============================================================
	CONTENEURS --- Fin
	===============================================================	
*/




/* Réservé bannière supérieur */

.bannieresup {

	width:100%;
	max-width:1000px; /* AFAIRE_INSTALL_CSS_06 : la valeur doit être identique à celle de #allcontents */ 
	
	background-color:#ffffff; /* AFAIRE_INSTALL_CSS_07 : fond de la bannière là où il n'y a rien : mettre une couleur ou mettre en commentaire si on ne veut rien
	Si on met cette couleur en commentaire, le fond de la bannière sera overidé par #allcontents si ce dernier précise une couleur de fond*/
	
margin:0 auto; /* Permet de centrer le DIV */
}



/* Réservé encart phare */

.encart_phare {

	width:100%;
	max-width:700px; /* AFAIRE_INSTALL_CSS_08 : la valeur doit être identique à celle de #allcontents */
	
	background-color:#333333; /* AFAIRE_INSTALL_CSS_09 : fond de la bannière là où il n'y a rien : mettre une couleur ou mettre en commentaire si on ne veut rien
	Si on met cette couleur en commentaire, le fond de la bannière sera overidé par #allcontents si ce dernier précise une couleur de fond*/
	
	text-align: center;
}


/* Réservé diapomara de page */

.diaporama_page {

	width:100%;
	max-width:880px; /* AFAIRE_INSTALL_CSS_10 : la valeur doit être identique à celle de #allcontents */
	
	background-color:#555555; /* AFAIRE_INSTALL_CSS_11 : fond de la bannière là où il n'y a rien : mettre une couleur ou mettre en commentaire si on ne veut rien
	Si on met cette couleur en commentaire, le fond de la bannière sera overidé par #allcontents si ce dernier précise une couleur de fond*/
	
	text-align: center;
}


/* Réservé vidéo - 360 - autre lien de 'page' */

.video_360_autrelien_page {

	width:100%;
	max-width:600px; /* AFAIRE_INSTALL_CSS_12 : la valeur doit être identique à celle de #allcontents */
	
	/*  background-color:#bbbbbb; */ /* AFAIRE_INSTALL_CSS_13 - Toutefois pas conseillé car il est plus agréable d'utiliser le fond de la page*/
	
	/* Ci-dessous : éléments recopiés à partir de cvendome */
	margin: 0 auto;
	/* color:#2261b0; */
	padding-left:0px;
	padding-right:0px;
}

.titre_video_360_autrelien_page
{

font-size:1.5em;
text-align:center;
}


/* réservé bordures pour navigation et liste des sous-catégories */ 

.navigation {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}
.navigation a{
  font-weight:bold;
  text-decoration: underline white;
}

.arborescence {
  background-image: -webkit-linear-gradient(top, #d9edf7 0%, #b9def0 100%);
  background-image:      -o-linear-gradient(top, #d9edf7 0%, #b9def0 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#d9edf7), to(#b9def0));
  background-image:         linear-gradient(to bottom, #d9edf7 0%, #b9def0 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffb9def0', GradientType=0);
  background-repeat: repeat-x;
  border-color: #9acfea;

}




/* tableau responsif */

@media screen and (max-width: 640px) {
  table,
  tbody,
  tr,
  td {
    display: block;
    width: auto!important;
    /* parceque tu as mis des style inline grrr */
  }
}

/* Largeur des images pour les affichages suivants -- DEBUT --> */


.imgallpagesasnew {
width:80%;
max-width:600px;
display:inline-block;  
vertical-align:middle;
}

.imgallfromactu {
width:80%;
max-width:600px;
display:inline-block;  
vertical-align:middle;
}

.imgactufromid {
width:50%;
max-width:600px;
display:inline-block;  
vertical-align:middle;
}

.imgallfromdiscounts {
width:80%;
max-width:600px;
display:inline-block;  
vertical-align:middle;
}

.imgapfromid {
width:80%;
max-width:600px;
display:inline-block;  
vertical-align:middle;
}

.imgallfromcompltype {
width:80%;
max-width:600px;
display:inline-block;  
vertical-align:middle;
}

.imgcredits {
width:80%;
max-width:120px;
display:inline-block;  
vertical-align:middle;
}

.imgallfromcat {
width:100%;
max-width:300px;
display:inline-block;  
vertical-align:middle;
}




/* Largeur des images pour les affichages suivants <-- FIN -- */



/*	BUGFIX_20170524_IMGSIZE : les images intégrées au ckeditor dépassent du DIV quand on réduit la fenêtre ce qui pose un gros problème.
	Donc on bride leur taille en appliquant la classe  divdesc uniquement à ces ckeditors (chapô, desc, desc compl)
	sinon toutes les autres images (menu, footer, etc...) seraient  affectées et auraient des dimensions indésirables.
	Remarque : si les images font moins de 320px environ de large le problème ne se pose pas */
.divdesc  {
padding-right:5px;
padding-left:10px;
}
.divdesc img {
max-width:100%;
padding-right:5px;
padding-left:5px;
padding-top:5px;
padding-bottom:5px;
height:auto;
/*max-width:600px;*/
}


/* Smalltext */
.smallText {

font-size:0.75em;
}


/* 
AFAIRE_INSTALL_CSS_COLOR : TESTS INTERNES POUR VOIR LES DIV 
Mettre de none à solid ou dashed ou dotted pour voir les DIV
*/
#pereducontainerid {
/* AFAIRE_INSTALL_BORDERS_pereducontainerid : arrondi sur le div principal : en haut et/ou en bas et/ou à droite  et/ou à gauche */
border-width:10px 20px 30px 20px;  	/* Toujours Top-Right-Botteom-Left : */
border-style:none none none none; 		/* Toujours Top-Right-Botteom-Left : */
border-color:#c67f53 #cabecc #cabecc #cabecc;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}


}
#container {
  border: 2px none #ff0000;
  }

.container {
  border: 5px none #ff0000;
  }

article {
  border: 3px none #ff00ff;
  }

section {
  border: 3px none #1fe444; /* VERT FLUO */
  }
  
  
aside {
  border: 3px none #2d5e36; /* VERT FONCE */
  }