@import url('_screen.css');

/******* body *******/
body{
 font-family: 'Trebuchet MS', Arial, Helvetica, Verdana, sans-serif;
 color: #000000;
 text-align: left; 
 background-color: #E2E2E2;
}

/* body#information_pratiques{background-color: #fff;} */

/********************************************************************* page *******/
#page{
 width: 900px;
 margin: 0 auto;
 background: #FFF;
}

/******************************************************************** header *******/
#header{
 width: 100%;
 background-color: #345FA4;
}

	/******* titre *******/
	#titre{
	 border-bottom: 1px solid #fff;
	 height: 50px;
	}

	#titre h1{
	 font-size: 4.2em;
	 line-height: 0.8em;
	 font-variant: small-caps;
	 color: #fff;
	 float: left;
	 margin-top: 17px;
	 font-weight: lighter;
	}
	
	#titre img{
	 float: left;
	 margin: 5px 10px 0 10px;
	}
	
	/******* diaporama-header *******/
	#diaporama-header{
	 border-bottom: 1px solid #fff;
	}
	
	/******* ariane-date *******/
	#ariane-date{
	 border-bottom: 1px solid #fff;
	 height: 20px;
	}
	
	#ariane-date .content{
	 padding: 5px 0 0 0;
	}

/******************************************************************** main *******/
#main{
 width: 100%;
 background: transparent url(/style/vague-main.jpg) no-repeat left top;
 padding-bottom: 10px;
}	

	#comarquage #main .content{padding: 80px 20px 0 20px;}

/******************************************************************** leftCol *******/
#leftCol{
 width: 168px;
 padding: 17px 0 0 0;
 float: left;
 margin-left: 8px;
}
	/******* nav-main navigation principale *******/
	#nav-main{
	 width: 100%;
	}

	#nav-main ul li {
	  padding: 4px 0;
	  margin: 0 0 5px 0;
	  font-variant: small-caps;
	  font-size: 1.3em;
	  line-height: 1.2em;
	  background-image: url(/style/vague-nav.png);
	  background-repeat: repeat-y;
	  border: 1px solid #ACACAC;
	}
		#nav-accueil{background-color: #2858A4; background-position: left 0%;}
		#nav-decouvrir{background-color: #287BA2; background-position: left 3%;}
		#nav-vivre{background-color: #27A0A1; background-position: left 27%;}
		#nav-actu{background-color: #27A16C; background-position:left 54%;}
		#nav-agenda{background-color: #27A038; background-position: left 57%;}
		#nav-municipalite{background-color: #6DA328; background-position: left 66%;}
		#nav-formalites{background-color: #9AA127; background-position: left 72%;}
		#nav-entreprendre{background-color: #A47728; background-position: left 76%;}
		#nav-marches-publics{background-color: #A35628; background-position: left 81%;}
		#nav-urbanisme{background-color: #A43728; background-position: left 86%;}
		#nav-infos{background-color: #A32828; background-position: left 92%;}
		
	
	#nav-main ul li li{
	  padding: 1px 0;
	  font-variant: normal;
	  font-size: 0.9em;
	  line-height: 1.2em;
	  border: none;
	  background: none;
	}

	#nav-main a {
	 padding: 0 5px;
	 display: block;
	}
	
	#nav-main li li a{
	 padding: 0 0 0 15px;
	}

	#nav-main a:link, #nav-main a:visited {color: #fff;}

		#nav-main a:focus, #nav-main a:hover,
		#accueil #nav-accueil a,
		#deux_mille_ans #nav-decouvrir-deux-mille a,
		#patrimoine_architectural #nav-decouvrir-patrimoine a, #patrimoine_architectural_details #nav-decouvrir-patrimoine a,
		#tourisme #nav-decouvrir-tourisme a,
		#cote_nature #nav-decouvrir-nature a,
		#avenir_jeunes #nav-vivre-jeune a,
		#scolaire #nav-vivre-scolaire a,
		#bourg_citoyenne #nav-vivre-bourg-citoyenne a,
		#mediation #nav-vivre-bourg-mediation a,
		#vie_associative #nav-vivre-vie-associative a,
		#sport #nav-vivre-sport a,
		#centre_multimedia #nav-vivre-centre-multimedia a,
		#service_social #nav-vivre-service a,
		#service_technique #nav-vivre-service-technique a,
		#archives #nav-vivre-archives a,
		#fiches_pratiques #nav-vivre-fiches a,
		#vivre #nav-vivre, #actualites #nav-actu,
		#culture #nav-agenda, #municipalite #nav-municipalite,
		#formalites #nav-formalites, #entreprendre #nav-entreprendre,
		#marches-publics #nav-marches-publics, #urbanisme #nav-urbanisme,
		#travaux #nav-actu,
		#conseils_municipaux #nav-municipalite-conseil, #maire_et_elus #nav-municipalite-elus, #maire_elus_details #nav-municipalite-elus,
		#infos #nav-infos
		{
		 background-color: #FFC000;
		 font-weight: bold;
		 color: #000;
		 text-decoration: none;
		}

/******************************************************************** mainCol *******/
#mainCol{
 width: 720px;
 float: left;
 padding: 50px 0 0 0;
}
* html #mainCol{width: 710px;}

#mainCol .content{
 padding: 0 0 0 10px;
}

#mainCol p{
 font-size: 1.2em;
 line-height: 1.4em;
 padding: 0 5px 5px 0;
}
	
/******************************************************************** footer *******/
#footer{
 width: 900px;
 margin: 0 auto;
}

#footer .content{
 font-size: 1.0em;
 line-height: 1.3em;
}

#footer p{
 text-align: right;
 color: #333;
}

#footer a:link, #footer a:visited{
    color: #333;
}
#footer a:focus, #footer a:hover {
    color: #666;
	font-weight: normal;
}

/************************************************************************************************************ div *******/
	/******** introduction *******/
	#introduction{
	 width: 100%;
	 padding: 0 0 15px 0;
	 border-bottom: 1px #2858A4 dotted;
	}
	
	/******** infos_pratiques *******/
	#infos_pratiques, #infos_pratiques_suite{
	 /* border-top: 1px #2858A4 dotted; */
	 width: 100%;
	 padding: 15px 0 0 0;
	}
		#accueil #infos_pratiques, #travaux #infos_pratiques{
		 padding: 0;
		}
	
	/****** firstCol *******/
	div.firstCol{
	 width: 483px;
	 float: left;
	 padding-right: 5px;
	}
	* html div.firstCol{width: 470px;}

	/******* secondCol *******/
	div.secondCol{
	 float: left;
	 width: 222px;
	}
	
	/****** firstCol_long *******/
	div.firstCol_long{
	 width: 99%;
	}
	
	/******* actu *******/
	#actu{
	 border: 1px solid #ACACAC;
	 background-color: #E2E2E2;
	 width: 97%;
	 margin-bottom: 10px;
	}
	
	#actu .content{
	 padding: 10px;
	}
	 
	/******* horaire *******/
	#horaire, #montee, #promenade{
	 background: transparent url(/style/post-it.gif) no-repeat;
	 height: 220px;
	}
	
	#horaire .content, #montee .content,#promenade .content{
	 padding: 8px 12px 0 15px;
	 font-size: 1.1em;
	 line-height: 1.2em;
	 width: 78%;
	}
	
	#horaire p, #montee p, #promenade p{
	 font-size: 1.1em;
	 line-height: 1.0em;
	 padding: 0 10px 0 0;
	 margin-right: 10px;
	}
	
	/******* marches_inforoutes flux rss *******/
	#marches_inforoutes {
	 font-size: 1.2em;
	 line-height: 1.4em;
	}
	
	/******* actualite accueil ********/
	.actualite_accueil{
	 background: transparent url(/style/vague_accueil.gif) no-repeat left top;
	 margin: 0 0 20px 0;
	 border-top: 1px #2858A4 dotted;
	}
	
	/*******info importante*******/
	div.info-importante{
	 border: 3px solid #F41717;
	 background-color: #fff;
	 margin: 10px 0 20px 0;
	 padding: 5px;
	}
	
/************************************************************************************************************ dl *******/
dl.contenu_article_long{
 width: 100%;
 margin: 10px 0 5px 0;
}

.contenu_article_long dt{
 float: left;
 margin: 0 10px 0 0;
}

.contenu_article_long dt.texte{
 font-size: 1.2em;
 line-height: 1.3em;
 float: none;
}

dd.titre{
 font-size: 1.3em;
 line-height: 1.3em;
 font-weight: bold;
 margin: 0 0 10px 0;
}

dd.texte{
 font-size: 1.2em;
 line-height: 1.3em;
}

dd.doc{
 padding: 5px 0 0 0;
 font-size: 1.1em;
 line-height: 1.5em;
}

.next{
 font-size: 1.1em;
}

dl.actualite{
 border-bottom: 1px dotted #3D88FF;
 padding: 0 0 15px 0;
}

dt.titre{
 color: #3D88FF;
 font-size: 1.1em;
 line-height: 1.2em;
 font-weight: bold;
 float: left;
 width: 50%;
}

dd.date{
 float:right;
}

dl.actualite dd.next{
 text-align: right;
 padding: 5px 0 0 0;
}

#marches_inforoutes dl{
 padding: 0 0 10px 0;
}

#marches_inforoutes dt{
 font-size: 1.1em;
 line-height: 1.3em;
 padding: 0 0 2px 0;
 font-weight: bold;
}

/********************************************************************************************************************* img *******/


/********************************************************************************************************************** ul *******/
ul#breadcrumb{
 color: #fff;
 font-size: 1.0em;
 line-height: 1.1em;
 padding: 0 0 0 10px;
 width: 92%;
 float: left;
}

#breadcrumb li {
 display: inline;
}

#breadcrumb a:link, #breadcrumb a:visited{color: #fff;}
#breadcrumb a:focus, #breadcrumb a:hover{color: #FFC000;}

#breadcrumb li a, #breadcrumb li span {
 padding: 0 6px 0 12px;
 background: transparent url(breadcrumbs.gif) no-repeat center left;
}

#breadcrumb li:first-child a, #breadcrumb li:first-child span {
 background-image: none;
 padding-left: 0;
}

ul.list{
 list-style-type: disc;
 list-style-position: outside;
 margin: 0 0 0 15px; 
}

ul.list li{
 padding: 5px 0 0 0;
 font-size: 1.1em;
 line-height: 1.2em;
}

ul.list-postit{
 list-style-type: disc;
 list-style-position: outside;
 margin: 0 15px 0 15px;
}

/* #marches-publics #infos_pratiques ul ul{
 font-size: 1.1em;
 line-height: 1.3em;
 margin-left: 15px;
} */

ul.list2{
 list-style-type: circle;
 list-style-position: outside;
 margin: 0 0 0 30px; 
}

ul.list2 li{
 padding: 5px 0 0 0;
 font-size: 1.1em;
 line-height: 1.2em;
}

ul.list3{
 list-style-type: circle;
 list-style-position: outside;
 margin: 0 0 0 45px; 
}

ul.list3 li{
 padding: 5px 0 0 0;
 font-size: 1.1em;
 line-height: 1.2em;
}

/************************************************************************************************************************ p *******/
p.date-du-jour{
 width: 6%;
 color: #fff;
 float: left;
}

#comarquage #main .content p{
 font-size: 1.2em;
 line-height: 1.5em;
 border-bottom: 1px dotted #3D88FF;
 padding: 0 0 10px 0;
}

/************************************************************************************************************************ span *******/
.emphasize{
 font-weight: bold;
 color: #345FA4;
}

.smaller{
 font-size: 85%;
}

	#comarquage .smaller{font-variant: normal; font-size: 70%;}

/************************************************************************************************************************ a *******/
a:link, a:visited {
 color: #000;
 text-decoration: none;
}
a:focus, a:hover{
 color: #345FA4;
}

#titre a{color: #fff; font-weight: normal;}

a.lire, a.pratiques{font-size: 1.1em;}

.next a:link, .next a:visited,
.next:link, .next:visited,
a.lire:link, a.lire:visited,
a#retour:link, a#retour:visited{
 color: #FF6407;
}
.next a:focus, .next a:hover,
.next:focus, .next:hover,
a.lire:focus, a.lire:hover,
a#retour:focus, a#retour:hover{
 color: #3D88FF;
}

.chapo p a:link, .chapo p a:visited,
.corps p a:link, .corps p a:visited,
#articles a:link, #articles a:visited,
#horaire a:link, #horaire a:visited,
#montee a:link, #montee a:visited,
#introduction a:link, #introduction a:visited,
a.lien:link, a.lien:visited,
dl.suite dd a:link, dl.suite dd a:visited,
#marches-publics h5 a:link, #marches-publics h5 a:visited,
a.pratiques:link, a.pratiques:visited{
 color: #3D88FF;
}

.chapo p a:focus, .chapo p a:hover,
.corps p a:focus, .corps p a:hover,
#articles a:focus, #articles a:hover,
#horaire a:focus, #horaire a:hover,
#montee a:focus, #montee a:hover,
#introduction a:focus, #introduction a:hover,
a.lien:focus, a.lien:hover,
dl.suite dd a:focus, dl.suite dd a:hover,
#marches-publics h5 a:focus, #marches-publics h5 a:hover,
a.pratiques:focus, a.pratiques:hover{
 color: #FF6407;
}

a#retour{
 font-size: 1.1em;
}


/************************************************************************************************************************ strong *******/
strong{
 color: #000;
}

/************************************************************************************************************************ h2 *******/
h2 {
 font: 3.5em/1.0em 'Trebuchet MS', Arial, Helvetica, Verdana, sans-serif;
 color: #345FA4;
 font-variant: small-caps;
 font-weight: bold;
 padding: 0 0 10px 0;
}
	#deux_mille_ans h2, #deux_mille_ans_details h2, #tourisme h2, #cote_nature h2, #patrimoine_architectural h2, #patrimoine_architectural_details h2{color: #287ba2;}
	#avenir_jeunes h2, #scolaire h2, #bourg_citoyenne h2, #mediation h2, #vie_associative h2, #sport h2, #centre_multimedia h2, #service_social h2, #service_technique h2, #archives h2, #fiches_pratiques h2{color: #27a0a1;}
	
	#culture h2{color: #27A038;}
	
	#marches-publics h2{color: #a35628;}
	
	#formalites h2{color: #9aa127;}
	
	#entreprendre h2{color: #A47728;}
	
	#urbanisme h2{color: #a43728;}
	
	#maire_et_elus h2,#maire_elus_details h2 ,#conseils_municipaux h2{color: #6da328;}
	
	#travaux  h2{color: #27A16C;}
	
	#infos h2{color: #A32828;}

/************************************************************************************************************************ h3 *******/
h3{
 font: bold 3.0em/0.9em 'Trebuchet MS', Arial, Helvetica, Verdana, sans-serif;
 text-transform: capitalize;
 font-variant: small-caps;
 padding: 15 0 10px 0;
 width: 100%;
 color: #3D88FF;
}

h3.info-importante{
 color: #F41717;
}


/************************************************************************************************************************* h4 *******/
h4{
 font-size: 2.0em;
 line-height: 1.5em;
 font-variant: small-caps;
 color: #3D88FF;
 padding: 0 0 10px 0;
}

	#accueil #actu h4{
	 font-size: 2.0em;
	 line-height: 1.0em;
	 font-variant: small-caps;
	 color: #fff;
	 background-color: #F41717;
	}
	
	#actu h4{
	 color: #fff;
	 background-color: #ACACAC;
	 display: block;
	 text-decoration: none;
	 padding: 0 0 0 5px;
	 margin: 10px 0 0 0;
	}
	
	#infos_pratiques h4{
	 background: transparent url(/style/fleche-infos.gif) no-repeat;
	 text-transform: uppercase;
	 font-variant: normal;
	 line-height: 0.8em;
	 padding-left: 40px;
	}
	
	#infos_pratiques_suite h4{
	 background: transparent url(/style/fleche-infos.gif) no-repeat;
	 text-transform: uppercase;
	 font-variant: normal;
	 line-height: 1.0em;
	 padding-left: 40px;
	}
	
	#horaire h4{
	 background: transparent url(/style/titre-horaire.gif) no-repeat;
	 line-height: 0.9em;
	}
		#patrimoine_architectural #horaire h4{background: transparent url(/style/titre-journees-patrimoine.gif) no-repeat; height: 33px;}
		#patrimoine_architectural #montee h4{background: transparent url(/style/titre-montee-clocher.gif) no-repeat; line-height: 0.9em;}
		#patrimoine_architectural #promenade h4{background: transparent url(/style/titre-promenade-patrimoine.gif) no-repeat; height: 33px;}

	#comarquage h4{text-decoration: none; padding: 10px 0 0 0;}
/************************************************************************************************************************* h5 *******/
h5{
 font-size: 1.3em;
 color: #000;
 line-height: 1.3em;
 padding: 10px 0 0 0;
}

	#marches-publics h5{color: #777;}
	
/*************************************************************************************************************************** impression *******/
@media print {

}

/************************************************************************************************************************* get Flash Player *******/
#home #getFlashPlayer p {
 position: absolute;
 top: 50px;
 right: 20px;
 width: 500px;
}

#home #getFlashPlayer img {
 float: left;
 margin: 0 5px 5px 0;
}

/*********************************************************************************************************************************** erreur *******/
.erreur {
	padding-left: 22px;
	background: transparent url(alert.gif) no-repeat 0em 100%;
}

/************************************************************************************************************************************* star *******/
.star{
    color: red;
    font-size: 120%;
    font-weight: bold;
}

/******************************************************************************************************************** formulaire - contact*******/
.formulaire-ok{
    color: #444;
}

.debug {
 background: #fff;
 color: #000;
 font-size: 12px;
 text-align: left;
}