body /*corps de la page*/
{
	font-family: Arial; /*police appliquée a toute la page*/
	width:1024px; /*largeur de la page*/
	height:768px; /*hauteur de la page*/
	margin: auto; /*pour avoir la page toujours centrée par rapport à la résolution de l'écran*/
   	background-image:url("../Ressources/Images/wallpaper.jpg");/*image de fond carbone*/
   	backgroud-fixed: yes; /*fixer le fond d'écran*/

}

#monCadre { /*page en elle même*/
width:100%; /*largeur de 100% pour être dans le body*/
height:100%;/*hauteur de 100% pour être dans le body*/
background-image:url("../Ressources/Images/fondAccueil.jpg");/*image de fond de la page*/

}


#menuDeroulant /*menu 2 (solution interne...)*/
{
 width: 800px; /*largeur*/
 list-style-type: none; /*aucun style pour les listes*/
 margin-top: -20px;/*marge supérieur pour centrer le menu sur la hauteur*/
padding-left: 100px; /*espace à gauche pour centrer le menu sur la largeur*/
 position: absolute; /*position absolue pour enlever les espace autour du menu et pour éviter que les div cacher pousse les autres div quand elles apparaissent au passage de souris*/
}

#menuDeroulant li /*menu 2 liste li*/
{
 float: left; /*positionné a gauche*/
 width: auto; /*taille automatique*/
  margin: 0; /*pour homogénéiser le rendu*/
 padding: 1; /*pour homogénéiser le rendu*/
 border: 0; /*pour homogénéiser le rendu*/

}

#menuDeroulant .sousMenu /*sous menu du menu2*/
{
 list-style-type: none; /*aucun style pour les listes*/
}

#menuDeroulant .sousMenu li /*liste des activité dans le sous menu du menu2*/
{
 float: none; /*pour empécher les éléments de flotter*/
}	


/*#menuDeroulant li a:active { background-color:#5F879D;}*/

/**/
#menuDeroulant .sousMenu li a:link,
#menuDeroulant .sousMenu li a:visited /*menu activités*/
{
 display: block; /*présenté en bloc, c'est à dire toutes les activités sont l'une en dessous de l'autre*/
 color: #FFA500;/*couleur de police*/
 padding: 6px 5px; /*espacement de gauche et en haut pour éviter que les textes soient coller aux bords du menu*/
 margin: 0;/*pour homogénéiser le rendu*/
 border: 0;/*pour homogénéiser le rendu*/
 text-decoration: none; /* Les liens ne seront plus soulignés quand on pointera dessus */
 text-align:left; /*texte aligné a gauche*/
 opacity:0.8; /*transparence du menu*/
filter : alpha(opacity= 85);/*transparence du menu*/
background-color: #000000 ; /*fond du menu noir*/

}

#menuDeroulant a /*lien le menu déroulant*/
{
	 color: #FFA500;/*couleur de police*/
	 text-decoration: none;/* Les liens ne seront plus soulignés */
}
#menuDeroulant .sousMenu li a:hover /*activités lorsque la souris pointe dessus*/
{

background-color: #FFA500; /*fond lorsque la souris passe sur une activité*/
color: #000000;/*couleur de police lorsque la souris passe sur une activité*/
}	

#menuDeroulant .sousMenu li /*liste des activité dans le sous menu*/
{
 float: none;/*pour empécher les éléments de flotter*/
 margin: 0;/*pour homogénéiser le rendu*/
 padding: 0;/*pour homogénéiser le rendu*/
 border: 0;/*pour homogénéiser le rendu*/
 border-top: 1px solid #FFA500; /*bordure du haut pour bien séparer les activités*/
}

#menuDeroulant .sousMenu /*sous menu activités*/
{
 display: none; /*le sous menu sera caché*/
 list-style-type: none;/*aucun style pour les listes*/
 margin: 0;/*pour homogénéiser le rendu*/
 padding: 0;/*pour homogénéiser le rendu*/
 border: 0;/*pour homogénéiser le rendu*/
}

#menuDeroulant li:hover > .sousMenu { display: block; } /*lorsque la souris va pointer sur interne ou externe le menu va s'afficher avec les activités l'une au dessous de l'autre*/

#menuDeroulant /*titre du menu déroulant*/

{
	font-size: 25px; /*taille de la police*/ 
	text-align:center; /*texte centré*/
}

#menuDeroulant .m1 /*Interne et Externe*/
{
	 color: white;/*couleur de police*/
}

#menuDeroulant .sousMenu .m2 /*nom des activités dans le sous menu*/
{
	font-size: 15px; /*taille de la police*/ 
	
	}
	
#menu_nav { /*menu du haut (recrutement..)*/
    margin-top: 0.7%; /*pour ne pas coller l'écriture en haut de la page*/
    list-style: none ; /*aucun style appliqué à la liste (bouton,chiffre..)*/
    text-align: center ; /*texte centré*/
    }
  
#menu_nav li { /*liste li* (menu du haut)/
    display: inline ; /*affichage en ligne des mots (et pas en colonne)*/
    }
    
#menu_nav li a { /*lien hypertexte dans la liste li (menu du haut)*/
    padding: 2px 50px; /*espacement entre les mots*/
    color: #fff ; /*couleur des mots (blanc)*/
    font: 1em Arial ; /*taille et type de police*/
    line-height: 1sem ; /*interlignage du bloc texte*/
    text-align: right ; /*texte à droite*/
    text-decoration: none ; /* Les liens ne seront plus soulignés */
    }
 
#imgtop /*logo omicrone au dessus de carrousel*/
{
    margin-left:170px; /*marge de gauche pour centrer l'image sur la page*/
    margin-top:40px;/*marge du haut pour pas que l'image soit superposé au bandeau d'image*/
    height:145px; /*hauteur de l'image*/
    width:500px; /*largeur de l'image*/
}
#imgbottom /*image constituant le pied de page*/
{
    margin-right:-4px; /*marge de gauche*/
    margin-bottom:-25px; /*marge inférieur*/
    float:left; /*positionné a gauche*/
    height:90px; /*hauteur*/
    width:1024px; /*largeur*/
    margin-top:10px; /*marge supérieur*/
}

#f3 /*div contenant le logo omicrone*/
{
      font-size: 50; /*taille de la police*/
    color : white; /*couleur de police*/
   margin-top: 40px; /*marge supérieur pour éviter que l'image soit superposé sur le bandeau */
   margin-left: 70px; /*marge de gauche*/
}


#f4 /*div contenant le carousel*/
{
    
   margin-top: -70px; /*marge supérieur pour mettre le carousel juste sous l'image omicrone*/
   margin-left: 160px; /*marge de gauche pour centrer le carousel sur la page*/
}

#top /*div menu haut (recrutement..)*/
{
 margin-top: -3px;/*marge supérieur (centrage axe y)*/
}


a/*tous les liens hypertextes non spécifiés unitairement pour seront traités comme sa */
{
   text-decoration: none; /*menu 1 (recrutement..)*//*menu 1 (recrutement..)*/
   color: white; /* Les liens seront blanc*/
}

a:hover /* Quand le visiteur pointe sur le lien */
{
   text-decoration:none; /* Les liens ne seront plus soulignés quand on pointera dessus */
   color: white; /* Le lien sera écrit en noir quand on pointera dessus */
}

#black td /*menu 1 (recrutement..)*/
{
	width: 270px; /*taille des cellule du tableau*/
	height:40px; /*hauteur*/
	text-align:center; /*texte centré*/
	}
	
#black a /*lien hypertexte menu 1 (recrutement..)*/
{
	
	text-decoration: none; /*menu 1 (recrutement..)*/
   color: white; /*couleur de police*/
   font-size: 12pt; /*taille de la police*/
	}
	
	
#yellow td /*menu 2 avec effet machine à écrire*/
{
	height:38px; /*hauteur*/
	text-align:center;/*texte centré*/
	}

.yellow  /*menu 2 avec effet machine à écrire*/
{
	color:black; /*couleur de police*/
	font-size: 16pt; /*taille de la police*/
	font-weight: Bold; /*texte en gras*/
	}

#dark td /*menu 3 avec menu caché : cellule du tableau*/
{
	height:40px; /*hauteur*/
	text-align:center; /*texte centré*/
	}
	
#dark ul  /*menu 3 avec menu caché : liste dans le tableau*/
{
	margin-left: 35px; /*marge de gauche*/
	}



#bottom  /*div pour le pied de page*/
{
    margin-top: -175px; /*marge supérieur pour positionné le pied de pages*/
}

.optim /*mention site optimé pour*/
{
   margin-left: 78%; /*marge de gauche pour mettre le texte à droite*/
   font-family: Arial; /*police*/
   margin-top:-23px; /*marge pour positionné le texte sous l'image avec les bonhomme*/
   color:white; /*couleur de police*/
   font-size: 8pt; /*taille de la police*/
}
.mention /*positionnement lien mentions légales*/
{
	margin-top: 75px; /*marge supérieur pour fixer le lien en dessous des bonhommes blancs*/
   margin-left: 9%; /*marge de gauche pour positionner le lien en dessous des bonhommes */
}

.mention a /*lien mentions légales*/
{
	color:white; /*couleur blanc*/
	font-family: Arial; /*police*/
	}