#divpage {
//	width: 960px;
	margin: 0 auto;
	padding: 0;
	background-color: #FFFFFF;
}
div#titreheader { 
	margin: 0; 
	padding: 0;
	border: none;
}
div#titreheader a {
//	width: 960px ;
	height: 50px ;
	display: block ;
	margin: 0 auto ;
	padding: 0 ;
	background: url(../img/sitebackgrounds/fondtitregeneral.png) no-repeat;
	background-color: #BBBBBB;
}
div#divmenugeneral {
//	width: 960px ;
	height: 30px ;
	display: block ;
	margin: 0 auto ;
	padding: 0 ;
	background: url(../img/sitebackgrounds/fondmenugeneral.png) no-repeat;
	background-color: #BBBBBB;
}
div#bannierespub {
    overflow:hidden;
//    width: 960px ;
    height: 90px ;
    display: block ;
    margin: 0 auto ;
    padding: 0 ;
    background: url(../img/sitebackgrounds/fondbannierespub.png) no-repeat;
    background-color: #BBBBBB;
}
div#reseauxsociaux {
    float: left;
    width: 230px ;
    height: 90px ;
    line-height: 90px;
    margin: 0;
    padding: 0;
    text-align: left;
}
div#boutonsreseauxsociaux {
    width:100px;
    vertical-align:bottom;
    display:inline-block;
    line-height:1.0;
    text-align:left; /* ... et l'alignement du texte */
}
div.boutonreseausocial {
    float: left;
    margin: 1px;
    padding: 1px;
}
div#grandebannierepub {
    float: right;
    width: 728px ;
    height: 90px ;
    margin-right: 10px;
    padding: 0 ;
    background-color: #CCCCCC;
}
#divcontenu {
    overflow: hidden;
    margin: 0;
    padding: 0;
}
#divfooter {
//    width: 960px;
    margin: 10px 0 0 0;
    padding: 0;
}
.divclear {
    height: 0;
    line-height: 0;
    clear: both;
    overflow: hidden; /* Précaution pour IE 7 */
}
div#divsousmenu {
    height: 38px ;
    display: block ;
    padding: 0 ;
    margin: 0 ;
    background: url(../img/sitebackgrounds/fondsousmenu.png);
}
div.lignehorizontale {
    border-bottom:1px solid black;
    margin-bottom: 8px;
}
#divmessageinfo{
    margin: 0;
    padding: 5px;
    font-size: 10px;
    color: #990000;
    background-color: #FFFF66;
} 
#divmenulateral {
    float: left; 
    margin: 10px 0 0 0;
    padding: 0;
    background-color: #BBBBBB;
    background-image: url(../img/sitebackgrounds/degradehgris1.png);
    background-repeat: repeat-y;
    background-position: left;
} 
#divmenulateral.circuits{
    width: 160px;
} 
#divmenulateral.annonces{
    width: 160px;
} 
#divmenulateral.apropos{
    width: 160px;
} 
#divmenulateral.organisateurs{
    width: 200px;
} 
#divmenulateral.articles{
    width: 200px;
} 
#divmenulateral.journees{
    width: 275px;
} 
span.aligneadroite {
    float: right;
}
div.aligneadroite {
    display: inline-block;
    float: right;
}
div.miniaturephoto{
    display: inline-block;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 15px;
}
.titremenulateral {
    margin: 0 0 5px 0;
    padding: 0;
    border-top-style: solid; 
    border-top-color: #BBBBBB; 
    border-top-width: 2px;
    color: #000000;
    font-size: 11px;
    font-weight: bold;
}
.cadreimagegauche {
    float: left;
    margin-right: 8px;
}
.cadreimagedroite {
    float: right;
    margin-left: 8px;
}
.cadretextedroite {
    width: 240px;
    float: right;
    margin: 0px 0px 0px 8px;
    padding: 8px;
    background-color: #BBBBBB;
}
.cadretextegauche {
    width: 240px;
    float: left;
    margin: 0px 8px 0px 0px;
    padding: 8px;
    background-color: #BBBBBB;
}
.divlabelcarte {
    margin: 0;
    padding: 0;
}
#divcontenuprincipal {
    float: right; 
    margin: 10px 0 0 0;
    padding: 0;
    overflow: hidden;
}
#divcontenuprincipal.circuits {
    width: 798px;
}
#divcontenuprincipal.annonces {
    width: 798px;
}
#divcontenuprincipal.apropos {
    width: 798px;
}
#divcontenuprincipal.organisateurs {
    width: 758px;
}
#divcontenuprincipal.articles {
    width: 758px;
}
#divcontenuprincipal.journees {
    width: 683px;
}
#divcontenuprincipal.moinslarge {
    width: 758px;
}
#divcontenuprincipal.pleinelargeur {
    width: 960px;
}
#divcontenuprincipallarge {
    float: right; 
    margin: 10px 0 0 0;
    padding: 0;
    width: 960px;
    overflow: hidden;
}
.divcontenurubrique {
	margin: 0;
	padding: 5px;
	border-bottom: 2px solid #BBBBBB;
	text-align: left;
}
.divblocgenerique {
	margin: 0 0 0 20px;
	padding: 0;
}
#divblocsvoisins {
	overflow:hidden;
	margin: 0 0 0 20px;
	padding: 0;
}
.div2colonnes {
	overflow:hidden;
	margin: 0;
	padding: 0;
}
#divbloccircuitinfosgauche {
	float: left;
	width: 488px;
	margin: 0;
	padding: 0;
}
#divbloccircuitinfosdroite {
	float: right;
	margin: 0 0 0 0;
	overflow:hidden;
	padding: 0;
	width: 280px;
}
#divblocorganisateurinfosgauche {
	float: left;
	width: 250px;
	margin: 0;
	padding: 0;
}
#divblocorganisateurinfosdroite {
	float: right;
	margin: 0 0 0 0;
	overflow:hidden;
	padding: 0;
	width: 478px;
}
#divblocorganisateurlogominiature {
	float: left;
	width: 25px;
	margin: 0 0 0 5px;
	padding: 0;
}
#divblocorganisateurtitrecalendrier {
	float: right;
	margin: 0;
	padding: 0;
	width: 708px;
}
#divblocjourneeinfosgauche {
	float: left;
	width: 335px;
	margin: 0;
	padding: 0;
}
#divblocjourneeinfosdroite {
    float: right;
    margin: 0 0 0 0;
    overflow:hidden;
    padding: 0;
    width: 328px;
}
#divblocjourneelogominiature {
    float: left;
    width: 25px;
    margin: 0 0 0 0px;
    padding: 0;
}
#divblocjourneelienscircuit {
    float: right;
    margin: 0 0 0 10px;
    padding: 0;
    width: 598px;
}
.divdetailjourneeorganisateur {
    height:160px;
    overflow:auto;
    border: 1px solid #000;
}
#divphotosminiatures {
    margin: 0;
    padding: 0;
}
#divphotosminiatures.gauche {
    float: left;
    width: 128px;
}
#divphotosminiatures.dessous {
    height:240px;
    width: 640px;
    overflow:auto;
    float: bottom;
}
#divvideosminiatures {
	margin: 0;
	padding: 0;
}
#divvideosminiatures.gauche {
	float: left;
	width: 128px;
}
#divvideosminiatures.dessous {
	float: bottom;
	width: 640px;
}
#divviewerphoto {
	float: right;
	margin: 0 0 20px 0;
	overflow:hidden;
	padding: 0;
	width: 640px;
}
#divviewervideo {
	float: right;
	margin: 0 0 20px 0;
	overflow:hidden;
	padding: 0;
	width: 640px;
}
.divformcolonnegauche {
	float: left;
	width: 208px;
	margin: 0;
	padding: 0;
}
.divformcolonnedroite {
	float: right;
	margin: 0 0 0 0;
	overflow:hidden;
	padding: 0;
	width: 560px;
}
.divformcolonnedroitelarge {
	float: right;
	margin: 0 0 0 0;
	overflow:hidden;
	padding: 0;
	width: 730px;
}
.texte {
	font-size: 0.8em;
}
.textearticle {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #000000;
	font-size: 13px;
}
.textecentre {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #000000;
	font-size: 13px;
	text-align: center;
}
p {
	margin: 0;
	padding: 0;
	color: #000000;
	font-size: 11px;
	text-align: justify;
}
.texteinfo {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #FF0000;
	font-weight: bold;
	font-size: 11px;
}
table {
	margin: 0;
	padding: 0;
	border: none;
//	width: 100%;
	border-collapse: collapse;
}
tr {
	margin: 0;
	padding: 0;
	border: none;
}
td {
	margin: 0;
	padding: 0;
	border: none;
	text-align: left; 
}
td.meteo {
	border: none;
	vertical-align: baseline;
}
td.meteoagenda {
	border: none;
	white-space: nowrap; 
	padding-left: 5px;
	background: url(../img/sitebackgrounds/fondmeteoagenda.png) no-repeat;
	background-position:center;
	width: 47px;
}
td.colonnecategorie {
	border: none;
	width: 342px;
}
td.colonnedescriptioncategorie {
	border-top: 1px solid #DDDDDD;
}
img {
	border: none;
	font-size: 8px;
}
a{
	text-decoration:none;
}
a:hover{
	text-decoration:underline;
}


form p.formpropositionjournee {
	/* Empêcher le dépassement des flottants */
	overflow: hidden;
	/* Idem pour IE6 */
	width: 100%;
}
form p.formpropositionjournee label {
	float: left;
	width: 180px;
	text-align: right;
}
form p.formpropositionjournee label.select {
	float: left;
	width: 550px;
	text-align: right;
}
form p.formpropositionjournee input,
form p.formpropositionjournee textarea {
	width: 520px;
	margin-left: 12px;
	margin-bottom: 4px;
}
form p.formpropositionjournee span {
	width: 520px;
	margin-left: 12px;
	margin-bottom: 4px;
	font-style: italic;
}
form p.formpropositionjournee select {
	width: 150px;
	margin-left: 12px;
	margin-bottom: 4px;
}

input[type=image] {
	vertical-align: middle;
}
tr.rollov:hover .rollover { 
 	background-color: #DDDDFF; 
}
td.ligneagenda { 
 	border-top: 1px solid #888888;
 	height:24px;
	padding-left: 3px; 
}
td.celluleagendatop { 
	padding-left: 3px; 
}
td.celluleagendamemedate { 
	padding-left: 3px; 
}
td.ligneagendatop { 
	padding-left: 3px;
 	height:24px; 
}
td.ligneagendamemedate { 
 	border-top: 1px solid #DDDDDD;
 	height:24px;
	padding-left: 3px; 
}
td.ligneagendaspecial { 
 	background-color: #FFFFBB;
	border-top: 1px solid #888888;
 	height:24px;
	padding-left: 3px; 
}
td.celluleagendatopspecial { 
 	background-color: #FFFFBB;
	padding-left: 3px; 
}
td.celluleagendamemedatespecial { 
 	background-color: #FFFFBB;
	padding-left: 3px; 
}
td.ligneagendatopspecial { 
 	background-color: #FFFFBB;
	padding-left: 3px;
 	height:24px; 
}
td.ligneagendamemedatespecial { 
 	background-color: #FFFFBB;
 	border-top: 1px solid #DDDDDD;
 	height:24px;
	padding-left: 3px; 
}
td.ligneagendaorganisateur { 
 	border-top: 1px solid #888888;
        background-color: #DDDDFF;
 	height:24px;
	padding-left: 3px; 
}
td.ligneagendaorganisateurspecial { 
 	background-color: #FFFFBB;
	border-top: 1px solid #888888;
 	height:24px;
	padding-left: 3px; 
}
td.celluletableau { 
 	border-top: 1px solid #BBBBBB;
	padding-left: 3px; 
}
td.celluletableaucentree {
	text-align: center;
 	border-top: 1px solid #BBBBBB;
	padding-left: 3px; 
}
.textepetit {
	font-size: 0.85em;
}
.textegrand {
	font-size: 14px;
}
.textegras {
	font-size: 11px;
	font-weight: bold;
}
table.pagination{
	width: auto;
	margin-left: auto; 
  margin-right: auto; 
}
table.pagination td{
	text-align: center;
}
img.codeverif {
	vertical-align: bottom;
}

/* a supprimer */
.tabdegrade1 {
	border-top: 2px solid #BBBBBB;
	padding: 3px;
	background-image: url(../img/sitebackgrounds/degradehgris1.png);
	background-repeat: repeat-y;
	background-position:right
}
.tabtitre1 {
	background-color: #FFFFFF;
}
.tabtitre2 {
	border-top: 2px solid #BBBBBB;
	padding: 3px;
	background-color: #DDDDDD;
}
.tabbordhaut1 {
	border-top: 1px solid #BBBBBB;
	padding: 3px;
}
.tabbordhaut2 {
	border-top: 1px solid #BBBBBB;
	padding: 3px;
}
.tabbordepaishaut2 {
	border-top: 2px solid #BBBBBB;
	padding: 3px;
}
.tabbordmeteo2 {
	border-top: 1px solid #BBBBBB;
	background-color: #FFFFFF;
	padding: 0px;
	text-align: right;
}
.lienmenupetit {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #0000AA;
	font-size: 10px;
}
.lienmenupetitgras {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight:bold;
	color: #0000AA;
	font-size: 10px;
}
.textepetitgras {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #000000;
	font-size: 10px;
	font-weight: bold;
}
.textetrespetit {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #000000;
	font-size: 9px;
}
.textegrandgras {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #000000;
	font-size: 14px;
	font-weight: bold;
}
.titre1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: bold;
	color: #333333;
	text-indent: 10px;
}
.titre2{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #777777;
	font-size: 12px;
	font-weight: bold;
	text-align:center;
}
.soustitre1grand {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 24px;
	font-style: normal;
	font-weight: bolder;
	color: #333333;
	text-indent: 10px;
}
.soustitre1moyen {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-style: normal;
	font-weight: bolder;
	color: #333333;
	text-indent: 10px;
}



/*reset*/
nav, ul, body, html, table {
    margin: 0;
    padding: 0;
    border: 0;
}
ul {
    list-style-type: none;
}
a, p {
    text-decoration: none;
}
/* balises principales, entete et pied de page */
html, body {
    height: 100%;
    font-size: 100%;
}
body {
    margin: 0 auto;
    min-width: 320px;
    max-width: 960px;
    font-family: Arial, Sans-Serif;
    font-size: 1em;
}
header {
    width: 100%;
    text-align: center;
}

/* ---------- */
/*            */
/* Responsive */
/*            */
/* ---------- */




/*Entête et menu principal*/
#divsitetitlemenu {
    width: 100%;
    background: url("/img/sitebackgrounds/header960.png") no-repeat;
    text-align: center;
}
@media screen and (max-width: 840px) {
    #divsitetitlemenu {
        background: url("/img/sitebackgrounds/header840.png") no-repeat;
    }
}
@media screen and (max-width: 580px) {
    #divsitetitlemenu {
        background: url("/img/sitebackgrounds/header580.png") no-repeat;
    }
}
#divsitetitle {
    width: 100%;
    height: 100px;
    display: flex; 
    flex-direction: column;
    justify-content: center;
}
@media screen and (max-width: 840px) {
    #divsitetitle {
        height: 80px;
    }
}
@media screen and (max-width: 580px) {
    #divsitetitle {
        height: 40px;
    }
}
#mobilemenubutton{
    display: none;
}
#mainmenu {
    width: 100%;
    z-index: 95;
    display: inline-block;
}
#mainmenu ul{
    width: 100%;
    display: table;
    height: 40px;
}	
#mainmenu li{
    vertical-align: middle; 
    display: table-cell;
    padding: 3px 5px;
    text-align: center;
    background-color: #777777;
    font-size: 0.9em;
    height: 100%;
}
#mainmenu li img {
    vertical-align: middle;
    margin-left: 10px;
    margin-right: 10px;
}
#mainmenu li a{
    color: white;
}
#mainmenu .current {
    border-bottom: solid 3px red;
}
#mainmenu li:hover{
    background-color: #999999;
}
@media screen and (max-width: 840px) {
    #mainmenu ul{
        height: 30px;
    }    
    #mainmenu li{
        font-size: 0.75em;
        padding: 2px 4px;
    }    
    #mainmenu .current {
        border-bottom: solid 2px red;
    }
}
@media screen and (max-width: 580px) {
    #mobilemenubutton{
        display: inline-block;
        width: 80px;
        height: 40px;
    }
    #mainmenu {
        position: absolute;
        top: 0;
        right: 0;
        vertical-align: top;
        text-align: right;
    }
    #mainmenu ul {
        width: 80px;
        height: 40px;
        padding: 0;
        position: absolute;
        top: 0px;
        right: 0px;
        left: auto;
    }
    #mainmenu li {
        display: none; /* hide all <li> items */
        margin: 0;
        font-size: 0.9em;
        padding: 8px 2px;
        text-align: right;
        height: 20px;
        border-right: solid 5px #777777;
    }
    #mainmenu li img {
        margin-left: 4px;
        margin-right: 4px;
    }
    #mainmenu .current {
        border-bottom: none;
        border-right: solid 5px red;
    }
    /* on nav hover */
    #mainmenu ul:hover, ul:active, ul:focus {
        width: 150px;
    }
    #mainmenu ul:hover li, ul:active li, ul:focus li {
        display: block;
    }
}

/* Bannières*/
#mainbannerdiv {
    display: inline-block;
    width: 728px;
    height: 90px;
    background-color: grey;
}
@media screen and (max-width: 840px) {
    #mainbannerdiv {
        width: 468px;
        height: 60px;
    }
}
@media screen and (max-width: 580px) {
    #mainbannerdiv {
        width: 320px;
        height: 50px;
    }
}

div.sousMenu{
    height: 30px;
    width: 100%;
    font-size: 0.8em;
    font-weight: bold;
    color: #0000AA;
}
.sousMenuHorizontal{
    display: inline-block;
    vertical-align: top;  
    height:30px;
    width: calc(100% - 50px);
    background-color: #DDDDDD;
}    
.sousMenuHorizontal ul{
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
    height:100%;
    width: 100%;
}
.sousMenuHorizontal li{
    text-align:center;
    float:left;
    padding:10px;
    overflow:hidden;
}
.sousMenuHorizontal li:hover{
    background-color: #EEEEEE;
}
.sousMenuDeroulant{
    position: absolute;
    right: calc(50% - 160px);
    display: inline-block;
    width: 50px;
    vertical-align: top;
    z-index: 80;
    background-color: #DDDDDD;
}
@media screen and (max-width: 960px) {
    .sousMenuDeroulant{
        right: 320px;
    }    
}
@media screen and (max-width: 840px) {
    .sousMenuDeroulant{
        right: 0px;
    }    
}
.sousMenuDeroulant ul{
    margin:0;
    padding:0;
    overflow:hidden;
    width: 100%;
}
.sousMenuDeroulant li{
    text-align:right;
    padding:7px 5px 7px 5px;
    overflow:hidden;
    display: none;
}
.sousMenuDeroulant li:hover{
    background-color: #EEEEEE;
}
#boutonSousMenuDeroulant{
    display: block;
}
.sousMenuDeroulant:hover {
    width: 320px;
    float: right;
}
.sousMenuDeroulant ul:hover li, ul:active li, ul:focus li {
    display: block;
    text-align:right;
}




/*agencement de la page*/
section {
    margin: 0;
    padding: 0;
    display: inline-block;
    width: calc(100% - 320px);
}
@media screen and (max-width: 840px) {
    section{
        width: 100%;
    }
}
footer {
    margin: 20px 0 0 0;
    padding: 0;
    width: 100%;
    text-align: center;
    background-color: white;
}
#bottommenu {
    display: inline-block;
    margin-top: 25px;
    margin-left: auto;
    margin-right: auto;
}
#bottommenu ul{
    width: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}	
#bottommenu li{
    vertical-align: middle; 
    display: inline;
    padding: 6px 15px;
    text-align: center;
    font-size: 0.75em;
}

#listeAnnees {
    display: inline-block;
    width: 100%;
    text-align: center;
}
#listeAnnees ul{
}	
#listeAnnees li{
    display: inline;
    margin-left: 10px;
    margin-right: 10px;
    text-align: center;
    font-size: 0.75em;
}

/* agencement de la page */
aside {
    margin: 10px 0 0 0;
    padding: 0;
    display: inline-block;
    vertical-align: top;
    background-color: #EEEEFF;
}
aside.left {
    width: 180px;
}
aside.right {
    width: 320px;
    text-align: center;
//    margin-top: 40px;
}
@media screen and (max-width: 840px) {
    aside.left {
        display: none;
    }
    aside.right {
        width: 100%;
        padding: 10px;
    }
}


/* Collapsing div*/
.toggle-box {
    display: none;
}
.toggle-box + label {
    cursor: pointer;
    display: block;
    font-weight: bold;
    line-height: 21px;
    margin-bottom: 5px;
}
.toggle-box + label + div {
    display: none;
    margin-bottom: 10px;
}
.toggle-box:checked + label + div {
    display: block;
}
.toggle-box + label:before {
    content: "+";
    display: block;
    float: left;
    font-weight: bold;
    height: 20px;
    line-height: 20px;
    margin-right: 5px;
    text-align: center;
    width: 20px;
}
.toggle-box:checked + label:before {
  content: "\2212";
}
.blocArticleAccueil{
    width: calc(100% - 20px);
    margin: 10px 0;
    padding: 10px;
    overflow: hidden;
}
.blocLienRubrique{
    width: calc(100% - 20px);
    margin: 0;
    padding: 10px;
    text-align: right;
}
.blocDetailJournee{
    min-height: 160px;
}
.imgMiniature{
    float: left;
}
.imgMiniatureActualite{
    margin-right: 10px;
}
.imgActualite{
    width: 100%;
}
.dateActualite{
    font-size: 0.7em;
    font-style: italic;
}

.ellipsis {
        overflow: hidden;
        height: 30px;
        line-height: 15px;
}
.ellipsis:before {
        content:"";
        float: left;
        width: 5px; 
        height: 30px; }

.ellipsis > *:first-child {
        float: right;
        width: 100%;
        margin-left: -5px; }		

.ellipsis:after {
        content: "\02026";  
        box-sizing: content-box;
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        z-index: 10;
        float: right; 
        position: relative;
        top: -17px; 
        left: 100%; 
        width: 3em; 
        margin-left: -3em;
        padding-right: 5px;
        text-align: right;
        background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
        background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);			
        background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
        background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
        background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white); 
}
.photoMiniatureAccueil{
    height: 96px;
    width: 128px;
}
.photoStage{
    height: 96px;
    width: 128px;
}
.divphotoMiniatureAvecLegende{
    display: inline-block;
    vertical-align: top;
    margin: 0;
    max-width: 128px;
    font-size: 0.65em;
    margin: 0 10px 10px 0;
}
.logoCategorie{
    float: left;
    margin-top: 12px;
}

.agendaLigne{
    min-width: 320px;
    padding: 0 30px 0 5px;
    margin: 5px 0 5px 0 ;
    background-image:url(../img/sitebuttons/boutonchevron.png);
    background-repeat: no-repeat;
    background-position: right center;
}
.agendaLigne:hover{
    background-color: #EEEEFF;
}
.agendaPasseLigne{
    min-width: 320px;
    padding: 0 30px 0 5px;
    margin: 5px 0 5px 0 ;
}
.agendaPasseLigne:hover{
    background-color: #EEEEFF;
}
.agendaElement{
    display: inline-block;
    padding: 0; margin: 0;
    vertical-align: middle;
}
.agendaDate{
    float: left;
    width: 54px;
    color: black;
    font-size: 0.8em;
    margin-right: 5px;
    text-align: center;
}
.agendaCircuit{
    width: calc(50% - 55px);
    color: #000000;
    font-size: 0.9em;
    font-weight: bold;
}
.agendaLogoCircuit{
    vertical-align: top;
    height: 16px;
}
.agendaOrganisateur{
    width: calc(50% - 65px);
    color: #000000;
    font-size: 0.8em;
}
.agendaLogoOrganisateur{
    vertical-align: top;
    height: 16px;
}
.agendaMeteo{
    float: right;
    border: none;
    white-space: nowrap; 
    padding-left: 5px;
    background: url(../img/sitebackgrounds/fondmeteoagenda.png) no-repeat;
    background-position:center;
    width: 47px;
    color: #777777;
    font-size: 0.7em;
}
.agendaPhotos{
    font-size: 0.8em;
}
.agendaResume{
    color: #777777;
    font-size: 0.7em;
    font-style: italic;
//    padding-left: 80px;
}
.ligneTableau{
    min-width: 320px;
    padding: 0 0 0 5px;
    margin: 5px 0 5px 0 ;
}
.ligneTableau:hover{
    background-color: #EEEEFF;
}
.elementTableau{
    display: inline-block;
    padding: 0; margin: 0;
    vertical-align: middle;
//    border-style: solid;
}
.listeCircuitsNom{
    white-space: nowrap;
    font-weight: bold;
    width: 160px;
}
.listeCircuitsRegion{
    width: 20%;
}
.listeCircuitsType{
    width: 25%;
}
.listeCircuitsLongueur{
    width: 50px;
}
.listeCircuitsLiens{
    width: 100%;
    text-align: right;
}
.listeCircuitsNormesSon{
    color: #AAAAAA;
}
.listeCircuitsLienItineraire{
    margin-left: 10px;
}
.listeOrganisateursLogo{
    float: left;
    width: 30px;
}
.listeOrganisateursNom{
    font-weight: bold;
    width: 220px;
}
.listeOrganisateursType{
    width: 100px;
}
.listeOrganisateursNbJournees{
    color: #AAAAAA;
}
.listeOrganisateursLiens{
    width: 100%;
    text-align: right;
}
.listeLiensDescription{
    width: calc(100% - 45px);
}
.imgStageAccueil{
    width: 300px;
}
.imgAligneSurTexte{
    vertical-align: middle;
}
.blocAccueilDroite{
    margin: 10px 0 10px 0;
    padding: 0;
    display: inline-block;
    vertical-align: middle;
}
.divRegionCircuits{
    display: inline-block;
    vertical-align: top;
    margin: 0;
    width: 155px;
    font-size: 0.65em;
    margin: 0 5px 5px 0;
}
.divCategorieVoiture{
    display: inline-block;
    vertical-align: top;
    margin: 0;
    width: 100%;
    font-size: 0.65em;
    margin: 0 10px 10px 0;
}
.divTexte{
    width: calc(100% - 10px);
    padding: 0 5px 0 5px;
}
//.divCarte{
//    position: relative;
//    width: 100%;
//    padding-top: 100%;
//    height: 600px; //TODO : remettre une hauteur relative
//}
.divCarte{
    width: 100%;
    display: inline-block;
    position: relative;
}
.divCarte:after{
    padding-top: 100%;
    display: block;
    content: '';
}
.divDemiLargeur{
    display: inline-block;
    vertical-align: top;
    width: calc(50% - 3px);
}
@media screen and (max-width: 580px) {
    .divDemiLargeur{
        width: 100%;
    }
}
.divItineraire{
    display: none;
}
@media screen and (max-width: 840px) {
    .divItineraire{
        display: inline-block;
        float: right;
    }
}
.divStage{
    display: inline-block;
    vertical-align: top;
    margin: 20px 5px 20px 5px;
    max-width: 240px;
    min-width: calc(50% - 14px);
    min-height: 160px;
}
.divDescriptionStage{
    display: inline-block;
    width: calc(100% - 165px);
    vertical-align: top;
}
.divPhotoStage{
    display: inline-block;
    vertical-align: top;
    margin-left:5px;
    width: 144px;
    height: 124px;
}
img.logo160Droite{
    width: 160px;
    height: 160px;
    float: right;
    margin-left:10px;
}
img.logoDroite{
    float: right;
    margin-left:5px;
}


/* images et vidéos spécifiques */
.videoAccueil{
    width: 300px;
    height: 220px;
}


/* Formulaires */
.formPleineLargeur{
    width: calc(100% - 10px);
}
textarea.formPleineLargeur{
    height: 200px;
}
.formPleineLargeurOk{
    width: calc(100% - 90px);
}
.formPleineLargeurOkGeo{
    width: calc(100% - 120px);
}
.formPleineLargeurCodeVerif{
    width: calc(100% - 94px);
}
.formPleineLargeurLogoCategorie{
    width: calc(100% - 80px);
}
input, select, textarea{
    border: 2px solid #DDDDFF;
    height: 24px;
    -webkit-box-sizing: border-box; /* Pour les anciennes versions des navigateurs WebKit */
    -moz-box-sizing: border-box; /* Pour tous les navigateurs Gecko */
    box-sizing: border-box;
}
input[type="submit"]{
    cursor: pointer;
    vertical-align: top;
    height: 24px;
    min-width: 80px;
    border: 0 none;
    padding: 2px;
    margin: 0;
    background-color: #0000FF;
    font-family: Arial, Sans-Serif;
    font-size: 0.9em;
    color: white;
}
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
  width: 17px; height: 17px; /* dim. de la case */
  border: 2px solid #DDDDFF;
}
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
    position: relative; /* permet de positionner les pseudo-éléments */
    padding-left: 5px; /* fait un peu d'espace pour notre case à venir */
    cursor: pointer;    /* affiche un curseur adapté */
}
label {
    font-style: italic;
}
.boutonChampTexte{
    margin: 0;
    padding: 0;
    border: none;
    vertical-align: middle;
}


/* Séparateurs */
hr{
    display: block;
    clear: both;
    color: #EEEEEE;
    background-color: #EEEEEE;
    height: 1px;
    margin: 0 0 0 0;
    padding: 0;
    border: 0;
    line-height: 1px;
}
hr.separateurRubriques{
    margin: 20px 5px 5px 5px;
    height: 3px;    
}


/* tableaux */
table.tableauMeteo td{
    padding-right: 5px;
}
table.tableauMeteo tr:hover{
    background-color: #EEEEFF;
}


/* Gallerie photo */
.thumb {
    display: inline;
    max-height: 128px;
}
#thumblist {
    text-align: center;
    padding: 0;
}
.lightbox {
    display: none; /**sets the default display to hide the lightbox until it's the :target**/
    position: fixed; /**the rest of this styling makes the lightbox full screen when selected**/
    z-index: 999;
    width: 100%;
    height: 100%;
    text-align: center;
    top: 0;
    left: 0;
//    background: rgba(255,255,255,.9);
    background: rgba(0,0,0,.9);
}
.lightbox img { /**sets the styling of the image in the lightbox**/
    max-width: 80%;
    max-height: 90%;
    text-align: center;
    margin-top: 2%;
}
.lightbox object { /**sets the styling of the video in the lightbox**/
    width: 80%;
    height: 90%;
    text-align: center;
    margin-top: 2%;
}
.lightbox:target { /**this is where the magic happens. makes the lightbox display when it's the target of a clickable link**/
    outline: none;
    display: block;
}
.previous { /**styling the left arrow**/
    position: fixed;
    left: 4px;
    top: 40%;
}
.exit { /**styling the exit button**/
    position: fixed;
    top: 4px;
    right: 4px;
}
.next { /**styling the right arrow**/
    position: fixed;
    right: 4px;
    top: 40%;
}


/* Styles texte */
.texte {
    font-size: 0.8em;
}
.texte1 {
    font-size: 1.2em;
}
.texte3 {
    font-size: 1.0em;
}
.texte7 {
    font-size: 0.7em;
}
.texte9 {
    font-size: 0.6em;
}
.alerte {
    color: #FF0000;
    font-weight : bold;
}
.attenue {
    color: #AAAAAA;
    font-style: italic ;
}
a {
    color: #0000AA;
}
.titregeneral {
    text-align: center;
    vertical-align: middle;
    color: #000000 ;
    font-size: 2em;
    font-family: Verdana, Arial, Sans-Serif;
    font-style: italic;
    font-weight: bold;
}
@media screen and (max-width: 840px) {
    .titregeneral {
        font-size: 1.4em;
    }
}
@media screen and (max-width: 580px) {
    .titregeneral {
        font-size: 1.2em;
    }
}
.titregeneral:hover{
    text-decoration: none;
}
h1 {
    margin: 20px 0 0 0;
    padding: 0 0 0 10px;
    color: #333333;
    font-size: 1.2em;
    font-weight: bold;
    border-bottom: 2px solid #333333;
}
h1 div {
    margin: 0 5px 0 0;
}
h2 {
    margin: 4px 0 8px 0;
    padding: 0 0 0 5px;
    color: #333333;
    font-size: 1em;
    font-weight: bold;
}
h3 {
    margin: 0 0 3px 0;
    padding: 0 0 0 5px;
    color: #777777;
    font-size: 0.85em;
}
.tab150 {
    text-indent: 150px;
    color: #FF00FF;
}
ul.menulateral {
    margin: 0;
    padding: 0 0 0 5px;
    list-style: none;
}
ul.menulateral li{
    line-height: 12px;
    font-size: 10px;
}
ul.menulateral li a{
    text-align: left;
    display: block;
    margin: 0;
    padding: 0;
}
ul#menugeneral {
	margin: 0 0 0 78px;
	padding: 0 ;
	float: right;
	list-style-type: none ;
}
ul#menugeneral li {
    height: 26px ;
    margin: 0 ;
    padding: 4px 7px 0px 7px;
    float: left ;
    text-align: center;
    background: url(../img/sitebackgrounds/fondelementmenu.png) no-repeat;
    background-position: right;
}
ul#menugeneral li.selectionne {
    background: url(../img/sitebackgrounds/fondelementmenuselectionne.png) no-repeat;
    background-position: right ;
}
ul#menugeneral li a {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-decoration: none;
    font-size: 15px;
    color: #FFFFFF;
    display: block ;
}
.jourDuMois{
    font-size: 1.8em;
    font-weight: bold; 
}
.weekEndJourFerie{
    font-weight: bold;
    background-color: #E7E7E7;
}