body{
background-color:#272727;
background-image:url(images/fondbeelee.jpg);
margin:0;
padding:0;
color:#e1e1e1;
font-size:16px;
height:100%;

}

html{
height:100%;
margin:0;
padding:0;
}




/* Vous pouvez maintenant utiliser votre police */    
* {  
    font-family: verdana, helvetica, sans-serif;  
}

a{
color:#5284c8;
text-decoration:none;
}






#global{
width:100%;
height:auto !important;
height:100%;
min-height:100%;
margin-left:auto;
margin-right:auto;
text-align:left;

}

#categorie{
position:fixed;
top:0;
background-image:url(images/fondtranshaut2.png);

border-bottom:1px solid #495f72;
}

#categorie:after{
content:".";
height:0;
clear:both;
visibility:hidden;
display:block;

}

#proj{
margin:auto;
width:90%;
}

#categorie h1{
font-size:20px;
margin-left:52px;
margin-bottom:5px;
}



#droite{
position:absolute; 
height:auto !important;
height:100%;
min-height:100%;
background-image:url(images/motif.png);
background-color:#1c1c1c;
border-left:5px solid #76a8ed;
border-bottom:1px solid #76a8ed;
float:right;
width:400px;
right:0px;
padding-right:50px;
bottom:0;
}


#logo{
width:414px;
height:124px;
margin-left:-4px;
margin-top:10px;
border:none;
}

#droite p{
text-align:right;

margin-right:15px;
}




#face{
background:url(images/facen.png);
width:117px;
height:39px;
margin-left:290px;
}

#face:hover{
background:url(images/faceh.png);
width:117px;
height:39px;
}

#face a{
color:#1c1c1c;

}

#cent{
margin-top:10px;
margin-left:300px;
margin-bottom:30px;
}

#cent img{
border:none;
}

.profil{
margin-left:255px;
margin-top:150px;
margin-bottom:10px;
}


  .info{
  display:block;
  float:left;
  border:1px solid #ccc;
 padding:0px;
 margin:0px;
    opacity : 0.1;
    -moz-opacity : 0.1;
    -webkit-opacity : 0.1;
    -ms-filter: "alpha(opacity=10)"; 
		transition:  0.5s linear;
	-o-transition:  0.5s linear;
	-moz-transition:  0.5s linear;
	-webkit-transition:  0.5s linear;
/*rajout pour page portfolio*/
}

  .info:hover{
 padding:0px;
 margin:0px;
     display:block;
  float:left;
  border:1px solid #76a8ed;
    opacity : 1;
    -moz-opacity :1;
    -webkit-opacity :1;
    -ms-filter: "alpha(opacity=100)"; /* IE 8 */ 
	transition:  0.5s linear;
	-o-transition:  0.5s linear;
	-moz-transition:  0.5s linear;
	-webkit-transition:  0.5s linear;
	}
	
	  .info:focus{
	  display:block;
  float:left;
  border:1px solid #76a8ed;
	 padding:0px;
 margin:0px;
    opacity : 1;
    -moz-opacity :1;
    -webkit-opacity :1;
    -ms-filter: "alpha(opacity=100)"; /* IE 8 */ 

	}
	
#footer{
clear:both;
position:fixed;
height:40px;
width:100%;
bottom:0;
color:#eeede8;
border:1px solid #495f72;
border-left:none;
border-right:none;
border-bottom:none;
background-color:#232323;
padding-bottom:10px;

}

#footer .bulle{
margin-left:5%;
position:absolute;
float:left;
}

#footer a{
display:block;
color:#eaeaea;
}

#footer .bulle:before{
content:url(images/ampoulev.jpg);
position:absolute;
margin-top:2px;
margin-left:-20px;
}

#footer .bulle:hover:before{
content:url(images/ampoule.jpg);
position:absolute;
margin-top:2px;
margin-left:-20px;
}


#fond{
float:left;
width:100%;
background-image:url(images/fondtranhaut.png);
border:1px solid #717a82;
padding:10px;
margin-bottom:20px;
}

#facebook{
margin-top:-10px;
float:right;
margin-right:20px;
}

.bulle{
margin-top:15px;
}

.bulle span{

position:absolute;
text-align:left;
display:block;
background-color:#232323;
width:370px;
height:160px;
top:250px;
margin-left:50px;
padding:10px;
border:1px solid #717a82;
	transition:  0.5s linear;
	-o-transition:  0.5s linear;
	-moz-transition:  0.5s linear;
	-webkit-transition:  0.5s linear;
}

.bulle:hover span{
position:absolute;
text-align:left;
margin-left:50px;
display:block;
background-color:#232323;
width:370px;
height:160px;
top:-250px;
padding:10px;
border:1px solid #717a82;
	transition:  0.3s linear;
	-o-transition:  0.3s linear;
	-moz-transition:  0.3s linear;
	-webkit-transition:  0.3s linear;
}

.bulle:focus span{
position:absolute;
text-align:left;
margin-left:50px;
display:block;
background-color:#232323;
width:370px;
height:160px;
top:-250px;
padding:10px;
border:1px solid #717a82;
	transition:  0.3s linear;
	-o-transition:  0.3s linear;
	-moz-transition:  0.3s linear;
	-webkit-transition:  0.3s linear;
}

.bulle:hover span img{
border:none;
float:left;
margin-right:10px;
}

.bulle:hover span {
color:#eaeaea;
}

.bulle p{
padding-left:55px;
margin-top:15px;

}

.bulle a{
cursor:pointer;
}

.ecole{
color:#ee79ef; 
}

.bulle #mail{
color:#559ac2;

}

.contact{
display:block;
}

a{
border:none;
}

a img{
border:none;
}