/*****************************
 ******  FOR CORE SITE ***
 *****************************/
body {
	/*border: blue 1px solid;*/
	margin: 0;
	margin-top: 25px;
	font-family:verdana;
	font-size: 11px;
}
p {
	/*border: red 1px solid;*/
	border: 0;
	margin: 0;
	padding:0;
}

/*****************************
 ******  FOR the header *******
 *****************************/
#header {
	/*border: blue 1px solid;*/
	background: url(../images/headerbg.bmp) repeat-x ;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 15px;
}
#header p{
	/*border: yellow 1px solid;*/
	color: White;
	text-align: left;
	vertical-align: text-bottom;
	height: 65px;
	margin: 0;
	padding: 0;
}
#header #logo {
	/*border: red 1px solid;*/
	float: right;
}
/*****************************
 ***  FOR the Core page *****
 *****************************/
#Core {
	/*border: solid 1px pink;*/
	background: rgb(220,221,222); /*rgb(192, 192, 192);*/
	background-image: url(../images/bg.JPG);
	background-position: bottom right;
	background-repeat: no-repeat;
	background-attachment: scroll;
}
#pagecontent {
	/*border: solid 1px black;*/
	padding:  0px 0px 0px 0px;
	float: right;
	width: 85%;
}

/*****************************
 ******  FOR the footer *******
 *****************************/
#footer {
	/*border: solid 1px green;*/
	background: url(../images/footerbg.gif) repeat-x;
	margin: 1px 0px 0px 0px;
	clear: both;
	width: 100%
}
#footer p {
	/*border: solid 1px black;*/
	vertical-align: top;
	margin: 0;
	padding: 25px 5px 0px 0px;
	font-size: 10px;
	color: white;
	text-align: right;
	height: 52px;
}
#footer img{
	/*border: solid 1px #BC8F8F;*/
	float: left;
	padding:0;
}
#footer a {
	color: White;
	text-decoration: none;
}
#footer a:hover {
	text-decoration: underline;
}



/*****************************
 ******  FOR the MENU *******
 *****************************/
#menu {
	/*border: red solid 1px;*/
	float: left;
	padding: 15px 0px 0px 0px;
	width: 14%;
	height: 500px; /* For the image background */
}
#menu ul {
/* Supprime les puces des elements du menu */ 
	margin: 0;
	padding: 0;
	list-style-type: none;
}
#menu li {
	/* Définie l'aspect d'un item de la liste */
	cursor: pointer;
	margin: 2px 0px 0px 0px;
	height: 25px; /* Hauteur de cellule */
	line-height: 25px; /* Hauteur de ligne */
	text-align: left;
	font-weight: normal;
	border: 1px solid gray;
	background: rgb(204, 204, 204)/*#DCDCDC*/;
}
#menu a {
/* Supprime l'ascpet lien hypertexte des balise A */
	color: black;
	text-decoration: none;
	display: block;
	padding: 0px 0px 0px 15px;
	border: 0 none;
	height: 100%;
}
#menu li a:hover, #menu dt a:hover {
/* Code utiliser pour le menu quend la souris passe sur les items 
NOTE : Lorsuq'un item est sélectionner on peux recliquer dessus. */
	color:#FFFFFF;							/* Le texte est blanc */
	background-color: #E729A0;			/* Le fond est Rose */
}
#menu li a.selected {
/* Code utiliser pour le menu quend un item a été selectionné et que l'on réaffiche la page
dans ce cas le script à ajouter la class "selected" à l'élément sélectionné.
NOTE : Lorsque l'utilisateur clique sur un autre item du menu il faut enlever la classe 
		 "selected" de l'ancien item selectionnée.*/
	font-weight: bolder;
	color:#FFFFFF;							/* Le texte est blanc */
	background-color: #0099FF ;			/* Le fond est bleu */
}

/*****************************
 ***  FOR the page text *****
 *****************************/
#text #bloc {
	/*border: 1px red solid;*/
	padding: 10px 0px 0px 30px;
	vertical-align: top;
	width: 40%;
	float:left;
}
#text #ligne {
	/*border: 1px red solid;*/
	padding: 10px 0px 20px 30px;
	vertical-align: top;
	width: 99%;
	float:left;
}
#text h1 {
	/*border: 1px pink solid;*/
	display: list-item;
	list-style-image: url(../images/bullet.bmp);
	list-style-position: outside;
	margin-left: 15px;
	padding: 10px 0px 0px 0px;
	font-size: larger;
	font-weight: bold;
	color: #D1178C;
}
#text #li {
	/*border: 1px green solid;*/
	padding-left: 5px;
	text-align: left;
	font-weight: bold;
	color: #D1178C;
}
#text #gras {
	font-weight: bold;
	color: black;
}
#text p{
	/*border: 1px blue solid;*/
	text-align: justify;
	padding: 0px 0px 10px 10px;
	margin: 0px 0px 0px 0px;
}


/*****************************
 ****  FOR JOBS PAGE *****
 *****************************/
#annonce #poste{
	/*border: 1px blue solid;*/
	text-align: justify;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
}
#annonce #detail{
	/*border: 1px red solid;*/
	text-align: left;
	padding: 5px 5px 15px 25px;
	margin: 0px 0px 0px 0px;
}
#annonce #li {
	/*border: 1px green solid;*/
	padding-left: 0px;
	text-align: left;
	font-weight: bold;
	color: #D1178C;
}
#annonce a {
/* Supprime l'ascpet lien hypertexte des balise A */
	text-decoration: none;
}
#annonce a:hover {
	text-decoration: underline;
}
/*****************************
 ****  FOR PRODUCTS PAGE *****
 *****************************/
#square_menu{
	/*border: Red 1px solid;*/
	float: left;
	clear: left;
	padding: 15px 0px 0px 15px;
	width: 200px;
}
#square_menu ul{
	/*border: yellow 1px solid;*/
	list-style-type: none;
	margin: 0px 0px 0px 0px;
	padding: 0px 2px 0px 0px;
}
#square_menu li{
	/*border: blue 1px solid;*/
	list-style-type: none;
	cursor: pointer;
	margin: 2px 0px 0px 0px;
	text-align: center;
}
#square_menu a { 
	border: gray 1px solid;
	display: block;
	text-decoration: none;
	vertical-align: middle;
	margin: 0;
	width: 100%;
	height: 40px;
	line-height: 40px; /*Vertical alignment */
	color: White;
}
#square_menu #square_obs 	 				{ background: #C10061 }
#square_menu #square_obs:hover 			{ background: #D11071 }
#square_menu #square_it  					{ background: #8DC248 }
#square_menu #square_it:hover			{ background: #9DD258 }
#square_menu #square_ouverture  			{ background: #1E857F }
#square_menu #square_ouverture:hover { background: #2F958F }
#square_menu #square_tec  					{ background: #00B5EE }
#square_menu #square_tec:hover 		{ background: #10C5FE }
#square_menu #square_maghreb  			{ background: #F9D400 }
#square_menu #square_maghreb:hover 	{ background: #F9E410 }
#square_menu #square_reseau 				{ background: #DA74BC}
#square_menu #square_reseau:hover 	{ background: #EA84DC}

#square_default {
	/*border: 1px solid blue;*/
	float:left;
}
#square_contents{
	/*border: green 1px solid;*/
	position: absolute;
	margin: 17px 0px 0px 2px;
}
#square_default p {
	padding: 100px 0px 0px 100px;
	text-align: center;
}


/*****************************
 ******  FOR ALL FILES *******
 *****************************/
#fiche {
	background: #E2E2E2;
	font-family: verdana;
	font-size: 10px;
	color: Black;
	text-align: left;
	width: 590px;
}
#fiche p {
	margin: 0;
	padding: 5px 0px 10px 0px;
	text-align: left;
}
#fiche #titre {
	/*border: 1px solid black;*/
	font-weight: bold;
	color: white;
	font-size: 12px;
	padding: 25px 15px 2px 15px;
}
#fiche #content{
	/*border: 1px solid red;*/
	padding: 0px 15px 0px 15px;
}
#fiche #colonne {
	/*border: 1px solid green;*/
	display: inline;
	vertical-align: top;
}
#fiche #colored{
	font-size: 11px;
}
#fiche #why {
	/*border: 1px solid black;*/
	font-size: 10px;
	font-weight: bold;
	padding: 5px 15px 10px 15px;
}
#fiche #li {
	font-weight: bold;
}

/*****************************
 *****  FOR SINGLE FILES *****
 *****************************/
/******  RESEAUX ******/
#reseau 				{border: 1px solid gray;}
#reseau #colored 	{color: #DA74BC;}
#reseau #titre 		{background-color: #DA74BC;}
/******  TEC ******/
#tec 					{border: 1px solid gray;}
#tec #colored 		{color: #00B5EE;}
#tec #titre 			{background-color: #00B5EE;}
/******  OUVERTURE ******/
#ouverture 			{border: 1px solid gray;}
#ouverture #colored {color: #1E857F;}
#ouverture #titre 	{background-color: #1E857F;}
/******  OUTILS IT ******/
#it 						{border: 1px solid gray;}
#it #titre 			{background-color: #8DC248;}
#it #colored 			{color: #84B93E;}
/******  MAGHREB ******/
#maghreb 				{border: 1px solid gray;}
#maghreb #colored 	{color: #E8C600;}
#maghreb #titre 		{background-color: #F9D400;}
/******  OBSERVATOIRE ******/
#obs 					{border: 1px solid gray;}
#obs #colored 		{color: #C10061;}
#obs #titre 			{background-color: #C10061;}



/*****************************
 ******  FOR the forms *******
 *****************************/
form{
	margin: 0 0 0 0;
}
label {
	/*border: 1px gray solid;*/
	text-align: right;
	vertical-align: top;
	font-weight: bold;
	width: 200px;
	float: left;
	display: block;
}
#info {
	/*border: 1px gray solid;*/
	color: red;
	margin-left: 10px;
	font-weight: normal;
	text-align: left;
	width: 350px;
}
input, textarea, button {
	border: 1px gray solid;
	margin-left: 10px;
	background: rgb(204,204,204);
	width: 350px;
	color: black;
}
input.button {
	width: 200px;	
	cursor: pointer;
	background: #0099FF;
	color: white;
}