body,
h1,
h2,
h3,
p,{
	/* A simple page reset */
  margin:0px;
  padding:0px;
}

@font-face {
font-family: 'GE Inspira Bold';
src: url('../GE Inspira Bold.ttf')format('truetype');
}

@font-face {
font-family: 'GE Inspira';
src: url('../GE_Inspira.ttf')format('truetype');
}

@font-face {
font-family: 'Georgia';
src: url('../Georgia.ttf')format('truetype');
}

body{
  color: #5b5b5b;
  font-size:1.2em;
  background: url('fond1.jpg') repeat;
  font-family:'GE Inspira', serif;
}

#gallery{
	/* The pics container */
  margin-top:25px;
  position:relative;
}

.pic, 
.pic a{
	/* Each picture and the hyperlink inside it */
width:230px;
  height:230px;
  overflow:hidden;
}

.pic{
	/* Styles specific to the pic class */
  position: absolute;
  border:3px solid #EEEEEE;
  border-bottom:3px solid #eeeeee;
	
	/* CSS3 Box Shadow */
  box-shadow:2px 2px 3px #807a7a;
}

.pic a{
	/* Specific styles for the hyperlinks */
  text-indent:-999px;
  display:block;
	/* Setting display to block enables advanced styling for links */
}

.drop-box{
	/* The share box */
  width:240px;
  height:120px;
  position:absolute;
  bottom:0;
  right:0;
  z-index:-1;
  background:url(drop_box1.png) no-repeat;
}

.drop-box.active{
	/* The active style is in effect when there is a pic hovering above the box */
  background-position:bottom left;
}

h1{
  color:#5b5b5b;
  font-family:'Georgia', sans-serif;
  font-size:38px;
  font-weight: normal;
}

hr{
  background-color:#b2b2b2;
  border:none; 
  color:#b2b2b2;
  margin-top:10px;
  margin-bottom:0px;
  height:1px;
  width:100%;
}

.clear{
	/* The clearfix hack */
  clear:both;
}

#main{
  margin-left:60px;
  margin-right:30px;
  margin-top:30px;
}

a{
  color:red;
  text-decoration:none;
  outline:none;
  font-size:1em;
}

a:hover{
  text-decoration:none;
  color:blue;
}

a.retour{
  float:right;
}