﻿

/* MODIFICATION
––––––––––––––––––––––––––––––––––––––––––––––––
––––––––––––––––––––––––––––––––––––––––––––––––
	UPDATED: 31 juillet 2008 10:32
	AUTHOR: Joel Lachance
	UPDATES: Dernières corrections
––––––––––––––––––––––––––––––––––––––––––––––––
––––––––––––––––––––––––––––––––––––––––––––––––*/


/* LEGEND -_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_
-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_

1.0 --- WEBSITE SPECIFICATION
2.0 --- RESET STYLESHEET
3.0 --- GENERIC HTML
4.0 --- COMMONLY USED
5.0 --- SECTION
	5.1 --- Header
	5.2 --- Content
		5.2.1 --- Content styles
	5.3 --- Footer
	5.4 --- Mobile
6.0 --- TEMPORARY

---------------------------------------------------------------------------
---------------------------------------------------------------------------*/


/* 1.0  WEBSITE SPECIFICATION
---------------------------------------------------------------------------
Vert fonc&eacute; = #074830
Vert lime = #deecb7
Texte courant = #003861

Titre onglets = 553px X 38px
Titre sections = 550px X 21px
Titre sections avec flèche = 550px X 31px

Marge = 1.375em
---------------------------------------------------------------------------*/


/* 2.0  RESET STYLESHEET
---------------------------------------------------------------------------
---------------------------------------------------------------------------*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}



/* 3.0 GENERIC HTML
---------------------------------------------------------------------------
---------------------------------------------------------------------------*/

body {
background: #000 url('../../images/background.gif');
font-family: helvetica, verdana, arial, sans-serif;
font-size: 100%;
line-height: 18px;
text-align: center;
}

h1 {
color: #003861;
font-size: 100%;
padding: 0 0 0 19px;
font-weight: bold;
text-transform: uppercase;
font-size: 14px;
}

h2 {
border-bottom: 2px dotted #cf8425;
display: block;
width: 547px;
margin: 24px 0 16px 20px;
padding: 0 0 3px 0;
font-size : 19px;
font-weight: normal;
color: #cf8425;
text-transform: uppercase;
line-height: 22px;
}

h3{
background: url('images/yellow-spacer.gif') no-repeat;
display: block;
width: 550px;
height: 40px;
margin: 24px 0 16px 17px;
font-size : 16px;
color: #005288;
line-height: 40px;
padding: 0px;
font-weight: normal;
}

p {
font-size: 12px;
}

.tdinscription {
text-align: right;
font-size: 12px;
font-weight: normal;
font-family: helvetica, verdana, sans-serif;
color: #003861;
}

a {
outline: none;
color: #003861;
}
a:hover{
	color: #cf8425;
	text-decoration: underline;
}
img {
border: 0;
}

hr{
visibility: hidden;
height: 100px;
}

li{
list-style-image: url('../images/arrow-list.gif');
margin: 0 0 16px 40px;
color: #003861;
font-size: 16px;
}

ul li ul li{
	padding: 0 0 0 0;
	margin-bottom: 0;
}

table{
font-size: 12px;
font-weight: bold;
font-family: helvetica, verdana, sans-serif;
color: #003861;
}

	table a{
	color: #003861;
	text-decoration: underline;
	}

	table a:hover{
	color: #7cb0c4;
	text-decoration: underline;
	}

th{
height: 25px;
background: #cde1e6;
vertical-align: bottom;
border-right: 1px dotted #7fa9bf;
padding: 5px;
}

td{
padding: 5px 5px 5px 0;
}

/* 4.0 COMMONLY USED
---------------------------------------------------------------------------
---------------------------------------------------------------------------*/

.hide
{
display: none;
}

.fl
{
float: left;
}

.fr
{
float: right;
}

.block
{
display: block;
}

.upcase{
text-transform: uppercase;
font-weight: bold;
}

.cb{
clear: both;
}

.nb{
	border: none;
}

.sub-content{
	padding:0 0 0 25px;
	margin-bottom:20px;
}

.sc-top{
	margin-top:18px;
}

#center .realisations ul li.note{
	font-size: 11px;
}

/* 5.0 SECTION
---------------------------------------------------------------------------
---------------------------------------------------------------------------*/

#container{
width: 976px;
margin: 0 auto;
text-align: left;
}


	/* 5.1 HEADER
	---------------------------------------------------------------------------
	---------------------------------------------------------------------------*/

	#top{
	width: 976px;
	background: #f6fefe;
	line-height: 0;
	padding: 0 0 7px 0;
	}


	/* 5.2  CONTENT
	---------------------------------------------------------------------------
	---------------------------------------------------------------------------*/

	#left{
	background: #e7ecee;
	float: left;
	position: relative;
	z-index: 1;
	width: 190px;
	}

		#left img{
		display: block;
		}

		#left ul{
		margin: 4px 0 24px 11px;
		width: 175px;
		background: #e3f0f2;
		}

		#left li{
		list-style-image: none;
		margin: 0 0 4px 0;
		padding: 0 0;
		border-bottom: 1px solid #074830;
		font-size: 13px;
		}

			#left ul a{
			color: #074830;
			text-decoration: none;
			display: block;

			}

			#left ul a:hover{
			color: #a2b371;
			text-decoration: none;
			}


	#center{
	width: 590px;
	background: #f8f8f6;
	float: left;
	}

		#center p{
		color: #003861;
		font-size: 13px;
		padding: 0 20px;
		line-height: 16px;
		}

		#center ul{
		margin-left: -4px;
		}

		#center li{
		font-size: 13px;
		list-style-image: url('../../images/list-center-ico.gif');
		padding: 0 20px 0 0;
		}

		#center table{
		margin-left: 20px;
		}

	#right{
	float: right;
	background: #e7ecee;
	width: 196px;
	}

	#right img{
	display: block;
	/*padding: 0;*/
	}


		/* 5.2.1  CONTENT STYLES
		---------------------------------------------------------------------------
		---------------------------------------------------------------------------*/

		.left-box{
		width: 174px;
		background: #cf8425;
		margin: 6px 0 15px 16px;
		padding-bottom: 8px;
		}

			.left-box img{
			margin: 0 0 0 7px;
			padding: 7px 0 0 0;
			}

		.left-box-content{
		width: 158px;
		background: #FFF;
		background: #e2e9ed url('../../images/shs-left-02.gif') no-repeat;
		margin: 9px 0 0 9px;
		color: #082b44;
		}

			.left-box-content p{
			margin: 0 0 0 0;
			padding: 8px 4px;
			font-size: 12px;
			font-weight: bold;
			}

			.left-box-content a{
			text-decoration: none;
			display: block;
			font-size: 12px;
			}

			.left-box-content a:hover{
			text-decoration: none;
			display: block;
			color: #cf8425;
			}


		.flash-intro{
		padding-left: 8px;
		z-index: 0;
		}

		.news-box{
		width: 576px;
		height: 66px;
		margin: 4px 0 0 8px;
		float: left;
		display: inline;
		background: url('../../images/fr/shs_center-02.jpg') no-repeat;
		}

		.news-box-en{
		width: 576px;
		height: 66px;
		margin: 4px 0 0 8px;
		float: left;
		display: inline;
		background: url('../../images/en/shs_center-02.jpg') no-repeat;
		}


			#center .news-box p{
			font-size: 13px;
			font-weight: bold;
			/*padding: 7px 32px 0 225px;*/
			padding: 0 20px 0 250px;
			line-height: 16px;
			}

			#center .news-box-en p{
			font-size: 13px;
			font-weight: bold;
			padding: 0 20px 0 225px;
			line-height: 16px;
			}


		.onglet{
		display: block;
		background: url('../../images/onglet-back.gif') no-repeat;
		width: 553px;
		height: 38px;
		margin: 0 0 0 20px;
		clear: both;
		color: #FFF;
		}
		.onglet-long{
		background: url('../../images/onglet-back-long.gif') no-repeat;
		}


			#center .onglet p{
			text-transform: uppercase;
			color: #FFF;
			font-weight: normal;
			font-size: 16px;
			padding-top: 10px;
			margin-left: -10px;
			display: block;
			}

			#center .onglet p span{
			font-size: 14px;
			}

			.onglet span{
			margin: 0;
			padding: 0;
			}

		.onglet-titre{
		margin: 0 0 0 20px;
		}

		.section-titre{
		margin: 24px 0 16px 20px;
		}

		.b-inscript-t{
		margin-left: 5px;
		vertical-align: middle;
		}

		.b-inscript{
		margin: 30px 0 0 22px;
		}

		#center .stitle{
		border-bottom: 2px dotted #bdced2;
		display: block;
		width: 547px;
		margin: 24px 0 16px 17px;
		padding: 0 0 3px 0;
		font-size : 19px;
		color: #8dbed4;
		text-transform: uppercase;
		}

		#center .gline{
		background: url('images/yellow-spacer.gif') no-repeat;
		display: block;
		width: 550px;
		height: 40px;
		margin: 24px 0 16px 17px;
		font-size : 16px;
		color: #005288;
		line-height: 40px;
		padding: 0px;
		}

			.gline-title
			{
			font-size: 18px;
			text-transform: uppercase;
			}

		#center .realisations{
		margin-top: -20px;
		}

			#center .realisations ul{
			margin: 0 20px 0px 20px;
			padding: 20px 0 20px 0;
			border-bottom: 1px solid #005086;
			}

				#center .realisations li{
				list-style-image: none;
				margin: 0;
				}

					#center .realisations ul li.note{
					font-size: 11px;
					}



			/* TOP MENU STYLES
			---------------------------------------------------------------------------
			---------------------------------------------------------------------------*/

			#top-menu{
			margin: 0 0 32px 20px;
			}

				#top-menu ul{
				float: left;
			    display: block;
			    list-style: none;
			    padding: 5px 0 0 0;
			    margin: 0 0 16px 0;
			    border: 0;
			    width: 100%;
			    vertical-align: middle;
				}

				#top-menu li{
			    display: block;
			    float: left;
			    margin: 0 0px 8px 0;
			    padding: 0 0px 0 0px;
			    border-right: 1px solid #cf8425;
			   	}

					#center #top-menu .noborder{
					border: none;
					}

					#top-menu li a{
					display: block;
				    text-decoration: none;
				    font-weight: bold;
				    color: #01416c;
				    padding: 5px 5px 0 5px;
				    margin: 0 0 0 0;
				    border: 0;
				    font-size: 9px;
				    line-height: 120%;
					text-transform: uppercase;
					height: 37px;
					float: left;
					}

					#top-menu li a:hover{
					background-color:#e7d5be;
					}
					#top-menu li .select:hover{
					background:	#e7d5be url('../../images/back-topmenu.gif');
					}

					#top-menu .select{
					background:	#e7d5be url('../../images/back-topmenu.gif');
					}

					#top-menu .select a:hover{
					display: block;
					height: 37px;
					}



			/* TABLE STYLES
			---------------------------------------------------------------------------
			---------------------------------------------------------------------------*/

			.th_titre{
			width: 218px;
			}

			.th_titre_emplois{
			width: 216px;
			}

			.th_experience{
			width: 92px;
			}

			.th_reference{
			width: 130px;
			}

			.th_disponibilite{
			width: 110px;
			border: none;
			}

			.th_assignation{
			width: 136px;
			}

			.th_date{
			width: 175px;
			border: none;
			}

			.th_seminaire{
			width: 125px;
			}

			.th_lieu{
			width: 20px;
			}

			.td_bp{
			background: #ebf4f6;
			width: 125px;
			}
			.th_sem{
			background: #cde1e6;
			border: none;
			border-top: 1px solid #FFF;
			border-bottom: 1px solid #FFF;
			}
			.td_bp_sem{
			background: #ebf4f6;
			border: none;
			border-top: 1px solid #FFF;
			border-bottom: 1px solid #FFF;
			}
			.td_bf{
			background: #cde1e6;
			width: 125px;
			}
			.td_bf_sem{
			background: #cde1e6;
			border: none;
			border-top: 1px solid #FFF;
			border-bottom: 1px solid #FFF;
			}
			.td_bp_right{
			background: #ebf4f6;
			border: none;
			border-top: 1px solid #FFF;
			border-bottom: 1px solid #FFF;
			}
			.td_bp_right_sem {
			background: #ebf4f6;
			border: none;
			border-top: 1px solid #FFF;
			border-bottom: 1px solid #FFF;
			}
			.td_bf_right{
			background: #cde1e6;
			border: none;
			border-top: 1px solid #FFF;
			border-bottom: 1px solid #FFF;
			}
			.td_bf_right_sem {
			background: #cde1e6;
			border: none;
			border-top: 1px solid #FFF;
			border-bottom: 1px solid #FFF;
			}
			.partenaires{
			font-weight: normal;
			border: none;
			margin: 25px 0 0 18px;
			}

			.partenaires td{
			border: none;
			vertical-align: top;
			font-family: helvetica, verdana, arial, sans-serif;
			font-size: 13px;
			}

			.comparaison{
			font-weight: normal;
			font-size: 13px;
			}

			.comparaison td{
			padding: 5px 5px 5px 0;
			}

			/* POPUP STYLES
			---------------------------------------------------------------------------
			---------------------------------------------------------------------------*/

			#popup{
			width: 423px;
			margin: 0 0 0 22px;
			}

				#popup img{
				display: block;
				}

			.popup_content{
			border: 1px solid #7fa9bf;
			border-bottom: none;
			}

				#center .popup_content p{
				padding: 8px;
				}

				#center .popup_content h1{
				padding: 8px;
				margin: 16px 0 0 0;
				}

			#corner {
			background: #cfe0e7 url("images/corner.jpg") no-repeat 0px 0px;
			width: 18px; height: 29px; /* Dimensions exactes de l'image de coin */
			float: left;
			}

			#solidcolor_bg {
			background: #cfe0e7;
			width: 200px; /* Largeur de la zone pour entrer le texte */
			padding: 3px;
			float: left;
			}

			#cut_bg {
			background: #cfe0e7 url("images/cut_bg.jpg") repeat-x 0px 0px;
			width: 407px; /* Largeur de la boite globale */
			float: left;
			font-size: 14px;
			font-weight: bold;
			color: #005288;
			margin: 6px 0 0 6px;
			}


			/* RIGHT COLUMN STYLES
			---------------------------------------------------------------------------
			---------------------------------------------------------------------------*/

			#search{
			width: 191px;
			height: 37px;
			background: #005288 url('../../images/back-input-form.gif') no-repeat;
			margin: 0 0 2px 0;
			}

				#search input{
				width: 121px;
				border: 0;
				margin: 8px 0 0 12px;
				color: #cc7b16;
				font-weight: bold;
				text-align: center;
				background: #FFF;
				}

			.search-b{
			float: right;
			margin: 3px 4px 0 0;
			}

			.right-box{
			width: 189px;
			background: #FFF;
			border: 1px solid #004776;
			margin: 0 0 4px 0px;
			font-weight: bold;
			color: #074830;
			font-size: 12px;
			padding: 0 0 20px 0;
			}

				.right-box p{
				font-size: 12px;
				}

				.right-box a{
				display: block;
				text-decoration: none;
				color: #0f5d8f;
				}

				.right-box a:hover{
				text-decoration: none;
				}

				.right-box table{
				width: 189px;
				margin-top: 10px;
				margin-left: 0;
				}

				.right-box td{
				border: none;
				padding: 0px 11px 0px 0px;
				vertical-align: top;
				font-size: 12px;
				font-family: helvetica, verdana, arial, sans-serif;
				font-weight: bold;
				color: #0f5d8f;
				}

					.right-box td img{
					margin-left: 3px;
					}


				#right .right-box .right-box-topimg{
				padding: 4px 0 0 4px;
				}

			.right-box-dot{
			margin: 16px 0 0 0;
			}



				.right-arrow {
				width: 20px;
				padding: 0px 0px 0px 0px;
				}

				.right-box-dot img{
				float: left;
				margin-left: 0;
				padding: 0 11px 16px 0;
				}



			/* SUBMENU STYLES
			---------------------------------------------------------------------------
			---------------------------------------------------------------------------*/

			.submenu{
			height: auto;
			position: absolute;
			left: 191px;
			top: 0;
			visibility: hidden;
			z-index: 3;
			background: url('images/spacer.gif');
			}

				#left .submenu ul{
				width: 139px;
				margin: 0;
				padding: 0;
				background: transparent;
				display: block;
				}

				#left .submenu li{
				color: #005288;
				border: none;
				text-transform: uppercase;
				font-size: 9px;
				background: #FFF url('../../images/subm-pattern.gif');
				padding: 4px 0 4px 0;
				margin-bottom: 0;
				border-right: 2px solid #dae3e5;
				border-left: 2px solid #dae3e5;
				border-bottom: 1px solid #618ca9;
				}

				#left .submenu li a{
				background: Window;
				color: #005288;
				font-weight: bold;
				padding: 4px 8px 4px 8px;
				background: url('images/subm-pattern.gif');
				}

				#left .submenu li a:hover{
				color: #FFF;
				background: #8dbed4 url('../../images/sub-menu-backover.gif') repeat-y;
				display: block;
				}



	/* 5.3  FOOTER
	---------------------------------------------------------------------------
	---------------------------------------------------------------------------*/

	#footer{
	clear: both;
	}

	#footer img{
	width: 976px;
	background: #FFF;
	padding-top: 24px;
	}



	/* 5.4  MOBILE
	---------------------------------------------------------------------------
	---------------------------------------------------------------------------*/

	#mobile{
	background: #FFF none;
	text-align: left;
	font-family: helvetica, verdana, arial, sans-serif;
	}

		#mobile p{
		margin: 0 0 0 4px;
		font-size: 10px;
		}

			#mobile p a{
			color: #01416c;
			font-weight: bold;
			}

		#mobile ul{
		margin: 12px 0 12px 0;
		}

		#mobile li{
		color: #01416c;
		list-style-image: none;
		padding: 0;
		margin: 0 0 0 4px;
		}

			#mobile li a{
			color: #01416c;
			font-size: 10px;
			font-weight: bold;
			text-decoration: underline;
			}

			#mobile li a:hover{
			color: #7cb0c4;
			text-decoration: none;
			}

		.retour{
		padding: 12px 0 0 0;
		display: block;
		}



/* 6.0 TEMPORARY --> use it to make quick test
---------------------------------------------------------------------------
---------------------------------------------------------------------------*/

.tablesep{
	border-right: 1px dotted #cf8425;
	border-bottom: 1px dotted #cf8425;
}

/*img, #subMenu-info img { behavior: url(/iepngfix.htc); }*/



#center #top-menu .select-noborder{
background: #dcedf4;
border: none;
}

#center #top-menu .select-noborder a:hover{
display: block;
height: 37px;
border: none;
}
#center .noborder{
border: none;
}

h2 a{
color: #8dbed4;
text-decoration: none;
}

/* controle d'administration du site */
#adminCtrl {
	position: absolute;
	top: 0px;
	left: 145px;
}
#adminCtrl2 {
	position: absolute;
	top: 47px;
	left: 375px;
	width: 200px;
}
.adminCtrl2txt {
	color: yellow;
	background-color: black;
	padding: 6px 6px 6px 6px;
	font-size: 18px;
	width: 500px;
}
.editTextarea {
	width: 100%;
	height: 100px;
}
.editedStar {
	color: red;
	font-family:  monospace;
	font-weight: bold;
	font-size: 20px;
}
#errMsgDiv {
	color: red;
	background-color: black;
	font-weight: bold;
	position: absolute;
	top: 27px;
	left: 145px;
}

/* NOUVEAU STYLE */

.mini-description{
	color: #003861;
	font-size: 9px;
	line-height: 9px;
}

.descriptiontxt{
	color: #003861;
	font-size: 12px;
	font-style: italic;
}

.txtpalebleu{
	color: #8dbed4;
	font-size: 12px;
}

.txtpalebleuBold{
	color: #8dbed4;
	font-size: 12px;
	font-weight: bold;
}


.txtbold{
	color: #003861;
	font-size: 12px;
	font-weight: bold;
}

.uppercasetxt{
	color: #003861;
	font-size: 12px;
	font-weight: bold;
	text-transform: uppercase;
}

.geanttxt{
	color: #003861;
	font-size: 14px;
	font-weight: bold;
}

.geanttxt-upper{
	color: #003861;
	font-size: 14px;
	font-weight: bold;
	text-transform: uppercase;
}


/* ancien style*/
.style1 {
	font-family: helvetica, verdana, arial, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #7badc2;
}
.style2 {
	font-size: 10px;
	color: #7badc2;
	font-family: helvetica, verdana, arial, sans-serif;
}
.style3 {
	font-size: 13px;
	color: #7fa9bf;
	font-weight: bold;
	font-family: helvetica, verdana, arial, sans-serif;
}
.style4 {
	font-family: helvetica, verdana, arial, sans-serif;
	color: #000000;
	font-size: 12px;
}
.style5 {
	font-family: helvetica, verdana, arial, sans-serif;
	font-weight: bold;
	color: #000000;
	font-size: 12px;
}
.style6 {
	font-family: helvetica, verdana, arial, sans-serif;
	color: #000000;
	font-size: 11px;
}