@CHARSET "UTF-8";
@import url(yui-2.5.0/reset-fonts.css);
@import url(yui-2.5.0/base-min.css);

html, body{
	background: #8AB05C url(../images/background.gif) repeat-x center top;
	margin: 0;
	padding: 0;
}
div.container{
	width: 774px;
	background-color: white;
	margin: 0 auto;
	padding-top: 10px;
	padding-bottom: 10px;
}

/* HEADER */
div.header{
	margin: 0 10px 0px 10px;
	height: 122px;
	background: white;
	border-bottom: 1px white solid;
}
div.header div#flash{
	width: 448px;
	height: 122px;
	float: left;
}
div.header div#logo{
	width: 306px;
	height: 96px;
	float: left;
	text-align: center;
	padding: 26px 0 0 0;
	position: relative;
}
div.header div#logo a.lien_english{
	position: absolute;
	right: 0px; top: 109px;
	background: url(../images/english.gif) no-repeat;
	display: block;
	width: 53px; height: 10px;
}
div.header div#logo a.lien_english:hover{
	background: url(../images/english_on.gif) no-repeat;
}
div.header div#logo a.lien_francais{
	position: absolute;
	right: 0px; top: 109px;
	background: url(../images/english/francais.gif) no-repeat;
	display: block;
	width: 63px; height: 10px;
}
div.header div#logo a.lien_francais:hover{
	background: url(../images/english/francais_on.gif) no-repeat;
}
/* HEADER des formulaires*/
div.form{
	margin-bottom:10px;
	padding-bottom:10px;
	background:url(../images/forms-bande.gif) repeat-x bottom;
}
div.header div#logo1{
	width: 306px;
	height: 96px;
	float: left;
	text-align: left;
	padding: 26px 0 0 0;
	position: relative;
}
div.header div#logo2{
	width: 306px;
	height: 96px;
	float: right;
	text-align: right;
	padding: 13px 0 0 0;
	position: relative;
}

/* menu */
div#menu{
	width: 754px;
	height: 36px;
	margin: 0px 10px 1px 10px;
}
div#menu ul{
	width: 754px;
	height: 36px;
	margin: 0;
	padding: 0;
}
div#menu ul li{
	list-style-type: none;
	margin: 0;
	padding: 0;
	float: left;
	height: 36px;
}
div#menu ul li a{
	height: 36px;
	display: block;
	background: red;
	margin: 0;
	padding: 0;
	background: url(../images/menu.gif) no-repeat 0 0;
}
div#menu ul li a span{display: none;}

#menuContainer .item_menu_transparent { z-index: 9999; }


/* accueil */
div#menu ul li.accueil, div#menu ul li.accueil a{width: 81px; }
div#menu ul li.accueil a{background-position: 0 0;}
div#menu ul li.accueil a:hover{background-position: 0 -37px;}

/* découvrir mascouche */
div#menu ul li.decouvrir, div#menu ul li.decouvrir a{width: 89px;}
div#menu ul li.decouvrir a{background-position: -81px 0;}
div#menu ul li.decouvrir a:hover{background-position: -81px -37px;}

/* services aux citoyens */
div#menu ul li.services_citoyens, div#menu ul li.services_citoyens a{width: 99px;}
div#menu ul li.services_citoyens a{background-position: -170px 0;}
div#menu ul li.services_citoyens a:hover{background-position: -170px -37px;}

/* services municipaux */
div#menu ul li.services_municipaux, div#menu ul li.services_municipaux a{width: 92px;}
div#menu ul li.services_municipaux a{background-position: -269px 0;}
div#menu ul li.services_municipaux a:hover{background-position: -269px -37px;}

/* culture et loisirs */
div#menu ul li.culture, div#menu ul li.culture a{width: 82px;}
div#menu ul li.culture a{background-position: -361px 0;}
div#menu ul li.culture a:hover{background-position: -361px -37px;}

/* environnement */
div#menu ul li.environnement, div#menu ul li.environnement a{width: 114px;}
div#menu ul li.environnement a{background-position: -443px 0;}
div#menu ul li.environnement a:hover{background-position: -443px -37px;}

/* développement économique */
div#menu ul li.developpement, div#menu ul li.developpement a{width: 113px;}
div#menu ul li.developpement a{background-position: -557px 0;}
div#menu ul li.developpement a:hover{background-position: -557px -37px;}

/* nous joindre */
div#menu ul li.joindre, div#menu ul li.joindre a{width: 84px;}
div#menu ul li.joindre a{background-position: -670px 0;}
div#menu ul li.joindre a:hover{background-position: -670px -37px;}

/* CONTENT */

div.content{
	width: 764px;
	margin-left: 10px;
	margin-bottom: 1px;
	background: #779c48;
	overflow: hidden;
	background: url(../images/bg_c1.gif) repeat-y left top;
}

div.content div.c1{
	width: 263px;
	float: left;
	margin: 0 1px 1px 0px;
	overflow: hidden;
}

	div#recherche{
		width: 263px;
		height: 67px;
		background: url(../images/recherche.jpg) no-repeat;
		position: relative;
	}
	
		div#recherche input#txtSearch{
			width: 170px;
			height: 17px;
			position: absolute;
			top: 29px;
			left: 26px;
			border: 1px #9b9b9b solid;
		}
		
		div#recherche input#cmdSubmit{
			width: 21px;
			height: 21px;
			position: absolute;
			top: 27px;
			left: 209px;
		}
		
	div#menu_left{
		width: 263px;
	}
	
		div#menu_left ul{
			width: 263px;
			margin: 0; padding: 0;
			overflow: hidden;
			border-top: 1px white solid;
		}	
		
		div#menu_left ul li{
			width: 263px;
			height: 36px;
			margin: 0; padding: 0;
			list-style-type: none;
			float: left;
			background-color: #e8e8d8;
		}
		
		div#menu_left ul li a span{
			display: none;
		}		
		
		div#menu_left ul li a{
			width: 263px;
			height: 36px;
			display: block;
			margin: 0; padding: 0;
			background: no-repeat 0 0;
		}
				
		div#menu_left ul li.mot_du_maire a{background: url(../images/menu_gauche/mot_du_maire.gif);}
		div#menu_left ul li.habiter_a_mascouche a{background: url(../images/menu_gauche/habiter_a_mascouche.gif);}
		div#menu_left ul li.mascouche_en_croissance a{background: url(../images/menu_gauche/mascouche_en_croissance.gif);}
		div#menu_left ul li.train_de_banlieu a{background: url(../images/menu_gauche/train_de_banlieu.gif);}
		div#menu_left ul li.activites_cette_saison a{background: url(../images/menu_gauche/activites_cette_saison.gif);}
		div#menu_left ul li.parc_de_letang a{background: url(../images/menu_gauche/parc_de_letang.gif);}
		div#menu_left ul li.recycler_aujourdhui a{background: url(../images/menu_gauche/recycler_aujourdhui.gif);}
		div#menu_left ul li.election a{background: url(../images/menu_gauche/election.gif);}
		div#menu_left ul li.macouche_en_chantier a{background: url(../images/menu_gauche/macouche_en_chantier.gif);}
		div#menu_left ul li.services_en_ligne a{background: url(../images/menu_gauche/services_en_ligne.gif);}
		div#menu_left ul li.urgence a{background: url(../images/menu_gauche/urgence.gif);}
		
		div#menu_left ul li a:hover{
			background-position: 0 -36px;
		}
	
	div#calendrier{
		width: 263px;
		background: #779c48 url(../images/calendrier_titre.jpg) no-repeat left top;
		padding: 73px 0 0 0; margin: 0;
		text-align: right;
		border-top: 1px white solid;
	}
		div#calendrier ul{
			padding: 0; margin: 0 11px;
			width: 242px;
			text-align: left;
		}
		div#calendrier ul li{
			width: 215px;
			margin: 0; padding: 8px 0 12px 27px;
			list-style-type: none;
			position: relative;
			background: url(../images/pointille_calendrier.gif) repeat-x left bottom;
		}
		div#calendrier ul li.last-child{
			background: none;
		}		
		div#calendrier ul li a{
			text-decoration: none;
			color: white;
			font: 11px Verdana, Arial, Helvetica, sans-serif;
		}

		div#calendrier ul li a span.mois{
			font: bold 11px Verdana, Arial, Helvetica, sans-serif;
			color: white;
			display: block;
		}
		div#calendrier ul li a span.description{
			display: block;
		}		
		div#calendrier ul li div.date{
			width: 22px; height: 18px;
			padding-top: 1px;
			background: url(../images/box_date.gif) no-repeat;
			position: absolute;
			top: 5px;
			left: 0;
			text-align: center;
			font: bold 13px Verdana, Arial, Helvetica, sans-serif;
			text-decoration: none;
			color: #637b45;
		}
		div#calendrier a#voir_plus{
			background: url(../images/suite_calendrier.gif) no-repeat left 3px;
			padding: 2px 0 2px 18px;
			margin: 5px 11px 5px 0;
			text-decoration: underline;
			font: bold 11px Verdana, Arial, Helvetica, sans-serif;
			color: white;
		}
		div#calendrier a:hover#voir_plus{
			text-decoration: none;
		}		
			
div.content div.c2{
	width: 500px;
	float: left;
	margin-bottom: 1px;
	font: 11px Verdana, Arial, Helvetica, sans-serif;
	color: #50504d;
	text-align: justify;	
}
	div.content div.c2 h2#titre{
		width: 490px; height: 23px;
		margin: 0 0 1px 0; padding: 0;
		display: block;
		background: #669c48;
		background-repeat: no-repeat;
	}
	div.content div.c2 h2#titre span{
		display: none;
	}
	
	div.content div.c2 div#big_photo{
		margin: 0 0 0px 0;
	}
		div.content div.c2 div#big_photo span.credit{
			float: right;
			margin: 0 10px 0 0;
			color: #adb8c1;
			font: 10px Verdana, Arial, Helvetica, sans-serif;
		}
		
	div.content div.c2 div.nouvelle{
		padding: 18px 0 0 7px;
		width: 493px;
		overflow: hidden;
		overflow: visible !important;
	}
		div.content div.c2 div.nouvelle.green{
			background: url(../images/bg_vert_nouvelles.jpg) no-repeat right top;
		}
		div.content div.c2 div.nouvelle div.photo{
			margin: 0 5px 0 0; padding: 0 0 0 8px;
			width: 123px; height: 94px;
			background: url(../images/shadow_images_nouvelle.jpg) no-repeat 8px 0;
			float: left;
		}
			div.content div.c2 div.nouvelle div.photo img{
				margin: 0; padding: 0;
				border: 1px white solid;
				width: 108px; height: 81px;
			}				
		div.content div.c2 div.nouvelle h3.titre{
			margin:  0 0 8px 8px; padding: 0 10px 0 0;
			font: bold 11px Verdana, Arial, Helvetica, sans-serif;
			color: #506b2f;
		}
			div.content div.c2 div.nouvelle.first h3.titre{
				text-decoration: underline;
			}
		div.content div.c2 div.nouvelle div.description{
			margin:  0 0 10px 8px; padding: 0 15px 0 0;
			font: 11px Verdana, Arial, Helvetica, sans-serif;
			color: #50504d;
		}	
		div.content div.c2 div.nouvelle p{
			margin:  0 0 12px 0; padding: 0;
			font: 11px Verdana, Arial, Helvetica, sans-serif;
			color: #50504d;
		}					
		div.content div.c2 div.nouvelle a{
			margin:  0 0 12px 0px; padding: 0 10px 0 0;
			font: 11px Verdana, Arial, Helvetica, sans-serif;
			color: #506b2f;
			text-decoration: underline;
		}		
			div.content div.c2 div.nouvelle a:hover{
				text-decoration: none;
			}			
			
		div.content h4.date{
			margin: 0; padding: 0;
			font: bold 9px Verdana, Arial, Helvetica, sans-serif;
			color: #3A7F6F;
		}				
		div.content div.c2 div.nouvelle h4.date{
			margin: 0 0 0 8px; padding: 0;
		}
		
		div.content div.c2 div.nouvelle div.date_suite{
			background: url(../images/pointille_calendrier.gif) repeat-x left bottom;
			padding: 0 25px 13px 0;
			text-align: right;
			clear: both;
			font: 11px Verdana, Arial, Helvetica, sans-serif;
		}
			div.content div.c2 div.nouvelle.last div.date_suite{
				background: none;
			}
		div.content div.c2 div.nouvelle div.date_suite span.date{
			color: #5b5b5b;
		}
		div.content div.c2 div.nouvelle div.date_suite a.suite_nouvelle{
			color: #779c48;
			font-weight: bold;
			background: url(../images/icones/suite.gif) no-repeat left 0px;
			padding: 4px 0 0 18px;
		}
			div.content div.c2 div.nouvelle div.date_suite a:hover.suite_nouvelle{
				text-decoration: none;
			}	
			
		div.content div.c2 div.nouvelle div.date_suite a.retour_nouvelle{
			color: #779c48;
			font-weight: bold;
			background: url(../images/icones/retour.gif) no-repeat left 0px;
			padding: 4px 0 0 18px;
		}
			div.content div.c2 div.nouvelle div.date_suite a:hover.retour_nouvelle{
				text-decoration: none;
			}
			
		div.content div.c2 div.autres_nouvelles{
			text-align: right;
			margin: 10px 0 30px 0;
		}
		div.content div.c2 div.autres_nouvelles a{
			color: #779c48;
			font-weight: bold;
			padding: 0 25px 0 0;
		}	
			div.content div.c2 div.autres_nouvelles a:hover{
				text-decoration: none;
			}
		div.content div.c2 div.autres_nouvelles a.archive{
			background: url(../images/suite_calendrier.gif) no-repeat left 3px;
			padding: 1px 25px 2px 18px;
			text-decoration: underline;
		}
		div.content div.c2 div.autres_nouvelles a.autres{
			background: url(../images/icones/suite.gif) no-repeat left 3px;
			padding: 4px 25px 2px 19px;
			text-decoration: underline;
		}
			
	/* archive nouvelles */
	
		div.content div.c2 div.archive{
			font: 10px Verdana, Arial, Helvetica, sans-serif;
			color: black;
			margin: 0 15px 10px 15px; padding: 0;
		}
		div.content div.c2 div.archive h3{
			margin: 0; padding: 0;
		}
		div.content div.c2 div.archive a{
			font: bold 10px Verdana, Arial, Helvetica, sans-serif;
			color: #779C6D;
			margin: 0; padding: 0;
		}
			div.content div.c2 div.archive a:hover{
				text-decoration: none;
			}		
		div.content div.c2 div.archive span.date{
			margin: 0; padding: 0;
		}				
	
	
	
	/* honneur - boite */
	.box {
		background-color:#E8E8D8;
		border:1px solid #BBBF9E;
		width: 449px;
		padding:10px;
		margin:10px 0;
	}
	
	ul.crochet li{
			list-style:none;
			background: url(../images/green.gif) no-repeat left;
			padding: 2px 0 3px 30px;
			margin: 0px 11px 0px -15px;	
	}
	.box .important { color:#FF0000;}
	
	
	
	
			
	/*liste page liste calendrier et detail*/							
	
	div.content div.c2 div#select_categorie_calendrier{
		margin: 10px 0 0 14px;
	}

	/* style generale */
	div.content div.static_content{
		margin: 0 14px; position:relative
	}
	
	a.districts {position:absolute; top:-2px; right:0;}
	*html a.districts {right:9px;}
	
	
	/*page biblio - position de l'image et des boutons*/
	.static_content img.biblio {
		float: right; 
		padding: 0 0 0 10px; 
		margin: 1em 0 0 0;
	}
	.static_content ul.biblio_bout {
		float: right;
		text-align:right;
		padding: 0 0 0 10px; 
		margin: 1em 0 0 0;
		
	}
	.static_content ul.biblio_bout li {
		list-style:none;
	}
	.static_content ul.biblio_bout li a{
		padding-right:5px;
	}
	
	/*--fin---*/
	
	
	div.content h2.sous_titre{
		margin: 5px 0 0 0px; padding :0;
		font: bold 14px Arial, Helvetica, sans-serif;
		color: #90b461;
		background: url(../images/pointille_sous_titre.gif) repeat-x left bottom;
		text-transform: uppercase;
	}
	div.content h2{
		font: bold 12px Verdana, Arial, Helvetica, sans-serif;
		color: #506b2f;
	}
	div.content h1{
		font: bold 12px Verdana, Arial, Helvetica, sans-serif;
		color: #506b2f;
	}
	div.content p{
		font: 11px Verdana, Arial, Helvetica, sans-serif;
		color: #50504d;
		text-align: justify;
	}
	div.content a{
		font: bold 11px Verdana, Arial, Helvetica, sans-serif;
		color: #779c48;
	}
	div.content a:hover{
		text-decoration: none;
	}	
	div.content a.lien_pdf{
		background: url(../images/icones/pdf.gif) no-repeat left 0px;
		padding: 3px 0 2px 20px;
	}
	div.content .photoleft{ margin-right: 5px; }
	div.content .photoright{ margin-left: 5px; }
	
	div.retour_top.last,
	div.retour_top_last{
		width: 458px; height: 34px;
		background: url(../images/retour_top.gif) no-repeat;
		margin: 0 auto;
	}
	div.retour_top.last a,
	div.retour_top_last a{
		text-decoration: none;
		display: block;
		margin-left: 390px;
		height: 34px;
	}	
	
	div.retour_top{
		width: 458px; height: 20px;
		background: url(../images/pointille_top.gif) no-repeat center center;
		margin: 0 auto;
	}
	div.retour_top a{
		display: none;
	}		
		
	div.retour{
		width: 80px; height: 33px;
		background: url(../images/retour.gif) no-repeat;
		margin: 0 0 0 10px;
	}
	div.retour a{
		text-decoration: none;
		display: block;
		height: 33px;
	}
	div.recyc-frigo{
		width: 287px; height: 60px;
		background: url(../images/recyc-frigo_logo.gif) no-repeat;
		margin: 0 0 0 10px;
	}
	div.recyc-frigo a{
		text-decoration: none;
		display: block;
		height: 60px;
	}		
	table, input, select, textarea {
		font-family:Verdana, Arial, Helvetica, sans-serif ;
		font-size:10px ;
		text-align:justify;
	}
	input.parcourir {
		padding:2px 0px;
	}
	input.casecocher {
		margin:0;
		width:13px;
		height:13px;
		overflow:hidden;
	}		
	table, tr, td{
		border: none;
		padding: 2px;
	}
	
div.content div.c{
	width: 754px;
	padding-bottom: 200px;
	background: white;
}
	div.content div.c h2#titre{
		width: 754px; height: 23px;
		margin: 0 0 1px 0; padding: 0;
		display: block;
		background: #669c48;
		background-repeat: no-repeat;
	}
	div.content div.c h2#titre span{
		display: none;
	}
	
/* FORMULAIRE communiquez avec nous */

.red{ color:#FF0000; }
.InputFullLength {
	width:98%;
}

/* FOOTER */
div.footer{
	clear: both;
	width: 754px;
	background: #c2be9c;
	margin: 0 10px 0 10px;
	text-align: center;
	padding: 10px 0;
}
div.footer p{
	margin: 0;
	padding: 3px;
	font: 10px Verdana, Arial, Helvetica, sans-serif;
	color: white;
}
div.footer p a{
	color: white;
	text-decoration: underline;
}
div.footer p a:hover{
	text-decoration: none;
}

div.item_menu{ 
	border-top: 1px #93967f solid;
	border-bottom: 1px #93967f solid;
	cursor: pointer;
}

div.item_menu_transparent{
 	opacity: 0.9;
	filter: alpha(opacity=90);
	-moz-opacity: 0.9;
}


/* MEMO */

a.lien_memo{
	color: #727461;
	font-weight: bold;
	text-decoration: underline;
}
a.lien_memo:hover{
	text-decoration: none;
}

#header_memo{
	height: 35px; width: 205px;
	position: absolute;
	top: 158px;
	right: 10px;
}
	#header_memo #titre_header{
		position: absolute;
		top: 16px;
		left: 7px;
		font: bold 11px Verdana, Arial, Helvetica, sans-serif;
		color: #773e00;
	}
		#header_memo #titre_header a{
			font: bold 11px Verdana, Arial, Helvetica, sans-serif;
			color: #773e00;
			text-decoration: none;
		}
#memo{
	width: 218px; height: 187px;
	position: absolute;
	top: 193px;
	right: -1px;
}
	#memo #content{
		width: 218px; height: 187px;
		position: absolute;
		top: 0; left: 0;
	}
		#memo #content ul{
			margin: 0;
			padding: 0;
			width: 160px;
			margin-left: 27px;
		}
			#memo #content ul li{
				margin: 0;
				padding: 0;
				list-style-type: none;
				margin-top: 13px;
				line-height: 0;
				margin-bottom: 1px;
			}
				#memo #content ul li a{
					font: bold 10px Verdana, Arial, Helvetica, sans-serif;
					color: #727461;
					margin: 0; padding: 0;
					display: block;
				}	
				#memo #content ul li a:hover{
					text-decoration: none;
				}
	#memo #btn_fermer{
		position: absolute;
		top: 148px; left: 13px;
	}	

div.static_content a.saison{ display:block; }

.special {color:#779c48; font-weight:bold;}

.erreur {background:#F5D3D6; color:red; padding:10px; border:1px solid red;}

.vThumb {float:left; margin-right:10px;}
.clear {display:block; clear:both;}

div.content .italic { font-style:italic;}

div.content .first { margin-top:0;}
div.content .bottom { margin-bottom:0;}

div.content .petite_note { font-size:10px;}
/* Camps de jour
---------------------------------------------------------------------------------*/

.souligne{
	border-bottom:5px solid;
}
.souligne_top{
	border-top:5px solid;
}
.titre_camps_jour{
	padding-bottom:5px;
	width:240px;
	border-bottom-color: #0099cc;
}
.soustitre_gauche_camps {
	text-align:left; border-top-color:#0099cc;
	padding-top:15px;
	margin-top:20px;
}
.soustitre_droite_camps {
	text-align:left; border-top-color:#ffcc00;
	padding-top:15px;
	margin-top:20px;
}


.colonnes2 {overflow:hidden; height:1%;}
.col1 { float:left; width:220px; margin-right:15px;}
.col2 { float:left; width:220px;}
.col1 .box, .col2 .box {width:200px; margin:0 0 20px 0; border:3px solid #000066; background-color:#fff; text-align:left;}
.col1 .box p, .col2 .box p {text-align:left;}

.camps_jour {
	width:470px;
	border:3px solid #ffcc00;
	font-size:11px;
}
.camps_jour h4 {
	text-align:center;
}
.camps_jour td {
	border:3px solid #ffcc00;
	padding:5px;
}
.camps_jour ul {
	margin-top:0;
	margin-bottom:0;
}