/*Site porfolio de Pierre-Emmanuel POCHON, janvier 2010*/

/*balises génériques*/
body {margin:0; padding:0; background:url(../images/fond_page.jpg) top left repeat-x; background-color:#D0D1D8; 
font-family:Arial, Helvetica, sans-serif; font-size:1em; color:#2A303B}

a {font-size:0.9em; color:#6D83A8}
/*a:link 
a:visited */
a:hover {text-decoration:none}
/*a:focus
a:active*/ 
a img {border:0}

h1, h2, h3 {font-family:"Trebuchet MS", Verdana, Arial; margin:0em}
h1 { font-size:1.6em; color:#454C58}
h2 {font-size:1.5em}
h3 {font-size:1.3em;}

p { }
dl {font-size:0.9em}
dt { font-weight:bold; margin:5px 0 5px 0}
dd {font-size:0.8em}

/*balises DIV*/
#container {width:960px; margin-top:0; margin-left:auto; margin-right:auto; }
#container h1 { text-align:center; background:url(../images/titre_porfolio_curriculum-v.gif) top center no-repeat; margin:20px 0 20px 0}
#container h1 span {visibility:hidden}

#container #colGauche { float:left; width:475px; height:450px; position:relative;}
#container #colGauche ul { list-style-type:none; margin:23px 0 0 0; padding:0}
#container #colGauche ul li { float:left; margin:10px;}
#container #colGauche ul li a{ text-decoration:none; color:#000000; }

#container #colGauche ul li a.info span {
   display: none; /* on masque l'infobulle */
}
#container #colGauche ul li a.info:hover {
   background: none; /* correction d'un bug IE */
   z-index: 500; /* on définit une valeur pour l'ordre d'affichage */
   cursor: help; /* on change le curseur par défaut en curseur d'aide */
}
#container #colGauche ul li a.info:hover span {
   display: inline; /* on affiche l'infobulle */
   position: absolute;
   white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */
   top: 0px; left:9px;
   background: #ECEDF4; padding: 3px;  border-left: 5px solid #F5AF27; font-size:0.8em; margin:0;
}

#container #colDroite { float:right; width:450px; height:450px; }
#container #colDroite h2 a{background:url(../images/ico_mail.gif) center left no-repeat; padding-left:20px; text-decoration:none; color:#000000;  }
#container #colDroite h3 { color:#5C58A7;}
#container #colDroite h3 span.metier-et {color:#29BF1D}
#container #colDroite h3 span.metier-designer {color:#F5AF27}
#container #colDroite p img.signature {float:right; margin-right:160px}

/*balises CLASS*/
.cadreCentreur {margin-left:auto; margin-right:auto; width:475px;}

span.puceGraphisme { font-weight:bold; font-size:1.2em; color:#F5AF27; margin-right:0.5em}
span.puceContenu { font-weight:bold; font-size:1.2em; color:#5C58A7; margin-right:0.5em}
span.puceTechnique { font-weight:bold; font-size:1.2em; color:#29BF1D; margin-right:0.5em}
span.puceProfil { font-weight:bold; font-size:1.2em; color:#29BF1D; margin-right:0.5em}


dt.borderGraphisme {border-left:5px solid #F5AF27; padding-left:0.5em; }
dt.borderContenu {border-left:5px solid #5C58A7; padding-left:0.5em; }
dt.borderTechnique {border-left:5px solid #29BF1D; padding-left:0.5em; }
dt.borderProfil {border-left:5px solid #454C58; padding-left:0.5em; }

a.rollopaque img 
{
  opacity: 1;
  filter:alpha(opacity=100);
  cursor:hand;
}

a:hover.rollopaque img 
{
  opacity: 0.5;
  filter:alpha(opacity=50);
  cursor:hand;
}