html,body {margin:0;padding:0} 
 
.clear {clear:both;display:block;height:0;margin:0;padding:0;border:0;visibility:hidden;} 
*:first-child+html .clear{margin:-8px 0;} * html .clear{margin:-8px 0;} 
 
#header { 
	background-color:#3F9E26;
	margin: 0px;
	padding: 0px 15px 0px 15px;
	overflow: hidden;
	border: 0px solid #000001;  
	width: auto;
} 

body {
	background: white;
    font-family: Arial, Helvetica, sans-serif ;
	font-size: large ;
}

#monocol {
	background: white;
	padding: 0px 15px 0px 15px;
	text-align:justify;
}

#bicol {
	background: white;
	text-align:justify;
	overflow: hidden;   /* astuce du margin et du padding pour que les deux divs aient la même longueur. */
}

#tricol {
	background: white;
	text-align:justify;
	overflow: hidden;   /* astuce du margin et du padding pour que les deux divs aient la même longueur. */	
}


 @media (min-width: 801px){
	#col1 {
		background: white;
		float: left;
		width: 30%;
		height: 100%;
		padding: 0% 1.5% 10000px 1.5%;  /* astuce du margin et du padding pour que les deux divs aient la même longueur. */
		margin-bottom: -10000px; 	
	}

	#col2 {
		background: white;
		float: left;
		width: 30%;
		height: 100%;
		padding: 0% 1.5% 10000px 1.5%;  /* astuce du margin et du padding pour que les deux divs aient la même longueur. */
		margin-bottom: -10000px; 	
	}

	#col3 {
		background: white;
		float: left;
		width: 30%;
		height: 100%;
		padding: 0% 1.5% 10000px 1.5%;  /* astuce du margin et du padding pour que les deux divs aient la même longueur. */
		margin-bottom: -10000px; 
	}


	#col10 {
		background: white;
		float: left;
		width: 46.5%;
		height: 100%;
		padding: 0% 1.5% 10000px 1.5%;  /* astuce du margin et du padding pour que les deux divs aient la même longueur. */
		margin-bottom: -10000px; 
	}

	#col20 {
		background: white;
		float: left;
		width: 46.5%;
		height: 100%;
		padding: 0% 1.5% 10000px 1.5%;  /* astuce du margin et du padding pour que les deux divs aient la même longueur. */
		margin-bottom: -10000px;  
	}
}

 @media (max-width: 800px){
	#col1 {
		background: white;
		float: left;
		width: 95%;
		height: 100%;
		padding: 0% 1.5% 0% 1.5%;	
	}

	#col2 {
		background: white;
		float: left;
		width: 95%;
		height: 100%;
		padding: 0% 1.5% 0% 1.5%;	
	}

	#col3{
		background: white;
		float: left;
		width: 95%;
		height: 100%;
		padding: 0% 1.5% 0% 1.5%;	
	}


	#col10 {
		background: white;
		float: left;
		width: 95%;
		height: 100%;
		padding: 0% 1.5% 0% 1.5%;	
	}

	#col20 {
		background: white;
		float: left;
		width: 95%;
		height: 100%;
		padding: 0% 1.5% 0% 1.5%;	
	}
 }



#content_float {
	float:left; 
	width:100%; 
} 


/* Pour affichage colonne droite différente selon résolutions */

 @media (max-width: 800px){
	#center { 
		background: white ; 
		width:100%; 
	}

	.TopBanner {
		text-align: center;		
	}

	.TopLogo {
		width: 100%;
	}

}

@media (min-width: 801px){
	#center { 
		background:white url(../Pictures/bord_test_79.jpg) right repeat-y; 
		width:100%; 
	} 
	#content {
		background: white;
		margin-right:80px; 
	}
	#right {
		background: white;
		float:left; 
		margin-left:-80px; 
		width:80px; 
	}
	.TopLogo {
		width: 100%;
	}
}

@media (min-width: 1201px){
	#center { 
		background: white url(../Pictures/bord_test_255.jpg) right repeat-y; 
		width:100%; 
	} 
	#content {
		background: white;
		margin-right:255px; 
	}
	#right {
		background: white;
		float:left; 
		margin-left:-255px; 
		width:255px;
	}
	.TopLogo {
		width: 100%;
	}	
}

/* Fin de section affichage colonnes droites différentes */

/* affichage des bordures bleues pour écrans de plus de 1400 px de large */

@media (min-width: 1401px){
	body { 
		width:1400px;
		margin:auto;
		background-color: #00A0C8;
	}
}


/* Affichage des iamages à gauche ou a droite puis centrées en faible résolution */


@media (max-width: 800px){
	.img-right {
		width:90%;
		margin-left: 5%;

	}
	.img-left {
		width:90%;
		margin-left: 5%;
	}
}

@media (min-width: 801px){
	.img-right {
		width:30%;
		float:right;
		padding: 5px;
	}
	.img-left {
		width:30%;
		float:left;
		padding: 5px;
	}
}


/*

@media (min-width: 1001px){
	.img-right {
		width:20%;
		float:right;
		padding: 5px;
	}
	.img-left {
		width:20%;
		float:left;
		padding: 5px;
	}
}


*/

/* Utilisées pour stopper div au meme niveau avec margin + - 10 000px */

#rupt_white {
	background-color: white;
	text-decoration: none;
	color: white;
	width: 100%;
}


#rupt_blue {
	background-color: #00A0C8;
	text-decoration: none;
	color: #00A0C8;
	width: 100%;
}

/* Fin des ruptures utilisées */

footer { 
	width:auto; 
	background-color: #FF7F00;
	padding: 1px 15px 15px 15px;
} 


footer img {
  vertical-align: middle;
  margin: 3% ;
}

.TopLogo {
  vertical-align: middle;
}



video {
	background: white;
	width: 90%;
	height: auto;
	margin-left: 5%;

}


#scroll_to_top {
	position: fixed;
	width: 35px;
	height: 35px;
	bottom: 50px;
	right: 30px;
}
		
#scroll_to_top img {
	width: 50px;
}

/* Affichage du nombre de téléchargements */

#aff_telech {
	color : #B0C4DE;
	font-size : 2;
}

/* NavBar */

ul {
	list-style-type: none;
	margin: 0px;
	padding: 1px;
	overflow: hidden;
	border: 0px solid #000001;  
	background-color: #FF7F00;
	width: auto;
	/*
	position: fixed;
	top: 0;
	*/
 }

li {
	float: left;
	border-right: none;
	border-left: 0px solid #000001;

}

/* Add a border to all( but not the last) list items */
li:last-child { 
	float: right;
	border-right: 0px solid #000001;
	border-left: 0px solid #000001;
}

li a {
	display: block;
	color: black;
	text-align: left;
	padding: 15px 17px;
	font-weight: bold;
	text-decoration: none;
}

/* Links will change color when hovered over */
li a:hover {
	background-color: #00A0C8;
}

.active {
	background-color: #d61d1d;
}

/* NavBar end */


.TopBanner {
	background-color:white;
}

/*
img {
  vertical-align: middle;
  max-width: 100%;
}
*/

.img_icon {
	width: 100px;
}

.img_dbl {
	vertical-align: middle;
}

.img_trpl {
	vertical-align: middle;
}

.Img-center {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/* Police cligontante */


.blink {
	display: inline;
	font-weight: bold;
	color : red;
	background-color: yellow;

    -webkit-animation: blink 1s step-end infinite;
            animation: blink 1s step-end infinite;
}
@-webkit-keyframes blink { 50% { visibility: hidden; }}
        @keyframes blink { 50% { visibility: hidden; }}

/* Fin police cligontante */


/* Gamme couleurs IDRR du Tarn */

.IDRR-Brown {
	color: #7F3F00;
}

.IDRR-Orange {
	color: #FF7F00;
}

.IDRR-Blue {
	color :00A0C8;
}

.IDRR-Green {
	color: #3F9E26;
}

/* Section pour afficher texte au survol d'une icone */

span.info_icon_text {
/*	display: block;  */
	width:100px; 
    position:relative;
    z-index:24;
/*	background-color:#00A0C8;
	border:1px solid #7F3F00;
    color:#000; */
    text-decoration:none;
}

span.info_icon_text:hover {
	z-index:25;
	background-color:#FF7F00;
}

span.info_icon_text span{
	display: none;
}

span.info_icon_text:hover span {
	display: block;
	position:fixed;  
	top:2em;
	float:left;  
	width: auto;
	border:1px solid #7F3F00;
	padding: 15px 15px 15px 15px;
	background-color:#00A0C8;
	color:black;
}

/* Fin section pour afficher texte au survol d'une icone */

/* Section pour afficher image au survol d'une icone */

span.info_icon_img {
/*	display: block;  */
	width:100px; 
    position:relative;
    z-index:24;
/*	background-color:#00A0C8;
	border:1px solid #7F3F00;
    color:#000; */
    text-decoration:none;
}

span.info_icon_img:hover {
	z-index:25;
	background-color:#FF7F00;
}

span.info_icon_img span{
	display: none;
}

span.info_icon_img:hover span {
	display: block;
	position:fixed;  
	top:2em;
	float:left;  
	width: auto;
/*	border:1px solid #7F3F00;
	padding: 5px 5px 5px 5px;  */
	background-color:#00A0C8;
	color:black;
}

/* Fin section pour afficher image au survol d'une icone */

/* Section pour afficher image au survol d'un texte*/

span.info_text_img {
	display: inline;
/*	width:100px;  */
    position:relative;
    z-index:24;
	background-color:yellow;
/*	border:1px solid #7F3F00; */
    color:#000;
    text-decoration:none;
}

span.info_text_img:hover {
	z-index:25;
	background-color:#FF7F00;
}

span.info_text_img span{
	display: none;
}

span.info_text_img:hover span {
	display: block;
	position:fixed;  
	top:2em;
	float:left;  
	width: auto;
/*	border:1px solid #7F3F00;
	padding: 15px 15px 15px 15px; */
	background-color:#00A0C8;
	color:black;
}

/* Fin section pour afficher image au survol d'un texte*/

/* Section pour afficher popup texte au survol d'un texte*/

span.info_text_text {
	display: inline;
/*	width:100px;  */
    position:relative;
    z-index:24;
	background-color:yellow;
/*	border:1px solid #7F3F00; */
    color:#000;
    text-decoration:none;
}

span.info_text_text:hover {
	z-index:25;
	background-color:#FF7F00;
}

span.info_text_text span{
	display: none;
}

span.info_text_text:hover span {
	display: block;
	position:fixed;  
	top:2em;
	float:left;  
	width: auto;
	border:1px solid #7F3F00;
	padding: 15px 15px 15px 15px;
	background-color:#00A0C8;
	color:black;
}

/* Fin section popup par texte*/



/* CSS original popup au survol

html
<span class="info_text">Test court<span>Test de commentaires <br> Test de commentaires court</span></span>

CSS
span.info
{
    position:relative;
    z-index:24; background-color:#ddd;
    color:#000;
    text-decoration:none
}
span.info:hover {
    z-index:25; 
    background-color:#ff0
    
}
span.info span{
    display: none
    
}

span.info:hover span
{
    display:block;
    position:absolute;
    top:2em; left:2em; width:10em;
    border:1px solid #0cf;
    background-color:#555; color:#fff;
}


*/

/* Section pour afficher un div au survol du div parent */

.parent {
/*	color: green;  */
	color : #ab080e
}

.child
{
	display: none;
	color: black;
	background-color : yellow;
}

.parent:hover .child{
	display:block;
}

.child img{
	margin-left: auto;
	margin-right: auto;
	width: 80%;	
}

/* Fin de section affichage div au survol */

/* Ssection affichage page par clic sur icone */

#lesnews img {
	width:300px;
	height:300px;
}

#lesnews div {
	width:300px;
  vertical-align:top;
  display:inline-block;
}

/* Fin de section affichage page par clic sur icone */

#rupt_red {
	background-color: red;
	text-decoration: none;
	color: red;
	width: 100%;
}



/* Affichage video YouTube en 16/9 */


.videoWrapper {
  position: relative;
  	margin-left: auto;
	margin-right: auto;
    width: 100%;
	height: auto;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}
.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}