/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/

/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Listes	
	#Navigation
	#Media Queries
	#Font-Face 
	#Links	*/

/* #Site Styles
================================================== */
.cacher {
	display: none;
	}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}


.container.principal {
	background-color: #f0f2da;
	padding-top: 10px;
	padding-bottom: 10px;
/*	background-color:#DAFFCA;*/
	}


.contenant {
	display: flex;
	background-color:#393
	width: 49% ;
	}

.colonne {
	flex: 1;
    /* Each column takes up an equal amount of space */
	padding: 10px;
	text-align:left;
	/* Adds padding inside each column */	
	}
	


.column.betag, .columns.betag   {
	float:left;
	background-color: #f0f2da;
	margin-left: 0;
	z-index:1;
}

.column.betad, .columns.betad   {
	float: right;
	background-color: #f0f2da;
	margin-right:0;
	padding-right:3px;
}


hr {
	clear: both;
	margin-bottom: 20px; 
	color: #f0f2da;
	background-color: #f0f2da;
	height: 5px;
}
	

body {
	background-color: #f0f2da; 
	text-align:justify;
}



	h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
	h1 { font-size: 2.62em; }
	h2 { font-size: 2.19em; }
	h3 { font-size: 1.75em; }
	h4 { font-size: 1.31em; line-height:20px; padding-top:10px; }
	h5 { font-size: 1.1em; }
	h6 { font-size: .87em; }

/*	

	h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
	h1 { font-size: 262%; line-height: 1.12em; margin-bottom: 0.87em;}
	h2 { font-size: 219%; line-height: 2.5em; margin-bottom: 0.625em; }
	h3 { font-size: 175%; line-height: 2.12em; margin-bottom: 0.5em; }
	h4 { font-size: 131%; line-height: 1.87em; margin-bottom: 0.25em; }
	h5 { font-size: 110%; line-height: 1.5em; }
	h6 { font-size: 87%; line-height: 1.31em; }

	h1 { font-size: 2.62em; line-height: 1.12em; margin-bottom: 0.87em;}
	h2 { font-size: 2.19em; line-height: 2.5em; margin-bottom: 0.625em; }
	h3 { font-size: 1.75em; line-height: 2.12em; margin-bottom: 0.5em; }
	h4 { font-size: 1.31em; line-height: 1.87em; margin-bottom: 0.25em; }
	h5 { font-size: 1.1em; line-height: 1.5em; }
	h6 { font-size: .87em; line-height: 1.31em; }
	
	h1 { font-size: 46px; line-height: 50px; margin-bottom: 14px;}
	h2 { font-size: 35px; line-height: 40px; margin-bottom: 10px; }
	h3 { font-size: 28px; line-height: 34px; margin-bottom: 8px; }
	h4 { font-size: 21px; line-height: 30px; margin-bottom: 4px; }
	h5 { font-size: 17px; line-height: 24px; }
	h6 { font-size: 14px; line-height: 21px; }   */

/* #Page Styles
================================================== */

/* assure que les boîtes sont de dimensions exactes  */
* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing:  border-box;
  }

img {
	max-width: 100%;
}

.img_droite {
	padding: 10px;
}

/* Changer la couleur de la bande de navigation ici */
.bande.navigation {
/*	background: #e67a29;*/
/* 1st	background: #026632 ;*/
	background-color:#6B6E43;
/*	background: #f0aa7d;  */
/*	padding: 0 10px 0 30px;*/
/*	margin: 0 10px 0 10px; */
/*	z-index: 10000; */
}

.bande.navigationBKUP {
/*	background: #e67a29;*/
/* 1st	background: #026632 ;*/
background-color:#6B6E43;
/*	background: #f0aa7d;  */
/*	padding: 0 10px 0 30px;*/
	margin: 0 10px 0 10px;
	z-index: 10000;
}
.bande.principale {
/*	background: #09F;*/
/*	background: #f0aa7d;  */
/*	padding: 0 10px 0 30px;*/
	margin: 0 10px 0 10px;
}

.bleu {
	background-color:#09F;
}

.bleue {
	color: #FF0 ;
	background-color:#09F;
	line-height: 200%;
}

.bluelink {
	background-color: #06F;
	font:Arial, Helvetica, sans-serif;
	font-weight:bold;

	color:#FFF;
}

.hangingindent {
  padding-left: 3em ;
  text-indent: -3em ;
} 

.liens {
	color: #F00;
}




.texteorange {
	display:block;
	text-align:center;
	line-height:1.6em;
	font-weight:bolder;
	color: #ff6600;
	background-color:#000;
	font-size:1.5em;
}

.children {
	font-weight:bold;
	color:#1c12dd;
	background-color:#f67e01;
}	
	
	
.rouge {
	font-weight:bold;
	color:#FF0;
	background-color:#C03;
}

.gros {
	font-size:large;
	font-weight:bolder;
}

.rouget {
	font-weight:bold;
	background-color: #933;
	color: #FF6;
}

.unlien a:link {
        color:#000;
		font:bold;
      }

.oranget {
	color: #F60;
}

.palebgnd a:link {
	color:#06C;
}

.gras {
	font-weight:bold;
	color:#CBCEAE;
}

.gras1 {
	font-weight:bold;
	font-size:16px;
}


.hg {
  padding-left: 30px ;
  text-indent: -30px ;
}

.activity p {
	font-size:17px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
}

/* ## Listes  ##
================================================== */

.gris {
	color: #C4D9CC;
	font-size:14px;
	font-weight:bolder;
	text-align:center;
	margin: 0 0 10px 0;
	
}

.grisg {
	color: #C4D9CC;
	font-size:14px;
	font-weight:bolder;
	text-align: left;
}

h4.leftside {
	text-align:center;
	font-family:Arial, Helvetica, sans-serif;
	font-size:16px;
	font-weight: bolder;
	color: #CBCEAE;
	;
}

.leftside_box {
	background-color:#6B6E43 ;
	padding-left: 10px;
	padding-right: 10px;
	text-align:left;
	z-index:1;
	color:#FFF;
	}

.leftside_box a {
	color:#FFF;
	font-weight:bold;
	}


.rightside_box {
	background-color:#46426E;
	padding-left: 10px;
	padding-right: 10px;
	z-index:1;
	color:#CBCEAE;
	font-weight:bold;
	}

.rightside_box a, a:visited, a:link, a:hover, a:active {
	color:#ffffff;
/*	font-weight:bold;*/
    text-decoration: none;
	}

.newsletter_box {
	background-color: #366;
/*	margin-left:10px;*/
	padding-left: 10px;
	padding-right: 10px;
	z-index:1;
	color:#fff;
	font-weight:bold;
	}

.newsletter_box a, a:visited, a:link, a:hover, a:active {
/*	color:#ffffff;*/
/*	font-weight:bold;*/
/*    text-decoration: none;*/
	}

.newsletter {
	font-size: larger;
/*	color:#fff;*/
}

.nodec a, nodec a:visited {
	color: #FFFFFF;
	text-decoration: none;
}


h4.rightside {
	text-align:center;
	font-family:Arial, Helvetica, sans-serif;
/*	font-size:16px; */
	font-weight: bolder;
	color: #CBCEAE;
	;
}


ul.liste2 li {
	padding-left: 5px;
	margin-left: 45px;
	list-style:  disc;
	padding-bottom:3px;
}

ul.liste2 a:visited {
    color: #0033FF;
/*    color: #0033FF;    */
}

ul.liste2 a:hover  {
	color:#FFFF00;
	background-color:#3333CC
	}


ul.liste3 li {
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;
	padding-left: 3px;
	margin-left:20px;
	list-style:  disc;
	margin-bottom:0px;
	margin-top:0px;
	padding-top:0px;
	padding-bottom:0px;
	text-align:left;
	color: #CBCEAE;
}

ul.liste3 li.textevert {
/*	color:#636;*/
	color:#33FF33;
	background: #424242;	
}

ul.liste3 li.texteblanc {
	color:#ffffff;
	font-size:1em;
}

ul.liste3 li.texteorange {
	color: #F60;
	text-align:center;
	background-color:#000;
	font-size:1em;
}

.smallerfontsize {
	font-size: smaller;
}

ul.liste3 li.oranget {
	color: #F90;
}

ul.liste4 {
  list-style: none; /* Remove default bullets */
}

ul.liste4 li::before {
  content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: white; /* Change the color */
  font-weight: bold; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 1em; /* Also needed for space (tweak if needed) */
  margin-left: -1em; /* Also needed for space (tweak if needed) */	
  padding-left:25px;
}


ul.liste5 li {
	list-style: none;
	font-family:Arial, Helvetica, sans-serif;	
	font-size:13px;
	color:#000;
	font-weight:bold;
	margin-left:20px;	

/*	list-style-type: circle;*/
/*	display: inline-block;

	padding-left:5px;
	margin-bottom:0px;
	margin-top:0px;
	padding-top:0px;
	padding-bottom:0px;
	text-align:left;*/
	}


/*
ul.liste5 {
	padding-left: 5px;
	margin-left: 45px; 
	padding-bottom:3px;
	color:#F00;
	list-style-type: disc;}
}
*/


li.hot {
	font-family:Arial, Helvetica, sans-serif;
	background-color:#E52936;
	font-size:12px;
	font-weight:bold;
	padding-left: 3px;
	margin-left:20px;
	list-style:  disc;
	margin-bottom:0px;
	margin-top:0px;
	padding-top:0px;
	padding-bottom:0px;
	text-align:left;
	color: #fff;
}

li.hot a {
	text-decoration:none;
	color: #fff;
}
	


/* #Navigation
================================================== */

.navigation1 {
	z-index: 10000;
}
.navigation2 {
	z-index: 0;
}

nav.primary ul,
nav.primary ul li {
	margin: 0px;
}

nav.primary select {
	display: none;
	width:  100%;
	height: 28px;
	margin: 21px 0;
}

nav.primary ul li {
	display: inline;
	float: left;
	position: relative;
}

nav.primary ul li a {
	display: inline-block;
	line-height: 30px;
	padding:  0 14px;
	color: #ebebeb;
	text-transform: uppercase;
	text-decoration: none;
	font-weight: bold;
	letter-spacing: 0.08em;
}

nav.primary ul li a:hover {
	background: #424242;
	color:#33FF33;
	cursor: pointer;
}

/* #Navigation
Submenu
================================================== */

nav.primary ul ul {
	display: none;
}

nav.primary ul li:hover > ul {
		display: block;
		background-color:#424242;
		color:#6aab32;
}

nav.primary ul li:hover {
	background-color:#424242;
	color: #ebebeb;
		}
	
nav.primary ul li a {
	display: inline-block;
	line-height: 30px;
	padding:  0 14px;
	color: #ebebeb;
	text-transform: uppercase;
	text-decoration: none;
	font-weight: bold;
	letter-spacing: 0.08em;
}
		
	nav.primary ul ul {
		position: absolute; top: 100%;
	}
		nav.primary ul ul li {
			float:left;
			display:list-item;
			border-bottom: 1px solid #33ff33;
			color:#ebebeb;
			width:100%;
		}
			nav.primary ul ul li a {
				text-transform:none;
				padding:0;
				color: #ebebeb;
			}	
				nav.primary ul ul li a:hover {
					background: #424242;
					color: #33ff33;					
				}
		
	nav.primary ul ul ul {
		text-transform:none;
		font-size:1em;

		padding:0;
		color: #ebebeb;
		position: absolute;
		width:130%;
		left: 100%;
		top:10%;
	}


/* #Table definition
================================================== */

table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    border: 2px solid black;
    font-weight:bold;
}

table td {
	padding-left:10px;
	padding-right:10px;
}


tbody tr.alt {
	background-color:#C4C6A8;
}

tbody tr.alt1 {
	background-color: #CF6;
}


table.mod1 {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    border: 2px solid black;
    font-weight:bold;
/*    text-transform:capitalize;*/
}

table.mod1 tbody tr.alt1 {
	background-color:#C4C6A8;
}

table.mod1 td {
	padding-left:5px;
	padding-right:10px;
}

table.mod1 a:link {
	color: #00F;
}

table.mod2 {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    border: none;
}




/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */

/*	@font-face {
	    font-family: 'FontName';
	    src: url('../fonts/FontName.eot');
	    src: url('../fonts/FontName.eot?iefix') format('eot'),
	         url('../fonts/FontName.woff') format('woff'),
	         url('../fonts/FontName.ttf') format('truetype'),
	         url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
	    font-weight: normal;
	    font-style: normal; }
*/

#map {
        width: 600px;
        height: 400px;
      }

.visite a:link {
	color:#090;
}

.visi {
	
	
}

.table.visi a:link {
	color:#090;
}



/* #Links
================================================== */
/* 	This is to colour the links  */

a.one:link {
        color: #36F;
		background:#CCC;
      }
      a.one:visited {
        color:  #F93;
		background: #FFF;
      }
      a.one:hover {
        color: #CCC;
		background:  #36F;
      }