* {
	margin: 0;
	padding: 0;
}

body {
	font: normal 100% Arial, Helvetica, sans-serif;
	color: #666;
}

.cache {
	position: absolute;
	left: -5000px;
	top: -5000px;
	font-size: 1px;
	}

img {
	border: none;
	}
	
	
/* ----------------------------| 1. GLOBAL |------------------------------- */

#global  {
	margin: 0 auto;
	width: 87%;
	min-width: 770px;
	max-width: 1100px;
    font: .8em Arial, Helvetica, sans-serif;
	}

		
/* ------------------| 1.1 GLOBAL (charte graphique) |------------------------- */
	
/*	
vert index = rgb(0,117,94); vert index att = rgb(57,143,126);
vert municipalite = rgb(165,193,2);
bleu services = rgb(17,167,212);
rouge vivre à duttl = rgb(171,3,29);
jaune agenda = rgb(238,190,31);
*/


#accueil { background: #ddd url(../img/fond-accueil.gif) repeat-x; }
#accueil #global { background: rgb(250,250,250) url(../img/fond-accueil.gif) repeat-x; }
#accueil #entete { background: url(../img/entete-index.jpg) 15px 0  no-repeat; }

#municipalite { background: #ddd url(../img/fond-municipalite.gif) repeat-x; }
#municipalite #global { background: rgb(250,250,250) url(../img/fond-municipalite.gif) repeat-x; }
#municipalite #entete { background: url(../img/entete-municipalite.jpg) 15px 0  no-repeat; }

#commune { background: #ddd url(../img/fond-services.gif) repeat-x; }
#commune #global { background: rgb(250,250,250) url(../img/fond-services.gif) repeat-x; }
#commune #entete { background: url(../img/entete-commune.jpg) 15px 0  no-repeat; }

#vivre { background: #ddd url(../img/fond-vivre.gif) repeat-x; }
#vivre #global { background: rgb(250,250,250) url(../img/fond-vivre.gif) repeat-x; }
#vivre #entete { background: url(../img/entete-vivre.jpg) 15px 0  no-repeat; }

#agenda { background: #ddd url(../img/fond-agenda.gif) repeat-x; }
#agenda #global { background: rgb(250,250,250) url(../img/fond-agenda.gif) repeat-x; }
#agenda #entete { background: url(../img/entete-agenda.jpg) 15px 0  no-repeat; }


/* ----------------------------| 2. ENTETE |------------------------------- */

#entete {
	height: 130px;
	margin: 0 auto;
	}

/* Entete > Logo */

#logo {
	position: absolute;
	top: 15px;
	z-index: 1;
	margin-left: 50px;
	}

#logo h1 {
	padding: 35px 0 0 122px;
    font: 2.2em Georgia, "Times new roman", Times, serif;
	color: white;
	display: none;
	}

#logo a {
	text-decoration: none;
	color: white;
	}

/* Entete > Evitement */

#evitement {
	float: right;
	}

#evitement ul {
	margin: 0;
	padding-top: 110px;
	list-style: none;
	line-height: normal;
	}

#evitement li {
	display: inline
	}

#evitement a {
	display: block;
	float: left;
	margin-left: 10px;
	padding-left: 15px;
	text-decoration: none;
	font-size: .8em;
	font-weight: bold;
	color: white;
	/*background-color: rgb(0,117,94);*/
	}

#evitement a:hover, #topmenu a:focus {
	text-decoration: underline
	}

#evit0 { background: url(../img/picto-access.gif) no-repeat left center; }
#evit1 { background: url(../img/picto-menu.gif) no-repeat left center; }
#evit2 { background: url(../img/picto-contenu.gif) no-repeat left center; }
#evit3 { background: url(../img/picto-home.gif) no-repeat left center; }
#evit4 { background: url(../img/picto-plan.gif) no-repeat left center; }
#evit5 { background: url(../img/picto-ecrire.gif) no-repeat left center; }


/* ----------------------------| 3. MENU |------------------------------- */

#menu {
	height: 40px;
	}

#menu ul {
	margin: 0;
	list-style: none;
	line-height: normal;
	}

#menu li {
	display: inline;
	}

#menu li a {
	display: block;
	float: left;
	height: 26px;
	padding: 14px 16px 0 16px;
	background: url(../img/separ-menu.gif) no-repeat;
	text-transform: uppercase;
	text-decoration: none;
	font-weight: bold;
	color: #555;
	}
	
#menu ul li a:hover.vert, #menu ul li a:focus.vert  { color: white; background: rgb(165,193,2) url(../img/separ-menu.gif) no-repeat; }
#menu ul li a:hover.bleu, #menu ul li a:focus.bleu  { color: white; background: rgb(17,167,212) url(../img/separ-menu.gif) no-repeat; }
#menu ul li a:hover.rouge, #menu ul li a:focus.rouge  { color: white; background: rgb(171,3,29) url(../img/separ-menu.gif) no-repeat; }
#menu ul li a:hover.jaune, #menu ul li a:focus.jaune  { color: white; background: rgb(238,190,31) url(../img/separ-menu.gif) no-repeat; }
	
#sousnav{
	display: none;
	}
			
/* ------------------| 3.1 MENU+EVIT (charte graphique) |------------------------ */


#municipalite #menu ul li a.actif  { color: white; background: rgb(165,193,2) url(../img/separ-menu.gif) no-repeat; }
#commune #menu ul li a.actif  { color: white; background: rgb(17,167,212) url(../img/separ-menu.gif) no-repeat; }
#vivre #menu ul li a.actif  { color: white; background: rgb(171,3,29) url(../img/separ-menu.gif) no-repeat; }
#agenda #menu ul li a.actif  { color: white; background: rgb(238,190,31) url(../img/separ-menu.gif) no-repeat; }

/*
#municipalite #evitement a { background-color: rgb(165,193,2); }
#commune #evitement a { background-color: rgb(17,167,212); }
#vivre #evitement a { background-color: rgb(171,3,29); }
#agenda #evitement a { background-color: rgb(238,190,31); }
*/

/* ----------------------------| 4. CONTENU |------------------------------- */

#contenu {
	margin-top: 1px;
	border-right: 1px solid #ccc;
	}

/* ----------------------------| 5. COL GAUCHE |------------------------------- */

#colgauche {
	float: left;
	width: 205px;
	}

#acces {
	margin-bottom: 1em;
	background: white url(../img/rubrique.jpg) top no-repeat;
	border: 1px solid #ccc;
	border-top: 0 none;
	width: 173px;
	padding-top: 55px;
	}

#acces h2 {
	padding: 12px 0 12px 30px;
	margin-bottom: 10px;
	background: transparent url(../img/fleche-blanche.gif) no-repeat 10px 50%;
	text-transform: uppercase;
	font-size: 1.1em;
	color: white;
	}

#acces h2 span { background-color: #ccc; }
	
#acces h3 {
	margin-left: 8px;
	padding-left: 15px;
	background: url(../img/fleche-grise.gif) no-repeat left center;
	font-size: .9em;
	color: rgb(158,158,158);
	}
	
#acces hr {	
	position: inherit;
	left: 0;
	display:block;
	height: 1px;
	margin-top: -11px;
	margin-bottom: 11px;
	padding: 0;
	color: #ccc;
	background-color: #ccc;
	border: 0;
	}

#acces ul {
	margin-bottom: 15px;
	margin-left: 2em;
	list-style: square;
	}
	
#acces li {
	margin-left: -5px;
	}

#acces li a {
	color: rgb(234,103,46);
	font-size: .85em;
	line-height: 1.8em;
	color: rgb(17,166,212);
	}

#acces a:hover, #acces a:focus {
	text-decoration: underline;
	color: #999;
	}
	
/* ----------------------------| 6. PAGE CENTRALE |------------------------------- */

#page {
	margin: 0 240px 0 205px;
	min-height: 600px;
	}
	
#pleine-page {
	margin: 0 80px 0 205px;
	min-height: 600px;
	}
	
#page img, #pleine-page img {
	margin: .5em 0;
	margin-right: 15px;
	}
	
#page img.float, #pleine-page img.float {
	float: left;
	}
		
#fil-d-ariane {
	display: block;
	padding-top: 13px;
	height: 2.3em;
	line-height: 3em;
	border-bottom: 1px solid #ccc;
	font-size: .8em;
	color: #999;
	}
	
#fil-d-ariane a {
	color: #999;
	}
	
#fil-d-ariane a:hover, #fil-d-ariane a:focus {
	color: black;
	text-decoration: underline;
	}
	
/* Page > Articles */
	
.article {
	margin-bottom: .5em;
	padding: 0.5px 0 0.5em 0;
	}
	
.article h2 {
	font-size: 1.5em;
	}
	
.article h3 {
	margin-top: .5em;
	color: #999;
	}

.article h4 {
	margin: .9em 0 .9em -5px;
	font-size: .8em;
	font-weight: bold;
	border-left: 1px solid #999;
	padding-left: 5px;
	}
	
.article h5 {
	font-size: .8em;
	}

.article p {
	margin: .5em 0;
	font-size: .9em;
	line-height: 1.4em;
	color: #555;
	}

.article ul {
	margin-bottom: 15px;
	margin-left: 2em;
	list-style: square;
	}
	
.article li {
	margin-left: -5px;
	font-size: .85em;
	line-height: 1.3em;
	}
	
/* Page > Listes */

.liste {
	margin-bottom: 20px;
	padding: 0.5px 0 0.5em 0;
	}
	
.liste h2 {
	font-size: 1.5em;
	}

.liste h3 {
	margin: 15px 0 5px 0;
	text-transform: uppercase;
	font-size: .8em;
	}

.liste h4 {
	margin: 10px 0 5px 20px;
	font-size: .85em;
	}

.liste p {
	margin: 0 0 5px 20px;
	font-size: .8em;
	border-bottom: 1px solid #ccc;
	line-height: 1.4em;
	}

.liste ul {
	margin-bottom: 15px;
	margin-left: 2em;
	list-style: square;
	}
	
.liste li {
	margin-left: -5px;
	font-size: .85em;
	line-height: 1.3em;
	}
	
/* Page > Divers */

.liste p a, .article p a, .liste li a, .article li a {
	color: #999;
	}

.liste p a:hover, .liste p a:focus
.article p a:hover, .article p a:focus
.liste li a:hover, .liste li a:focus
.article li a:hover, .article li a:focus {
	color: black;
	}
	
#page div hr {	
	position: inherit;
	display:block;
	height: 1px;
	color: #ccc;
	background-color: #ccc;
	border: 0;
	margin: 0;
	padding: 0;
	}
	
.sante h3 {
	border-top: 1px solid #aaa;
	padding-top: 10px;
	padding-bottom: 0;
	}
	
.consult {
	font-style: italic;
	font-size: .8em !important;
	}
	
/* Page > Tableau */

table {
	border: 0 none;
	border-collapse:collapse;
	font-size: .8em;
	}
	
caption {
	visibility: hidden;
	}
	
td, th {
	border:1px solid rgb(250,250,250);
	border-bottom:1px solid rgb(171,3,29); /* filet rouge tables pages Vivre */
	padding: 7px 10px;
	margin: 0;
	vertical-align: top;
	text-align: left;
	color: #666;
	}
	
table.filetsjaunes td, table.filetsjaunes th {
	border-bottom:1px solid rgb(238,190,31);  /* filet jaune tables pages Agenda */
	}
	
th {
	font-size: .8em;
	color: #aaa;
	}
	
td a {
	color: #999;
	}
	
td a:hover, td a:focus {
	color: black;
	}
	
p.blanc { color: white; }


kbd {
	font-size : 1.1em;
	color: #333;
	padding: 1px 2px;
	border: 1px solid #efefef;
	border-right: 1px solid #999;
	border-bottom: 1px solid #999;
	background-color: #eee;
	}
	
/* ----------------------------| 7. COL DROITE |------------------------------- */

#coldroite {
	float: right;
	width: 200px;
	}

#coldroite div h2 {
	padding: 8px 0 8px 27px;
	margin-bottom: 10px;
	background: url(../img/fleche-blanche.gif) no-repeat 8px 50%;
	text-transform: uppercase;
	font-size: 1.1em;
	color: white;
	}
	
#coldroite div h2 span { 
	background-color: rgb(57,143,126); 
	font-size: .9em;
	}

/* Coldroite > News */

#news {
	background: white url(../img/duttl-infos.jpg) top no-repeat;
	padding-top: 50px;
	padding-right: 5px;
	border-left: 1px solid #ccc;
	}

#news ul {
	margin: 0;
	list-style: none;
	padding-bottom: 5px;
	}

#news li {
	/*margin-bottom: 0.4em;*/
	}

#news h4 {
	margin-left: 9px;
	margin-bottom: 3px;
	padding-left: 13px;
	color: #999;
	font-size: .75em;
	}

#news h3 {
	margin: 3px 0 0 9px;
	padding-left: 13px;
	background: url(../img/fleche-bleue.gif) no-repeat left center;
	font-size: .9em;
	}

#news h3 a {
	text-decoration: none;
	color: rgb(17,166,212);
	}

#news p {
	margin: 0 8px 0 12px;
	padding-left: 10px;
	font-size: .85em;
	}

#news p a {
	text-decoration: none;
	color: #666;
	}

#news p a:hover, #news p a:focus {
	color: rgb(234,103,46);
	}
	
#news hr {	
	position: inherit;
	display:block;
	height: 1px;
	color: #ccc;
	background-color: #ccc;
	border: 0;
	margin: 5px 0;
	padding: 0;
	}
	
/* Coldroite > Login+ Recherche */


#recherche, #login { 
	background: rgb(247,247,247) url(../img/fond-vertaccueil.gif) repeat-x;
	border: 1px solid #ccc;
	border-right: 0 none;
	}
	
#coldroite fieldset {
	border: none;
	}

#coldroite fieldset label {
	display: none;
	}
	
#coldroite fieldset input.form {
	width: 160px;
	margin: 0 10px;
	padding: 2px 5px;
	border: 1px solid #aaa;
	font: normal small Arial, Helvetica, sans-serif;
	color: #aaa;
	}
	
#coldroite fieldset input.form:hover, #coldroite fieldset input.form:focus {
	background-color: #efefef;
	}

#coldroite fieldset input.submit {
	border: 1px solid #ccc;
	border-top-color: #fff;
	border-left-color: #fff;
	margin: 10px;
	margin-bottom: 0;
	padding: 3px 8px 0 8px;
	font: normal 1em Arial, Helvetica, sans-serif;
	background-color: #efefef;
	color: #666;
	}
	
#coldroite fieldset input.submit:hover, #coldroite fieldset input.submit:focus { 
	background-color: rgb(0,117,94);
	color: white;
	}	
		
/* Coldroite > Charte graphique */

#municipalite #coldroite div h2 span { background-color: rgb(165,193,2); }
#municipalite #recherche, #municipalite #login { background: rgb(247,247,247) url(../img/fond-vert.gif) repeat-x; }

#commune #coldroite div h2 span { background-color: rgb(17,167,212); }
#commune #recherche, #services #login { background: rgb(247,247,247) url(../img/fond-bleu.gif) repeat-x; }

#vivre #coldroite div h2 span { background-color: rgb(171,3,29); }
#vivre #recherche, #vivre #login { background: rgb(247,247,247) url(../img/fond-rouge.gif) repeat-x; }

#agenda #coldroite div h2 span { background-color: rgb(238,190,31); }
#agenda #recherche, #agenda #login { background: rgb(247,247,247) url(../img/fond-jaune.gif) repeat-x; }

/* ----------------------------| 8. PIED DE PAGE |------------------------------- */

#basdepage {
	clear: both;
	background-color: rgb(0,117,94);
	border: 1px solid #ccc;
	text-align: center;
	padding: 8px 0;
	}
	
/* Basdepage > Charte graphique */

#municipalite #basdepage { background-color: rgb(165,193,2); }
#commune #basdepage { background-color: rgb(17,167,212); }
#vivre #basdepage { background-color: rgb(171,3,29); }
#agenda #basdepage { background-color: rgb(238,190,31); }

/* Basdepage > outils */

#basdepage ul {
	margin: 0;
	list-style: none;
	line-height: normal;
	}

#basdepage li {
	display: inline;
	color: white;
	}

#basdepage li a {
	font-weight: bold;
	color: white;
	text-decoration: none;
	font: 0.9em Arial, Helvetica, sans-serif;
	padding: 0 .5em;
	border-right: 1px solid white;
}

#basdepage li a:hover, #basdepage li a:focus { 
	text-decoration: underline;
}

/* Basdepage > Adresse */

#adresse {
	padding-top: 7px;
	text-align: center;
	background-color: #ddd;
	}

#adresse p {
	font: 0.85em Arial, Helvetica, sans-serif;
	color: #666;
	}

#adresse p a {
	color: #666;
	text-decoration: underline;
	}
	
#adresse p a:hover, #adresse p a:focus {
	color: black;
	}

#adresse p span {
	font: 1.2em Arial, Helvetica, sans-serif;
	font-weight: bold;
	}
	
/* ----------------------------| 9. ADMINISTRATION |------------------------------- */

#admDUTTL p {
	margin: -5px 0 0 12px;
	padding: 5px;
	font-size: .95em;
	}

#admDUTTL p a {
	text-decoration: none;
	color: #666;
	}

#admDUTTL p a:hover, #news p a:focus {
	color: rgb(234,103,46);
	}

/* ----------------------------| 10. DIV TAGS TYPOS |------------------------------- */

h1 {
	margin: 0;
	color: rgb(17,166,212);
	}

h2 {
	margin-bottom: 0em;
	font-size: 1.2em;
	padding-top: 5px;
	color: rgb(0,117,94);
	}	

/* H2 > Charte graphique */

#municipalite h2 { color: rgb(165,193,2); }
#commune h2 { color: rgb(17,167,212); }
#vivre h2 { color: rgb(171,3,29); }
#agenda h2 { color: rgb(238,190,31); }
	
h3 {
	margin-bottom: 1em;
	font-size: 1em;
	color: rgb(17,166,212);
	}

p {
	margin-bottom: 1.5em;
	}
	
h3.couleur, h4.couleur { color:rgb(238,190,31); }