/* CSS Document */

/* C'est sur cette feuille de style que seront définis ou redéfinis les styles à appliquer aux balises html : taille, emplacement, image de fond, etc. Super importante, donc la nique pas ! ^^

Précision #1 : la plupart des styles définis ici sont appliqués à des balises <div></div>. Cette balise sert simplement à contenir quelque chose (imagine un bloc genre InDesign ou Xpress), tu peux donc facilement définir sa taille, position, etc.

Précision #2 : pour redéfinir directement une balise déjà existante (genre body), je déclare simplement son nom. Pour créer un nouveau style à appliquer à des balises, je déclare le nom du style précédé d'un point (ex:  .main). Tu peux donner n'importe quel nom à un style. 
 */





/*////////////////////////////////////////////////////////////////////////////////////////////
//
// 	STYLES COMMUNS A TOUTES LES PAGES
//
/////////////////////////////////////////////////////////////////////////////////////////////*/


/* Redéfinition de la balise body, qui contient l'ensemble de l'html */

body {
font-family:Geneva, Arial, Helvetica, sans-serif;
color:#666666; /* Couleur de la typo : gris moyen pour tester. Si tu veux du noir : #000000 */
background-image:url(images/pdg/background.png); /* je modifie la balise body pour que par défaut elle affiche en image de fond l'image background.png (carré blanc de 5*5px, le pixel du centre est noir) */
background-repeat:repeat; /* pour répéter indéfiniment l'image, et donc remplir le background quelle que soit la taille et la résolution du navigateur du visiteur */
text-align="center";
}




/*////////////////////////////////////////////////////////////////////////////////////////////
//
// 	PAGE DE GARDE : index.html
//
/////////////////////////////////////////////////////////////////////////////////////////////*/



/* Style de la div qui va contenir l'ensemble de ta page, ainsi que l'image de fond */

.main_index {
height:700px; 	/* hauteur. Si tu zappes l'unité (px), elle sera pas prise en compte */
width:900px;	/* largeur */
margin-left:auto;
margin-right:auto; 	/* définition des marges gauche et droite sur automatique. Cela permet d'avoir la div automatiquement alignée au centre de la page, quelle que soit la résolution et la taille du navigateur. Classe, non ? et sans javascript tout pourri qui plombe tes pages de code... ^^ */
display:block;	/* juste pour que l'affichage soit correct */
background-image:url(images/pdg/pdg.jpg);	/* url image de fond */
background-repeat:no-repeat;	/* pour pas avoir d'effet mosaique d'image */
text-align="left";
}




/* Style de la div qui contient tes vignettes et ton bouton "entrer". J'ai séparé les images sous toshop pour avoir une meilleure qualité pour un même poids */ 

.vignettes {
height:145px; 	
width:900px;	
display:block;
float:left;
/* le float permet de positionner une div sans avoir à spécifier de coordonnées x et y dans la page (qui bougent souvent quand tu passes de Firefox à IE ou autre). La valeur "left" revient à dire à la div : colle-toi à l'élément immédiatement à ta gauche, en l'occurence ici le bord gauche de la div "main", mais ca peut aussi être une autre div déjà placée. Si jamais l'espace dispo en largeur est insuffisant (par exemple, s'il n'y a plus de place à droite pour que la div tienne en entier, elle se placera immédiatement en dessous, le plus à gauche possible.) Perso, je trouve ca méga class ! ^^
Précision : pour afficher une page web, le browser utilise un sens de lecture, de haut en bas et de gauche à droite. C'est con, mais vaut mieux le savoir pour utiliser les css powa */
margin-top:360px; /* le décalage vertical pour aligner la div, mesuré dans toshop */
background-image:url(images/pdg/pdg_thumbs.jpg);
background-repeat:no-repeat;	
}



/* Bouton entrer (cette classe sera appliquée à un lien (<a></a>) qui aura donc les mêmes caractéristiques que si c'était une div (hauteur, largeur...) */

.entrer {
height:40px; 	
width:175px;	
display:block;
float:left;
margin-left:635px;
margin-top:60px;
background-image:url(images/pdg/entrer.png);
background-repeat:no-repeat;	
}

.entrer:hover {	/* hover : état survolé. On définit ici les caractéristiques de la div quand la souris passe dessus, à savoir le changement d'image */
height:40px; 	
width:175px;	
display:block;
float:left;
margin-left:635px;
margin-top:60px; /* mesure prise à partir du haut de la balise vignettes qui contient le bouton */
background-image:url(images/pdg/entrer_roll.png);
background-repeat:no-repeat;	
}




/*////////////////////////////////////////////////////////////////////////////////////////////
//
// 	PAGE PRINCIPALE : accueil.html
//
/////////////////////////////////////////////////////////////////////////////////////////////*/



/* Style de la div qui va contenir l'ensemble de ta page, ainsi que l'image de fond */

.main_accueil {
height:700px; 	/* hauteur. Si tu zappes l'unité (px), elle sera pas prise en compte */
width:900px;	/* largeur */
margin-left:auto;
margin-right:auto; 	/* définition des marges gauche et droite sur automatique. Cela permet d'avoir la div automatiquement alignée au centre de la page, quelle que soit la résolution et la taille du navigateur. Classe, non ? et sans javascript tout pourri qui plombe tes pages de code... ^^ */
display:block;	/* juste pour que l'affichage soit correct */
background-image:url(images/accueil.jpg);	/* url image de fond */
background-repeat:no-repeat;	/* pour pas avoir d'effet mosaique d'image */
text-align="left"
}





/* Boutons 
3 classes à définir pour chaque bouton : une pour l'état inactif, une pour l'état survolé (pour le rollover) et une quand la page est active (la même que  hover), ce qui contribuera à ta classe personnelle ^^ */


.accueil {
height:25px;
width:131px;
display:block;
float:left;
margin-top:144px; /* le bouton se trouve à y=144px sur ton doc photoshop, l'attribut margin permet d'imposer une marge sur les 4 directions, pour décaler l'élément */
margin-left:7px; /* idem, le bouton est à 7 px du bord gauche... */
}

.accueil:hover {	/* état survolé, on rajoute l'image du rollover */
height:25px;
width:131px;
display:block;
float:left;
margin-top:144px; 
margin-left:7px; 
background-image:url(images/boutons/accueil.png);
background-repeat:no-repeat;
}

.accueil_active {	/* page active, on laisse l'image du rollover */
height:25px;
width:131px;
display:block;
float:left;
margin-top:144px; 
margin-left:7px; 
background-image:url(images/boutons/accueil.png);
background-repeat:no-repeat;
}



/* Plus qu'a copier coller en changeant juste les valeurs de taille et position, d'après la taille des boutons créés dans toshop. 
Il me semble qu'il ne soit pas nécessaire pour l'état hover de redéfinir la taille, largeur, position, etc. mais il se peut que certains navigateurs kiffent pas et bon, c'est juste un copier-coller à faire.... */


.qui {
height:25px;
width:183px;
display:block;
float:left;
margin-top:144px;
margin-left:10px;
}

.qui:hover {	
height:25px;
width:183px;
display:block;
float:left;
margin-top:144px;
margin-left:10px; /* le bouton se trouve 11px du bord droit du bouton précédent... */
background-image:url(images/boutons/qui.png);
background-repeat:no-repeat;
}

.qui_active {	
height:25px;
width:183px;
display:block;
float:left;
margin-top:144px;
margin-left:10px; /* le bouton se trouve 11px du bord droit du bouton précédent... */
background-image:url(images/boutons/qui.png);
background-repeat:no-repeat;
}


.competences {
height:25px;
width:183px;
display:block;
float:left;
margin-top:144px;
margin-left:5px;
}

.competences:hover {	
height:25px;
width:183px;
display:block;
float:left;
margin-top:144px;
margin-left:5px; /* le bouton se trouve 11px du bord droit du bouton précédent... */
background-image:url(images/boutons/competences.png);
background-repeat:no-repeat;
}

.competences_active {	
height:25px;
width:183px;
display:block;
float:left;
margin-top:144px;
margin-left:5px; /* le bouton se trouve 11px du bord droit du bouton précédent... */
background-image:url(images/boutons/competences.png);
background-repeat:no-repeat;
}


.galeries {
height:25px;
width:183px;
display:block;
float:left;
margin-top:144px;
margin-left:6px;
}

.galeries:hover {	
height:25px;
width:183px;
display:block;
float:left;
margin-top:144px;
margin-left:6px; 
background-image:url(images/boutons/galeries.png);
background-repeat:no-repeat;
}

.galeries_active {	
height:25px;
width:183px;
display:block;
float:left;
margin-top:144px;
margin-left:6px; 
background-image:url(images/boutons/galeries.png);
background-repeat:no-repeat;
}



.references {
height:25px;
width:183px;
display:block;
float:left;
margin-top:144px;
margin-left:5px;
}

.references:hover {	
height:25px;
width:183px;
display:block;
float:left;
margin-top:144px;
margin-left:5px; /* le bouton se trouve 11px du bord droit du bouton précédent... */
background-image:url(images/boutons/references.png);
background-repeat:no-repeat;
}

.references_active {	
height:25px;
width:183px;
display:block;
float:left;
margin-top:144px;
margin-left:5px; /* le bouton se trouve 11px du bord droit du bouton précédent... */
background-image:url(images/boutons/references.png);
background-repeat:no-repeat;
}
/* Pour regrouper verticalement les boutons Contact, Espace Clients et Mentions légales, je les regroupe dans une div. 
Comme le bouton references ne laisse pas la place à cette div pour se mettre à sa suite (à droite), l'attribut float:left va automatiquement placer cette div à la ligne du dessous, et la coller contre la bordure gauche de la grande div main (qui englobe le tout), puisque cette bordure est du coup devenue l'élément immédiatement à gauche de cette nouvelle div.
De même, les boutons à l'intérieur passeront automatiquement à la ligne (puisqu'ils seront bloqués par le bord droit de la div qui les contient). Il suffit juste de définir la marge verticale*/

.boutons_gauche {
height:463px;
width:126px;
display:block;
float:left;
margin-top:23px;  /* le dessous du bouton accueil se trouve 22px au-dessus */
margin-left:9px;
}


.boutons_gauche_log {  /* A afficher si le client est loggé */
height:63px;
width:124px;
display:block;
float:left;
margin-left:1px;
background-image:url(images/boutons/boutons_gauches_log.png);
background-repeat:no-repeat;
}

.deconnection {
height:24px;
width:119px;
display:block;
float:left; 
margin-left:3px;
background-image:url(images/boutons/deconnection.png);
background-repeat:no-repeat;
}

.deconnection:hover {
height:24px;
width:119px;
display:block;
float:left; 
margin-left:3px;
background-image:url(images/boutons/deconnection_hover.png);
background-repeat:no-repeat;
}


.contact {
height:25px;
width:126px;
display:block;
float:left;
}

.contact:hover {	
height:25px;
width:126px;
display:block;
float:left;
background-image:url(images/boutons/contact.png);
background-repeat:no-repeat;
}

.contact_active {	
height:25px;
width:126px;
display:block;
float:left;
background-image:url(images/boutons/contact.png);
background-repeat:no-repeat;
}


.login {  /* div qui contiendra le champ login */
height:40px;
width:126px;
display:block;
float:left;
margin-top:32px;
}


.password {  /* div qui contiendra le champ password */
height:22px;
width:126px;
display:block;
float:left;
background-color:#FFCC00;
}


/* Bouton ok. C'est la skin du bouton Valider par défaut, qui ferait un peu tâche sur ta page. 
Là, il va falloir être plus strict. 
"input.ok {" au lieu de ".ok {" tout seul pour définir la classe "ok" va permettre de modifier les caratéristiques du bouton, mais ne s'appliquera QUE aux bouton input. 
Si tu écris a.style {, la classe .style ne s'appliquera qu'aux balises <a> (liens) 
Ici c'est nécessaire pour que ca marche. */

input.ok {
height:45px;
width:126px;
display:block;
float:left;
background-image:url(images/boutons/ok.png);
border:0px; /* on a viré le contenu du bouton Valider mais pas sa bordure */
background-color:transparent;  /* Des fois (comme ici ^^), ca marche pas bien sur un rollover. Donc, ca c'est sécurité en plus pour être sûr d'avoir bien viré le bouton Valider moche par défaut. */
}

input.ok:hover {	
height:45px;
width:126px;
display:block;
float:left;
background-image:url(images/boutons/ok_hover.png);
border:0px;
background-color:transparent; 
}

.clients {
height:40px;
width:126px;
display:block;
float:left;
margin-top:27px;
}

.clients:hover {
height:40px;
width:126px;
display:block;
float:left;
margin-top:27px;
background-image:url(images/boutons/clients.png);
background-repeat:no-repeat;
}

.clients_active {
height:40px;
width:126px;
display:block;
float:left;
margin-top:27px;
background-image:url(images/boutons/clients.png);
background-repeat:no-repeat;
}


.mentions {
height:34px;
width:126px;
display:block;
float:left;
margin-top:197px;
}

.mentions:hover {	
height:34px;
width:126px;
display:block;
float:left;
margin-top:197px;
background-image:url(images/boutons/mentions.png);
background-repeat:no-repeat;
}

.mentions_active {	
height:34px;
width:126px;
display:block;
float:left;
margin-top:197px;
background-image:url(images/boutons/mentions.png);
background-repeat:no-repeat;
}


/* si loggé */ 

.mentions_log {
height:34px;
width:126px;
display:block;
float:left;
margin-top:249px;
}

.mentions_log:hover {	
height:34px;
width:126px;
display:block;
float:left;
margin-top:249px;
background-image:url(images/boutons/mentions.png);
background-repeat:no-repeat;
}

.mentions_active_log {	
height:34px;
width:126px;
display:block;
float:left;
margin-top:249px;
background-image:url(images/boutons/mentions.png);
background-repeat:no-repeat;
}






/* Style de la div qui va contenir le texte à placer dans ton cadre blanc (donc aux mêmes dimensions */

.cadre_blanc {
height:463px; 	
width:705px;	
float:left;
display:block;	
margin-left:12px; /* le bord droit de la div boutons_gauche est à 10 px du cadre blanc */
margin-top:19px;
padding-left:5px;
overflow:auto;  /* Si le contenu du cadre est plus grand que celui-ci, des barres de scroll apparitront automatiquement. Evite quand même les images plus larges que 715px  (700px max quoi), ca serait pas agréabe de scroller horizontalement pour voir l'image */
}


.cadre_blanc_gal { /* cadre de la page galeries */
height:448px; 	
width:705px;	
float:left;
display:block;	
margin-left:12px;
margin-top:10px;
padding-left:5px;
overflow:auto;  
}


/* Boutons galeries */

.ingenierie {
height:25px;
width:143px;
display:block;
float:left;
margin-left:12px;
background-image:url(images/boutons/ingenierie.png);
background-repeat:no-repeat;
}


.ingenierie:hover {
height:25px;
width:143px;
display:block;
float:left;
margin-left:12px;
background-image:url(images/boutons/ingenierie_hover.png);
background-repeat:no-repeat;
}

.ingenierie_active {
height:25px;
width:143px;
display:block;
float:left;
margin-left:12px;
background-image:url(images/boutons/ingenierie_hover.png);
background-repeat:no-repeat;
}

.implantation {
height:25px;
width:143px;
display:block;
float:left;
background-image:url(images/boutons/implantation.png);
background-repeat:no-repeat;
}


.implantation:hover {
height:25px;
width:143px;
display:block;
float:left;
background-image:url(images/boutons/implantation_hover.png);
background-repeat:no-repeat;
}

.implantation_active {
height:25px;
width:143px;
display:block;
float:left;
background-image:url(images/boutons/implantation_hover.png);
background-repeat:no-repeat;
}


.archi {
height:25px;
width:143px;
display:block;
float:left;
background-image:url(images/boutons/archi.png);
background-repeat:no-repeat;
}


.archi:hover {
height:25px;
width:143px;
display:block;
float:left;
background-image:url(images/boutons/archi_hover.png);
background-repeat:no-repeat;
}

.archi_active {
height:25px;
width:143px;
display:block;
float:left;
background-image:url(images/boutons/archi_hover.png);
background-repeat:no-repeat;
}



.design {
height:25px;
width:143px;
display:block;
float:left;
background-image:url(images/boutons/design.png);
background-repeat:no-repeat;
}


.design:hover {
height:25px;
width:143px;
display:block;
float:left;
background-image:url(images/boutons/design_hover.png);
background-repeat:no-repeat;
}

.design_active {
height:25px;
width:143px;
display:block;
float:left;
background-image:url(images/boutons/design_hover.png);
background-repeat:no-repeat;
}


.divers {
height:25px;
width:143px;
display:block;
float:left;
background-image:url(images/boutons/divers.png);
background-repeat:no-repeat;
}


.divers:hover {
height:25px;
width:143px;
display:block;
float:left;
background-image:url(images/boutons/divers_hover.png);
background-repeat:no-repeat;
}

.divers_active {
height:25px;
width:143px;
display:block;
float:left;
background-image:url(images/boutons/divers_hover.png);
background-repeat:no-repeat;
}




.valid {
height:20px; 
width:300px; 
display:block; 
float:left;
background-color:#FFCC00;
}

.valid2 {
height:20px; 
width:400px; 
display:block; 
float:left;
background-color:#FFCC00;
}





/*////////////////////////////////////////////////////////////////////////////////////////////
//
// 	PAGES ADMIN 
//
/////////////////////////////////////////////////////////////////////////////////////////////*/


.admin_main {
width:900px;
height:auto;
margin-left:auto;
margin-right:auto;
display:block;
}

.admin_bandeau_top {
width:900px;
height:159px;
margin-left:auto;
margin-right:auto;
display:block;
float:left;
background-image:url(admin/top.jpg);
background-repeat:no-repeat;
}