@import url(googleMap.css);
@import url(lightbox.css);
/*******************************************************
	zone du menu
********************************************************/
/* import de la feuille de style d�di�e */
@import url(menu.css);
/* surcharge de la feuille de style des formulaires Jelix */
@import url(jform.css);
/*  feuille de style pour les tableaux */
@import url(tableau.css);
/****************************************************************************************
   Style commun au site
****************************************************************************************/
* {
	margin:0;
	padding:0;
}

body {
    background-color:#fffeba;
	font-family:Verdana,Arial,Sans serif;
	font-size:0.8em;
	color:#666666;
	padding:0;
	margin:0;
}

h1 {
	color:black;
	font-size:1.5em;
	margin:5px;
}
img {
	margin:0;
	padding:0;
	border:1px solid black;
}
table.record-list td img,
img.icone, img.noBorder {
	border:0;
}
#downloads a:hover img{
border: 0;
}

a:hover img {
border: 1px solid #f00;
}

a {
	text-decoration: none; 
	color: #0066CC;
}

a:hover{
	color: #F60;
}

table.records-list tbody td.colcenter {
    text-align:center;
}

/****************************************************************************************
   mise en page
****************************************************************************************/
#page{
	width:72em;
	-moz-border-radius:0 0 10px 10px;
	margin:0px auto;
	padding:0;
	background-color:#FFFFFF;
	color:#666666;
	border-left:1px solid #6FB8FD;
	border-right:1px solid #6FB8FD;
	border-bottom:1px solid #6FB8FD;
}

/*******************************************************
	entete de la page
********************************************************/
#header{
	width:74em;
	height:200px;
	padding:0;
	margin:0 auto;
	background-color:#FFFFFF;
	background-image:url(../images/header/bandeau-2.jpg);
	background-repeat:no-repeat;
	background-position:0px 0px;
	border-left:1px solid #6FB8FD;
	border-right:1px solid #6FB8FD;
}
#header #bandeau1{
    position:relative;
    top:-96px;
    height:198px;
    width:74em;
/*    border:1px solid red;*/
    background-color:transparent;
    background-repeat:no-repeat;
    z-index:0;
    display:none;
}
#header #treizeseptiers{
/*	float:right;*/
    position:relative;
    top:0px;
    left:570px;
	margin:0px 50px 0 0px;
	font-family:Times new roman;
	font-weight:normal;
	font-size:3em;
	z-index:5;
}
#header #blason{
    position:relative;
/*	float:right;*/
    top:-45px;
    left:525px;
	width:37px;
	height:45px;
	margin:5px 10px 0px 0px;
	background-image:url(../images/header/blason-petit.gif);
	background-repeat:no-repeat;
	background-position:0px 0px;
	filter:alpha(opacity:50);
	opacity:0.5;
	z-index:5;
}
#header #treizeseptiers a{
	color:#00A2BF;
	text-decoration:none;
}
#header #treizeseptiers .sousTitre{
	margin:-10px 0 0 95px;
	font-family:Arial;
	font-weight:bold;
	font-size:0.3em;
	color:#000000;
}
#sepHeader{
	background:transparent url(../images/header/sep-bandeau.png) no-repeat 0 0;
	position:relative;
	margin:-69px auto 0;
	height:67px;
	width:74em;
	z-index:5;
}
/*******************************************************
	zone de contenu de la page
********************************************************/
#contenuContainer{
	background-color:#FFFFFF;
	-moz-border-radius:0 0 10px 10px;
	border-left:1px solid #6FB8FD;
	border-right:1px solid #6FB8FD;
	border-bottom:1px solid #6FB8FD;
	width:74em;
	margin:0 auto;
	padding:5px 0px;
}
#contenu{
	background-color:#FFFFFF;
	margin:0px;
	padding:4px;
}

/*#contenu table{
	width:100%;
	border:1px solid #009900;
	border-collapse:collapse;
	margin:5px 0;
}

#contenu table td{
	padding:2px;
	border:1px solid #009900;
}*/

.pyjama{
	background-color:#DFDFDF;
}

/******************************************************
	pagination
*******************************************************/
/*
ul.pagelinks : s�lecteur css de la liste des pages disponibles
li.pagelinks-start : s�lecteur css du lien vers la premi�re page de r�sultats
li.pagelinks-prev : s�lecteur css du lien vers la page de r�sultats pr�c�dente
li.pagelinks-current : s�lecteur css de la page de r�sultats courante
li.pagelinks-disabled : s�lecteur css des pages de r�sultats d�sactiv�es
li.pagelinks-next : s�lecteur css du lien vers la page de r�sultats suivante
li.pagelinks-end 
*/
.pagination{
	width:100%;
	margin:5px;
	text-align:center;	
}

ul.pagelinks li {
    display: inline;
	margin-left:5px;
}
ul.pagelinks li a{
    color:#000000;
	text-decoration:none;
}
ul.pagelinks li a:hover{
	text-decoration:underline;
}
ul.pagelinks li.pagelinks-current {
    color:#FF0000;
	font-weight:bold;
}
ul.pagelinks li.pagelinks-disabled {
    display:none
}
ul.pagelinks li.pagelinks-start{
    padding-top:2px;
}
ul.pagelinks li.pagelinks-prev{
    padding-top:2px;
}
ul.pagelinks li.pagelinks-next,
ul.pagelinks li.pagelinks-end{
}
/*******************************************************
	plan
********************************************************/
#plan{
}
#categorie {
}
#categorie input{
    margin:10px;
    position:relative;
    display:inline;
    width:auto;
}
#categorie ul{
	list-style-type:none;
	padding:0;
	margin:0;
}
#categorie ul li{
 	background-repeat:no-repeat;
	line-height:2.5em;
}
#categorie ul li a {
	display:block;
	padding-left:35px;
	height:2.5em;
}
/*******************************************************
	contact
********************************************************/
#contact{
/*	background-image:url(../images/mairie-fond-contact.jpg);
	background-repeat:no-repeat;
	height:610px;*/
}
#contact div.floatLeft{
	border:1px solid #009900;
	margin:3px;
	padding:3px;
	width:48%;
}
#contact p{
	margin-left:20px;
	margin-bottom:5px;
}
#contact ul{
	margin-bottom:5px;
}
#contact li{
	margin-left:20px;
}
#contact h1{
	color:#FF0000;
	font-size:1.3em;
}
#contact h2{
	color:#FF0000;
	font-size:1em;
	margin:5px 0 0 5px;
}

/*******************************************************
	pied de page
********************************************************/
#footer{
	color:#999999;
	width:74em;
	margin:5px auto;
	padding:0;
	text-align:center;
}
#footer p{
	font-size:0.8em;
}
#footer a{
	color:#999999;
	text-decoration:none;
}
#footer a:hover{
	text-decoration:underline;
}
#footer a img{
    border:0;
}
/*******************************************************
	trombinoscope du conseil municipal
********************************************************/
#trombinoscope{
    position:absolute;
    float:left;
    background-color:#BFE2E6;
    display:none;
    border:1px solid black;
    padding:5px;
    text-align:center;
}

/*******************************************************
	pour les cadres de bloc / style de bases
********************************************************/
.haut-1-0
{
    background : url("../images/cadre/hg.png") no-repeat left ;
    padding-left: 10px;
    height : 45px;
}
.haut-2-0
{
    background : url("../images/cadre/hd.png") no-repeat right ;
    padding-right: 10px;
    height : 45px;
}
.haut-0-0
{
    color:white;
    background-color:#0aaaca;
    padding-top:6px;
    width : 100%;
    height : 32px;
}
.milieu-1-0
{
    background : url("../images/cadre/mg.png") repeat-y left ;
    padding-left: 10px;
}
.milieu-2-0
{
    background : url("../images/cadre/md.png") repeat-y right ;
    padding-right: 7px;
}
.milieu-0-0
{
    width : 100%;
    padding-bottom:10px;
    height:485px;
    overflow-y:auto;
}
.cadreEditoLarge .milieu-0-0
{
    height:auto;
}
.cadreEdito .milieu-0-0 {
    height:298px;
}
.bas-1-0
{
    background : url("../images/cadre/bg.png") no-repeat left ;
    padding-left: 10px;
    height : 9px;
}
.bas-2-0
{
    background : url("../images/cadre/bd.png") no-repeat right ;
    padding-right: 10px;
    height : 9px;
}
.bas-0-0
{
    height:9px;
    background : url("../images/cadre/bm.png") repeat-x bottom;
    width : 100%;
}

/*******************
cadre orange
*******************/
.haut-1-1
{
    background : url("../images/cadre/hg-orange.png") no-repeat left ;
    padding-left: 9px;
    height : 10px;
}
.haut-2-1
{
    background : url("../images/cadre/hd-orange.png") no-repeat right ;
    padding-right: 22px;
    height : 10px;
}
.haut-0-1
{
    background : url("../images/cadre/hm-orange.png") repeat-x;
    color:#ffc618;
    background-color:white;
    padding-top:0px;
    width : 100%;
    height : 10px;
}
.milieu-1-1
{
    background : url("../images/cadre/mg-orange.png") repeat-y left ;
    padding-left: 5px;
}
.milieu-2-1
{
    background : url("../images/cadre/md-orange.png") repeat-y right ;
    padding-right: 15px;
}
.milieu-0-1
{
    width : 100%;
    padding-bottom:1px;
    padding-top:10px;
}
.bas-1-1
{
    background : url("../images/cadre/bg-orange.png") no-repeat left;
    padding-left: 9px;
    height : 10px;
}
.bas-2-1
{
    background : url("../images/cadre/bd-orange.png") no-repeat right;
    padding-right: 22px;
    height : 10px;
}
.bas-0-1
{
    height:10px;
    background : url("../images/cadre/bm-orange.png") repeat-x bottom;
    width : 100%;
}
/*******************
  cadre bleu partiel  
*******************/
.haut-1-2
{
    background : url("../images/cadre/hg-petit.png") no-repeat left;
    padding-left: 10px;
    height : 9px;
}
.haut-2-2
{
    padding-right: 40%;
}
.haut-0-2
{
    height:9px;
    background : url("../images/cadre/hm.png") repeat-x;
}
.milieu-1-2
{
    background : url("../images/cadre/mg.png") repeat-y left;
    padding-left: 10px;
}
.milieu-2-2
{
    background : url("../images/cadre/md.png") repeat-y right;
    padding-right: 7px;
}
.milieu-0-2
{
    padding:10px 0;
}
.bas-1-2
{
    padding-left: 60%;
    height : 9px;
}
.bas-2-2
{
    background : url("../images/cadre/bd.png") no-repeat right;
    padding-right: 10px;
    height : 9px;
}
.bas-0-2
{
    height:9px;
    background : url("../images/cadre/bm.png") repeat-x bottom;
}
/*******************
  cadre vert
*******************/
.haut-1-3
{
    background : url("../images/cadre/hg-vert.png") no-repeat left ;
    padding-left: 26px;
    height : 10px;
}
.haut-2-3
{
    background : url("../images/cadre/hd-vert.png") no-repeat right ;
    padding-right: 10px;
    height : 10px;
}
.haut-0-3
{
    background : url("../images/cadre/hm-vert.png") repeat-x;
    color:#ffc618;
    background-color:white;
    padding-top:0px;
    width : 100%;
    height : 10px;
}
.milieu-1-3
{
    background : url("../images/cadre/mg-vert.png") repeat-y left ;
    padding-left: 5px;
}
.milieu-2-3
{
    background : url("../images/cadre/md-vert.png") repeat-y right ;
    padding-right: 15px;
}
.milieu-0-3
{
    padding:10px 0 1px 20px;
}
.bas-1-3
{
    background : url("../images/cadre/bg-vert.png") no-repeat left;
    padding-left: 26px;
    height : 9px;
}
.bas-2-3
{
    background : url("../images/cadre/bd-vert.png") no-repeat right;
    padding-right: 10px;
    height : 9px;
}
.bas-0-3
{
    height:9px;
    background : url("../images/cadre/bm-vert.png") repeat-x bottom;
    width : 100%;
}
/***********************************************
	cadre pour l'�dito
************************************************/
.cadreEdito
{
	float:left;
	width:72%;
	margin:10px 5px;
}
.cadreEditoLarge, 
.cadreAnnonce, 
.cadreAgendaLarge
{
	float:left;
	width:99%;
	margin:10px 5px;
}
.cadreEdito h2,
.cadreEditoLarge h2{
    color:#0aaaca;
    font-size:1em;
}
.cadreEdito p,
.cadreEditoLarge p,
.cadreAnnonce p
{
	margin-bottom:0.5em;
}
.cadreEdito h1,
.cadreEditoLarge h1 {
	margin:0;
	color:white;
	font-size:1.5em;
}
.cadreEdito img,
.cadreEditoLarge img, .cadreAgendaLarge img, .cadreAnnonce img {
	float:left;
	margin:5px 10px 2px 0;
}
.cadreEdito img.signature,
.cadreEditoLarge img.signature {
	float:right;
	margin:-4px 10px 2px 5px;
}
/***********************************************
	cadre annonces
************************************************/
.cadreAnnonce h1 {
    display:inline;
    margin:0 30px 0 10px;
	color:#37DF5A;
	font-size:1.5em;
    padding:0 15px;
    background-color:white;
    position:relative;
    top:-10px;
}
.cadreAnnonce h2{
    color:#37DF5A;
    font-size:1em;
}
.cadreAnnonce h2 a{
    color:#37DF5A;
}
.cadreAnnonce h3{
    color:#37DF5A;
    font-size:0.9em;
}

/***********************************************
	cadre pour les �coles
************************************************/
.cadreEcole,.cadreSalle
{
	float:left;
	width:48.9%;
	margin:5px;
}
.cadreEcole p,.cadreSalle p{
	margin-bottom:0.5em;
}
.cadreEcole ul,.cadreSalle ul{
    margin-left:2em;
    margin-bottom:0.5em;
}
.cadreEcole .label,cadreSalle .label{
    color:red;
}
.cadreEcole h2, .cadreSalle h2
{
	font-size:1.1em;
	margin:5px;
}
.cadreEcole h3, .cadreSalle h3
{
    color:#0AAACA;
    font-size:1em;
}
.cadreEcole img, .cadreSalle img {
	float:left;
	margin:5px 8px 0 0;
}
.cadreSalle img.icone {
    float:none;
    border:0;
}
/***********************************************
	cadre pour l'agenda
************************************************/
.cadreAgenda
{
	float:left;
	width:100%;
	margin:10px 0;
}
.cadreAgenda h1, .cadreAgendaLarge h1{
    margin:0 30px 0 10px;
    padding-left:5px;
    color:#ffc618;
    background-color:white;
    font-size:1.5em;
    position:relative;
    top:-10px;
}
.cadreAgendaLarge h1{
    display:inline;
    padding-right:5px;
}
.cadreAgenda h2, .cadreAgendaLarge h2{
    color:#ffc618;
    font-size:1em;
}
.cadreAgenda h3, .cadreAgendaLarge h3{
    color:#ffc618;
    font-size:0.9em;
}
.cadreAgendaLarge hr {
	border:1px solid #FFC618;
	margin:10px 5px;
}
.cadreAgenda p, .cadreAgendaLarge p{
	margin-bottom:0.5em;
}
.cadreAgenda p a/*, .cadreAnnonce p a*/{
    vertical-align:middle;
}
.cadreAgenda p a img, .cadreAnnonce p a img{
    vertical-align:middle;
    float:none;
    margin:0;
}
.cadreAgenda p a span, .cadreAnnonce p a span{
    vertical-align:middle;
}
/***********************************************
	cadre pour l'affiche
************************************************/
.cadreAffiche
{
	float:left;
	width:244px;
	margin:5px 1px;
}
.cadreAffiche h1{
    padding-left:10px;
    color:white;
    font-size:1.3em;
}
.cadreAffiche h2{
    color:#ffc618;
    font-size:1em;
}
.cadreAffiche hr {
	border:1px solid #FFC618;
	margin:10px 5px;
}
.cadreAffiche a{
    position:relative;
    display:block;
    overflow:hidden;
}
.cadreAffiche img,
.cadreAffiche a:hover img
{
    position:relative;
    border:0;
    z-index:0;
    margin: 0 auto;
}
.cadreAffiche img.affiche{
    z-index:0;
}
.cadreAffiche .haut-affiche,
.cadreAffiche .bas-affiche
{
    height : 31px;
    position:relative;
    z-index:50;
}
.cadreAffiche .haut-affiche{
    background : url("../images/cadre/haut-affiche.png") no-repeat left ;
}
.cadreAffiche .bas-affiche{
    background : url("../images/cadre/bas-affiche.png") no-repeat left ;
}
.cadreAffiche .corps-affiche{
    border-left:2px solid #036f83;
    border-right:2px solid #036f83;
    overflow:hidden;
    margin:-11px 0 -13px 0;
}
.affiche-visible{
    display: block;
}
.affiche-hidden{
    display: none;
}
/***********************************************
	cadre pour l'actualit�
************************************************/
.cadreActu
{
	float:left;
	width:52.8%;
	margin:10px 5px;
}
.cadreActu h1{
    margin:0 0 0 100%;
    padding-left:1%;
    color:#0aaaca;
    background-color:white;
    font-size:1.5em;
    position:relative;
    top:-10px;
    width:65%;
}
.cadreActu h2{
    color:#0aaaca;
    font-size:1em;
}
.cadreActu p{
    margin-bottom:0.5em;
}
.cadreActu img{
    float:right;
    margin:5px 5px 0 5px;
}
/***********************************************
	cadre pour les articles
************************************************/
.cadreArticle
{
    float:left;
	width:99%;
	margin:10px 5px;
}
.cadreArticle h1{
    margin:0 0 0 100%;
    padding-left:1%;
    color:#0aaaca;
    background-color:white;
    font-size:1.5em;
    position:relative;
    top:-10px;
    width:64.5%;
}
.cadreArticle h2{
    color:#0aaaca;
    font-size:1em;
    margin-bottom:1em;
}
.cadreArticle h3{
    color:#0aaaca;
    font-size:0.9em;
    margin-bottom:0.9em;
}
.cadreArticle p{
	margin-bottom:0.5em;
}
.cadreArticle p.important{
	margin:1em 0 1em 0;
    padding:0.5em;
    border: 1px solid #0AAACA;
    background-color:#BFE2E6;
}

.cadreArticle ul, .cadreActu ul, .cadreAnnonce ul, .cadreEdito ul, .cadreAgendaLarge ul{
    margin-left:10px;
}
/*.cadreAgendaLarge ul{
    float:left;
}*/
.cadreArticle ol, .cadreActu ol, .cadreAnnonce ol, .cadreEdito ol, .cadreAgendaLarge ol{
    margin-left:20px;
}
.cadreArticle ol.trombinoscope{
    padding-left:20px;
    float:left;
}
.cadreArticle ol.trombinoscope li{
    padding-right:50px;
}

.cadreArticle li, .cadreActu li, .cadreAnnonce li, .cadreEdito li, .cadreAgendaLarge li{
    margin-left:10px;
    list-style-position:inside;
}

/***********************************************
	cadre article spécifique à la page d'accueil
************************************************/
#informations
{
	width:45%;
	margin:5px;
        float:left;
}
/***********************************************
	cadre article spécifique à la page de contact
************************************************/
#contact .cadreArticle
{
	width:48.9%;
	margin:5px;
}
#contact .cadreArticle h1{
    color:#0aaaca;
}
#contact .cadreArticle h2{
    color:#0aaaca;
}
#contact p.note{
    margin:0;
    color:red;
}
/***********************************************
	page spécifique au cicuit de randonnée
************************************************/
#randonnee input{
	display:inline;
    width:auto;
}
/***********************************************
	classe de service
************************************************/
.clearBoth{
	clear:both;
	height:0;
	visibility:hidden;
	display:block;
}

.block{
    display:block;
}
.inline{
    display:inline;
}
.center{
	text-align:center;
}
.right{
	text-align:right;
}
.italic{
	font-style:italic;
}

.floatLeft{
	float:left;
}
.floatRight{
	float:Right;
}
.lienGo{
	background-color:transparent;
	background-image:url(../images/icones/bullet_go.png);
	background-repeat:no-repeat;
	background-position:0px 0px;
	padding-left:15px;
}
.lienDownload{
	background-color:transparent;
	background-image:url(../images/icones/get_download.png);
	background-repeat:no-repeat;
	background-position:0px 0px;
	padding-left:20px;
    display:block;
    margin-top:5px;
}