/* DOCUMENT CSS (style.css) QUI PILOTE TOUT CE QUI CONCERNE LA MISE EN FORME DE LA PAGE DU SITE (version anglaise) */ 
			  
			  
 
/* Merci à Olivier PATRY pour son tutoriel sur le site Alsacreations ( http://css.alsacreations.com ) qui m'a été d'une grande utilité et dont je me suis largement inspiré !!! 
*/




                                      /* MISE EN PLACE DU CANEVAS GENERAL DU SITE */


/* On définit les styles qui serviront à la mise en page générale du site (couleurs, actions, positions,...). */

 /* On définit les marges haute et basse à 0 et les marges droite et gauche à 0.
 * On met le padding à 0 pour le navigateur Opera qui définit des padding par défaut pour le body.
 * On met une marge de 1 pixel entre le haut du site et la barre d'outils du navigateur afin d'aérer un peu la position du site.
 * On utilise "text-align: center ;": pour Internet Explorer, c'est la seule façon de centrer les éléments de type block avec ce navigateur.
 * On a ajouté de quoi mettre une police de caractère (..., Verdana, Helvetica, Arial ... de 0.75em) et une couleur de fond (gris-bleu pâle).
 */

body{
margin: 0px 0;
padding: 0;
text-align: center;
font: 0.75em "Trebuchet MS",Verdana, Arial, Helvetica, sans-serif;
background: #B8D4E4;
}




                         /* CREATION DE LA DIVISION #conteneur QUI DELIMITE ET CONTIENT L'ENSEMBLE DU CONTENU DES PAGES DU SITE */
				 
				 
/* Le site ayant été conçu pour un écran trvaillant avec une définition de 800x600, on définit la largeur de la division qui contient l'ensemble de la page à 770 pixels.
 * "margin: 0 auto ;" est la méthode correcte pour centrer les éléments de type block (comme les divisions), on centre donc la division #conteneur.
 * Il faut rétablir l'alignement à gauche que nous avons changé plus haut ("text-align: left;").
 * Une bordure de 1 pixel de couleur bleue autour de l'ensemble de la page, et couleur blanche pour le fond de celle-ci.
 */

#conteneur{
width: 770px ;
margin: 0 auto ;
text-align: left ;
border: 2px solid #2B5474 ;
background: #ffffff ;
}




                                      /* CREATION DE LA DIVISION #header QUI CONTIENT LE BANDEAU DU HAUT DU SITE */


/* On définit la hauteur de la partie header à 174 pixels (hauteur de l'image de fond qui compose le header), la longueur de celui-ci étant déjà définie dans #conteneur.
*/

#header{
height: 147px;
margin: 0;
background: url(../images/general/header.jpg) no-repeat left center;
}




                                                                   /* MISE EN PLACE DU MENU DANS LA PAGE */
																								
/* Positionnement du menu dans la page (écart entre les différents éléments paramétrable grâce à "margin") */

#navcontainer{
height: 17px;
padding-bottom: 5px;
font-size: 1.2em;
}

#navlist{
margin: 0;
padding: 5px 0 0 35px;
}

#navlist ul, #navlist li{
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}


/* C'est sur les liens que le gros du travail est effectué, largeur, hauteur de ligne, taille de police, graisse de police, espacement des lettres, couleur, bordure et decoration du texte.
*/

#navlist a:link, #navlist a:visited{
line-height: 5px;
font-weight: bold;
margin: 0 4px 2px 8px;
text-decoration: none;
color: #2B5474;
}

#navlist a:link#current, #navlist a:visited#current, #navlist a:hover{
border-bottom: 4px solid #51A2C7;
padding-bottom: 2px;
background: transparent;
color: #51A2C7;
}

#navlist a:hover{
color: #51A2C7;
}




                                         /* CREATION DE LA DIVISION div#contenu QUI CONTIENT TOUT LE CONTENU DU SITE */
						 
/* Création de la division  div#contenu qui contient tout le contenu du site (page centrale)
 * On crée un espace à gauche et à droite du contenu afin de bien centrer et aérer le texte (padding: ...).
*/

div#contenu{
padding: 0 30px 0 50px ;
}




                                                                  /* MISE EN FORME DU CONTENU DE LA PAGE */
											 
/* Mise en forme du titre de page, une petite image, on décale le texte en fonction de l'image, on donne un couleur au texte et on met une bordure basse. 
 * On définit une marge à 25 pixels du bord du site.
*/

div#contenu h2{
padding-left: 25px ;
line-height: 25px ;
font-size: 1.4em ;
background: url(../images/puces/puce_titre.jpg) no-repeat left center ;
color: #2B5474 ;
border-bottom: 1px solid #2B5474 ;
}


/* On fait de même pour le sous-titre h3, à ceci près qu'on ne met pas d'image décorative cette fois ci.
 * On décale le texte du sous-titre à 27 pixels du bord gauche du site.
 * L'empattement de la typo n'est pas la même: 1.1em au lieu de 1.4em pour le titre.
 * On met une bordure basse mais également une bordure gauche.
*/

div#contenu h3{
margin-left: 27px ;
padding-left: 5px ;
font-size: 1.1em ;
border-bottom: 1px solid #2B5474 ;
border-left: 2px solid #2B5474 ;
}


/* On rend les paragraphes plus propres, alignement justifié, alinéa et hauteur de ligne supérieure à l'état normal pour aérer le tout */

div#contenu p{
text-align: justify ;
text-indent: 2em ;
line-height: 1.3em ;
}




                                                    /* MISE EN FORME DES LIENS PRESENTS DANS LA PAGE */

/* On donne une couleur au texte qui contient un lien */

div#contenu a{
color: #2B5474;
text-decoration: none;
}


/* Le lien change de couleur au passage de la souris */

div#contenu a:hover{
color: #993F6B;
}




                     /* MISE EN FORME DE L'IMAGE EN DEGRADE QUI SERT DE FOND AUX LIENS VERS LES SITES DES PARTENAIRES DU PROJET NUMATEC-AUTOMOTIVE*/

div#degrade{
margin: 0;
padding-right: 10px;
position: relative;
left: 0px;
background-image: url(../images/accueil/degrade.jpg);
background-repeat: repeat;
background-position: center;
line-height: 50px;
text-align: center;
color: #000000;
height: 120px;	
}




                                                              /* MISE EN FORME DU PIED DE PAGE DANS LA PAGE */
											   
/* Mise en forme de la partie pied de page */

p#footer{
margin: 0;
padding-right: 10px;
position: relative;
left: 0px;
background-image: url(../images/general/pied_de_page.gif);
background-repeat: repeat-x;
background-position: bottom;
line-height: 40px;
text-align: center;
color: #000000;	
}




                                                                     /* MISE EN FORME DU PRE */

/* On donne une couleur de fond, une bordure, une taille de police et un léger espace entre le texte et les bords du pre */

pre{
overflow: auto ;
background: #dea ;
border: 2px solid #9b2 ;
padding: 5px 0 0 5px ;
font-size: 1.2em ;
}


/* Couleur de texte des éléments compris dans des span eux-mêmes compris dans un pre.
 * On doit donner une largeur au pre à cause d'Internet Explorer, on ne va donc l'appliquer qu'à Internet Explorer en utilisant un "hack".
 *la combinaison " * html " permet de n'appliquer ce qui suit qu'à Internet Explorer 
 */

* html pre{
width: 636px;
}

pre span{
color: #560;
}


/* Couleur différente pour les span.comment, les span utilisés pour les commentaires */

pre span.comment{
color: #b30000;
}