/* Une base pour le principe, pas utilisée de mémoire,
   ne sert qu'à contrer certain navigateurs */
* { box-sizing: border-box; }
body {
	color: black;
	font-family: "Arial";
}

/* The entire 3D object, better to arrange things like that */
.scene, 
.c2scene {
  position: relative;
  width: 300px;
  height: 390px;
  /* keep space at top for the zoom (76px), the auto center the carousel in horizontal */
  margin: 60px auto;
  /* the scene and perspective are also influenced by the width above, depends your navigator */
  perspective: 1000px;
}

.c3scene, 
.c4scene {
  position: relative;
  width: 240px;
  height: 298px;
  margin: 64px 40px;
  perspective: 1000px;
}

.c5scene {
  position: relative;
  width: 240px;
  height: 298px;
  margin: 60px auto;
  perspective: 1000px;
}

/*  Here the part to animate, that allow you to
	better understand and change things inside */
.carousel, 
.c2carousel, 
.c3carousel, 
.c4carousel, 
.c5carousel {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: translateZ(-150px);
  transform-style: preserve-3d;
  transition: transform 0.5s;
}

/*  Here the "cells" of carousel */
.carousel__cell, 
.c2carousel__cell {
  position: absolute;
  /* Important; Needed to hide the caption when it's outside of the image, eg top at 100% in this example */
  overflow: hidden;
  /* We won't remove this after our tests, we'll just have to make it transparent
     It seems that some browsers introduce aliasing around the image without such a border.
     Indeed I noticed it on Firefox during my numerous tests to confirm certain things
     It's the same for fonts which can be blurry if they are not in the right place on the Z axis */
  border: 1px solid transparent;
  transition: transform 0.5s, opacity 0.5s;
}

.c3carousel__cell, 
.c4carousel__cell, 
.c5carousel__cell {
  position: absolute;
  overflow: hidden;
  border: 1px solid transparent;
  left: 0;
  width: 200;
  height: 267;
  transition: transform 0.5s, opacity 0.5s;
}

.carousel__cell figure figcaption, 
.c2carousel__cell figure figcaption {
  position: absolute;
  /* Here it's not to put a dimension, it's just to
     hide the caption when it's not needed to see it
	 Note that the Z index is high to be sure that
	 caption is before all other elements */
  top: 100%;
  width: 200px;
  padding: 5px;
  z-index: 100;
  font-size: 10px;
  color: yellow;
  background: rgba(0, 0, 0, 0);
  transition: 0.8s;
}

.c3carousel__cell figure figcaption, 
.c4carousel__cell figure figcaption, 
.c5carousel__cell figure figcaption {
  position: absolute;
  top: 100%;
  width: 200px;
  height: 32px;
  padding: 3px;
  z-index: 100;
  font-size: 10px;
  color: yellow;
  background: rgba(0, 0, 0, 0);
  transition: 0.8s;
}

/* Here for the caption, no need to put an event listenner, yep, it's a nice idea :p */
/* That's work even figure have no class vs the other example where i take ideas about caption etc.*/
.carousel__cell figure:hover figcaption, 
.c2carousel__cell figure:hover figcaption {
  top: 85%;
  background: rgba(0, 0, 0, 0.5);
  bottom: 20px;
}

.c3carousel__cell figure:hover figcaption, 
.c4carousel__cell figure:hover figcaption, 
.c5carousel__cell figure:hover figcaption {
  top: 83%;
  background: rgba(0, 0, 0, 0.5);
  bottom: 10px;
}

.carousel-options, 
.c2carousel-options, 
.c3carousel-options, 
.c4carousel-options, 
.c5carousel-options {
  text-align: center;
  position: relative;
  z-index: 2;
}

/* spécifique for the "NEWS" on index and bienvenue pages */
.menu-hover {
  display: inline-block;
  position: relative;
}

.menu-hover img {
  max-width: 150px;
}

.menu-hover article {
  display: none;
  position: absolute;
  top: 50%;
  left: 100%;
  padding: 1em;
  min-width: 20em;
  border: 1px solid #CCC;
  background: #FFF;
  transform: translate(-50%, -50%);
}

.menu-hover:hover {
  cursor: pointer;
  z-index: 100;
  /*border: 1px dotted #069;*/
}

.menu-hover:hover article {
  display: block;
}

/* compteur et compteur p, paramètres communs */
.compteur, .compteur p {
	height: 24px;
	width: 112px;
	position: relative;
}

/* compteur, paramètres spécifiques, image, marge extérieure haute et position gauche  */
.compteur {
	background-image: url(../themes/bohol/compteur_bohol.jpg);
	background-repeat: no-repeat;
	top: -80px;
	left: 92px;
}

/* compteur p, paramètres spécifiques au paragraphe "compteur" */
.compteur p {
	font-weight: bold;
	color: #fff;
	left: 0;
	letter-spacing: 5px;
	margin-bottom: 0;
	margin-left: 11px;
	min-height: 18px;
	padding-top: 5px;
}

/* nombre de visites */
.visit {
	color: #fff !important;
	font-size: 12px;
	font-weight: normal;
	margin-right: 10px !important;
	margin-top: -5px !important;
	letter-spacing: 1px !important;
	margin-left: 32px ! important;
}

/* Titres */
h1 {
	color: #C4670B;
	font-family: "Arial";
	text-align: center;
	font-size: 20px;
	color: rgb(153, 51, 0);
	margin-top: -75px;
	margin-bottom: 20px;
}

h3 {
	font-family: "Arial";
	text-align: center;
	font-size: 20px;
	color: rgb(0, 128, 128);
}

/*partie de texte pour commentaire :
  - taille police de 14 ;
  - en italique ;
  - une couleur noire ;
  - centré ;
  - avec un ombrage.
*/
/*partie de texte pour commentaire :
  - taille police de 16 ;
  - en italique ;
  - une couleur noire ;
  - centré ;
  - avec un ombrage rouge et bleu.
*/
.comments {
  font-size: 16px;
  color: black;
  font-style: italic;
  text-shadow: 1px 1px 2px red, 3px 3px 6px blue;
  text-align: center;
}

/*partie de texte pour commentaire :
  - taille police de 14 ;
  - en italique ;
  - une couleur noire ;
  - centré ;
  - avec un ombrage vert et jaune.
*/
.comments2 {
  font-size: 14px;
  color: black;
  font-style: italic;
  text-shadow: 2px 2px 4px green, 3px 3px 8px yellow;
  text-align: center;
}

/* Parties de texte, formattées par classes
 * et demandant une attention particulière
 * en effet le 16 n'est pas noir, attention
 * car l'appelation 'norm' prète à confusion
 * mais je n'allais pas me retaper toutes mes
 * pages à reprendre... Dans la balise 'body'
 * on retrouve bien la couleur black en avant plan fg. */
.gros24, .mid18, .norm16 {
	text-align: center;
	font-size: 16px;
	color: rgb(0, 128, 128);
}

/* sutcharge de mid28 pour la taille des caractères
 * Note: en CSS les classes héritent des déclarations
 * précédentes. De ce fait on peut très bien surcharger
 * certains paramètres. Et ainsi bénéficier des paramètres
 * déjà déclarés. Bien entendu lors de la surcharge c'est
 * le dernier paramètre qui sera pris en compte
 */
.mid18 {
	font-size: 18px;
}

/* surcharge de gros24 pour la taille des caractères en 24 */
.gros24 {
	font-size: 24px;
}

/* Uniquement utilisé dans l'index pour faire apparaître en pop up certaines infos */
div#blocnews {
	width:150px;
	height:96px;
}

/* Utilisé dans les pages pour des blocs de texte assez long destinés à être wrappé
 * selon la taille de la zone de texte. Met des marges spécifiques à toutes ces zones
 * pour aérer le bloc et remet en 16 la taille des caractèresc */
div#TextCol {
	margin-left:15px;
	margin-right:15px;
	font-size: 16px;
}

.TextColumn {
	margin-left:50px;
	margin-right:50px;
	font-size: 16px;
}

div#TextCentre {
	margin: 0px auto;
  text-align: center;
	font-size: 16px;
}

.TextCenter {
	margin: 0px auto;
  text-align: center;
}

/* Ces 2 classes sont utilisées pour parametrer l'affichage d'images selon le besoin
 * Deux tailles différentes mais il est possible dans déclarer autant que besoin */
.midImages {
	 width: 200;
	 height: 356;
}
.smallImages {
	 width: 125;
	 height: 167;
}

#theme_contenu {
	background-image: url(../themes/bohol/fond_contenu.jpg);
	background-repeat: repeat-y;
	top: -8px;
	left: -8px;
	position: relative;
	float: left;
	height: auto;
	width: 990px;
}

.center_box {
	position: relative;
  vertical-align: middle;
	align-content: center;
}

.side_to_side{
	position: relative;
	float: left;
}

.leftside{
	position: relative;
	float: left;
	width: 50%;
}

.rightside{
	position: relative;
	float: right;
	width: 50%;
}

.newsubject {
	clear:both;
}

/* Ici juste en rappel pour ne pas en oublier */
.theme_header,.theme_menuLeft_header,.theme_centre,.theme_footer,.theme_right {
}

/* images du fond de la page selon les dispositions prédéfinies */
.theme_header {
	margin-top: 0px;
	margin-left: -2px;
	background-image: url(../themes/bohol/header_bohol.jpg);
	background-repeat: no-repeat;
	height: 418px;
	width: 710px;
	position: relative;
	float: left;
}

.theme_menuLeft_header {
	top: 0px;
	left: 0px;
	background-image: url(../themes/bohol/menu_left_bohol_tarsier.jpg);
	background-repeat: no-repeat;
	height: 1140px;
	width: 280px;
	position: relative;
	float: left;
}

.theme_centre {
	background-image: url(../themes/bohol/fond-bohol.jpg);
	/* répétition selon hauteur pour remplissage */
	background-repeat: repeat-y;
	top: -2px;
	left: -1px;
	height: auto;
	width: 668px;
	position: relative;
	float: left;
	padding: 10px;
	min-height: 348px;
}

.theme_right {
	background-image: url(../themes/bohol/right_bohol.jpg);
	background-repeat: no-repeat;
	margin-top: -2px;
	margin-left: -2px;
	height: 642px;
	width: 42px;
	position: relative;
	float: right;
}

.theme_footer {
	top: -2px;
	right: 42px;
	background-image: url(../themes/bohol/footer_bohol.jpg);
	background-repeat: no-repeat;
	height: 90px;
	width: 670px;
	position: relative;
	float: right;
}

/* pied de la page (copyright)*/
.pperso {
	position: relative;
	float: right;
	color: lightgrey;
	margin-top: 40px;
	margin-right: 10px;
}

/* menu */
ul#navlist {
	padding-left: 41px;
	margin-top: 500px;
	margin-left: 70px;
	width: 143px;
	height: 300px;
}

#navlist li {
	margin: 10px;
	height: auto;
	list-style: none;
}

li a {
	color: #FFCC33;
	font-size: 14px;
	text-decoration: none;
}

li a:hover {
	color: #FFF700;
	font-size: 18px;
	text-decoration: bold;
}

li a.active {
	color: #C4670B;
	font-size: 14px;
	text-decoration: underline;
}

.actived {
	background-image: url(../themes/bohol/boussole.gif);
	background-repeat: no-repeat;
	width: 45px;
	height: 63px;
	margin-left: -50px;
	margin-top: -26px;
	_margin-top: -20px;
	position: relative;
	float: left;
}