html {font-size: 100%;}

img {max-width: 100%;} /* pour redimmensionner les images si device trop petit */

body {
/*	background: #f9f9f9; */
/*  Essai pour voir effet sur cpm :*/
	background: #2C2F22 ;


	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:smaller;
	color:#333;
}

a {
	text-decoration : none;
}
a:hover, a:focus {
	text-decoration: underline;
}

a img {border: none;}

#principal {
	color: #181A12;
}
#principal a {
	color: #B02020;
}
#principal a:hover, #principal a:focus {
	color: #201010;
}

/* Listes */
ul, ol {
	margin: .75em 0 .75em 24px;
	padding: 0;
}

li {
	margin: 0;
	padding: 0;
}

h1 {
    text-shadow: 1px 1px 1px #aaa;
    }

#global {
	background: #ffffff url(images/Carreaux2.jpg);
	padding: 0px 0px 0px 0px;
	-webkit-border-bottom-right-radius: 4px;
	-webkit-border-bottom-left-radius: 4px;
	-moz-border-radius-bottomright: 4px;
	-moz-border-radius-bottomleft: 4px;
	border-bottom-right-radius: 4px;
	border-bottom-left-radius: 4px;
	-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 1em rgba(0, 0, 0, .35); /* 20 */
	-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 1em rgba(0, 0, 0, .35); /* 20 */
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 1em rgba(0, 0, 0, .35); /* 20 */
}

.recherche {
	font-size: 12px;
	-webkit-border-bottom-right-radius: 4px;
	-webkit-border-bottom-left-radius: 4px;
	-moz-border-radius-bottomright: 4px;
	-moz-border-radius-bottomleft: 4px;
	border-bottom-right-radius: 4px;
	border-bottom-left-radius: 4px;
	background: #990d0c;
	background-image:linear-gradient(#300000, #D03030);
	background-image:-webkit-linear-gradient(#300000, #D03030);
}

/* titre encadre en rouge */
.principal-titre {
	position: relative;
	background-color: #990d0c;
	background-image:linear-gradient(#B00F0E, #690908);
	background-image:-webkit-linear-gradient(#B00F0E, #690908);
	border-radius: 8px;
}

.principal-titre .content {
	position: relative;
	padding: 1px 4px 1px 14px;
	color: #ffffff;
}

.oeuvres {padding-left: 2em;}

input {
	margin: 2px;
	padding: 2px;
	font-size: 1.0em;
	vertical-align: top;
	background: #f5f5f5;
	color: #000;
	border: solid 1px #555;
	border-radius:2px;
	}
input:hover{background: #ddd;}
input[type="submit"]{padding: 3px 15px;}

/* --- POSITIONNEMENT --- */

/* Barre de recherche */
.recherche {
	position: absolute;
	right: 50%;
	margin-right: -490px;
	top: 0;
	padding: 3px 3px 0px 4px;
	height: 2.1em;
	z-index: 0;
}
.recherche input {
	margin: 0 1px 0 0px;
	font-size: 1em;
	padding: 2px;
	vertical-align: top;
	background: #f5eeee;
	color: #000;
	border: solid 1px #333;
	}
.recherche input:hover{background: #e5dede;}

/* En-tete */
#entete {
	padding: 10px;
	background: #ffffff url(images/Carreaux2.jpg);
	font-family: Georgia, "Bitstream Vera Serif", Norasi, serif;
	font-size: .8em;
}

.trombone {position: absolute;	right : 50%; margin-right : -400px; top: 65px;}
.morpion {position: absolute;	left : 50%; margin-left : -410px; top: 24px;}

/* Menu de navigation */

#navigation {
	background: #990d0c;
	background-image:linear-gradient(#B00F0E, #690908);
	background-image:-webkit-linear-gradient(#B00F0E, #690908);
	color: #fff;
	padding: 12px 15px;
}
#navigation ul {
	width: 100%;
	overflow: hidden;
	margin: 0; padding: 0;
	list-style: none;
}
#navigation li.gauche {
	float: left;
	margin-right: 10px;
	font-size: 1.4em;
}
#navigation li.droite {
	float: right;
	margin-right: 0;
	margin-left: 10px;
	padding: 3px 0;
}
#navigation a {
	color: #fff;
	padding: 6px;
	font-size: .9em;
	text-decoration: none;
}

#navigation a:hover, #navigation a:focus {
	background: #800404;
	color: #ddd;
	text-decoration: underline;
}


/* Page */

#global {
	width: 1010px;
	margin: 0 auto;
	margin-bottom: 15px;
	height : 100%;	
	overflow: hidden;
}


/* Contenu principal */

#principal {
	margin-right: 210px; 
	padding: 10px 10px 10px 9px;
}
#principal > :first-child {
	margin-top: 10px;	
}
#principal li {
	line-height: 1.5;
}


/* menu du cote */

#sidebar {
	margin: 8px;
	width: 200px;
	float: right;
	line-height: 150%;
	font-size: .9em;
}

#sidebar ul {margin: 0;}

#sidebar ul li {
	background: #109010;
	background-image:linear-gradient(#0A5C0A, #109010);
	background-image:-webkit-linear-gradient(#0A5C0A, #109010);
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px; 
	list-style-type: none;
	margin: 0 0 20px 0;
}

#sidebar ul li h4 {
	background: #010C73;
	background-image:linear-gradient(#02119E, #010740);
	background-image:-webkit-linear-gradient(#02119E, #010740);
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	height: 33px;
	color: #ffffff;
	font-size: 1.1em;
	font-weight:bold;	
	text-align:center;
	line-height: 33px;
	padding: 0 10px;
	margin: 0;
}

#sidebar ul li ul {
	margin: 0;
	padding: 12px;
	color: #ffffff;;
}

#sidebar a {
	color: #f9F9F9;
    text-decoration: none;
}

#sidebar a:hover {
	color: #900000;
}

/* Reseaux sociaux */
ul.share-buttons{
list-style: none;
padding: 0;
margin:0;
margin-bottom:1em;
line-height:3em;}
ul.share-buttons li{
display: inline;}
ul.share-buttons img{
width: 32px;}

/* Colonnes doubles - simples */
.columnsContainer {position: relative; width: 99%;}
.Col-G-ht-index {width: auto;}
.Col-D-ht-index {position: absolute; top: 0; right: 0; width: 320px;}
.ColonneG {width: 48%;}
.ColonneD {position: absolute; top: 0; right: 0; width: 48%;}


/* bas de page */

#footer {
	margin-left: auto;
	margin-right: auto; /* permet de centrer le bloc */
	padding: 0.5em;
}

/* bas de la page */
#basdepage {
	background: #f9f9f9;
	text-align: center;
	padding-top: 4px;
	padding-bottom: 4px;
	width: 1010px;
	margin: 0 auto;
	overflow: hidden;
	-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 1em rgba(0, 0, 0, .35); /* 20 */
	-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 1em rgba(0, 0, 0, .35); /* 20 */
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 1em rgba(0, 0, 0, .35); /* 20 */
	-webkit-border-top-left-radius: 4px;
	-webkit-border-top-right-radius: 4px;
	-moz-border-radius-topleft: 4px;
	-moz-border-radius-topright: 4px;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	clear:both;
	}
#basdepage a {color: #333;}


/* responsive design - réglé pour que ne s'applique q'au mobile (pas au tablette (768px) et ordinateurs de bureau)*/
@media screen and (max-device-width: 700px) {
     
body {font-size:0.9em;}

#global {
	width: 100%;
	padding-top: 1.5em;
	position: relative;
	padding-bottom: 97em; /* hauteur à régler en fonction de sidebar*/
}

.recherche {
	right: 0;
	margin-right: auto;
	position: fixed;
	z-index:10;
}

#principal {
   width: 95%;
   margin-left: 0px; 
   margin-bottom: 19em;
   float: none;
   position: relative;
   text-align:left;
   line-height: 1.4;
}

#sidebar {
	font-size: 1em;
    width: 100%;
    float: none;
    position: absolute; bottom: 22em; /*A modifier pour placement pub du bas de page*/
}

#sidebar ul {
	margin-right: 10px;
}

#sidebar ul li {
margin-right: 10px;
}

#sidebar ul li ul {
	text-align:center;
}

.Col-G-ht-index {width: 100%;}
.Col-D-ht-index {position: relative;  width: 100%;}
.ColonneG {width: 100%;}
.ColonneD {position: relative;  width: 100%;}
.oeuvres {padding-left: 0;}

#basdepage {
	width: 100%;
	margin: 0 auto;
	}

#footer {
     width: 95%;
     float: none;
     position: absolute; bottom:0em;
     }

.pub-horizontale {
     position: relative; left:-10px; /* annule margin de la page -> pub prend toute largeur */
}

h1 {
    margin-top: 0px;
    margin-bottom: 0px;
    padding-top: 8px;
    padding-bottom: 5px;
    }

h2 {
    margin-top: 0px;
    margin-bottom: 0px;
    padding-top: 4px;
    padding-bottom: 4px;
    }

h3 {
    margin-top: 0px;
    margin-bottom: 0px;
    padding-top: 6px;
    padding-bottom: 6px;
    }

#entete {font-size: .7em;}

} /* fermeture media screen */