/*   Design:   Multiflex-3 Version 1.8 / Header-1 (Default)  */
/*   File:     Overall global layout structure               */
/*-----------------------------------------------------------*/
/*   Author:   G. Wolfgang                                   */
/*   Date:     May 22, 2007                                  */
/*   Homepage: wwww.1-2-3-4.info                             */
/*-----------------------------------------------------------*/
/*   License:  Fully open source without restrictions.       */
/*             Please keep footer credits with a link to     */
/*             Wolfgang (www.1-2-3-4.info). Thank you!       */
/*************************************************************/







/***************/
/*  1. GLOBAL  */
/***************/

/* NON-HEADER */
*{padding:0; margin:0;}
body
{
	font-size: 62.5%;
	background-color: #ffffff;
	font-family: verdana,arial,sans-serif;
}

/*Font-size: 1.0em = 10px when browser default size is 16px*/


.page-container
{
	width: 95%;
	
	
	margin: 0px auto;
	margin-top: 10px;
	margin-bottom: 10px;
	border: solid 1px #969696;
	font-size:1.0em;
	
}

/* --- START COPY here --- */

/* HEADER */


.header
{
	width: 100%;
	font-family: "trebuchet ms", arial, sans-serif;
}

.header-top
{
	width: 100%;
	height: 80px;
	background: #f0f0f0 
			 
				;
	overflow:visible;
}

.header-middle
{
	width: 100%;
	height: 150px;
	background: #e6e6e6 
			 
				;
	overflow:visible;
}



 
	@media screen and (max-width:
			-1px)
	{
		@media screen and (max-resolution: 96dpi)
		{
			.header-bottom
			{
				height: 0px;
				width: 0px;
				visibility: hidden;
				overflow: hidden;
			}
		}

		@media screen and (min-resolution: 97dpi)
		{
			.header-bottom
			{
				height: 0px;
				width: 0px;
				visibility: hidden;
				overflow: hidden;
			}
		}
	}

	@media screen and (min-width:
			)
	{
		@media screen and (max-resolution: 192dpi)
		{
			.header-bottom
			{
				width: 100%;
			}
		}

		@media screen and (min-resolution: 97dpi)
		{
			.header-bottom
			{
				height: 0px;
				width: 0px;
				visibility: hidden;
				overflow: hidden;
			}
		}
	}


.header-breadcrumbs
{
	clear: both;
	width: 100%;
	padding: 1.0em 0 1.5em 0; background:#ffffff
			 repeat-y;
}

/*************/
/*  2. HEAD  */
/*************/



.sitelogo
{
	width: 60px;
	position: absolute;
	z-index: 1;
	margin: 22px 0 0 20px;
	background: url(plugins/auto/squelette_multiflex_officiel/v1.2.2/img/bg_head_top_logo.jpg);
}

.sitename
{
	/*width: 300px;*/
	width: auto;
	height: 45px;
	position: absolute;
	z-index:1;
	margin:20px 0 0 90px;
	overflow:visible;
}

.sitename h1 { font-size: 220%; }
.sitename h1 a { margin-right: 3px; }
.sitename h1 a span { margin-left: -3px; }
.sitename h2 { margin: -4px 0 0 0; font-size: 120%; }
.sitename a { text-decoration: none; }
.sitename a:hover { text-decoration: none; color: #323232; }

.header-top .sitename a { color: #7d7d7d; }
.header-top .sitename h2 { color: #7d7d7d; }
.header-middle .sitename a { color: rgb(234,239,247); }
.header-middle .sitename h2 { color: rgb(234,239,247); }



 
	.nav0
	{
		width: 400px;
		margin-top: 25px;
		z-index:2;
		float: right;
	}


.nav0 ul { float: right; padding: 0 20px 0 0; }
.nav0 li { display: inline; list-style: none; }
.nav0 li a { padding:0 0 0 3px; text-decoration: none; }
.nav0 a:hover { text-decoration: none; color: #323232; }
.nav0 a img { height: 14px; border: none; }



 
	@media screen and (min-width:
			)
	{
		@media screen and (max-resolution: 96dpi)
		{
			.nav1
			{
				width: 400px;
				z-index: 3;
				margin-top: 7px;
				float: right;
				clear: both;
			}

			.nav1 ul
			{
				float: right;
				padding: 0 15px 0 0;
				font-weight: bold;
			}	

			.nav1 li
			{
				display: inline;
				list-style: none;
			}
		}

		@media screen and (min-resolution: 97dpi) and
				(max-resolution: 192dpi)
		{
			.nav1
			{
				width: 800px;
				z-index: 3;
				margin-top: 7px;
				float: right;
				clear: both;
			}

			.nav1 ul
			{
				float: right;
				padding: 0 15px 0 0;
				font-weight: bold;
			}	

			.nav1 li
			{
				display: inline;
				list-style: none;
			}
		}

		@media screen and (min-resolution: 193dpi)
		{
			.nav1
			{
				padding-top: 40px;
				width: 360px;
				z-index: 3;
				margin-top: 7px;
				clear: both;
				display: flex;
				flex-direction: column;
				float: right;
			}

			.nav1 ul
			{
				float: right;
				padding: 0 15px 0 0;
				font-weight: bold;
			}	

			.nav1 li
			{
				display: flex;
				list-style: none;
				width: 200px;
				float: right;
			}
		}
	}

	@media screen and (max-width:
			-1px)
	{
		.nav1
		{
			padding-top: 40px;
			width: 180px;
			z-index: 3;
			margin-top: 7px;
			clear: both;
			display: flex;
			flex-direction: column;
			float: right;
		}

		.nav1 ul
		{
			float: right;
			padding: 0 15px 0 0;
			font-weight: bold;
		}	

		.nav1 li
		{
			display: flex;
			list-style: none;
			width: 100px;
			float: right;
		}
	}


.nav1 li a
{
	display: block;
	float: left;
	padding: 2px 5px 2px 5px;
	text-decoration: none;
	font-size: 120%;
}
.nav1 a:hover { text-decoration: none; color: #323232; }

.header-top li a { color: #7d7d7d; }
.header-middle li a { color: rgb(234,239,247); } 



 
	@media screen and (min-width:
			)
	{
		@media screen and (max-resolution: 96dpi)
		{
			.sitemessage
			{
				width: 400px;
				height: 120px;
				z-index: 1;
				color: rgb(234,239,247);
				overflow: hidden;
				float: right;
				margin: 20px 0 0 480px;
			}
		}

		@media screen and (min-resolution: 97dpi) and
				(max-resolution: 192dpi)
		{
			.sitemessage
			{
				width: 800px;
				height: 240px;
				z-index: 1;
				color: rgb(234,239,247);
				overflow: hidden;
				float: right;
				margin: 40px 0 0 960px;
			}
		}

		@media screen and (min-resolution: 193dpi)
		{
			.sitemessage
			{
				width: calc(100%
						 -
						480px);
				height: 240px;
				z-index: 1;
				color: rgb(234,239,247);
				overflow: hidden;
				float: right;
				margin-top: 40px;
			}
		}
	}

	@media screen and (max-width:
			-1px)
	{
		.sitemessage
		{
			width: calc(100%  -
					240px);
			height: 120px;
			z-index: 1;
			color: rgb(234,239,247);
			overflow: hidden;
			float: right;
			margin-top: 20px;
		}
	}


.sitemessage h1 { width: 400px; text-align: right; font-size: 230%;}
.sitemessage h2
{
	float: right;
	width: 320px;
	margin: 8px 0 0 0;
	text-align: right;
	line-height: 100%;
	font-size: 160%;
}
.sitemessage h3
{
	float: right;
	width: 320px;
	margin: 10px 0 0 0;
	text-align: right;
	font-size: 140%;
}
.sitemessage h3 a { text-decoration: none; color: rgb(234,239,247); }
.sitemessage h3 a:hover { text-decoration: none; color: #323232; }



	
	
	
	
	
	
	
	
	
	
	


/*Drop-down menu*/
.nav2
{
	white-space: nowrap /*IE hack*/;
	float: left;
	width: 100%;
	border: none;
	background: #e1e1e1 
			no-repeat;
	color: #4b4b4b;
	font-size: 130%;
}

/*Color navigation bar normal mode*/
.nav2 ul
{
	list-style-type: none;
}

.nav2 ul li
{ 
	width:
		 
		calc((100% / 10));
	float: left;
	z-index: auto;
	
	
}
.nav2 ul li a
{
	float: none;
	display: block;
	height: 3.1em;
	line-height: 3.1em;
	padding: 0 16px 0 16px;
	text-decoration: none;
	font-weight: bold;
	color: #646464;
}
.nav2 ul li ul { display: none; border: none; }

/*Non-IE6 hovering*/
.nav2 ul li:hover { position: relative; } /*Sylvain IE hack*/
.nav2 ul li:hover a
{
	background-color: #d2d2d2;
	text-decoration: none;
	
} /*Color main cells hovering mode*/
.nav2 ul li:hover ul
{
	display: block;
	width: 10.0em;
	position: absolute;
	z-index: 999;
	top: 3.0em;
	margin-top: 0.1em;
	left: 0;
}
.nav2 ul li:hover ul li a
{
	white-space: normal;
	display: block;
	width: 10.0em;
	height: auto;
	line-height: 1.3em;
	margin-left: -1px;
	padding: 4px 16px 4px 16px;
	border-left: solid 1px #afafaf;
	border-bottom: solid 1px #afafaf;
	background-color: #ededed;
	font-weight: normal;
	color: #323232;
} /*Color subcells normal mode*/
.nav2 ul li:hover ul li a:hover
{
	background-color: #d2d2d2;
	text-decoration: none;
} /*Color subcells hovering mode*/

/*IE6 hovering*/
.nav2 table
{
	position: absolute;
	top: 0;
	left: 0;
	border-collapse: collapse;
}
.nav2 ul li a:hover
{
	position: relative /*Sylvain IE hack*/;
	z-index: 1000 /*Sylvain IE hack*/;
	background-color: #d2d2d2;
	text-decoration: none;
} /*Color main cells hovering mode*/
.nav2 ul li a:hover ul
{
	display: block;
	width: 10.0em;
	position: absolute;
	z-index: 999;
	top: 3.1em;
	left: 0;
}
.nav2 ul li a:hover ul li a
{
	white-space:normal;
	display: block;
	height: 1px;
	line-height: 1.3em;
	padding: 4px 16px 4px 16px;
	border-left: solid 1px #afafaf;
	border-bottom: solid 1px #afafaf;
	background-color: #ededed;
	font-weight: normal;
	color: #323232;
} /*Color subcells normal mode*/
.nav2 ul li a:hover ul li a:hover
{
	background-color: #d2d2d2;
	text-decoration: none;
} /*Color subcells hovering mode*/

.header-breadcrumbs ul
{
	float: left;
	width: calc(100% - 240px);
	list-style: none;
	padding: 0 0 0 15px;
	font-family: verdana, arial, sans-serif;
}
.header-breadcrumbs ul li
{
	display: inline;
	padding: 0 0 0 10px;
	background: transparent url(sites/esep/squelettes/img/bg_bullet_arrow.gif)
			no-repeat 0 50%;
	font-weight: bold;
	color: #7d7d7d;
	font-size: 100%;
}
.header-breadcrumbs ul a
{
	color: rgb(70,122,167);
	text-decoration: none;
}
.header-breadcrumbs ul a:hover
{
	color: rgb(42,90,138);
	text-decoration: underline;
}

.header-breadcrumbs .searchform
{
	float: right;
	width: 200px;
	padding: 0 17px 0px 0px;
}
.header-breadcrumbs .searchform form fieldset
{
	float: right;
	border: none;
}
.header-breadcrumbs .searchform input.field
{
	width: 10.0em;
	padding: 0.2em 0 0.2em 0;
	border: 1px solid #c8c8c8;
	font-family: verdana, arial, sans-serif;
	font-size: 120%;
	 
			border-radius: 10px;
	height: 16px;
}
.header-breadcrumbs .searchform input.button
{
	width: 3.0em;
	padding: 1px;
	background: #e6e6e6;
	border: solid 1px #969696;
	text-align: center;
	font-family: verdana,arial,sans-serif;
	color: #969696;
	font-size:120%;
	 
			border-radius: 10px;;
	height: 23px;
}
.header-breadcrumbs .searchform input.button:hover
{
	cursor: pointer;
	border: solid 1px #505050;
	background: #dcdcdc;
	color: #505050;
}

/* --- END COPY here --- */

/*********************/
/*  6. CLEAR FLOATS  */
/*********************/
.page-container:after, .header:after, .header-bottom:after,
		.header-breadcrumbs:after
{
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

/***********************************/
/*  7. PRINTING and MISCELLANEOUS  */
/***********************************/
@media print
{
	.header-tops
	{
		width: 100%;
		height: 80px;
		background: #f0f0f0;
		overflow: visible;
	}
}
@media print
{
	.nav2
	{
		float: left;
		width: 100%;
		border: none;
		background: #f0f0f0;
		color: #4b4b4b;
		font-size: 1.0em;
		font-size: 130%;
	}
} /*Color navigation bar normal mode*/
@media print
{
	.header-breadcrumbs
	{
		width: 100%;
		background: transparent;
	}
}