/* @override http://www.studio-beecom.fr/wp-content/themes/magali/style.css */

/*
   Theme Name: site photo Magali Tarasco
   Theme URI: http://www.studio-beecom.fr/
   Description: Theme cree par benoit thibaudeau pour www.studio-beecom.fr
   Version: 0.1
   Author: Benoit Thibaudeau
    
   Creation Theme by Benoit Thibaudeau || http://www.benoitthibaudeau.com

*/

/*
   Explication des differentes div des pages ...

      Head
         [ #header ]

      Corps

         Page avec Menu a gauche
            Texte (Menu gauche 150px / 800px centre) [ Page 3 ]
               [ Content / Contenu / Menugauche / Partiedroite / CentreTxt ]

            Texte / image (menu gauche 150px / 525px gauche txt / 525px droite image) [ Page 4 ]
               [ Content / Contenu / MenuGauche / Partiedroite / PageGauche / PageDroite ]


         Pas menu
            Texte (800px centré) [ Page 5 ]
               [ Content / Contenu / DivTxt ]

            Texte / image (600px gauche txt / 600px droit image) [ Page 6 ]
               [ Content / Contenu / DivGauche - DivDoite ]



         Portfolio [ Page 1 ]
            Menu 220px
            Image 590px  [ Page 1 ]
               [ Content / Contenu / PortfolioGauche / PortfolioDroite ]

            Image sans menu
               [ Content / Contenu / Portfolio ]


         Accueil
            Image au centre [ Page 2 ]
               [ Content / Contenu / ImgAccueil ]

      Foot
         [ #footer ]
*/

/*****************************************************************************
  **                    Structure generale de la page                      **
******************************************************************************/

   /* Donnees concernant tous les parametres generaux de toutes les pages */

   /* Mise en commentaire de l'apparition des scrollbar pour la page */
   html { 
         /* Force Vertical Scrollbar */
            /* IE 
            overflow-y: scroll; */
            /* Moz 
            height: 100%; */

         /* Force Horizontal Scrollbar */
            /* IE 
            overflow-x: scroll; */
            /* Moz 
            width: 100%; */

         }

   /* Suppression des marges de la page */
   * {
         padding: 0;
         margin: 0;
     }

   /* Suppression des bordures bleu autour des images */
   img { border: 0; }

   /* Pour l'aspect general ... fond noir, font 11px de couleur blanche */
   body {
         background: #000000 url('images/header_01.jpg') repeat-x;
         font: 11px Arial, Trebuchet MS, Lucida Grande, Verdana, Sans-Serif;
         color:#FFFFFF;
      }

   /* delimite la page sur 1200px*768px */
   #page {
         margin: 0 auto;
         padding: 0px 0px 0px 0px;
         position: relative;
         width: 1200px;
         height:768px
      }

   #page_large {
         margin: 0 auto;
         padding: 0px 0px 0px 0px;
         position: relative;
         width: 100%;
         height:768px
      }

   * html #page { width: 970px } /* IE hack */


/*****************************************************************************
  **                                 Header                                **
******************************************************************************/
   /* Delimite le header sur 115px de haut.*/
      #header {
               background: url('images/fond-head.png');
               position: relative;
               height: 115px;
               width: 1200px;
               border-top: 0px solid #e2de19;
               border-right: 0px solid #e2de19;
               border-left: 0px solid #e2de19;
               border-bottom: 0px solid #e2de19;
               margin: 0 auto;
         }

   /* 
      Permet d'afficher le logo du site en haut à gauche
      Sous forme de lien.
   */
      /* Par defaut */
      #header h1 a{
               height: 70px;
               width: 235px;
               float:left;
               padding-top:16px;
               padding-left:10px;
         }
      
      /* 
         Quand la souris passe sur le logo 
         Je le garde car en chageant l'image ici cela permet
         le cas echeant de modifier l'aspectdu logo quand la 
         souris passe dessus
      */
      #header h1 a:hover{
               height: 70px;
               width: 235px;
               float:left;
               padding-top:16px;
               padding-left:10px;
         }





/*****************************************************************************
  **                            Corps de la page                           **
******************************************************************************/

   /* 
      Delimite le corps de la page sur 1200*600px avec un filet bleu (#e2de19) 
      au dessus et en dessous

      Le fond est gris (#1f1f1f)
   */
      #content {
                  position: relative;
                  height: 600px;
                  width: 1200px;
                  background:#000000;
                  font: 11px Arial, Trebuchet MS, Lucida Grande, Verdana, Sans-Serif;
                  color:#7f7156;
                  border-top: 0px solid #e2de19;
                  border-bottom: 0px solid #e2de19;
                  border-right: 0px solid #e2de19;
                  border-left: 0px solid #e2de19;
         }

         /* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
              Cette partie formate le tete comme ça on pas besoin de le refaire
              Pour toutes les pages on aura la meme specification
            =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-*/

            #content p{
                        padding-bottom:5px;
                        padding-top:5px;
                        padding-left:20px;
                        padding-right:10px;
                        font: 11px Arial, Trebuchet MS, Lucida Grande, Verdana, Sans-Serif;
                        color:#7f7156;
               }

            #content h1 { 
                           font: 15px Arial, Trebuchet MS, Lucida Grande, Verdana, Sans-Serif;
                           font-weight: bold;
                           padding-bottom:5px;
                           padding-top:10px;
                           padding-left:10px;
                           padding-right:10px;
                           color:#e2de19;
                        }

            #content h2 { 
                           font: 12px Arial, Trebuchet MS, Lucida Grande, Verdana, Sans-Serif;
                           font-weight: bold;
                           color:#e2de19;
                           padding-bottom:5px;
                           padding-top:8px;
                           padding-left:10px;
                           padding-right:10px;
                        }

            #content h3 { 
                           font: 11px Arial, Trebuchet MS, Lucida Grande, Verdana, Sans-Serif;
                           color:#FFFFFF;
                           padding-bottom:5px;
                           padding-top:5px;
                           padding-left:10px;
                           padding-right:10px;
                        }


            #content h4 { 
                           font: 15px Arial, Trebuchet MS, Lucida Grande, Verdana, Sans-Serif;
                           font-weight: bold;
                           padding-bottom:5px;
                           padding-top:10px;
                           padding-left:10px;
                           padding-right:10px;
                           color:#7f7156;
                        }


            #content ul, #content ol { 
                           padding-top:5px;
                           padding-left:30px; 
                           padding-bottom:5px;
                        }

            #content ul li, #content ol li { 
                           padding-top:5px;
                           padding-left:0px; 
                           padding-bottom:5px;
                        }

            #content a { color:#e2de19; text-decoration:none; }

            #content a:hover{ 
                              color:#FFFFFF; 
                              text-decoration:underline overline; 
                            }

   /* 
      Encadre le contenu du corp de la page ce qui permet d'ajouter une parge autout du corps  
      On peut mettre cette marge d'une couleur differente et parametrer facilement les marges.
   */
      #contenu {
                  height:  600px;
                  width:  1200px;
                  padding-bottom:0px;
                  padding-top:   0px;
                  padding-left:  0px;
                  padding-right: 0px;
               }


      #coordonnees {
                     position:relative;
                     float:left;
                     width:130px;
                     height:20px;
                     padding-top:85px;
                     padding-left:0px;
                     margin-right:0px;
                     background:transparent;
                     font: 12px Arial, Trebuchet MS, Lucida Grande, Verdana, Sans-Serif;
                     color:#e2de19;
                   }

   /*--------------------------------------------------------------------------
       ==        Corps de la page d'accueil avec l'image au milieu        ==
     ------------------------------------------------------------------------*/
     /* Page d'accueil uniquement en fait !!! ;o) */

     #ImgAccueil{
               border:    0px;
               height:  600px;
               width:  1200px;
               padding-bottom:5px;
               padding-top:   5px;
               padding-left:  5px;
               padding-right: 5px;
            }

      /* 
         Id de l'image qui la limite sur 590px de haut donc laisse les 5px vides
         au dessus et 5Px vides en dessous
      */
      #imaFixe {
         height:590px;
      }


   /*--------------------------------------------------------------------------
       ==                    Page Txt avec Menu a gauche                   ==
     ------------------------------------------------------------------------*/
      /* Texte (Menu gauche 150px / 800px centre) */

         /* Generique pour toute les pages */
            /*
               Le div Partiedroite permet de placer le div à droite du menu
               Si la largeur du menu de gauche est modifiee
               #Menugauche { width: 150px; }

               il suffit de modifier ici la ligne "margin-left" de la même façon

               margin: 0px 10px 0px 160px; ... Menu de 150px donc 160px du margin permet de laisser 10px de marge entre le menu et le debut du texte
               La hauteur du div est de 590px (600px du corps -5px de marge en haut et en bas.
               overflow-y: auto; => Permet de faire apparaitre le scrollbar vertical quand il y en a besoin (texte > a 590px de haut)
               Le margin-right: 0px; permet de placer le scroll barre bien a droite.
            */
            #Partiedroite { 	
                           height:590px;
                           width:1040px;
                           margin-left: 160px;
                           margin-right:  0px;
                           margin-top:    5px;
                           margin-bottom: 5px;
                          	overflow-y: auto;
                           position:absolute;
                        }           


         /* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
                                      Le menu de gauche
            =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-*/

            /* 
               Delimite le menu a gauche sur 150px de large sur 100% de la hauteur du corps 
               Un fond gris legerement different du gris de la page (#151515) [la page #1f1f1f]
               Pas de marge par rapport à la div du corp de la page
               Un filet bleu (#e2de19) a droite du menu pour le separer du centre de la page
               Font par defaut du menu 11px et blanche
            */
               #Menugauche {
                           width: 150px;
                           height: 100%;
                           float: left;
                           position:absolute;
                           background-color: #151515;
                           padding: 0px 0px 0px 0px;
                           border-bottom: 0px solid #000000;
                           border-left: 0px solid #000000;
                           border-right: 1px solid #e2de19;
                           border-top: 0px solid #000000;
                           top:-0.1px;
                           font: 11px Arial, Trebuchet MS, Lucida Grande, Verdana, Sans-Serif;
                           color:#FFFFFF;
                     }


            /* Format l'entete du menu */

               /* 
                  Titre 1 du menu de gauche
                  Texte de couleur bleu (#e2de19) et taille 15px gras en arial.
                  Avec une marge de 10px au dessus, 5px en dessous, 10px a gauche et a droite
               */
                  #Menugauche h1 { 
                                 font: 15px Arial, Trebuchet MS, Lucida Grande, Verdana, Sans-Serif;
                                 font-weight: bold;
                                 padding-bottom:5px;
                                 padding-top:10px;
                                 padding-left:10px;
                                 padding-right:10px;
                                 color:#e2de19;
                                 text-transform: uppercase;
                              }

               /* 
                  Ttitre 2 du menu de gauche
                  Font Arial 12px de haut et gras de couleur Blanche
                  Separe du titre 1 de 10px (5px bottom du h1 et 5px top du h2)
                  Marge de 10px a gauche et à droite.
                  Et la barre noire de 1px de large qui separe l'entete et le reste 
                  du menu est place a 10px sous le menu h1
               */
                  #Menugauche h2 { 
                                 font: 12px Arial, Trebuchet MS, Lucida Grande, Verdana, Sans-Serif;
                                 font-weight: bold;
                                 color:#FFFFFF;
                                 padding-top:5px;
                                 padding-bottom:10px;
                                 padding-left:10px;
                                 padding-right:10px;
                                 border-bottom: 1px solid #000000;
                              }

            /* 
               Place les ubriques du menu à 30px du bord gauche de la div
               et place 20px au dessus du menu pour le séparer avec la tete du menu
            */
               #Menugauche ul, #menugauche ol { 
                              padding-top:20px;
                              padding-left:30px; 
                              list-style: none;
                           }

            /* Place la petite puce à gauche du menu.
               Pour modifier la puce il suffit de remplacer l'image
               puce.png.
               Si on veut supprimer toute les puces remplacer 
               URL(images/puce.png)
               par none

               Et separe chaque rubrique du menu de 10px
            */
               #Menugauche ul li, #menugauche ol li { 
                              padding-bottom:10px;
                              list-style: url('images/puce.png');
                           }

            /* 
               Les rubrique du menu sont en blanc  sans être souligne
               font 11px 
            */
               #Menugauche a { 
                           text-decoration:none;
                           color:#7f7156;
                  }

            /*
               Les menu passent en gris tres leger quand la souris passe dessus
            */
               #Menugauche a:hover {
                           color:#d2d2d2;
                  }


               #Menugauche li.current_page_item a{ color:#FFFFFF; }
               #Menugauche li.current_page_ancestor a { color:#FFFFFF; }
               #Menugauche li.current_page_ancestor a { color:#FFFFFF; }
               #Menugauche li.current_page_parent a { color:#FFFFFF; }

         /* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
              Contenu de la page quand il n'y a que du texte en plus du menu
            =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-*/

            #CentreTxt {
                           height:590px;
                           width:800px;
                           margin-left: 12px;
                           margin-right: 0px;
                           margin-top: 0px;
                           margin-bottom: 0px;
                       }

         /* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
             Contenu de la page quand il y a du texte et des images
            =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-*/

            #PageGauche{
                           height:590px;
                           width:49%;
                           margin-left: 10px;
                           margin-right: 0px;
                           margin-top: 0px;
                           margin-bottom: 0px;
                        	position: relative;
                           float:left;
                       }


            #PageDroite{
                           height:590px;
                           width:49%;
                           margin-left: 490px;
                           margin-right: 10px;
                           margin-top: 0px;
                           margin-bottom: 0px;
                        	position: relative;
                       }








   /*--------------------------------------------------------------------------
       ==                    Page Txt sans Menu a gauche                   ==
     ------------------------------------------------------------------------*/

         /* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
           Contenu de la page quand il n'y a que du texte et sans menu a gauche
            =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-*/

         
         /* Cette div ne fait qu'une chose aligner la scroll barre à droite de la page plutôt que de l'avoir juste après la div de 800px */
         #DivAll {
                  height:590px;
                  width:1200px;
                  overflow-y: auto;
                 }

         #DivTxt {
                  height:590px;
                  width:800px;
                  margin-left:  200px;
                  margin-right: 200px;
                  margin-top:     0px;
                  margin-bottom:  0px;
                  position: relative;                     
                 }

         #DivTxt h2 {
                     font: 12px Arial, Trebuchet MS, Lucida Grande, Verdana, Sans-Serif;
                     font-weight: bold;
                     color:#e2de19;
                     padding-top:10px;
                     padding-bottom:5px;
                     padding-left:10px;
                     padding-right:10px;
                     border-bottom: 0px solid #000000;
                    }

         #DivTxt h2 a { 
                     font: 12px Arial, Trebuchet MS, Lucida Grande, Verdana, Sans-Serif;
                     font-weight: bold;
                     color:#e2de19;
                     padding-top:10px;
                     padding-bottom:5px;
                     padding-left:10px;
                     padding-right:10px;
                     border-bottom: 0px solid #000000;
                   }
         #DivTxt h2 a:hover { 
                     font: 12px Arial, Trebuchet MS, Lucida Grande, Verdana, Sans-Serif;
                     font-weight: bold;
                     color:#ffffff;
                     padding-top:10px;
                     padding-bottom:5px;
                     padding-left:10px;
                     padding-right:10px;
                     border-bottom: 0px solid #000000;
                   }

         #DivTxt h3 {
                     font: 12px Arial, Trebuchet MS, Lucida Grande, Verdana, Sans-Serif;
                     font-weight: bold;
                     color:#7f7156;
                     padding-top:5px;
                     padding-bottom:10px;
                     padding-left:10px;
                     padding-right:10px;
                     border-bottom: 0px solid #000000;
                    }

         #DivTxt h3 a { 
                     font: 12px Arial, Trebuchet MS, Lucida Grande, Verdana, Sans-Serif;
                     font-weight: bold;
                     color:#7f7156;
                     padding-top:5px;
                     padding-bottom:10px;
                     padding-left:10px;
                     padding-right:10px;
                     border-bottom: 0px solid #000000;
                   }
         #DivTxt h3 a:hover { 
                     font: 12px Arial, Trebuchet MS, Lucida Grande, Verdana, Sans-Serif;
                     font-weight: bold;
                     color:#ffffff;
                     padding-top:5px;
                     padding-bottom:10px;
                     padding-left:10px;
                     padding-right:10px;
                     border-bottom: 0px solid #000000;
                   }



            #DivTxt h4, DivTxt h4 a:hover, #DivTxt h4 a { 
                           font: 15px Arial, Trebuchet MS, Lucida Grande, Verdana, Sans-Serif;
                           font-weight: bold;
                           padding-bottom:5px;
                           padding-top:10px;
                           padding-left:10px;
                           padding-right:10px;
                           color:#7f7156;
                        }




         /* Ajout pour la compatibilité avec les vieille version IE */
         #DivTxtOld {
                  height:590px;
                  width:800px;
                  margin-left:  200px;
                  margin-right: 200px;
                  margin-top:     0px;
                  margin-bottom:  0px;
                  position: relative;                     
                  overflow-y: auto;
                 }

         #DivTxtOld h2 {
                     font: 12px Arial, Trebuchet MS, Lucida Grande, Verdana, Sans-Serif;
                     font-weight: bold;
                     color:#e2de19;
                     padding-top:10px;
                     padding-bottom:5px;
                     padding-left:10px;
                     padding-right:10px;
                     border-bottom: 0px solid #000000;
                    }

         #DivTxtOld h2 a { 
                     font: 12px Arial, Trebuchet MS, Lucida Grande, Verdana, Sans-Serif;
                     font-weight: bold;
                     color:#e2de19;
                     padding-top:10px;
                     padding-bottom:5px;
                     padding-left:10px;
                     padding-right:10px;
                     border-bottom: 0px solid #000000;
                   }
         #DivTxtOld h2 a:hover { 
                     font: 12px Arial, Trebuchet MS, Lucida Grande, Verdana, Sans-Serif;
                     font-weight: bold;
                     color:#ffffff;
                     padding-top:10px;
                     padding-bottom:5px;
                     padding-left:10px;
                     padding-right:10px;
                     border-bottom: 0px solid #000000;
                   }

         #DivTxtOld h3 {
                     font: 12px Arial, Trebuchet MS, Lucida Grande, Verdana, Sans-Serif;
                     font-weight: bold;
                     color:#7f7156;
                     padding-top:5px;
                     padding-bottom:10px;
                     padding-left:10px;
                     padding-right:10px;
                     border-bottom: 0px solid #000000;
                    }

         #DivTxtOld h3 a { 
                     font: 12px Arial, Trebuchet MS, Lucida Grande, Verdana, Sans-Serif;
                     font-weight: bold;
                     color:#7f7156;
                     padding-top:5px;
                     padding-bottom:10px;
                     padding-left:10px;
                     padding-right:10px;
                     border-bottom: 0px solid #000000;
                   }
         #DivTxtOld h3 a:hover { 
                     font: 12px Arial, Trebuchet MS, Lucida Grande, Verdana, Sans-Serif;
                     font-weight: bold;
                     color:#ffffff;
                     padding-top:5px;
                     padding-bottom:10px;
                     padding-left:10px;
                     padding-right:10px;
                     border-bottom: 0px solid #000000;
                   }

         /* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
           Contenu de la page quand il y a du texte/image et sans menu a gauche
            =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-*/

        #DivGauche {
                     height:      590px;
                     width:       590px;
                     margin-left:  10px;
                     margin-right:  0px;
                     margin-top:    0px;
                     margin-bottom: 0px;
                     position: relative;
                     float:left;
                   }

         #DivDoite {
                     height:      590px;
                     width:       590px;
                     margin-left: 600px;
                     margin-right: 10px;
                     margin-top:    0px;
                     margin-bottom: 0px;
                     position: relative;
                   }






   /*--------------------------------------------------------------------------
       ==                         Pages portfolio                        ==
     ------------------------------------------------------------------------*/

         /* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
                             Le menu de gauche du portfolio
            =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-*/

               #PortfolioGauche
               {
                  float: left;
                  width: 220px;
                  height: 100%;
                  position:absolute;
                  background-color: #000000;
                  padding: 0px 0px 0px 0px;
                  top:-0px;
                  left:-0px
                  margin: 0px auto;
                  border-bottom: 0px solid #000000;
                  border-left:   0px solid #000000;
                  border-right:  1px solid #e2de19;
                  border-top:    0px solid #000000;
               }

                     /* Format l'entete du menu */

                        /* 
                           Titre 1 du menu de gauche
                           Texte de couleur bleu (#e2de19) et taille 15px gras en arial.
                           Avec une marge de 10px au dessus, 5px en dessous, 10px a gauche et a droite
                        */
                           #PortfolioGauche h1 { 
                                          font: 15px Arial, Trebuchet MS, Lucida Grande, Verdana, Sans-Serif;
                                          font-weight: bold;
                                          padding-bottom:5px;
                                          padding-top:  10px;
                                          padding-left: 10px;
                                          padding-right:10px;
                                          color:#e2de19;
                                          text-transform: uppercase;
                                       }

                        /* 
                           Ttitre 2 du menu de gauche
                           Font Arial 12px de haut et gras de couleur Blanche
                           Separe du titre 1 de 10px (5px bottom du h1 et 5px top du h2)
                           Marge de 10px a gauche et à droite.
                           Et la barre noire de 1px de large qui separe l'entete et le reste 
                           du menu est place a 10px sous le menu h1
                        */
                           #PortfolioGauche h2 { 
                                          font: 12px Arial, Trebuchet MS, Lucida Grande, Verdana, Sans-Serif;
                                          font-weight: bold;
                                          color:#FFFFFF;
                                          padding-top:5px;
                                          padding-bottom:10px;
                                          padding-left:10px;
                                          padding-right:10px;
                                          border-bottom: 1px solid #000000;
                                       }

                     /* 
                        Place les ubriques du menu à 30px du bord gauche de la div
                        et place 20px au dessus du menu pour le séparer avec la tete du menu
                     */
                        #PortfolioGauche ul, #menugauche ol { 
                                       padding-top:20px;
                                       padding-left:30px; 
                                       list-style: none;
                                    }

                     /* Place la petite puce à gauche du menu.
                        Pour modifier la puce il suffit de remplacer l'image
                        puce.png.
                        Si on veut supprimer toute les puces remplacer 
                        URL(images/puce.png)
                        par none

                        Et separe chaque rubrique du menu de 10px
                     */
                        #PortfolioGauche ul li, #menugauche ol li { 
                                       padding-bottom:10px;
                                       list-style: url('images/puce.png');
                                    }

                     /* 
                        Les rubrique du menu sont en blanc  sans être souligne
                        font 11px 
                     */
                        #PortfolioGauche a { 
                                    text-decoration:none;
                                    color:#7f7156;
                           }

                     /*
                        Les menu passent en gris tres leger quand la souris passe dessus
                     */
                        #PortfolioGauche a:hover {
                                    text-decoration:none;
                                    color:#d2d2d2;
                           }

                        #PortfolioGauche li.current_page_item a{ color:#FFFFFF; }
                        #PortfolioGauche li.current_page_ancestor a { color:#FFFFFF; }
                        #PortfolioGauche li.current_page_ancestor a { color:#FFFFFF; }
                        #PortfolioGauche li.current_page_parent a { color:#FFFFFF; }



               /* ajout pour compatibilité avec les vieilles versions d'IE */

               #PortfolioGaucheOld
               {
                  float: left;
                  width: 220px;
                  height: 100%;
                  background-color: #000000;
                  padding: 0px 0px 0px 0px;
                  top:-0px;
                  left:-0px
                  margin: 0px auto;
                  border-bottom: 0px solid #000000;
                  border-left:   0px solid #000000;
                  border-right:  1px solid #e2de19;
                  border-top:    0px solid #000000;
               }

                     /* Format l'entete du menu */

                        /* 
                           Titre 1 du menu de gauche
                           Texte de couleur bleu (#e2de19) et taille 15px gras en arial.
                           Avec une marge de 10px au dessus, 5px en dessous, 10px a gauche et a droite
                        */
                           #PortfolioGaucheOld h1 { 
                                          font: 15px Arial, Trebuchet MS, Lucida Grande, Verdana, Sans-Serif;
                                          font-weight: bold;
                                          padding-bottom:5px;
                                          padding-top:  10px;
                                          padding-left: 10px;
                                          padding-right:10px;
                                          color:#e2de19;
                                          text-transform: uppercase;
                                       }

                        /* 
                           Ttitre 2 du menu de gauche
                           Font Arial 12px de haut et gras de couleur Blanche
                           Separe du titre 1 de 10px (5px bottom du h1 et 5px top du h2)
                           Marge de 10px a gauche et à droite.
                           Et la barre noire de 1px de large qui separe l'entete et le reste 
                           du menu est place a 10px sous le menu h1
                        */
                           #PortfolioGaucheOld h2 { 
                                          font: 12px Arial, Trebuchet MS, Lucida Grande, Verdana, Sans-Serif;
                                          font-weight: bold;
                                          color:#FFFFFF;
                                          padding-top:5px;
                                          padding-bottom:10px;
                                          padding-left:10px;
                                          padding-right:10px;
                                          border-bottom: 1px solid #000000;
                                       }

                     /* 
                        Place les ubriques du menu à 30px du bord gauche de la div
                        et place 20px au dessus du menu pour le séparer avec la tete du menu
                     */
                        #PortfolioGaucheOld ul, #menugauche ol { 
                                       padding-top:20px;
                                       padding-left:30px; 
                                       list-style: none;
                                    }

                     /* Place la petite puce à gauche du menu.
                        Pour modifier la puce il suffit de remplacer l'image
                        puce.png.
                        Si on veut supprimer toute les puces remplacer 
                        URL(images/puce.png)
                        par none

                        Et separe chaque rubrique du menu de 10px
                     */
                        #PortfolioGaucheOld ul li, #menugauche ol li { 
                                       padding-bottom:10px;
                                       list-style: url('images/puce.png');
                                    }

                     /* 
                        Les rubrique du menu sont en blanc  sans être souligne
                        font 11px 
                     */
                        #PortfolioGaucheOld a { 
                                    text-decoration:none;
                                    color:#7f7156;
                           }

                     /*
                        Les menu passent en gris tres leger quand la souris passe dessus
                     */
                        #PortfolioGaucheOld a:hover {
                                    text-decoration:none;
                                    color:#d2d2d2;
                           }

                        #PortfolioGaucheOld li.current_page_item a{ color:#FFFFFF; }
                        #PortfolioGaucheOld li.current_page_ancestor a { color:#FFFFFF; }
                        #PortfolioGaucheOld li.current_page_ancestor a { color:#FFFFFF; }
                        #PortfolioGaucheOld li.current_page_parent a { color:#FFFFFF; }

         /* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
                Partie droite du portfolio laissant apparaitre les images
            =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-*/

            #PortfolioDroite
            {
               margin-left: 228px;
               margin-right: 10px;
               margin-top:    5px;
               margin-bottom: 5px;
               overflow-y: auto;
               white-space: nowrap;
               height: 593px;
               background-color: #000000;
            }

            #PortfolioDroiteIE6
            {
               margin-left:  10px;
               margin-right: 10px;
               margin-top:    5px;
               margin-bottom: 5px;
               overflow-y: auto;
               white-space: nowrap;
               height: 593px;
               background-color: #000000;
               position:absolute;
            }

         /* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
                Portfolio laissant apparaitre les images sans menu à gauche
            =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-*/
            #Portfolio
            {
               margin-left: 10px;
               margin-right: 10px;
               margin-top:    5px;
               margin-bottom: 5px;
               overflow-y: auto;
               white-space: nowrap;
               height: 593px;
               background-color: #000000;
            }



/*****************************************************************************
  **                           footer de la page                           **
******************************************************************************/
   /* Delimite le pied de page sur 53px de haut */
      #footer {
         position: relative;
         height: 53px;
         width: 1200px;
         color:#FFFFFF;
         border-top: 0px solid #e2de19;
         border-right: 0px solid #e2de19;
         border-left: 0px solid #e2de19;
         border-bottom: 0px solid #e2de19;
         margin: 0 auto;
         }	



/*****************************************************************************
  **                        Barre de Menu du header                        **
******************************************************************************/

#navbar {
      background: transparent url(images/navbar.png);
      width:80%; 
      left:-45px;
      height: 53px;
      position:relative;
      font-size: 11px;
      font-family: Arial, Trebuchet MS, Lucida Grande, Verdana, Sans-Serif;
      color: #FFFFFF;
      font-weight: bold;
	}
	
#nav {
      margin: 0px;
      padding: 0px;
      margin-top: 32px;
	}
	
#nav ul {
      float: left;
      list-style: none;
      margin: 0px;
      padding: 0px;

	}
	
#nav li {
      float: left;
      list-style: none;
      margin: 0px;
      padding: 0px;
      }
	
#nav li a, #nav li a:link, #nav li a:visited {
      color: #7f7156;
      display: block;
      font-weight: normal;
      margin: 0px;
      padding: 0px 10px 15px 10px;
      text-decoration: none;
      text-transform: uppercase;
   	border-right: 0px solid #e2de19;
	}

#nav li a:hover, #nav li a:active {
      background: #000000 url(images/navhov.png);
      color: #FFFFFF;
	}
	
#nav li li a, #nav li li a:link, #nav li li a:visited {
      width: 570px;
      background: #000000 url(images/navbar.png);
      color: #999999;
      float: none;
      margin: 0px;
      padding: 0px 10px 0px 10px;
      border-bottom: 1px solid #000000;
      border-left: 1px solid #000000;
      border-right: 1px solid #000000;
	}
	
#nav li li a:hover, #nav li li a:active {
      background: #000000 url(images/navhov.png);;
      color: #999999;
      padding: 7px 10px 7px 10px;
	}

#nav li ul {
      z-index: 9999;
      position: absolute;
      left: -999em;
      height: auto;
      width: 590px;
      margin: 0px;
      padding: 0px;
	}

#nav li li {}
#nav li ul a { width: 160px; }
#nav li ul a:hover, #nav li ul a:active { }
#nav li ul ul { margin: -30px 0 0 191px; }
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left: -999em; }
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; }
#nav li:hover, #nav li.sfhover { position: static; }	
#nav li.current_page_item a{ color:#e2de19; }
#nav li.current_page_ancestor a { color:#e2de19; }
#nav li.current_page_ancestor a { color:#e2de19; }
#nav li.current_page_parent a { color:#e2de19; }




/*****************************************************************************
  **                        Barre de Menu du footer                        **
******************************************************************************/

#navbarfoot {
   position:relative; 
	background: transparent url(images/navbar.png);
   width:60%; 
   left:30%;
   height: 32px;
	font-size: 9px;
	font-family: Arial, Trebuchet MS, Lucida Grande, Verdana, Sans-Serif;
	color: #e2de19;
	font-weight: bold;
	padding: 0px;
	}
	
#navfoot {
	margin: 0px;
	padding: 0px;
	}
	
#navfoot ul {
	float: left;
	list-style: none;
	margin: 0px;
	padding: 0px;
	}
	
#navfoot li {
	float: left;
	list-style: none;
	margin: 0px;
	padding: 0px;
	}
	
#navfoot li a, #navfoot li a:link, #navfoot li a:visited {
	color: #7f7156;
	display: block;
	font-weight: normal;
   margin: 0px;
	padding: 0px 10px 0px 10px;
	text-decoration: none;
	text-transform: uppercase;
  	border-right: 1px solid #000000;
	}

#navfoot li a:hover, #navfoot li a:active {
	background: #000000 url(images/navhov.png);
	color: #FFFFFF;
	}
	
#navfoot li li a, #navfoot li li a:link, #navfoot li li a:visited {
	width: 170px;
	background: #000000 url(images/navbar.png);
	color: #999999;
	float: none;
	margin: 0px;
	padding: 7px 10px 7px 10px;
	border-bottom: 1px solid #000000;
	border-left: 1px solid #000000;
	border-right: 1px solid #000000;
	}
	
#navfoot li li a:hover, #navfoot li li a:active {
	background: #000000 url(images/navhov.png);;
	color: #999999;
	padding: 7px 10px 7px 10px;
	}

#navfoot li ul {
	z-index: 9999;
	position: absolute;
	left: -999em;
	height: auto;
	width: 190px;
	margin: 0px;
	padding: 0px;
	}

#navfoot li.page_item {	font-size: 9px; font-family: Arial, Trebuchet MS, Lucida Grande, Verdana, Sans-Serif; color: #e2de19; }

#navfoot li li { }
#navfoot li ul a { width: 160px; }
#navfoot li ul a:hover, #nav li ul a:active { }
#navfoot li ul ul { margin: -30px 0 0 191px; }
#navfoot li:hover ul ul, #navfoot li:hover ul ul ul, #navfoot li.sfhover ul ul, #navfoot li.sfhover ul ul ul { left: -999em; }
#navfoot li:hover ul, #navfoot li li:hover ul, #navfoot li li li:hover ul, #navfoot li.sfhover ul, #navfoot li li.sfhover ul, #navfoot li li li.sfhover ul { left: auto; }
#navfoot li:hover, #navfoot li.sfhover { position: static; }
#navfoot li.current_page_item a{ color:#e2de19; }
#navfoot li.current_page_ancestor   a { color:#e2de19 };
#navfoot li.current_page_parent   a { color:#e2de19 };







/*****************************************************************************
  **                          Sous Menu du header                          **
******************************************************************************/

#divMenuOldIE{
	float: left;
	height: 30px;
	position:absolute;
	top:50px;
   left:-13px;
}

#divMenuOldIE6{
	background: transparent url(images/navbar.png);
	width: 700px;
	height: 32px;
	font-size: 9px;
	font-family: Arial, Trebuchet MS, Lucida Grande, Verdana, Sans-Serif;
	color: #e2de19;
	font-weight: bold;
	margin: 0px 0px auto 100px;
	padding: 0px;
}

/* menu gene */
#menuIE6
{
	margin: 0px;
   margin-top: 20px;
   margin-left:50px;
	padding: 0px;
}

/* menu rubriques niveau I */
#menuIE6 ul
{
	float: left;
	list-style: none;
	margin: 0px;
	padding: 0px;
}

#menuIE6 ul li
{
	float: left;
	list-style: none;
	margin: 0px;
	padding: 0px;
}

#menuIE6 ul li a, .menu ul li a:visited
{
	color: #7f7156;
	display: block;
	font-weight: normal;
   margin: 0px;
	padding: 0px 10px 0px 10px;
	text-decoration: none;
	text-transform: uppercase;
  	border-right: 1px solid #000000;
}

#menuIE6 ul li:hover a, #menuIE6 ul li a:hover
{
	color: #ffffff;
}

#menuIE6 li.current_page_item  a { color:#e2de19; }
#menuIE6 li.current_page_ancestor   a { color:#e2de19; }
#menuIE6 li.current_page_parent a { color:#e2de19; }

#divMenu
{
	float: left;
	width: 1000px;
	height: 30px;
	position:absolute;
	top:-13px;
}

/* menu gene */
#menu
{
	width: 950px;
	height: 28px;
	position: relative;
	margin: 0;
	z-index: 100;
	color: #ccc;
	padding: 2px 0px;
   margin-top: 20px
}

/* menu rubriques niveau I */
#menu ul
{
	padding: 0;
	margin: 0;
	list-style: none;
	border-left: 250px solid #e2de19;
}

#menu ul li
{
	float: left;
	border-left: 0px solid #eee;
	text-align: center;
  	border-right: 1px solid #000000;
}

#menu ul li a, .menu ul li a:visited
{
	display: block;
	width: auto;
	text-decoration: none;
	padding: 0 10px 0 7px;
	height: 9px;
	line-height: 9px;
	color: #7f7156;
	background-color: Transparent;
}

#menu ul li:hover a, .menu ul li a:hover
{
	color: #ffffff;
}

/* ************************************  Rubriques actives  ************************************/

#menu ul li ul.current_page_item, .menu ul li ul.current_page_item li
{
	visibility: visible;
	float: left;
   color: #e2de19;
}

#menu ul li:hover ul.current_page_item li a, .menu ul li a:hover ul.current_page_item li a, .menu ul li ul.current_page_item li a
{
	display: inline;
	padding: 5px 10px 5px 10px;
	color: #FFFFFF;
	background-color: Transparent;
}

#menu li.current_page_item  a { color:#e2de19; }
#menu li.current_page_ancestor   a { color:#e2de19; }
#menu li.current_page_parent a { color:#e2de19; }



/*****************************************************************************
  **                  Presentation des liens des partenaire                **
******************************************************************************/

#linker {
	margin:0 auto 24px;
   width:1200px;
   overflow:hidden;
   display:inline-block;
	clear: both;
}

#linker:after{content:'[ ]';display:block;height:0;clear:both;visibility:hidden;}

.col-10 li { 	list-style: none;}

.col-3, .col-7, .col-10 {
	float:left;
	margin:0 12px;
   font: 11px Arial, Trebuchet MS, Lucida Grande, Verdana, Sans-Serif;
}

.col-3 { width:400px; }
.col-7 { width:720px; }
.col-10 { width:1175px; }


#thread  { 
            overflow:auto; 
            margin:0;
            padding-top:2px;
         }

#thread .col-3 {margin:0}

.threadauthor p { 
                  margin-bottom:20px;
                  background: #2f2f2f;
                  margin:-4px 0 20px 7px;
                  padding:4px;
                  -webkit-border-radius:4px;
                  -moz-border-radius:4px;
                  text-shadow:0 1px 0 #000000;
                  border:0px solid #ddd;
                  border-top-color:#eee;
                  border-left-color:#eee;
                  color:#FFFFFF;
                  line-height:1.4em;
                  font-size:12px;
                  margin:0 0 20px 11px;
                  height:50px;
                }

.threadauthor a {	border:none; color:#FFFFFF; text-decoration:none;}

.threadauthor p strong a { font-weight:bold; color:#FFFFFF; text-decoration:none; color:#e2de19;}
.threadauthor strong { font-size:13px; color:#e2de19;}
.threadauthor small{font-size:11px }
.threadauthor .avatar {float:left; margin-right:12px; padding:0; border:none;}

.threadpost p {
                  background: #2f2f2f;
                  padding:4px;
                  -webkit-border-radius:8px;
                  -moz-border-radius:8px;
                  border:0px solid #ddd;
                  border-top-color:#eee;
                  border-left-color:#eee;
                  color:#FFFFFF;
                  line-height:1.4em;
                  font-size:12px;
                  margin:0 0 20px 0px;
                  height:50px;
                }







         /* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
                                Contenu de la page espace client.
            =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-*/

        #DivGaucheEC {
                     height:      590px;
                     width:       400px;
                     margin-left: 200px;
                     margin-right:  0px;
                     margin-top:    0px;
                     margin-bottom: 0px;
                     position: relative;
                     float:left; 
                   }


         #DivDoiteEC {
                     height:      600px;
                     width:       400px;
                     margin-left: 600px;
                     margin-right: 10px;
                     margin-top:    0px;
                     margin-bottom: 0px;
                     position: relative;
                     background: #151515;
                   }


        #DivGaucheECIE6 {
                     height:      590px;
                     width:       400px;
                     margin-left: 200px;
                     margin-right:  0px;
                     margin-top:    0px;
                     margin-bottom: 0px;
                     position: absolute;
                     float:left; 
                   }


         #DivDoiteECIE6 {
                     height:      600px;
                     width:       400px;
                     margin-left: 600px;
                     margin-right: 10px;
                     margin-top:    0px;
                     margin-bottom: 0px;
                     position: absolute;
                     background: #151515;
                   }


         /* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
                                Contenu de la page contact.
            =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-*/

         #DivContact {
                  height:590px;
                  width:600px;
                  margin-left:  300px;
                  margin-right: 300px;
                  margin-top:     0px;
                  margin-bottom:  0px;
                  position: relative;    
                  color:#7f7156;
                 }

         #DivContact p { color:#7f7156;}
         #DivContact h1 {
                     font: 25px Arial, Trebuchet MS, Lucida Grande, Verdana, Sans-Serif;
                     font-weight: bold;
                     color:#e2de19;
                  }


         #DivAll {
                  overflow-y: auto;
                  height:590px;
                  width:1200px;
 
                 }



         /* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
                                Contenu de la page livre d'or.
            =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-*/
         #DivGestbook {
                  height:590px;
                  width:800px;
                  margin-left:  200px;
                  margin-right: 200px;
                  margin-top:     0px;
                  margin-bottom:  0px;
                  position: relative;  
                  overflow-y: auto;
                 }


         #DivGestbook ul, 
         #DivGestbook ol { 
                 padding-top:0px;
                 list-style: none;
                 }

         #DivGestbook ul li, 
         #DivGestbook ol li{ 
                 padding-top:0px;
                 list-style: none;
                  margin-left:  -0px;
                  margin-bottom:  -5px;
                 }




#comment-user-details{
                  background: #2f2f2f;
                  padding:4px;
                  -webkit-border-radius:18px;
                  -moz-border-radius:18px;
                  border:1px solid #000000;
                  color:#FFFFFF;
                  line-height:1.4em;
                  font-size:12px;
                  margin-left:  10px;
                  margin-right:  10px;
                  margin-bottom:  -5px;
                }

#comment-user-details { color:#FFFFFF;}



#commentaire h1 { 
                  font: 15px Arial, Trebuchet MS, Lucida Grande, Verdana, Sans-Serif;
                  font-weight: bold;
                  color:#FFFFFF;
                }

#commentaire ul, #commentaire ol { 
                 padding-top:0px;
                 padding-left:0px; 
                 padding-bottom:0px;
                 list-style: none;
                        }

#commentaire ul, #commentaire ol { 
                padding-top:0px;
                padding-left:0px; 
                padding-bottom:0px;
                list-style: none;
                        }

.fix1{
                  background: #2f2f2f;
                  padding:4px;
                  color:#FFFFFF;
                  line-height:1.4em;
                  font-size:12px;
                  margin-left: 10px;
                  margin-right: 10px;
                  border-top:1px solid #000000;
                  border-bottom:1px solid #000000;
                  border-left:1px solid #000000;
                  border-right:1px solid #000000;
                  -webkit-border-radius:8px;
                  -moz-border-radius:8px;
            }

.fix2{
                  background: #1f1f1f;
                  padding:4px;
                  border:0px solid #ddd;
                  border-top-color:#eee;
                  border-left-color:#eee;
                  color:#FFFFFF;
                  line-height:1.4em;
                  font-size:12px;
                  margin-left: 10px;
                  margin-right: 10px;
                  border-top:1px solid #000000;
                  border-bottom:1px solid #000000;
                  border-left:1px solid #000000;
                  border-right:1px solid #000000;
                  -webkit-border-radius:8px;
                  -moz-border-radius:8px;
            }


.author_meta{ 
               font: 12px Arial, Trebuchet MS, Lucida Grande, Verdana, Sans-Serif;
               color:#e2de19;
               padding-top:5px;
               padding-bottom:10px;
               padding-left:10px;
               padding-right:10px;
               border-bottom: 1px solid #3c3c3c;
            }

.user { width:650px; float:left;}




.center { text-align: center; }
.alignright { float: right; }
.alignleft { float: left }


img.center, img[align="center"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
	}

img.alignright, img[align="right"] {
	padding: 4px;
	margin: 0 0 2px 7px;
	display: inline;
	}

img.alignleft, img[align="left"] {
	padding: 4px;
	margin: 0 7px 2px 0;
	display: inline;
   }

img.noborder { border: none !important; }


/* ———— legendes ————*/
.aligncenter, div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.alignleft {
float: left;
}
.alignright {
float: right;
}
