/* Start of CMSMS style sheet 'lutterbach : Left sidebar + 1 column' */
/* browsers interpret margin and padding a little differently, we'll remove all default padding and margins and set them later on */
* {
	margin: 0;
	padding: 0;
}
/*Set initial font styles*/
body {
	text-align: left;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size:  68.8%;
	line-height: 1em;
}
/*set font size for all divs, this overrides some body rules*/
div {
	font-size: 1em;
}
/*if img is inside "a" it would have borders, we don't want that*/
#main img {
	border: 0;
        padding: 6px;
        border: 1px solid #ccc;
        
}
a img {border: 0 none;}
.clearmain {clear: both; height: 15px;}

/*default link styles*/
a, a:link a:active {text-decoration: underline;color: #224A86;}
a:visited {text-decoration: underline;}
a:hover {text-decoration: none;}

#accueil a, a:link a:active {color: #224A86;}
#accueil #main img {border-bottom: 5px solid #224A86;}
#accueil #header {background: #fff url(images/accueil/bg-header.jpg) no-repeat right top;}
#accueil #content {background: url(images/accueil/bg-content.png) no-repeat top; overflow: hidden}
#accueil #content2 {background: url(images/accueil/bg-content2.png) repeat-y}
#accueil #content h2 {padding: 5px 0 0 0}
#accueil .footback {background: url(images/accueil/footer-top.png) no-repeat top;}
#accueil #main h2 {color: #224A86}


#autre a, a:link a:active {color: #224A86;}
#autre #main img {border-bottom: 5px solid #224A86;}
#autre #header {background: #fff url(images/autre/bg-header.jpg) no-repeat right top;}
#autre #content {background: url(images/autre/bg-content.png) no-repeat top;}
#autre #content2 {background: url(images/autre/bg-content2.png) repeat-y}
#autre .footback {background: url(images/autre/footer-top.png) no-repeat top;}
#autre #main h2 {color: #224A86}

#decouvrir a, a:link a:active {color: #000099;}
#decouvrir #main img {border-bottom: 5px solid #000099;}
#decouvrir #header {background: #fff url(images/decouvrir/bg-header.jpg) no-repeat right top;}
#decouvrir #content {background: url(images/decouvrir/bg-content.png) no-repeat top;}
#decouvrir #content2 {background: url(images/decouvrir/bg-content2.png) repeat-y}
#decouvrir .footback {background: url(images/decouvrir/footer-top.png) no-repeat top;}
#decouvrir #main h2 {color: #000099}


#pratiquer a, a:link a:active {color: #FF6600;}
#pratiquer #main img {border-bottom: 5px solid #FF6600;}
#pratiquer #header {background: #fff url(images/pratiquer/bg-header.jpg) no-repeat right top;}
#pratiquer #content {background: url(images/pratiquer/bg-content.png) no-repeat top;}
#pratiquer #content2 {background: url(images/pratiquer/bg-content2.png) repeat-y}
#pratiquer .footback {background: url(images/pratiquer/footer-top.png) no-repeat top;}
#pratiquer #main h2 {color: #FF6600}


#partager a, a:link a:active {color: #006600;}
#partager #main img {border-bottom: 5px solid #006600;}
#partager #header {background: #fff url(images/partager/bg-header.jpg) no-repeat right top;}
#partager #content {background: url(images/partager/bg-content.png) no-repeat top;}
#partager #content2 {background: url(images/partager/bg-content2.png) repeat-y}
#partager .footback {background: url(images/partager/footer-top.png) no-repeat top;}
#partager #main h2 {color: #006600}


#participer a, a:link a:active {color: #FF0033;}
#participer #main img {border-bottom: 5px solid #FF0033;}
#participer #header {background: #fff url(images/participer/bg-header.jpg) no-repeat right top;}
#participer #content {background: url(images/participer/bg-content.png) no-repeat top;}
#participer #content2 {background: url(images/participer/bg-content2.png) repeat-y}
#participer .footback {background: url(images/participer/footer-top.png) no-repeat top;}
#participer #main h2 {color: #FF0033}



#realiser a, a:link a:active {color: #990099;}
#realiser #main img {border-bottom: 5px solid #990099;}
#realiser #header {background: #fff url(images/realiser/bg-header.jpg) no-repeat right top;}
#realiser #content {background: url(images/realiser/bg-content.png) no-repeat top;}
#realiser #content2 {background: url(images/realiser/bg-content2.png) repeat-y}
#realiser .footback {background: url(images/realiser/footer-top.png) no-repeat top;}
#realiser #main h2 {color: #990099}


.noborder, #main .noborder {border-bottom: 0 none!important;border: 0 none!important;padding: 0!important;}

/*****************basic layout *****************/
body {
	margin: 0;
	padding: 0;
/* default text color for entire site*/
	color: #000;
/* you can set your own image and background color here */
	background: #EBE9E9 url(images/bg-body.jpg) repeat-x left top;
}
div#wrapper {background: url(images/pagewrapper-bottom.png) repeat-y center top;}
div#pagewrapper {
	width: 980px;
/* now that width is set this centers wrapper */
	margin: 0 auto;
	background: url(images/pagewrapper-top.png) no-repeat top center;
	padding: 0 10px;
}
div#top {
	height:23px;
	background: #ddd url(images/bg-top.png) no-repeat top center;
	overflow: hidden;
	padding: 7px 12px 0 26px;
	color: #666;
}
div#top a{
	color: #666;
}
div#top #relational-link {float: left; overflow: hidden;}
	div#top #relational-link a.picto {
		display: block; 
		float: left;
		width: 17px;
		height: 23px;
		margin-right: 12px;
		text-indent: -9000em;
		background-position: left top;
		background-repeat: no-repeat;
	}
	div#top #relational-link a.picto:hover {
		background-position: 0 -24px;
	}
	div#top #relational-link a#picto-aa {background-image: url(images/picto-aa.png);}
	div#top #relational-link a#picto-contact {background-image: url(images/picto-contact.png);}
	div#top #relational-link a#picto-bookmark {background-image: url(images/picto-bookmark.png);}
	div#top #relational-link a#picto-info {background-image: url(images/picto-info.png);}
	div#top #relational-link a#picto-sitemap {background-image: url(images/picto-sitemap.png);}

	div#top #accessibility-link {float: right;}
/* header, we will hide h1 a text and replace it with an image, we assign a height for it so the image wont cut off */

div#header {
/* adjust according your image size */
	height: 162px;
	margin: 0;
}
div#header h1 {
	margin: 0;
	padding: 0;
/*these keep IE6 from pushing the header to more than the set size*/
	line-height: 0;
	font-size: 0;
/* this will keep IE6 from flickering on hover */
	background: url(images/logo.png) no-repeat left top;
	width: 258px; 
	float: left;
	height: 139px;
}

div#header h1 a {
	background: url(images/logo.png) no-repeat left top;
	display: block;
	height: 139px;
	text-indent: -999em;
	text-decoration: none;
	width: 258px;
	margin: 0; padding:0
}
div#header div#image {
	float: right;
        width: 719px;
        height: 162px;
        overflow: hidden;
}
.slideshow{width:719px; height:162px; overflow:hidden;}
 .slideshow li{list-style:none; float:left; display:inline; position:relative;}

 .edge-holders{
	width:719px; 
	height:162px; 
	background: url(images/accueil/slide/edge-holders.png) no-repeat ; 
	position:relative;
	z-index:10; 
	top:-162px;
}
#edge-int{
	background: url(images/autre/edge-holders-int.png) no-repeat ; 
}

div.breadcrumbs {
	font-size: 0.909em;
	margin: 0px;
	color: #666;
	background: url(images/dot.png) repeat-x bottom;
	overflow: hidden;
	height:1%;
	line-height: 1.3em;
	padding: 12px 0 6px;
}
div.breadcrumbs a {color: #666!important;text-decoration: none!important;}
div.breadcrumbs span.lastitem {
	
}
div#search {
	float: right;
	width: 250px;
	text-align: right;
	margin:0;
	color: #666;
	background: url(images/bg-search) no-repeat right top;
}
div#search label {display: none;}
input.search-button {
	border: none;
	height: 22px;
	width: 30px;
	padding: 0px 2px 2px 0px;
	cursor: pointer;
	background: none;
	font-size: 0;
	color: #fff;
	text-indent: -9000em;
	margin: 0;
}
input.search-input {
	border:0 none;
	color: #666; 
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	font-size:1em;
	padding:4px 5px 4px;
	width: 140px;
	margin: 0;
	background: none;
}
*html input.search-input {padding:4px 5px 3px;margin-top: -1px;}
div#print {
	float: right;
	clear: right; 
	padding: 12px 5px 0 0;
}
div#print a {
	float: left;
}
div#print .noprint {background: url(modules/Printing/printbutton.gif) no-repeat right 5px; width: 16px; height: 21px;text-indent: -9000em;}
div#print a.txt_size {
	display: block;
	height: 21px;
	width: 23px;
	background-position: top;
	background-repeat: no-repeat;
	text-indent: -9000em;
}
div#print a.txt_size:hover {
	background-position: 0 -21px;
}
div#print a#enlarge {
	background-image: url(images/picto-enlarge.png);
	margin: 0 8px 0 3px;
}
div#print a#reduce {
	background-image: url(images/picto-reduce.png);
}
div#content {
	padding: 0px;
	/*overflow: hidden;*/
	height: 1%;
}

div#content2 {
        overflow: hidden
}
div#main {
	margin-left: 238px;
	margin-right: 47px;

}
* html div#main  {
	float: right;
	width: 695px;
/* and we take this out or it will stop at the bottom  */
	margin-left: 0%;
/* and some air on the right */
	margin-right: 0;
	padding-right: 47px;
}
#accueil #main {margin-right: 0}
* html #accueil div#main  {padding-right: 0; width: 742px}
	div#main #mainleft {
		float: left;
		width: 425px;
	}
		div#main #mainleft .lireplus {float: right;padding-top: 15px;}
	div#main #mainright {
		float: right;
		width: 304px;
		padding-top: 6px;
	}
		div#main #mainright #card {
			background: url(images/accueil/bg-card.jpg) no-repeat;
			height: 172px;
			padding: 16px 40px 0 29px;
			margin: 5px 0 12px;
		}
			div#main #mainright #card h3 {
				font-family: Verdana, Arial, helvetica, sans-serif;
				font-size:  1.091em;
				font-weight: 600;
				padding-bottom: 10px;
			}
			div#main #mainright #card a {color: #000}
			div#main #mainright #card ul {list-style-type: none;}
				div#main #mainright #card ul li{
					list-style-type: none;
					background: url(images/accueil/puce-noir-li.png) no-repeat left 8px;
					margin: 0 0 2px;
					padding-left: 8px;
				}
			
			div#main #mainright #demarche {font-size:  1.091em;}
			div#main #mainright #demarche ul{list-style-type: none;margin : 10px 0 35px 30px}
			div#main #mainright #demarche ul li{
				list-style-type: none;
				background: url(images/accueil/puce-blanche-li.png) no-repeat left 8px;
				margin: 0 0 1px;
				padding-left: 8px;
			}
			div#main #mainright #demarche ul li a{
				color: #fff;
				text-decoration: none;
			}
			div#main #mainright #demarche ul li a:hover{text-decoration: underline;}
			div#main #mainright #link-galerie {color: #fff; text-decoration: none; padding-left: 35px; font-size:  1.091em;}

div#sidebar {
	float: left;
	width: 221px;
	display: inline;
	margin: 0px 0px 20px;
	padding: 0px;
	position: relative;
}
	div#sidebar #menu2 {padding: 30px 0;}
		div#sidebar #menu2 ul{
			padding-left: 30px;
			list-style-type: none;
		}
			div#sidebar #menu2 ul li{
				background-position: center left;
				background-repeat: no-repeat;
				margin: 5px 0;
				height: 17px;
				list-style-type: none;
			}
			div#sidebar #menu2 li#actu-all{ background-image: url(images/picto-actu-all.png); }
			div#sidebar #menu2 li#actu-img{ background-image: url(images/picto-actu-img.png); }
			div#sidebar #menu2 li#bulletin{ background-image: url(images/picto-bulletin.png); }
			div#sidebar #menu2 li#plan{ background-image: url(images/picto-plan.png); }
			div#sidebar #menu2 li#travaux{ background-image: url(images/picto-travaux.png); }
			div#sidebar #menu2 li#marches{ background-image: url(images/picto-marches.png); }
			
				div#sidebar #menu2 ul li a{
					padding-left: 25px;
					color: #333;
					text-decoration: none;
				}
				div#sidebar #menu2 ul li a:hover {
					text-decoration: underline;
				}
				
	div#sidebar #newsletter-sidebar {
		background: #30784F url(images/bloc-newsletter_sidebar.png) no-repeat bottom right;
		display: block;
		width: 163px;
		color: #fff;
		text-decoration: none;
		padding: 14px 44px 15px 14px;
	}
	div#sidebar #demande-en-ligne {
		height: 87px;
		background: #8D8E12 url(images/bloc-demande-en-ligne.png) no-repeat top left;
		display: block;
		width: 100%;
		text-indent: -9000em;
		margin-top: 6px;
	}


div.footback {
	clear: both;
	padding-top: 39px;
}
div#footer {
	color: #000;
	background: url(images/bg-footer.png) repeat-y;
	overflow:auto;
	height:1%;
	/*position: relative*/
}
	div#footer #footleft {
		width: 221px;
		float: left;
		padding-top: 56px;
		display: inline
	}
		
	div#footer #footcenter {
		width: 524px;
		float: left;
		padding: 0 0 0 22px;
		display: inline
	}
		div#footer #footcenter #num-vert{
			float: right;
		}
		div#footer #footcenter #horaires {
			font-family: Arial, Verdana, Helvetica, sans-serif; 
			font-size: 1.091em; 
			line-height: 1em;
		}
		div#footer #footcenter #footer-link {
			margin-top: 10px;
			font-size: 0.909em
		}
		div#footer #footcenter .fpicto{
			background-position: left bottom; 
			background-repeat: no-repeat; 
			padding: 5px 10px 5px 23px;
			text-decoration: none; 
			color: #000; 
			font-weight: 600;
		}
		div#footer #footcenter .fpicto:hover {text-decoration: underline;}
		div#footer #footcenter #fpicto-contact {background-image: url(images/picto-contact.png)}
		div#footer #footcenter #fpicto-info {background-image: url(images/picto-info.png)}
		div#footer #footcenter #fpicto-sitemap {background-image: url(images/picto-sitemap.png)}
		
	div#footer #footright {
		width: 213px;
		float: right;
		display: inline;
	}
		div#footer #footright ul{
			list-style-type: none;
			font-family: Arial, Verdana, Helvetica, sans-serif; 
			font-size: 1.091em;
			padding-left: 12px;
		}
			div#footer #footright ul li {
				background: url(images/arrow-menu-footer.png) no-repeat left;
				list-style-type: none;
				padding: 3px 0;
			}
				div#footer #footright ul li a {
					padding-left: 18px;
					text-decoration: none;
					color: #333;
				}
				div#footer #footright ul li a:hover {
					text-decoration: underline;
				}
		#footer #rainbow {
			float: right;
			margin: -25px 5px 0
			
			
		}
div#footer p {
	padding: 0 0 7px;
	margin: 0;
	line-height: 1.2em;
}
div#footer p a {
/* footer link would be same color as default we want it same as footer text */
	color: #595959;
}
/* as we hid all hr for accessibility we create new hr with div class="hr" element */
div.hr {
	height: 1px;
	border-bottom: 1px solid #D1D1D1;
	margin: 1em 0;
}
/* relational links under content */
div.left49 {
/* combined percentages of left+right equaling 100%  might lead to rounding error on some browser */
	width: 70%;
        color: #666;
        font-size: smaller;
}
div.left49 a{
	color: #666!important;
}
div.right49 {
	float: right;
	width: 29%;
/* set right to keep text on right */
	text-align: right;
}
div.right49 a{
	color: #666!important;
        background: url(images/top.png) no-repeat right;
        padding: 5px 20px 5px 5px;
        text-decoration: none;
}
div.right49 a:hover{
        text-decoration: underline;
}
/********************CONTENT STYLING*********************/
/* HEADINGS */
div#content h1 {
/* font size for h1 */
	font-size: 2em;
	line-height: 1em;
	margin: 0;
}
div#content h2 {
	font-size: 3.091em;
	text-align: left;
	padding: 5px 0 34px;
	line-height: 1em;
	font-family: "Times New Roman", Times, serif;
	font-weight: 500
}
div#content h2#titre {color: #999; font-size:2.182em; line-height:1.3em;padding: 15px 0 25px}
div#content h2#titre span {color: #30784E; font-size: 1.417em}
div#content #mainright h2 {
	font-family: Arial, Verdana, Helvetica, sans-serif; 
	font-size: 1.273em; 
	color: #fff;
	background: url(images/accueil/puce-h2-mainright.png) no-repeat left 5px;
	padding-left: 15px; 
	font-weight: 600; 
	letter-spacing: 1px
}

div#content h3 {
	color: #000;
	font-family: "Times New Roman", Times, serif;
	font-size:  1.818em;
	line-height: 1.3em;
	margin: 0 0 0.5em 0;
	font-weight: 500;
        padding: 5px 0 0;
}
div#content h4 {
	color: #000;
	font-size: 1.6em;
	line-height: 1.3em;
	margin: 0 0 0.25em 0;
	font-family: "Times New Roman", Times, serif;
	font-weight: 500;
}
div#content h5 {
	color: #000;
	font-size: 1.4em;
	line-height: 1.3em;
	margin: 0 0 0.25em 0;
	font-family: "Times New Roman", Times, serif;
	font-weight: 500;
}
h6 {
	color: #000;
	font-size: 1.2em;
	line-height: 1.3em;
	margin: 0 0 0.25em 0;
	font-family: "Times New Roman", Times, serif;
}
/* END HEADINGS */
/* TEXT */
p {
/* default p font size, this is set different in some other divs */
	font-size: 1.091em;
/* some air around p elements */
	margin: 0 0 1.5em 0;
	line-height: 1.4em;
	padding: 0;
}
blockquote {
	border-left: 10px solid #ddd;
	margin-left: 10px;
}
strong, b {
/* explicit setting for these */
	font-weight: bold;
}
em, i {
/* explicit setting for these */
	font-style: italic;
}
/* Wrapping text in <code> tags. Makes CSS not validate */
code, pre {
/* css-3 */
	white-space: pre-wrap;
/* Mozilla, since 1999 */
	white-space: -moz-pre-wrap;
/* Opera 4-6 */
	white-space: -pre-wrap;
/* Opera 7 */
	white-space: -o-pre-wrap;
/* Internet Explorer 5.5+ */
	word-wrap: break-word;
	font-family: "Courier New", Courier, monospace;
	font-size: 1em;
}
pre {
/* black border for pre blocks */
	border: 1px solid #000;
/* set different from surroundings to stand out */
	background-color: #ddd;
	margin: 0 1em 1em 1em;
	padding: 0.5em;
	line-height: 1.5em;
	font-size: 90%;
}
/* Separating the divs on the template explanation page */
div.templatecode {
	margin: 0 0 2.5em;
}
/* END TEXT */
/* LISTS */
/* lists in content need some margins to look nice */
div#main ul,
div#main ol,
div#main dl {
	font-size: 1.0em;
   line-height:1.4em;
   margin: 0 0 1.5em 0;
}
div#main ul li,
div#main ol li {
	margin: 0 0 0.25em 3em;
}
/* definition lists topics on bold */
div#main dl {
	margin: 0 auto;
	padding-bottom: 1em;
}
div#main dl dt {
	font-weight: bold;
	margin: 0 0 8px 5px;
        background: url(images/puce-menu.png) no-repeat left -12px;
        padding: 0 0 2px 12px
}
div#main dl dd {
	margin: 0 0 25px 25px;
}
/* END LISTS */

/* CAPTION */
.caption {
	margin: 0 10px 10px 10px;
	border: 1px solid #ccc;
	padding: 6px;
}
#main .caption img, #main .illustration .caption img {
        padding: 0;
        border: 0 none;
        margin: 0;
}
.caption span {
	margin: 5px 0 0 0;
	padding: 5px 0;
	border-top: 1px #ddd dotted;
        display: block;
        font-style: italic;
        text-align: center;
        line-height: 1.2em;
}
div.none {margin: 0 auto 10px;}
div.right {margin-right: 0;float: right;clear: right;}
div.left {margin-left: 0;float: left;clear: left;}

div.contenu {
       float: left;
       width: 430px
}
div.illustration{
	float: right;
	width: 250px;
        text-align: center;
        padding-top: 5px;
}
div.illustration a span {color: #333;}
div.illustration img{
       clear: both;
	margin: 0 0 10px 0;
       
}

/***** sitemap ******/
.sitemap {list-style-type: none; margin: 0}
.sitemap li {list-style-type: none; margin: 2px 0}
#main .sitemap li a{text-decoration: none; font-family: "Times New Roman", Times, serif; font-size: 1.818em; }
#main .sitemap li a:hover {text-decoration: underline;}
#main .sitemap li {margin: 0 0 0.5em 3em; }
#main .sitemap ul {padding-top: 5px;}
#main .sitemap ul li {margin: 2px 0 0 2em;  }
#main .sitemap ul ul {padding-bottom:0;}
#main .sitemap ul ul li {margin: 0 0 0 2em;}
#main .sitemap ul li a{font-size:  1.455em; font-family: Arial, Verdana, Helvetica, sans-serif;color: #000}
#main .sitemap ul ul li a {font-size:  1.091em;}

/**** SERVICE POPULATION *****/
dl{width:90%;}
dl dt {
   font-weight: bold;
   margin: 0 0 8px 5px;
   border-bottom: 1px solid #ccc
}

#choix-entreprises {margin: 10px 0 15px}
table.horaires, .horaires td {border: 1px solid #ccc; border-collapse: collapse}
table.horaires .entete {background: #e9e9e9}

/***** GALERIE PHOTO ******/
img.colorboximg {
  border:1px solid #ccc;
  border-bottom: 1px solid #ccc!important;
  /*background: #e9e9e9;*/
  padding: 5px; 
}
.neonav, .clearneo .neonav:link, .clearneo .neonav:active {
background: #FDFDFD url(images/button_bg.png) repeat-x;
border:1px solid #BBBBBB;
padding:3px 7px;
margin-left:10px;
text-decoration: none;
font-weight: bold;
}
.neonav:hover  {
background: #fdfdfd url(images/button_bg_hover.png) repeat-x 0 100%;
color: #232323;

}
.thumb a, .colorbox {cursor:pointer}
/* End of 'lutterbach : Left sidebar + 1 column' */