@charset "utf-8";
/* CSS Document */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, nav ul, section { display: block; }
/*pour caler  sur IE 8*/


body {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	text-align: center; /* ce paramétrage centre le conteneur dans les navigateurs IE 5.x. Le texte est ensuite aligné à gauche (valeur par défaut) dans le sélecteur #container */
	color: #000;
}
.thrColLiq #container {
	width: 768px;
	text-align: left;
	margin: auto;
	height: 525px;
	background-image: url(../images/ba-bambus-04-fond-site768.jpg);
	background-repeat: no-repeat;
}
.thrColLiq #sidebar1 {
	float: left; /* Cet élément doit précéder dans le code source tout élément à côté duquel il doit être positionné */
	width: 200px; /* le remplissage en haut et en bas crée un espace visuel à l'intérieur de cet élément div  */
	color: #000;
	height: 525px;
	text-align: center;
	font-size: 16px;
	position: relative;
	top: 10px;
	-ms-transform: skew(0deg, -15deg);/* VARIABLE : rotation du contenu  */
	-moz-transform: skew(0deg, -15deg);
	-o-transform: skew(0deg, -15deg);
	-webkit-transform: skew(0deg, -15deg);
	left: -30px; /* VARIABLE : Cet élément permet de positionner la sidebar en fonction de l'écran  */
}	
/* placer la navigation ci dessous */
nav {
	font-size: 1.143em;
	height: 0px;
	line-height: 30px;
	float: right;
	width: 200px;
	text-align: center;
}

nav ul {
	list-style: none;
	width: 200px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	text-align: left;
}
nav li {
	display: inline;
	margin: 0;
}

nav a:link, #banner nav a:visited {
	background-color: #97C268;
	color: #fff;
	display: inline-block;
	height: 30px;
	text-decoration: none;
	margin: 5px;
	padding-top: 5px;
	padding-right: 1.5em;
	padding-bottom: 5px;
	padding-left: 1.5em;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
	-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
	
}
nav a:hover, nav a:active,
nav .active a:link, nav .active a:visited {
	background: #fff;
	color: #333;
	margin: 5px;
	text-shadow: none !important;
}
/*fin éléments de la navigation*/
.thrColLiq #sidebar2 {
	float: right; /* Cet élément doit précéder dans le code source tout élément à côté duquel il doit être positionné */
	width: 290px;
	margin-right: 0px;
	margin-bottom: 0px;
	color: #333;
	height: 525px;
	-ms-transform: skew(0deg, -15deg);
	-moz-transform: skew(0deg, -15deg);
	-o-transform: skew(0deg, -15deg);
	-webkit-transform: skew(0deg, -15deg);
	position: relative;
	right: -10px;
}
.thrColLiq #dessous p a {
	text-decoration: none;
}
.thrColLiq #sidebar1 p, .thrColLiq #sidebar1 h3, .thrColLiq #sidebar2 p, .thrColLiq #sidebar2 h3 {
	margin-left: 10px; /* il est conseillé d'attribuer des valeurs pour les marges gauche et droite de chaque élément qui sera placé dans les colonnes latérales */
	margin-right: 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-align: justify;
}
/* Conseils pour mainContent :
1. l'espace compris entre l'élément mainContent et les encadrés est créé avec les marges gauche et droite de l'élément div mainContent.
2. pour éviter une perte de l'élément flottant à la résolution minimale prise en charge (800 x 600), la taille des éléments contenus par l'élément div mainContent doit être égale ou inférieure à 300 pixels (images comprises).
3. dans le commentaire conditionnel pour Internet Explorer ci-dessous, la propriété zoom permet de donner à l'élément mainContent l'attribut "hasLayout." Cela évite l'apparition de plusieurs bogues spécifiques d'Internet Explorer.
*/
.thrColLiq #mainContent {
	margin-right: 260px;
	margin-left: 260px;
	text-align: center;
	height: 700px;
}
/* Diverses classes à réutiliser */
.fltrt { /* cette classe permet de rendre flottant le côté droit d'un élément dans la page. L'élément flottant doit précéder l'élément à côté duquel il doit se trouver dans la page. */
  float: right;
  margin-left: 8px;
}
.fltlft { /* cette classe permet de rendre un élément flottant à gauche de la page. L'élément flottant doit précéder celui à côté duquel il doit apparaître dans la page. */
  float: left;
  margin-right: 8px;
}
.clearfloat { /* cette classe doit être placée pour un élément div ou break et doit être l'élément final avant la balise de fin d'un conteneur qui doit contenir entièrement des éléments flottants */
  clear: both;
  height: 0;
  font-size: 1px;
  line-height: 0px;
}
a {
	font-family: Verdana, Geneva, sans-serif;
	text-decoration: underline;
	color: #000;
}
.info {
	background-color: #FBFFF4;
	font-size: 14px;
	text-align: left;
}
.infoCreapolis {
	font-size: 14px;
	text-align: left;
	background-color: #FFF;
}
.infoSalon {
	background-color: #FFF;
	font-size: 14px;
	text-align: left;
}
#news {
	margin-right: 10px;
	margin-left: 10px;
	height: 525px;
	overflow: auto;
	margin-top: -15px;
	padding-top: 0px;
}
#titreSidebar2 {
	margin-left: 10px;
	margin-right: 10px;
	background-color: #FFF;
	margin-top: 10px;
	text-align: center;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
	-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}
#news div {
	font-size: 12px;
}
.newsClassic {
	background-color: #97C268;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
	-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}
.newsCreapolis {
	background-repeat: repeat-y;
	background-color: #F93;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
	-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}
.newsClassicSalon {
	background-color: #EEE;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
	-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}
.skew-text {
	-ms-transform: skew(0deg, 15deg);
	-moz-transform: skew(0deg, 15deg);
	-o-transform: skew(0deg, 15deg);
	-webkit-transform: skew(0deg, 15deg);
}
#dessous {
	color: #999;
	margin: auto;
}
.text- {
	font-size: 12px;
	background-color: #97C268;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
	-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}
.textXL { background-color: #EEE;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
	-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}

.imgA {	display: none; }
.linkMini {	display: none; }
.link {	 }