/* 
 * Existing element CSS overwrited
 */

.leContenu {
	width: auto;
}

#GrosseImageActu {	
	width: 100%;
	height: auto;
}

.GrosseImageActu_detail {
	width: 100%;
	box-sizing: border-box;
}

#headerBG2013,
.CRHA_Wrapper, 
.wrapper,
.wrapperContent,
.leContenu {
	width: 100%;
	box-sizing: border-box;
	padding: 0;
}

.CRHA_Wrapper {	
	/* top */
	-webkit-border-top-left-radius: 0;
    -webkit-border-top-right-radius: 0;
    -moz-border-top-left-radius: 0;
    -moz-border-top-right-radius: 0;
    -pie-border-top-left-radius: 0;
    -pie-border-top-right-radius: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;

    /* bottom */
	-webkit-border-bottom-left-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -moz-border-bottom-left-radius: 10px;
    -moz-border-bottom-right-radius: 10px;
    -pie-border-bottom-left-radius: 10px;
    -pie-border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;

}

@media screen and ( max-width: 980px ) {

	.CRHA_Wrapper {
		-webkit-border-radius: 0;
	    -moz-border-radius: 0;
	    -pie-border-radius: 0;
	    border-radius: 0;
	}

}

.tout_pour_reussir {
	width: 945px;
	margin: 0 auto;
}

/*
 * Actualite
 */

@media screen and ( max-width: 666px ) {

	.responsive_on .actualite_image {
		display: none;
	}

	.responsive_on .actualite_title {
		width: 100%;
	}

}

/*
 * Formation
 */

.bloc_formation {
	width: 100%;
}

@media screen and ( max-width: 666px ) {

	.responsive_on .Formation {
		width: 100%;
	}

	.responsive_on .formation_image {
		display: none;
	}

	.responsive_on .formation_content {
		width: 100%;
	}

	.responsive_on .formateur {
		display: none;
	}

}

/*
 * Observatoire
 */

.Observatoire {
	width: 100%;
}

@media screen and ( max-width: 980px ) {

	.responsive_on .Observatoire {
		width: 100%;
		height: auto;
		padding-bottom: 1em;
		margin: 0;
	}

	.responsive_on #section_observatoire .Observatoire > .img {
		display: none;
	}

	.responsive_on #section_observatoire .imgObserv {
		display: none;
	}

}

/*
 * Footer
 */

.bottom {
	color: #ffffff;
	box-sizing: border-box;
}

@media screen and ( max-width: 980px ) {

	.responsive_on .bottom {
		width: 100%;
		padding-left: 2em;
		padding-right: 2em;
	}

}

@media screen and ( max-width: 980px ) {

	.responsive_on .liensSociaux {
		float: none!important; /* Have to use !important, because desktop style use it... */
		padding: 0;
		text-align: right;
	}
}

@media screen and ( max-width: 666px ) {

	.responsive_on .liensSociaux {		
		margin: 0!important; /* Have to use !important, because desktop style use it... */
		text-align: center;
	}

}

.bottom a {
	text-decoration: none;
	color: #0074be;
}



/*
 * Les experts
 */

#expert_menu_container {
    display: block;
    position: absolute;
    top: -34px;
    right: 0;
}

.expert_bloc {
	width: auto;
}

.expert_right {
	position: relative;
	bottom: 0;
    display: inline-block;
    width: 190px;
    vertical-align: top;
}

@media screen and (max-width: 666px ) {

	.responsive_on .expert_bloc {
		height: auto;
		margin-bottom: 1em;
	}

	.responsive_on .expert_img {
		display: none;
	}

	.responsive_on .expert_header,
	.responsive_on .expert_right,
	.responsive_on .expert_formation {
		width: 100%;
	}

	.responsive_on #expert_menu_container {
		top: 0;
	}

	.responsive_on #expert_content {
		padding-top: 40px;
	}

	.responsive_on #expert_menu li ul {
		border-top: 1px solid #78cbfc;
	}

}


@media screen and ( max-width: 980px ) {

	.responsive_on #BG2012 {
		background-image: none;
	}

	.responsive_on #headerBG2013 {
		height: auto;
	}

	/* 
	 * Header 
	 */

	 .responsive_on #lesOnglets2015,
	 .responsive_on #CRHA_TopMenu,
	 .responsive_on .onglet_Congres {
	 	display: none;
	 }

	 .responsive_on .CRHA_Logo img {
	 	margin-top: 0!important; /* The use of important is required because default property use it - to be remove in both place */
	 	margin-left: 20px;
	 }


	 /* 
	  * Menu
	  */

	  .responsive_on .ipadmenu {
	  	display: none;
	  }

	  /* Handler for closing the responsive menu */
	  .responsive_on div.ipadmenu a.close {
	  	display: block;
	  	width:100%;
	  	height: 100%;
	  	position: fixed;
	  	background-color: rgba( 0, 0, 0, 0.5 );
	  	top: 0;
	  	left: 0;
	  }

	  .responsive_on .ipadmenu.responsive_menu {
	  	display: block;
	  	width: 100%;
	  	max-width: 80%;
	  	height: 100%;
	  	min-height: 100%;
	  	max-height: 100%;
	  	overflow-y: auto;
	  	position: fixed;
	  	top: 0;
	  	right: 0;
	  	bottom: 0;
	  }

	  .responsive_on ul.dropEverything {
	  	width: 100%;
	  	max-width: 350px;
	  	height: auto;
	  	margin: 0 0 0 auto;
	  	background-color: #222222;
	  }

	  .responsive_on .ipadmenu li {
	  	display: block;
	  	width: 100%;
	  }

	  .responsive_on ul.dropEverything li.top-li {	  	
	  	border-left: none;
	  	border-right: none;
	  	border-bottom: 1px solid #353434;
	  	float: none;
	  }

	  .responsive_on ul.dropEverything .pageZero {
	  	background-color: #111111;
	  }

	  .responsive_on ul.dropEverything li a.top-a {
	  	color: #aaaaaa;
	  	padding: 0.5em 1em 0.5em 2.5em!important; /* Because default menu have inline-css */
	  	font-size: 1.5em;
	  	line-height: 2em;
	  }


	  .responsive_on ul.dropEverything .menu_devenir_membre a.top-a {
	  	color: #ffffff;
	  }

	  .responsive_on .dropEverything li.top-li:hover > a.top-a {
	  		background-color: #111111!important;
	  }

	.responsive_on .dropEverything-page {
		display: none;
	}

	/* 
	 * Barre d'information
	 */

	.responsive_on .bienvenu {
		display: none;
	}

	.responsive_on #global {
		width: 100%;
		box-sizing: border-box;
		padding: 0;
	}

}

@media screen and (max-width: 980px) and (orientation:landscape) { 

	.responsive_on ul.dropEverything {
		max-width: 250px;
	}

	.responsive_on ul.dropEverything li a.top-a {
		font-size: 1em;
	}

}

@media screen and (max-width: 480px) {

	 .responsive_on .CRHA_Logo img {
	 	width: 180px;
	 	height: auto;
	 }

}

/* 
 * New element CSS 
 */


/* Responsive Menu toggle */
#responsive_toggle_menu {
	display: none;
}

/* New menu element 'Accueil' */
.pageZero {
	display: none;
}

@media screen and ( max-width: 980px ) {

	/* Responsive Menu toggle */
	.responsive_on #responsive_toggle_menu {
		display: block;
	}

	.responsive_on #responsive_toggle_menu {
	  	position: absolute;
	  	top: 0;
	  	right: 0;
	  	vertical-align: middle;
	  	color: #006fb7;
	  	font-size: 18px;
	  	padding: 1em 2em;
	  	cursor: pointer;
	}

	.responsive_on #responsive_toggle_menu:after {
		content: "";
		width: 40px;
		height: 30px; /* 0.75 */
	    background-image: url('http://www.portailrh.org/Ressources/images2015/responsive_menu/menu_toggle.png');
	    background-repeat: no-repeat;
	    background-size: contain;
	    background-position: center center;
	    display: inline-block;
	  	vertical-align: middle;
	  	margin-left: 0.5em;
	}

	/* New menu element 'Accueil' */
	.responsive_on .pageZero {
		display: block;
	}

	.responsive_on .pageZero span {
		vertical-align: middle;
	}

	.responsive_on .pageZero a:before {
		content: "";
		width: 22px;
	    height: 35px;
	    background-image: url('http://www.portailrh.org/Ressources/images2015/responsive_menu/home.png');
	    background-repeat: no-repeat;
	    background-size: contain;
	    background-position: center center;
	    display: inline-block;
	    vertical-align: middle;
	    margin-right: 0.5em;
	    position: absolute;
	    left: 13px;
	}

}

@media screen and (max-width: 980px) and (orientation:landscape) { 

	.responsive_on .pageZero a:before {
		width: 18px;
	    top: 0;
		left: 7px;
	}

}


@media screen and ( max-width: 480px ) {

	.responsive_on #responsive_toggle_menu {
	  	padding: 1em;
	}

	.responsive_on #responsive_toggle_menu:after {
		width: 20px;
		height: 15px; /* 0.75 */
	}

}

/* 
 * Footer sitemap 
 */

#section_footer_sitemap {
	margin-top: -60px;
}

#section_footer_sitemap .column {
	height: 180px;
}

#section_footer_sitemap .column.first {
	border-right: 1px solid #0074be;
}

#section_footer_sitemap .column.last {
	border-left: 1px solid #ffffff;	
}

@media screen and (max-width: 980px) {

	.responsive_on #section_footer_sitemap {
		margin-top: 0;
	}

}

@media screen and (max-width:666px) {

	#section_footer_sitemap .column.first {
		border-right: none;
	}

	#section_footer_sitemap .column.last {
		border-left: none;
		height: auto;	
	}

}
/*
 * Responsive mode toggle and margin for #BG2012
 */
 

#show_mobile_layout {
	display: none;
}

@media screen and ( max-width: 980px ) {

	body {
		background-position: 0 42px;
	}

	body.responsive_on {
		background-position: 0 0;
	}

	#show_mobile_layout {
		display: block;
   		z-index: 1000;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		padding: 1em;
		background-color: #000000;
		color: #ffffff;
		text-align: center;
		cursor: pointer;
	}

	.responsive_on #show_mobile_layout {
		display: none;
	}
		
	#BG2012 {	
		margin-top: 42px;
	}

	.responsive_on #BG2012 {
		margin-top: 0;
	}
}












/*
 * RESPONSIVE CSS FRAMEWORK 
 * Richer St-Amand
 *
 * The goal of this framework is to simplify the construction of the portail
 * Using the proper class, you can specify the width of an element for those resolution :
 * Desktop [ 980px and bigger ]
 * Tablet [ From 667px to 980px ]
 * Mobile [ From 481px to 666px ]
 * Small device [ Smaller than 480px ]
 */

 /* 
  * Row 
  * A row can contains more than one section
  * Use this class to wrap sections element, an ease the structure and behavior of the elements
  */

 .portail_row {
 	clear: both;
 	margin-top: 1em;
 	margin-right: 0;
 	margin-bottom: 0;
 	margin-left: 0;
 	padding-right: 0.65em;
 }

 @media screen and (max-width: 980px) {

 	/* Remove the right padding needed on the desktop */
	 .responsive_on .portail_row {
	 	padding-right: 0;
	 }

 }


 /* 
  * Sections 
  * A sections can contain more than one column
  * Use section as a wrapper for your columns.
  * Elements that are part of the same section should be inside the same section element
  */

.section {
	width: 100%;
	max-width: 100%;
	position: relative;
	display: inline-block;
	box-sizing: border-box;
	padding-top: 0;
	padding-right: 0.65em;
	padding-bottom: 0;
	padding-left: 0.65em;
	float: left;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 1em;
	margin-left: 0;
}

.section:first-child {
	/*padding-left: 0;*/	
}

.section:last-child {
	/*padding-right: 0;*/
}

.last_section {
	background-color:#c9c9c9;
	margin-bottom: 0;

    /* bottom */
	-webkit-border-bottom-left-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -moz-border-bottom-left-radius: 10px;
    -moz-border-bottom-right-radius: 10px;
    -pie-border-bottom-left-radius: 10px;
    -pie-border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}


/* 
 * Section elements  
 * A section element come with a .section_title, that will extend to the full width of the section
 * and a .section_column, in which you place the .column [ column ]
 */

/* Section Title */

.section_title {
	position: relative;
	display: block;
	width: 100%;
	max-width: 100%;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0.5em;
	margin-left: 0;
	padding-top: 0;
	padding-right: 1em;
	padding-bottom: 0;
	padding-left: 1em;
	box-sizing: border-box;
	color: #ffffff;
	background-color: #0078c1;
	text-transform: uppercase;
	font-size: 18px;
	line-height: 1.5em;
}

/* The triangle */

.section_title:before {
	content:"";
	position: absolute;
	height: 100%;
	width: 10px;
	background-color: #0078c1;
	left: -10px;

}

.section_title:after {
	content:"";
	position: absolute;
	left: -10px;
	bottom: -12px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 12px 0px 0 10px;
	border-color: #70aed2 transparent transparent transparent;
}

@media screen and ( max-width: 980px ) {

	/* Remove the triangle on title */
	.responsive_on .section_title:before {
		display: none;
	}

	.responsive_on .section_title:after {
		display: none;
	}

}

/* Section Column */

.section_column {
	position: relative;
	box-sizing: border-box;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 1em;
}

@media screen and ( max-width: 980px ) {

	.responsive_on .section_column {
		padding-left: 0;
	}

}



/* 
 * Column element
 */

/* .column elements */

.column {
	display: inline-block;
	position: relative;
	box-sizing: border-box;
	margin: 0;
	vertical-align: top;
	float: left;
	/*min-height: 100px;*/
	padding-top: 0;
	padding-right: 0.65em;
	padding-bottom: 1em;
	padding-left: 0.65em;
}

/* Because Medias Sociaux use also .column, we should remove the padding */
#zoneMediasSociaux .column {	
	padding-left: 0;
	padding-right: 0;
	padding-bottom: 0;
}

.column:first-child {
	/*padding-left: 0;	*/
}

.column:last-child {
	/*padding-right: 0;*/
}

.column img {
	max-width: 100%;
	height: auto;
}

/*
 * The classes description
 * Those class are prefixed to be apply on specific resolution
 *
 * Padding classes
 * first - Remove padding on the left, add on the right
 * last - Remove padding on the right, add on the left
 * full - REmove padding
 *
 * Width classes
 * one_quarter - The element take 25% of the parent's width
 * one_third - The element take 33.3% of the parent's width
 * half - The element take 50% of the parent's width
 * two_third - The element take 66% of the parent's width
 * three_quarter - The element take 75% of the parent's width
 * full - The element take 100% of the parent's width
 *
 * Float classes
 * left - specify that the element should be display on the left side
 * right - specify that the element should be display on the right side
 * nofloat - default float value
 * clear - force the next floating element to be below this element
 *
 */

/* 
 * Super Class 
 * The super class allow you to define, for all the resolutions
 * How the element should be display
 * You can than, define with the proper class, if the element 
 * should be displayed differentely on a specific resolution
 *
 */

/* Hide element */
.hide { display: none; }
.show { display: inline-block; }

/* Element Padding */
.full { padding: 0 0.65em; }
.section.full,
.no_padding { padding: 0; }
.first { padding: 0 0.65em 0 0 }
.middle { padding: 0 0.65em; }
.last { padding: 0 0 0 0.65em; }

/* Element width */
.one_quarter { width: 25%; }
.one_third { width: 33.3%; }
.half { width: 50%; }
.two_third { width: 66.6%; }
.three_quarter { width: 75%; }
.full { width: 100%; }

/* Element float */
.left { float: left; }
.right { float: right; }
.nofloat { float: none; }
.clear { clear: both; }

/* Content position */
.align_left { text-align: left; }
.align_center { text-align: center; }
.align_right { text-align: right; }


/*
 * Tablet
 * Class for Tablet resolution
 * Those class will continue to apply on smaller resolution, if no other class are specified
 */

@media screen and ( max-width: 980px ) {

	/* Hide element */
	.responsive_on .tablet_hide { display: none; }
	.responsive_on .tablet_show { display: inline-block; }

	/* Element Padding */
	.responsive_on .tablet_full { padding: 0 0.65em; }
	.responsive_on .section.tablet_full,
	.responsive_on .tablet_no_padding { padding: 0; }
	.responsive_on .tablet_first { padding: 0 0.65em 0 0 }
	.responsive_on .tablet_middle { padding: 0 0.65em; }
	.responsive_on .tablet_last { padding: 0 0 0 0.65em; }

	/* Element width */
	.responsive_on .tablet_one_quarter { width: 25%; }
	.responsive_on .tablet_one_third { width: 33.3%; }
	.responsive_on .tablet_half { width: 50%; }
	.responsive_on .tablet_two_third { width: 66.6%; }		
	.responsive_on .tablet_three_quarter { width: 75%; }
	.responsive_on .tablet_full { width: 100%; }

	/* Element float */
	.responsive_on .tablet_left { float: left; }
	.responsive_on .tablet_right { float: right; }
	.responsive_on .tablet_nofloat { float: none; }
	.responsive_on .tablet_clear { clear: both; }

	/* Content position */
	.responsive_on .tablet_align_left { text-align: left; }
	.responsive_on .tablet_align_center { text-align: center; }
	.responsive_on .tablet_align_right { text-align: right; }

}

/*
 * Mobile
 * Class for Mobile resolution
 * Those class will continue to apply on smaller resolution, if no other class are specified
 */

@media screen and ( max-width: 666px ) {
	
	/* Hide element */
	.responsive_on .mobile_hide { display: none; }
	.responsive_on .mobile_show { display: inline-block; }

	/* Element Padding */
	.responsive_on .mobile_full { padding: 0 0.65em; }
	.responsive_on .section.mobile_full,
	.responsive_on .mobile_no_padding { padding: 0; }
	.responsive_on .mobile_first { padding: 0 0.65em 0 0 }
	.responsive_on .mobile_middle { padding: 0 0.65em; }
	.responsive_on .mobile_last { padding: 0 0 0 0.65em; }

	/* Element width */
	.responsive_on .mobile_one_quarter { width: 25%; }
	.responsive_on .mobile_one_third { width: 33.3%; }
	.responsive_on .mobile_half { width: 50%; }
	.responsive_on .mobile_two_third { width: 66.6%; }
	.responsive_on .mobile_three_quarter { width: 75%; }
	.responsive_on .mobile_full { width: 100%; }

	/* Element float */
	.responsive_on .mobile_left { float: left; }
	.responsive_on .mobile_right { float: right; }
	.responsive_on .mobile_nofloat { float: none; }
	.responsive_on .mobile_clear { clear: both; }

	/* Content position */
	.responsive_on .mobile_align_left { text-align: left; }
	.responsive_on .mobile_align_center { text-align: center; }
	.responsive_on .mobile_align_right { text-align: right; }

}

/*
 * Small
 * Class for Mobile resolution
 * Those class will continue to apply on smaller resolution, if no other class are specified
 */

@media screen and ( max-width: 480px ) {
	
	/* Hide / Show element */
	.responsive_on .small_hide { display: none; }
	.responsive_on .small_show { display: inline-block; }

	/* Element Padding */
	.responsive_on .small_full { padding: 0 0.65em; }
	.responsive_on .section.small_full,
	.responsive_on .small_no_padding  { padding: 0; }
	.responsive_on .small_first { padding: 0 0.65em 0 0 }
	.responsive_on .small_middle { padding: 0 0.65em; }
	.responsive_on .small_last { padding: 0 0 0 0.65em; }

	/* Element width */
	.responsive_on .small_one_quarter { width: 25%; }
	.responsive_on .small_one_third { width: 33.3%; }
	.responsive_on .small_half { width: 50%; }
	.responsive_on .small_two_third { width: 66.6%; }
	.responsive_on .small_three_quarter { width: 75%; }
	.responsive_on .small_full { width: 100%; }

	/* Element float */
	.responsive_on .small_left { float: left; }
	.responsive_on .small_right { float: right; }
	.responsive_on .smalle_nofloat { float: none; }
	.responsive_on .small_clear { clear: both; }

	/* Content position */
	.responsive_on .small_align_left { text-align: left; }
	.responsive_on .small_align_center { text-align: center; }
	.responsive_on .small_align_right { text-align: right; }

}

/*
 * Medias sociaux
 */
 
@media screen and ( max-width: 666px ) {

	.medias_sociaux .column {		
		width: 100% !important; /* important required, the media css is load after the responsive css */
	}
	
	.medias_sociaux .column a.ms-element {
		height: auto !important;
		min-height: 100px!important;	
	}
	
	.medias_sociaux .column a.call-to-action {
	    height: auto !important;
	    min-height: 0 !important;
	}
	
}