/* CSS Document */

/* Ceci est pour les iDevice. Sans cela, quand on est sur iPhone et qu'on tourne en mode paysage, la police grossit.
Ceci permet de garder la police � la m�me taille (tout en gardant l'habilet� de zoomer avec le "pinch").
http://stackoverflow.com/questions/2710764/preserve-html-font-size-when-iphone-orientation-changes-from-portrait-to-landsca
*/
html {
    -webkit-text-size-adjust: 100%;
	height: 100%; /* needed for #container min-height */
}

body {
	margin: 0px; /* Pour enlever les marges par d�faut du body. */	
	height: 100%; /* needed for #container min-height */
	background-color: #FFFFFF;
}

/* IDs (#) G�N�RAL ----------------------------------------------------------------------------------------------------------------------------------------------- */

/* Les diff�rents containers ----------------------------------------------- */
#container {
	/* Needed for #menu_bottom positioning
	Start: */
	position:relative;
	height:100%; /* IE6: treaded as min-height*/
	min-height:100%; /* real browsers */
	/* End. */
	background-color: #f5eaff; /* To fill out the space when the content doens't reach the bottom of the screen. */
}

/* Needed for #menu_bottom positioning. */
html>body #container{	
	height:auto; !important /* This is for all browser except ie6 */
	min-height:100%; /* THIS IS FOR IE7 IT NEEDS TO BE REDEFINED AGAIN */
}/* not ie6- */

#content {
	xpadding-top: 282px; /* To make room for the top_menu that has position: fixed*/
	padding-bottom: 120px; /* Same height as #menu_bottom. */	
}

#top_menu {
	xposition: fixed;
	xwidth: 100%; /* Because of #content position: fixed, you must put a width of 100%. */
	background-color: rgba(255, 255, 255, 1);
}

#top_menu_contact {
	float: right;
	margin-top: 5px;
	margin-right: 20px;
	margin-bottom: -35px;
}

#top_menu_contact_address {
	font-size:12px;
	font-weight: bold;
	color: #6e2168;
	font-family: 'AndikaBasicRegular', Arial, sans-serif;
}

#top_menu_contact_icons {	
	float: right;
	margin-top: 5px;
    margin-right: -5px; /* So that the shape of the circle is a bit more to the right than the text of the address. */
}

#top_menu_contact_icons img{
	width: 40px;
}

/*
Old version:
#top_menu_logo {
	text-align: center;
	//Don't put it here: it doesn't work. I don't know why exactly. But because of float: right in #top_menu_contact, sometimes, it works, sometimes it doesn't. Instead put a negative margin-bottom in the previous element: 
	#top_menu_contact.
	
	xmargin-top: -20px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 25px;
	padding-right: 20px;
	padding-left: 20px;
	max-width: 492px; // Use max-width so that when you make the window smaller, the logo becomes smaller. Don't use min-height to make sure the logo has always the right ratio.
	xbackground-color: red
}

#top_menu_logo img {
	// Use this so that the logo can become smaller when the window become smaller. Used with #top_menu_logo max-width. 
	width: 100%;
	height: 100%;
}

#top_menu_logo_column {
	display: none;
	text-align: center;
	max-width: 265px;
	margin-top: 10px;
	margin-right: auto;
	margin-left: auto;	
}

#top_menu_logo_column img {
	// Use this so that the logo can become smaller when the window become smaller. Used with #top_menu_logo max-width.
	width: 100%;
	height: 100%;
}
*/

#top_menu_logo_responsive {
	cursor: pointer;
	text-align: center;
	/* Don't put it here: it doesn't work. I don't know why exactly. But because of float: right in #top_menu_contact, sometimes, it works, sometimes it doesn't. Instead put a negative margin-bottom in the previous element: 
	#top_menu_contact.
	*/
	xmargin-top: -20px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 5px;
	padding-right: 20px;
	padding-left: 20px;
	width: 492px;
	height: 134px;
	background-image: url("../images/logo_small.png");
	background-repeat: no-repeat;
	background-size: auto 100%; /* The bg image should be as hight as the div. Use auto for the x so that the image remains in the right ratio. */
	background-position: center center;
}

#top_menu_text {
	text-align: right;	
}

#top_menu_text a {
	/* You want to use a tags for the links because it's better than using div for links (because that's what they're used for)
	But to get the line effect for the rollover (that's way below), you should use "block".
	The reason is that the a tag will be the ones determining the height of the menu and not the parent.
	This way, no matter the browser, you always know that the line will be at the right distance.
	For example, the font size is not exactly the same in Chrome vs  Firefox.
	So if you use padding-bottom to set the line (box-shadow, see below) in the a tag then you have to use height on the parent and they might not always align perfectly depending on the browser.
	Witht he block method, since everything is based on the a tag (using padding-bottom and top), you know it will always work: you don't have to align anything.
	By using block, you make the a tag padding bottom and TOP have an effect on the parent.
	Otherwise the a tag are inline by default and the padding will not affect the parent (which you want).
	*/
	/* So that it take sonly the space of the text and not the full width of the parent.
	Useful for the responsive menu so that the underline doesn't take the full width of the parent, only the width of the text.
	*/
	display: inline-block;
	padding-top: 35px;
	padding-bottom: 25px;
	font-size:16px;
	text-decoration:none;
	color:#616161;
	font-family: 'ITCAvantGardeGothicStdMdCn', Arial, sans-serif;
}

#top_menu_text a:hover{
	color:#6e2168;
	/* To have a "border", but that's inside the div and doesn't change or push the size of anything else. Use a shadow.
	https://stackoverflow.com/questions/9601357/placing-border-inside-of-div-and-not-on-its-edge
	https://css-tricks.com/snippets/css/css-box-shadow/
	*/
	-webkit-box-shadow:inset 0px -6px 0px -3px #6e2168;
	-moz-box-shadow:inset 0px -6px 0px -3px #6e2168;
	box-shadow:inset 0px -6px 0px -3px #6e2168;
}

#top_menu_text a.selected{
	color:#6e2168;
	/* To have a "border", but that's inside the div and doesn't change or push the size of anything else. Use a shadow.
	https://stackoverflow.com/questions/9601357/placing-border-inside-of-div-and-not-on-its-edge
	https://css-tricks.com/snippets/css/css-box-shadow/
	*/
	-webkit-box-shadow:inset 0px -6px 0px -3px #6e2168;
	-moz-box-shadow:inset 0px -6px 0px -3px #6e2168;
	box-shadow:inset 0px -6px 0px -3px #6e2168;
}

#top_menu_text a.top_menu_texte_dropdown_item_text {
	padding-top: 10px;
	padding-bottom: 10px;
	color: #FFFFFF;
}

#top_menu_text a:hover.top_menu_texte_dropdown_item_text {
	color: #ff88a9;
		/* To have a "border", but that's inside the div and doesn't change or push the size of anything else. Use a shadow.
	https://stackoverflow.com/questions/9601357/placing-border-inside-of-div-and-not-on-its-edge
	https://css-tricks.com/snippets/css/css-box-shadow/
	*/
	-webkit-box-shadow:inset 0px -6px 0px -3px #ff88a9;
	-moz-box-shadow:inset 0px -6px 0px -3px #ff88a9;
	box-shadow:inset 0px -6px 0px -3px #ff88a9;
}

#top_menu_text_button_responsive_menu {
	display: none;
	cursor: pointer;
	width: 97px;
	height: 12px;	
	/* To get rid of default look;
	Begin:
	*/
	padding: 20px;
	margin-right: 10px;
	border: none;
	background: none;
	/* End. */
	/* To position text in the button relative to the bg image. 
	Start: */
	line-height: 1px;
	text-align: left;
	/* End. */
	font-size:18px;
	text-decoration:none;
	color:#000000;
	font-family: 'ITCAvantGardeGothicStdMdCn', Arial, sans-serif;
	background-image: url("../images/menu_icon.png");
	background-repeat: no-repeat;
	/* The four-value syntax for background-position. Check this site for support:
	https://css-tricks.com/almanac/properties/b/background-position/*/
	background-position: right 10px center; /* Really important to make sure image is centered no matter what padding is used. */
	xbackground-color: red;
}

#bottom {
	/* IMPORTANT: If the text is too long, it will make the div longer and will screw up the size on mobile.
	Put overflow hidden in case.
	Go at the very end of this document for a way to spot elements that might screw up the size on mobiel.
	*/
	overflow: hidden;
	position: absolute;
	bottom: 0px;
	width: 100%;
	height: 120px;
	background-color: #6e2168
}

#menu_bottom {
	/* To center the text horizontally. */
	text-align: center;
	/* To center the text vertically.
	https://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers
	Start:
	*/
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	/* End */
}

#menu_bottom_copyright {
	padding: 5px;
	font-size:14px;
	line-height: 16px; /* Height of #bottom so that the text is centered. */
	font-family: 'ITCAvantGardeGothicStdMedium', Arial, sans-serif;
	color: #FFFFFF;
}

#menu_bottom_copyright a{
	color: #FFFFFF;
}

/*	IDs (#) SP�CIFIQUES ----------------------------------------------------------------------------------------------------------------------------------------------- */

/* CLASSES G�N�RALES POLICE ------------------------------------------------------------------------------------------------------------------------------------------------- */
.mission_police_bouton_texte {
	font-family: Verdana, Geneva, sans-serif;	
	font-size: 14px;
}

/* CLASSES G�N�RALES ------------------------------------------------------------------------------------------------------------------------------------------------------------ */
.clear_float {
	clear: both;
}

.text_w_icon {
	display: inline-block;
	padding-left: 50px;
    background-repeat: no-repeat;
    background-position: left top;
}

/* To make sure the target takes into account the fixed menu.
https://stackoverflow.com/questions/4086107/html-positionfixed-page-header-and-in-page-anchors
https://css-tricks.com/hash-tag-links-padding/
https://www.w3schools.com/cssref/sel_before.asp
*/
/*
a.anchor { 
  padding-top: 5px;
}

a.anchor:before { 
  display: block;
  content: "";
  height: 5px;
  margin-top: -5px;
}
*/

a.anchor_plus { 
  padding-top: 20px;
}

a.anchor_plus:before { 
  display: block;
  content: "";
  height: 20px;
  margin-top: -20px;
}


/* Both this class and the animation class must be classes in order for the animation to work (and not a combination of id and class). */
.top_menu_text_items {	
	xoverflow: hidden; /* DO NOT put here: only in the media query. Because the dropdown menus need to overflow. */
	text-align: center; /* To "overwrite" parent #top_menu_text text-align: right used for the menu button. */
	border-style: solid;
	border-collapse: collapse;
	border-color: #6e2168;
	border-width: 0px 0px 4px 0px;
}

.top_menu_text_item {
	/* To center items: parent text-align: center and child: display: inline-block.
	https://stackoverflow.com/questions/1269245/centering-floating-divs-within-another-div
	*/
	display: inline-block;
}

.top_menu_text_item_with_dropdown {
	position: relative; /* Important: so that the submenus (dropdown) are centered relativaly to their parent. */
	cursor: pointer;	
	padding-right: 11px;
	padding-top: 35px;
	padding-bottom: 25px;
	font-size:16px;	
	color:#616161;	
	font-family: 'ITCAvantGardeGothicStdMdCn', Arial, sans-serif;
	background-image: url("../images/dropdown_open_icon.png");
	background-repeat: no-repeat;
	background-position: right 58%;		
}

.top_menu_text_item_with_dropdown_selected {
	color:#6e2168;
	/* To have a "border", but that's inside the div and doesn't change or push the size of anything else. Use a shadow.
	https://stackoverflow.com/questions/9601357/placing-border-inside-of-div-and-not-on-its-edge
	https://css-tricks.com/snippets/css/css-box-shadow/
	*/
	-webkit-box-shadow:inset 0px -6px 0px -3px #6e2168;
	-moz-box-shadow:inset 0px -6px 0px -3px #6e2168;
	box-shadow:inset 0px -6px 0px -3px #6e2168;
}

.top_menu_text_dropwdown {
	display: none;
	position: absolute;
	/* To center horizontally 
	https://stackoverflow.com/questions/16758102/how-do-i-horizontally-center-an-absolute-positioned-element-inside-a-100-width
	Start:
	*/
	width: 140px;
	left: 50%;
	margin-left: -80px; /* Half with of width (+ left and right padding) */
	/* End. */	
	margin-top: 25px;
	padding-top: 10px;
	padding-right: 10px;
	padding-left: 10px;
	padding-bottom: 5px; /* Avec le 5px de plus de .top_menu_text_dropdown_item, �a fait 10px en tout.*/
	background-color: #6e2168;
}

.top_menu_text_item_with_dropdown_category {
	background-repeat: no-repeat;
	background-position: right 60%;	
}

.top_menu_text_dropdown_item {
	padding-bottom: 5px;
}

.top_menu_text_item_not_first {
	margin-left: 20px;
}

.block_image_text_container {
	xbackground-image: url("../images/local_big.jpg");	
    background-repeat: no-repeat;
    background-position: left top;
	background-size: auto 100%; /* The bg image should be as hight as the div. Use auto for the x so that the image remains in the right ratio. */
	background-color: #ffffff;
}

.block_image_text_zone_text_container {	
	/* This parent should not have a max-width so that it goes all the way to the right (the left side is taken care of with margin-left: 50%.)
	The child .block_image_text_zone_text should have one though if you want to limit the width. */
	min-height: 400px;
	margin-left: 50%;
	background-color: #ffffff;
}

.block_image_text_zone_text {	
	max-width: 580px;
	padding-top: 50px;
	padding-right: 60px;
	padding-bottom: 50px;
	padding-left: 90px;
	xbackground-color: purple;	
}

.block_image_text_zone_text_main_title {	
	margin-bottom: 25px;
	font-size:38px;
	font-style: italic;
	font-family: 'ITCAvantGardeGothicStdMedium', Arial, sans-serif;
	color: #4f1a1a;
}

.block_image_text_zone_text_main_subtitle {	
	margin-bottom: 25px;
	font-size:30px;
	font-style: italic;
	font-family: 'ITCAvantGardeGothicStdMedium', Arial, sans-serif;
	color: #4f1a1a;
}

.block_image_text_zone_text_main_text {
	font-size:14px;
	font-family: 'ITCAvantGardeGothicStdMedium', Arial, sans-serif;
	line-height: 30px;
}

.block_text_bg_image_container {
	min-height: 200px;
	
	background-repeat: no-repeat;
    background-position: right top;
	background-color: #FFFFFF;
}

.block_text_bg_image_zone_text {
	max-width: 800px;
	margin-right: 6%;
	margin-left: 6%;
	padding-bottom: 40px;
}

.block_text_bg_image_zone_text_centered {
	max-width: 1600px;
	text-align: center; /* To center the elements. */
	xmargin-right: auto; /* To center the div itself. */
	xmargin-left: auto; /* To center the div itself. */
}

.block_text_bg_image_zone_text_main_title {
	text-align: left; /* To "cancel" text-align: center of .block_text_bg_image_zone_text_centered.*/
	padding-top: 30px;
	padding-bottom: 25px;
	font-size:32px;
	font-family: 'ITCAvantGardeGothicStdMedium', Arial, sans-serif;
	color: #4f1a1a;
}

.block_text_bg_image_zone_text_main_title_centered {
	/* Since, when centered, the parent #block_text_bg_image_zone_text "loses" its 6% left and right margins, you need to put it back here. */
	xmargin-right: 6%;
	xmargin-left: 6%;
	margin-right: 20px;
	margin-left: 20px;
}

.block_text_bg_image_zone_text_main_subtitle {
	text-align: left; /* To "cancel" text-align: center of .block_text_bg_image_zone_text_centered.*/	
	padding-bottom: 40px;
	font-size:16px;
	font-family: 'ITCAvantGardeGothicStdMedium', Arial, sans-serif;
	color: #4f1a1a;
}

.block_text_bg_image_zone_text_main_subtitle_centered {
	/* Since, when centered, the parent #block_text_bg_image_zone_text "loses" its 6% left and right margins, you need to put it back here. */
	xmargin-right: 6%;
	xmargin-left: 6%;
	margin-right: 20px;
	margin-left: 20px;
}

.block_text_bg_image_zone_text_main_text {
	text-align: left; /* To "cancel" text-align: center of .block_text_bg_image_zone_text_centered.*/
	margin-bottom: 25px;
	font-size:14px;
	font-family: 'ITCAvantGardeGothicStdMedium', Arial, sans-serif;
	line-height: 30px;
}

.block_text_bg_image_zone_text_main_text strong{
	font-weight:normal; /* To cancel "strong" because it doesn't work well in ie and ff because the font doesn't have a bold version. */	
	font-size:16px; /* To simulate bold, the font is simply put a bit bigger. */
}

.block_text_bg_image_zone_text_main_text_centered {
	/* Since, when centered, the parent #block_text_bg_image_zone_text "loses" its 6% left and right margins, you need to put it back here. */
	xmargin-right: 6%;
	xmargin-left: 6%;
	margin-right: 20px;
	margin-left: 20px;
}

.block_text_bg_image_zone_text_text_container {	
	text-align: left; /* To "cancel" text-align: center of .block_text_bg_image_zone_text_centered.*/	
}

.block_text_bg_image_zone_text_text_container_centered {
	display: inline-block; /* Use this to center the elements. Must be used with text-align: center on .block_text_bg_image_zone_text_centered. */
	vertical-align: top; /* Without this, the first lement gets pushed down because of display: inline-block;*/
	max-width: 750px;
	padding-right: 20px;
    padding-left: 20px;
}

.block_text_bg_image_zone_text_image {	
	max-width: 300px; /* Use max-width so that when you make the window smaller, the image becomes smaller. Don't use min-height to make sure the image has always the right ratio.*/
	/* To center image.
	Start: */
	margin-right: auto;
    margin-left: auto;
	/* End. */
	margin-top: 20px;
	margin-bottom: 20px;
}

.block_text_bg_image_zone_text_image img {
	/* Use this so that the logo can become smaller when the window become smaller. Used with #top_menu_logo max-width. */
	width: 100%;
	height: 100%;
}

.block_text_bg_image_zone_text_title {
	font-size:22px;
	font-family: 'ITCAvantGardeGothicStdMedium', Arial, sans-serif;
}

.block_text_bg_image_zone_text_subtitle {
	font-size:17px;
	font-family: 'ITCAvantGardeGothicStdMedium', Arial, sans-serif;
}

.block_text_bg_image_zone_text_date {
	font-size:12px;
	font-family: 'ITCAvantGardeGothicStdMedium', Arial, sans-serif;
	color: #666666;
}

.block_text_bg_image_zone_text_text {
	padding-top: 20px;
	padding-bottom: 20px;
	font-size:14px;
	font-family: 'ITCAvantGardeGothicStdMedium', Arial, sans-serif;
	line-height: 24px;
}

.block_text_bg_image_zone_text_text strong {
	font-weight:normal; /* To cancel "strong" because it doesn't work well in ie and ff because the font doesn't have a bold version. */	
	font-size:16px; /* To simulate bold, the font is simply put a bit bigger. */
}

.block_text_bg_image_zone_text_text_w_hidden_text {	
	padding-bottom: 0px; /* To "cancel" padding-bottom of .block_text_bg_image_zone_text_text. */	
}

.block_text_bg_image_zone_text_text_show_more {
	cursor: pointer;
	display: block; /* SO that it's always on a new line even if it's a span. */
}

.block_text_bg_image_zone_text_text_show_more_text {	
	white-space: nowrap; /* So that the text/button never wraps. */
	font-size:12px;
	font-weight: bold;
	font-family: 'ITCAvantGardeGothicStdMedium', Arial, sans-serif;
	color: #6e2168;	
}

.block_text_bg_image_zone_text_text_show_more_icon {
	display: inline-block; /* So that width can be "active" even if the element is a span. */
	width: 8px; /* Width of image. */
	height: 8px; /* Height of image. */
	margin-left: 2px;
	background-image: url("../images/dropdown_open_icon.png");
	background-repeat: no-repeat;
	background-position: center center;
}

.block_text_bg_image_zone_text_text_hidden {
	display: none;
	font-size:14px;
	font-family: 'ITCAvantGardeGothicStdMedium', Arial, sans-serif;
	line-height: 20px;
}

.block_text_bg_image_zone_text_line {	
	margin-bottom: 30px;
	max-width: 475px;
	height: 2px;
	background-color:#e7e9e2;
}

.block_text_bg_image_zone_text_line_last {
	margin-top: 10px;
	margin-bottom: 30px;
	max-width: 475px;
	height: 2px;
}

.map_container {		
	background-color: #FFFFFF; /* To "overwrite" #container's purple-ish bg-color. */
}

.map_container iframe{	
	width: 100%;
	height: 400px;
	border: none;
}

.line_below_sub_section {
	width:653px;
	height:20px;
	margin-top:10px; 
	margin-left:53.5px;/*to center table: 800-653(table width) = 147/2 = 73,5-20(padding left content) */
	xmargin-left:auto; 
	xmargin-right:auto;
	margin-bottom:30px;
}

/* Table region ********************************************************************* */
.table_ms {
	width: 100%;
	height: 100%; /* So that the margin-bottom of .table_ms_container gets "included" in the height of .table_ms, therefore the background-color will be on the whole div.  */
}

.table_ms strong {
	font-weight:normal; /* To cancel "strong" because it doesn't work well in ie and ff because the font doesn't have a bold version. */	
}


.table_ms_text {
	margin-right: 6%;
	margin-left: 6%;
	padding-top: 30px;
	padding-bottom: 25px;	
}

.table_ms_text_title {
	font-size:32px;
	font-family: 'ITCAvantGardeGothicStdMedium', Arial, sans-serif;
	color: #4f1a1a;
}

.table_ms_text_subtitle {
	text-align: left; /* To "cancel" text-align: center of .block_text_bg_image_zone_text_centered.*/	
	padding-bottom: 40px;
	font-size:16px;
	font-family: 'ITCAvantGardeGothicStdMedium', Arial, sans-serif;
	color: #4f1a1a;
}

.table_ms_text_text {
	text-align: left; /* To "cancel" text-align: center of .block_text_bg_image_zone_text_centered.*/
	margin-bottom: 25px;
	font-size:14px;
	font-family: 'ITCAvantGardeGothicStdMedium', Arial, sans-serif;
	line-height: 30px;
}

.table_ms_container {
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 30px;
	padding-right: 30px;
	padding-bottom:30px;
	font-family: 'ITCAvantGardeGothicStdMedium', Arial, sans-serif;
}

.table_ms_titre {
		xfont:Arial, Helvetica, sans-serif;
		xfont-family:Arial, Helvetica, sans-serif;
	font-size:18px;
	color:#000000;
	xmargin-bottom: 10px;
}

.table_ms_note_top {
		xfont:Arial, Helvetica, sans-serif;
		xfont-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#000000;
	margin-bottom: 5px;
}

.table_ms_note_bottom {
		xfont:Arial, Helvetica, sans-serif;
		xfont-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#000000;
	margin-top: 10px;
	margin-left: 20px;
}

.table_ms_note_bottom strong{
	font-family: 'ITCAvantGardeGothicStdDemiCn', Arial, sans-serif;
	xfont-family: 'ITCAvantGardeGothicStdMedium', Arial, sans-serif;
	font-weight:normal; /* THIS IS FOR CHROME AND FIREFOX: OTHERWISE IT WILL APPLAY BOTH THE NEW FONT AND STRONG */
	font-size:14px;
}

.table_ms_note_bottom ul{
	padding-left: 15px;
		xbackground-color:#009933;
}

.table_ms_note_bottom li{
}

.table_ms_table_wrapper {
	width: 100%;
	overflow-x: auto;
}

.table_ms table{
	width: 100%;
	border-style:solid; 
	border-collapse:collapse;
	border-color: #000000;
	border-width: 1px;
	text-align:center;	
	font-size:12px;	
}

.table_ms tr{
	border-style:solid; 
	border-collapse:collapse;
	border-color: #000000;
	border-width: 1px;
}

.table_red {
	font-family: 'ITCAvantGardeGothicStdDemiCn', Arial, sans-serif;
	font-size:14px;
		xcolor:#4f1a1a;
	color:#990000;
}

.table_ms .tr_title {	
	background-color: #158ae5;
		xfont-weight:bold;	
	font-size: 16px;	
	font-family: 'ITCAvantGardeGothicStdMdCn', Arial, sans-serif;
	color: #FFFFFF;
}

.table_ms .tr_title td{
	padding-right: 5px;
	padding-left: 5px;
}


.table_ms .tr_normal_color{
	background-color:#bde2ff;
		xheight:80px;		
}

.table_ms .tr_normal_no_color{
	xheight:80px;
	background-color: #e5f4ff;	
}

.table_ms td{
	border-style:solid; 
	border-collapse:collapse;
	border-color: #FFFFFF;
	border-width: 2px;
		xwidth:120px;
}
/* Table region ********************************************************************* */

.bouton_amelia {
	margin-top: 20px;
}

/* Must be BEFORE @media only screen and (min-width : 1500px */
@media only screen and (min-width : 1200px) {
	.block_text_bg_image_zone_text_text_container_centered {
		max-width: 450px;
	}
}

@media only screen and (min-width : 1500px) {
	.block_image_text_container {
		background-position: left center; /* Since the image is bigger now, center it. See comments on next line. */
		background-size: 53% auto; /* When the browser gets too large, inverse background-size paramters so that now the iamge covers more area horizontally. */
	}

	.block_text_bg_image_zone_text_text_container_centered {
		max-width: 600px;
	}
}

@media only screen and (max-width : 830px) {
	/*
	#content {
		padding-top: 187px; // To make room for the top_menu that has position: fixed
	}
	*/
		
	/* Old version
	#top_menu_logo {
		max-width: 360px; // Use max-width so that when you make the window smaller, the logo becomes smaller. Don't use min-height to make sure the logo has always the right ratio.
		margin-bottom: 10px;
	}
	*/
	
	#top_menu_logo_responsive {
		width: 360px;
		height: 98px;
		margin-bottom: 10px;
	}
	
	#top_menu_text {
	}
	
	#top_menu_text a {
		padding-top: 10px;
		padding-bottom: 10px;
		xpadding-left: 30px;
		margin-left: 30px;
	}
	
	#top_menu_text a.top_menu_texte_dropdown_item_text {
		margin-left: 50px;
		color:#616161;
	}
	
	#top_menu_text a:hover.top_menu_texte_dropdown_item_text {		
		color:#6e2168;
		-webkit-box-shadow:inset 0px -6px 0px -3px #6e2168;
		-moz-box-shadow:inset 0px -6px 0px -3px #6e2168;
		box-shadow:inset 0px -6px 0px -3px #6e2168;
	}
		
	#top_menu_text_button_responsive_menu {
		display: inline-block; /* So that parent #top_menu_text text-align: right can work. */
	}
	
	.top_menu_text_items {
		overflow: hidden; /* For the animation: so the text stays hidden when the height gets to 0. */
		text-align: left; /* To "overwrite" parent #top_menu_text text-align: right used for the menu button. */
		position: relative;		
		width: 100%;
		/*
		Use max-height for this and animation: use a value much greater than it will ever be.
		Height in pixels doesn't work because the nbr of items in the menu can change and there are some items that have submenu. In other word: the height of the menu can change.
		Height in % doesn't work with animation.
		The solution is to use max-heigh in pixel.
		Because you have pixels, it will animate.
		But because you never actually specifiy a height, it will actually adapt to the number of element inside the parent.
		https://stackoverflow.com/questions/3508605/how-can-i-transition-height-0-to-height-auto-using-css
		*/
		max-height: 0px;
		padding-top: 0px;
		padding-bottom: 0px;
		padding-left: 0px;
		background-color: #FFFFFF;
	}
	
	/* Animation: MUST BE IN THE MEDIA QUERY IN ORDER TO WORK.
	http://www.w3schools.com/css/css3_animations.asp
	http://caniuse.com/#feat=css-animation
	*/
	/* Chrome, Safari, Opera */
	@-webkit-keyframes animation_top_menu_text_items_open {
		from {
			max-height: 0px;
		}
		to {
			max-height: 500px;
		}
	}

	/* Firefox */
	@-moz-keyframes animation_top_menu_text_items_open {
		from {
			max-height: 0px;
		}
		to {
			max-height: 500px;
		}
	}

	@keyframes animation_top_menu_text_items_open {
		from {
			max-height: 0px;
		}
		to {
			max-height: 500px;
		}
	}

	.top_menu_text_items_animation_open {
		max-height: 500px; /* Must be here to overwrite the original class in the media query.*/
		/* Animation: */
		-webkit-animation-name: animation_top_menu_text_items_open; /* Chrome, Safari, Opera */
		-webkit-animation-duration: 0.5s; /* Chrome, Safari, Opera */
		-moz-animation-name: animation_top_menu_text_items_open; /* Firefox */
		-moz-animation-duration: 0.5s; /* Firefox */
		animation-name: animation_top_menu_text_items_open;
		animation-duration: 0.5s;
	}

	/* Animation:
	http://www.w3schools.com/css/css3_animations.asp
	http://caniuse.com/#feat=css-animation
	*/
	/* Chrome, Safari, Opera */
	@-webkit-keyframes animation_top_menu_text_items_close {
		from {
			max-height: 500px;
		}
		to {
			max-height: 0px;
		}
	}

	/* Firefox */
	@-moz-keyframes animation_top_menu_text_items_close {
		from {
			max-height: 500px;
		}
		to {
			max-height: 0px;
		}
	}

	@keyframes animation_top_menu_text_items_close {
		from {
			max-height: 500px;
		}
		to {
			max-height: 0px;
		}
	}

	.top_menu_text_items_animation_close {
		/* Fin */
		/* Animation: */
		-webkit-animation-name: animation_top_menu_text_items_close; /* Chrome, Safari, Opera */
		-webkit-animation-duration: 1s; /* Chrome, Safari, Opera */
		-moz-animation-name: animation_top_menu_text_items_close; /* Firefox */
		-moz-animation-duration: 1s; /* Firefox */
		animation-name: animation_top_menu_text_items_close;
		animation-duration: 0.5s;
	}
	
	.top_menu_text_items_animation_close_instantly {
		/* Fin */
		/* Animation: */
		-webkit-animation-name: animation_top_menu_text_items_close; /* Chrome, Safari, Opera */
		-webkit-animation-duration: 1s; /* Chrome, Safari, Opera */
		-moz-animation-name: animation_top_menu_text_items_close; /* Firefox */
		-moz-animation-duration: 1s; /* Firefox */
		animation-name: animation_top_menu_text_items_close;
		animation-duration: 0s;
	}
	
	.top_menu_text_item_with_dropdown {
		position: initial;
		padding-top: 10px;
		padding-bottom: 10px;
		padding-left: 0px;
		padding-right: 0px;
		/*
		JavaScript changes the arrow for the dropdown both on .top_menu_text_item_with_dropdown_category and .top_menu_text_item_with_dropdown.
		But CSS takes care of showing only the one that should be shown depending if it's the responsive menu or not.
		(The one on the parent is completly at the right of the element whereas  the one on the child is right next to the text - for the responsive menu.)	
		*/
		background-image: none !important; /* So that i's not overwritten by the JavaScript with the inline-style when openning and closing the menu.*/
	}
	
	/* Various values overwrite the default class. */
	.top_menu_text_item_with_dropdown_category {
		display: inline-block;
		padding-right: 11px;
		background-image: url("../images/dropdown_open_icon.png");
		background-repeat: no-repeat;
		background-position: right 60%;	
		xbackground-color: #e5e5e5;
	}
	
	/* Various values overwrite the default class. */
	.top_menu_text_dropwdown {
		position: inherit;
		width: inherit;
		left: 0;
		margin-left: 0px;	
		margin-top: 0px;
		margin-bottom: -7px; /* To compensate for the fact that, when open, the last item will add its own bottom-padding and there will be now too much space. Therefore when the menu is open, remove 10 px from the bottom.  */
		padding-top: 10px;
		padding-right: 0px;
		padding-left: 0px;
		padding-bottom: 0px; /* Avec le 5px de plus de .top_menu_text_dropdown_item, �a fait 10px en tout.*/
		background-color: inherit;
	}
	
	/* Various values overwrite the default class. */
	.top_menu_text_dropdown_item {
		padding-bottom: 0px;
	}
	
	.top_menu_text_item {
		display: block;
		margin-left: 0px;
	}
	
	/* There's an exception: if the item has a submenu, it should be inline-block (for the underline to be the same width as the text). */
	.top_menu_text_item.top_menu_text_item_with_dropdown{
		display: inline-block;
		margin-left: 30px;
	}
	
	.block_image_text_container {
		background-image: inherit !important; /* To "cancel" the bg image put by php in the inline-style. Using !important is the only way to overwrite the style inside the inline-style.*/
	}

	.block_image_text_zone_text_container {	
		margin-left: 0%; /* To "cancel" the one from the original class. */
	}

	.block_image_text_zone_text {	
		/* To now center the text.
		Start */
		margin-right: auto;
		margin-left: auto;
		/* End */
		padding-top: 50px;
		padding-right: 30px;
		padding-bottom: 50px;
		padding-left: 30px;
	}
		
	.block_text_bg_image_container_bg_off_responsive {
		background-image: inherit !important; /* To "cancel" the bg image put by php in the inline-style. Using !important is the only way to overwrite the style inside the inline-style.*/
	}

	.table_ms_container {
		padding-right: 14px;
		padding-left: 10px;
	}
		
	.table_ms_table_wrapper {
		padding: 1px;		
		background-color: #FFFFFF;
		border-style: solid;
		border-collapse: collapse;
		border-color: #00769e;
		border-width: 2px;		
	}
}

@media only screen and (min-width : 830px) {
	/*
	JavaScript changes the arrow for the dropdown both on .top_menu_text_item_with_dropdown_category and .top_menu_text_item_with_dropdown.
	But CSS takes care of showing only the one that should be shown depending if it's the responsive menu or not.
	(The one on the parent is completly at the right of the element whereas  the one on the child is right next to the text - for the responsive menu.)	
	*/
	.top_menu_text_item_with_dropdown_category {
		background-image: none !important;
	}
}

/* MUST BE AFTER media query 830px otherwise, it's overwritten by it. */
@media only screen and (max-width : 420px) {
	/*
	#content {
		padding-top: 265px; // To make room for the top_menu that has position: fixed
	}
	*/
		
	#top_menu_contact {
		float: none;
		text-align: center;
		max-width: 350px;
		margin-top: 5px;
		margin-right: auto;
		margin-bottom: 0px; /* To "cancel" margin-bottom -35px from original class. */
		margin-left: auto;
		xbackground-color: red;
	}
	
	#top_menu_contact_icons {
		float: none;
		margin-right: 5px;
	}
	
	/* Old version:
	#top_menu_logo {
		display: none;
	}
	
	#top_menu_logo_column {
		display: block;
	}
	*/
	
	#top_menu_logo_responsive {		
		width: 100%;
		height: 100%;		
		max-width: 265px;
        min-height: 156px;		
		margin-top: 10px;
		margin-right: auto;
		margin-left: auto;
		padding-right: 0px; /* To "cancel" original padding. */
		padding-left: 0px; /* To "cancel" original padding. */
		background-image: url("../images/logo_column_small.png");
		background-size: 100% auto; /* The bg image should be as hight as the div. Use auto for the x so that the image remains in the right ratio. */
		xbackground-color: red;		
	}
	
	.block_image_text_zone_text_main_title {
		font-size: 30px;
	}
	
	.block_image_text_zone_text_main_subtitle {
		font-size: 22px;
	}
	
	.block_text_bg_image_zone_text_main_title {
		font-size: 24px;
	}
	
	.block_text_bg_image_zone_text_title {
		font-size: 18px;
	}
	
	.block_text_bg_image_zone_text_subtitle {
		font-size: 16px;
	}
	
	.table_ms_text_title {
		font-size: 24px;
	}

	.table_ms_text_subtitle {
		font-size: 18px;
	}	
}

@media only screen and (max-width : 370px) {
	#top_menu_contact {		
		max-width: 270px;		
	}
	
	#top_menu_contact_phone {
		display: block; /* At this size, the phone number goes below. */
	}
}

/*
When screen resolution ratio is higher than 1.3, put a nicer image for the logo:
https://bjango.com/articles/min-device-pixel-ratio/
https://gist.github.com/marcedwards/3446599
*/
@media	only screen and (-webkit-min-device-pixel-ratio: 1.3),
	only screen and (-o-min-device-pixel-ratio: 13/10),
	only screen and (min-resolution: 120dpi)
{
	/* Your code to swap higher DPI images */
	#top_menu_logo_responsive {
		background-image: url("../images/logo_big.png");
	}
}

/* This is the way to combine 2 media queries:
https://stackoverflow.com/questions/24314142/combining-max-width-and-min-device-pixel-ratio
*/
@media	only screen and (max-width : 420px) and (-webkit-min-device-pixel-ratio: 1.3),
	only screen and (max-width : 420px) and only screen and (-o-min-device-pixel-ratio: 13/10),
	only screen and (max-width : 420px) and only screen and (min-resolution: 120dpi)
{
	/* Your code to swap higher DPI images */
	#top_menu_logo_responsive {
		background-image: url("../images/logo_column_big.png");
	}
}

/* This is a way of preventing elements from having unwanted size. Use this if the size seems wrong on mobile.
http://wernull.com/2013/04/debug-ghost-css-elements-causing-unwanted-scrolling/
https://stackoverflow.com/questions/4617872/white-space-showing-up-on-right-side-of-page-when-background-image-should-extend
*/
/*
* {
  background: #000 !important;
  color: #0f0 !important;
  outline: solid #f00 1px !important;
}
*/