/* 	Ville de St-Hyacinthe CSS  (Médias:Screen) */

/*
	==============================
	= Couleurs					 =
	==============================
	
	Gris (background)			: #666666;
	Gris (texte)				: #333333;
	Bleu (ville)				: #0e3652;
	Orange(affaire)				: #eb6a0a;
	Gris(service)				: #3f3f3f;
	Aqua(loisir)				: #009999;
	Vert(tourisme)				: #8da61b;
*/


/*#######################################################*/	
/*	Style de Base 										#*/
/*#######################################################*/	

	body{margin:0;padding:0; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px;}
	a{outline:none}
	
	
	div.hr {height: 20px; background: #fff url(../images/hr_pointille.jpg) repeat-x scroll left;}
	div.hr hr {display: none;}
	a.link_orange{color:#eb6a0a; text-decoration:underline}
	a:hover.link_orange{color:#009999; text-decoration:underline}
	a.link_bleu{color:#0e3652; text-decoration:underline}
	a.link_bleu:hover{color:#666666;}
	a.link_bleu2{color:#0e3652; text-decoration:none}
	a.link_bleu2:hover{color:#666666; text-decoration:underline}
	
	.couleur_services{color:#3f3f3f}
	.couleur_loisirs{color:#009999}
	.margintop_0{margin-top:0}
	p.archive_btn{margin:0; padding:0; position:relative; top:-25px; margin-left:590px; text-transform:uppercase}
	.hidden-container{display:none}
	.floatleft{padding:0 10px 10px 0}
	
	/* Hyperliens */
	a.link_ville{color:#0e3652; text-decoration:underline}
	a:hover.link_ville{color:#333333;}
	a.link_services{color:#666666; text-decoration:underline}
	a:hover.link_services{color:#333333;}
	a.link_affaires{color:#eb6a0a; text-decoration:underline}
	a:hover.link_affaires{color:#333333;}
	a.link_loisirs{color:#009999; text-decoration:underline}
	a:hover.link_loisirs{color:#333333;}
	a.link_tourisme{color:#8da61b; text-decoration:underline}
	a:hover.link_tourisme{color:#333333;}
	a.link_autres{color:#000000; text-decoration:underline}
	a:hover.link_autres{color:#333333;}
	
	

/*#######################################################*/	
/*	Contenu principal									#*/
/*#######################################################*/	

	#contenant{position:relative; margin:0 auto; top:2px; padding:0; width:900px;}
	#banner{position:relative; margin:0 auto; padding:0; width:900px;}
	
	#bloc{position:relative; margin:0 auto; top:9px; padding:0; width:900px; height:95px; border:0px solid #000}
	#bloc_section{float:left; padding:0; margin:0 9px 0 0}
	
	#bloc_ville{float:left; padding:0; margin:0 10px 0 0}
	#bloc_services{float:left; padding:0; margin:0 10px 0 0}
	#bloc_affaires{float:left; padding:0; margin:0 10px 0 0}
	#bloc_loisirs{float:left; padding:0; margin:0 10px 0 0}
	#bloc_tourisme{float:left; padding:0; margin:0}
	
	#contenu_accueil{position:relative; margin:0px auto; top:15px; padding:0; width:900px;}
	#contenu{position:relative; margin:0px auto; top:15px; padding:0; width:900px;}
	
	#collone_gauche{float:left; margin:0; padding:0px 0 15px 0; width:225px;}
	#collone_gauche p.spacer{border-top:3px dotted #999999; padding:0; margin:20px 0 20px 0}
	#collone_gauche h6{background:url(../images/arrow_titre.gif) 0 3px no-repeat; font-size:1.2em; text-transform:uppercase; color:#666666; padding-left:15px; margin:0 0 1em 0}
	
	#collone_droite{float:left; margin:0 0 0 10px; padding:0px 0 15px 0; width:665px; border:0px solid #000}
	#collone_droite h1.categorie{background:url(../images/arrow_titre.gif) 0 3px no-repeat; font-size:1.2em; text-transform:uppercase; color:#666666; padding-left:15px; margin:0 0 0.5em; font-weight:bold}
	#collone_droite h1{font-size:1.3em; text-transform:uppercase; margin:0 0 1em 0;}
	#collone_droite h2{font-size:1.2em; text-transform:uppercase; margin:0 0 1em;}
	#collone_droite h3{font-size:1.1em; text-transform:uppercase;}
	#collone_droite h6{background:url(../images/arrow_titre.gif) 0 3px no-repeat; font-size:1.2em; text-transform:uppercase; color:#666666; padding-left:15px; margin:0 0 0.5em 0}
	#collone_droite p.spacer{border-top:3px dotted #999999; padding:0; margin:20px 0 10px 0; width:40%}
	
	
		
		#collone_droite h2.communique_titre{font-size:1.2em; color:#0E3652; margin:0; padding:0; font-weight:bold;}
		#collone_droite p.communique_date{font-size:0.9em; color:#000000; margin:0.5em 0 0 0; padding:0; font-weight:bold}
		#collone_droite p.communique_texte{font-size:1em; color:#000000; margin:0.5em 0 0.5em 0; padding:0; font-weight:normal; line-height:140%}
		#collone_droite p.texterouge{font-size:1em; color:#FF0000; margin:0.5em 0 0.5em 0; padding:0; font-weight:normal; line-height:140%}
		
		#collone_droite h2.affaire_titre{font-size:1.2em; color:#3F3F3F; margin:0; padding:0; font-weight:normal; text-decoration:underline; text-transform:none}
		#collone_droite p.affaire_date{font-size:0.9em; color:#000000; margin:0.5em 0 0 0; padding:0; font-weight:bold}
		#collone_droite p.affaire_texte{font-size:1em; color:#000000; margin:0.5em 0 0.5em 0; padding:0; font-weight:normal; line-height:140%}
	
		#a_surveiller{width:655px; border:1px solid #999999}
		#a_surveiller li{list-style:square; padding:0px; margin-left:30px; color:#666666; }
		/*#a_surveiller li a{color:#0e3652; text-decoration:underline}
		#a_surveiller li a:hover{color:#eb6a0a}*/
		.bg_gris{background:#CCCCCC}
		
		div.row {float: left; margin: 0; padding: 0; border:0px solid #000}
		div.colone_gauche {float: left; width:495px; margin: 0; padding: 0;}
		div.colone_droite {float: left; width:150px; margin: 0 0 0 10px; padding: 0; text-align:center}
		div.colone_gauche_cal {float: left; width:455px; margin: 0; padding: 0; min-height:280px; height:auto !important; height:280px;}
		div.colone_droite_cal {float: left; width:190px; margin: 0 0 0 10px; padding: 0; text-align:right}
		div.row h3{font-size:1.1em; text-transform:uppercase;}
		div.row h6{background:url(../images/arrow_titre.gif) 0 3px no-repeat; font-size:1.2em; text-transform:uppercase; color:#666666; padding-left:15px; margin:0 0 0.5em 0}
		div.row p, div.row li{font-size:1em; color:#000000; line-height:140%; margin-top:0.5em}
	
		
			/*Couleur des éléments de section*/
			/*H1*/
			.section_services #collone_droite h1{color:#3F3F3F; font-weight:bold}
			.section_ville #collone_droite h1{color:#0e3652; font-weight:bold}
			.section_tourisme #collone_droite h1{color:#8da61b; font-weight:bold}
			.section_affaires #collone_droite h1{color:#eb6a0a; font-weight:bold}
			.section_loisirs #collone_droite h1{color:#009999; font-weight:bold}
			/*H2*/
			.section_services #collone_droite h2{color:#666666; font-weight:normal}
			.section_ville #collone_droite h2{color:#666666; font-weight:normal}
			.section_tourisme #collone_droite h2{color:#666666; font-weight:normal}
			.section_affaires #collone_droite h2{color:#666666; font-weight:normal}
			.section_loisirs #collone_droite h2{color:#666666; font-weight:normal}
			.section_evenement #collone_droite h2{color:#666666; font-weight:normal}
			/*A*/
			.section_services #collone_droite a{color:#3f3f3f; font-weight:normal}
			.section_services #collone_droite a:hover{color:#666666; font-weight:normal}
			.section_ville #collone_droite a{color:#0e3652; font-weight:normal}
			.section_ville #collone_droite a:hover{color:#666666; font-weight:normal}
			.section_tourisme #collone_droite a{color:#8da61b; font-weight:normal}
			.section_tourisme #collone_droite a:hover{color:#666666; font-weight:normal}
			.section_affaires #collone_droite a{color:#eb6a0a; font-weight:normal}
			.section_affaires #collone_droite a:hover{color:#666666; font-weight:normal}
			.section_loisirs #collone_droite a{color:#009999; font-weight:normal}
			.section_loisirs #collone_droite a:hover{color:#666666; font-weight:normal}
			
			/*Plan du site*/	
			/*Ville*/
			#plandusite_ville h2, #plandusite_ville h3, #plandusite_ville a, #plandusite_ville li{color:#0e3652}
			#plandusite_ville a:hover{color:#333333;}
			/*Services aux citoyens*/
			#plandusite_services h2, #plandusite_services h3, #plandusite_services a, #plandusite_services li{color:#666666}
			#plandusite_services a:hover{color:#333333;}
			/*Affaires*/
			#plandusite_affaires h2, #plandusite_affaires h3, #plandusite_affaires a, #plandusite_affaires li{color:#eb6a0a}
			#plandusite_affaires a:hover{color:#333333;}
			/*Loisirs et culture*/
			#plandusite_loisirs h2, #plandusite_loisirs h3, #plandusite_loisirs a, #plandusite_loisirs li{color:#009999}
			#plandusite_loisirs a:hover{color:#333333;}
			/*Tourisme*/
			#plandusite_tourisme h2, #plandusite_tourisme h3, #plandusite_tourisme a, #plandusite_tourisme li{color:#8da61b}
			#plandusite_tourisme a:hover{color:#333333;}
			/*Autres*/
			#plandusite_autres h2, #plandusite_autres h3, #plandusite_autres a, #plandusite_autres li{color:#000000}
			#plandusite_autres a:hover{color:#333333;}
			
		#collone_droite h2.calendrier_titre_ville{font-size:1.2em; color:#0E3652; margin:0; padding:0; font-weight:bold;}	
		#collone_droite h2.calendrier_titre_loisirs{font-size:1.2em; color:#009999; margin:0; padding:0; font-weight:bold;}	
		
	
	
/*#######################################################*/	
/*	Menu												#*/
/*#######################################################*/	

	#menu{position:relative; top:10px; margin:0; padding:20px 0 10px 0; width:225px;}	
	#menu2{position:relative; top:10px; margin:0; padding:0; width:225px;}
	
	#menu ul{margin:0; padding:0 0 10px 0; list-style-type:none; border:0px solid #ff0000; width:224px}
	#menu ul li{padding:10px 0 10px 0px; margin:0 0 0 20px; border-bottom:1px dotted #ffffff;}
	#menu ul li a{display:block; color:#ffffff; text-transform:uppercase; text-decoration:none}
	#menu ul li ul{display:none; width:90%}
	
	#menu ul li.firstmenu{margin:0; padding:0; font-size:1px; border:0}
	#menu ul li.menu_selected{background:#ffffff; padding:5px 0 5px 0px; margin:0 0 0 20px;}
	#menu ul li.menu_selected{padding:5px 0 5px 5px; margin:0 0 0 20px;}
	#menu ul li.menu_selected a{color:#000000; font-weight:bold}
	#menu ul li.menu_selected ul li{padding:5px 0 5px 0px; margin:0 0 0 20px; color:#ff0000;}
	#menu ul li.menu_selected ul li a{color:#000000; text-transform:none; text-decoration:none; font-weight:normal}
	#menu ul li.menu_selected ul li a:hover{text-decoration:underline;}
	.menu_unselected{background:transparent}
	#menu ul li.menu_avant{border-bottom:0px dotted #ffffff}
	
	/* Classes des menus */
	/* Ville */
	.menu_ville{color:#ffffff; background:url(../images/ville/menu_bas.gif) bottom no-repeat #0e3652; }
	#menu.menu_ville ul li.menu_selected ul li a:hover{color:#0e3652}
	#menu.menu_ville ul li a:hover{color:#eb6a0a}
	
	/* Services au citoyens */
	.menu_services{color:#ffffff; background:url(../images/services/menu_bas.gif) bottom no-repeat #3f3f3f}
	#menu.menu_services ul li.menu_selected ul li a:hover{color:#3f3f3f}
	#menu.menu_services ul li a:hover{color:#eb6a0a}
	
	/* Affaires */
	.menu_affaires{color:#ffffff; background:url(../images/affaires/menu_bas.gif) bottom no-repeat #eb6a0a}
	#menu.menu_affaires ul li.menu_selected ul li a:hover{color:#eb6a0a}
	#menu.menu_affaires ul li a:hover{color:#333333}
	
	/* Loisirs et culture */
	.menu_loisirs{color:#ffffff; background:url(../images/loisirs/menu_bas.gif) bottom no-repeat #009999;}
	#menu.menu_loisirs ul li.menu_selected ul li a:hover{color:#009999}
	#menu.menu_loisirs ul li a:hover{color:#333333}
	
	/* Tourisme */
	.menu_tourisme{color:#ffffff; background:url(../images/tourisme/menu_bas.gif) bottom no-repeat #8da61b}
	#menu.menu_tourisme ul li.menu_selected ul li a:hover{color:#8da61b}
	#menu.menu_tourisme ul li a:hover{color:#333333}
	
	
/*#######################################################*/	
/*	Header												#*/
/*#######################################################*/	

	#header{background:#666666; width:100%; height:30px;}
	#contenant_header{position:relative; margin:0 auto; top:3px; padding:0; width:900px; height:30px;}
	
	#icons{float:left;}
	#icons ul{margin:0; padding:0; list-style:none}
	#icons ul li{display:inline; float:left; padding:0 0 0 10px}
	#icons ul li.first{display:inline; float:left; padding:0px}
	#icons ul li a.icon_accueil{display:block; width:25px; height:20px; background:url(../images/icon_accueil.gif) 0 0 no-repeat;}
	#icons ul li a:hover.icon_accueil{background:url(../images/icon_accueil.gif) -25px 0 no-repeat;}
	#icons ul li a.icon_contact{display:block; width:24px; height:20px; background:url(../images/icon_contact.gif) 0 0 no-repeat;}
	#icons ul li a:hover.icon_contact{background:url(../images/icon_contact.gif) -24px 0 no-repeat;}
	#icons ul li a.icon_bottin{display:block; width:25px; height:20px; background:url(../images/icon_bottin.gif) 0 0 no-repeat;}
	#icons ul li a:hover.icon_bottin{background:url(../images/icon_bottin.gif) -25px 0 no-repeat;}
	#icons ul li a.icon_information{display:block; width:25px; height:20px; background:url(../images/icon_informations.gif) 0 0 no-repeat;}
	#icons ul li a:hover.icon_information{background:url(../images/icon_informations.gif) -25px 0 no-repeat;}
	#icons ul li span{display:none;}
	#icons .texte{font-size:1em; text-transform:uppercase; margin:0; padding:4px 0 0 5px}
	#icons .texte a{color:#ffffff; text-decoration:none; font-weight:bold;}
	#icons .texte a:hover{text-decoration:underline;}
	
	#recherche{float:right; text-align:right}
	#recherche div{float:left}
	#recherche img.loupe{padding:1px 10px 0 0;}
	#recherche input.submit{margin:0px 0 0 10px;}
	#recherche input.text{color:#666666; padding:2px 5px 2px 5px; margin:0; font-size:12px; border:0}
	
	#linktop{position:relative; margin:0 auto; top:3px; padding:0; width:900px; height:20px;}
	#linktop p{font-size:0.9em; text-transform:uppercase; margin:0; padding:0; float:right}
	#linktop p a{color:#333333; text-decoration:none; font-weight:normal;}
	#linktop p a:hover{color:#666666; text-decoration:underline;}
	#linktop a.linkadmin{color:#eb6a0a}
	


/*#######################################################*/	
/*	Footer												#*/
/*#######################################################*/		

	#footer{position:relative; background:#666666; width:100%; height:30px; margin:0 auto; top:30px}
	#contenant_footer{position:relative; margin:0 auto; top:4px; padding:0; width:900px; height:25px;}
	
	#footer #plan_du_site{float:right; text-align:right}
	#footer #plan_du_site p{font-size:1em; text-transform:uppercase; margin:0; padding:4px 0 0 0}
	#footer #plan_du_site p a{color:#ffffff; text-decoration:none; font-weight:normal;}
	#footer #plan_du_site p a:hover{text-decoration:underline;}
	


/*#######################################################*/	
/*	Copyright											#*/
/*#######################################################*/	

	#copyright{margin:50px auto 0 auto; padding:0 0 10px 0; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; text-align:center; border:0px solid #000}
	#copyright p{margin:0.5em; padding:0; color:#666666}
	#copyright p a{color:#333333; text-decoration:underline}
	#copyright p a:hover{color:#666666; text-decoration:none}
	
	
	
	
	
	
	
	
	
	
	
/*#######################################################*/	
/*	Classe (pour l'effet de shine sur les images)		#*/
/*#######################################################*/	
	
	.gradualshine{filter:alpha(opacity=99);-moz-opacity:0.99; border:0}
	.gradualshinefade{filter:alpha(opacity=80);-moz-opacity:0.8; border:0}	
	
	
/*#######################################################*/	
/*	Classes pour les scroll Divs						#*/
/*#######################################################*/	

	#container_scroll{position:relative; top:-10px; left:0px; width:633px; height:250px; overflow: hidden; border:1px solid #999999; padding:10px; margin-bottom:20px}
	#content_scroll{position:relative; width:598px; left:5px; padding-bottom:30px}
	#scrollArea {position:absolute; margin-left:625px; margin-top:3px; height:247px; width:15px; border:1px solid #999999; overflow:hidden; z-index:100}
	#scroller {position:absolute; top:-1px; width:15px; background:#cccccc; border-top:1px solid #998c7b; border-bottom:1px solid #999999;}	
	
/*#######################################################*/	
/*	Classes Tiny										#*/
/*#######################################################*/		
	.tiny_img_gauche{float:left; padding:0 10px 10px 0}
	.tiny_img_droite{float:right; padding:0 0 10px 10px}