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{
	/* Styling the body */
  color: #c5c5c5;
  font-size:1.2em;
  background: url(fond1.jpg) no-repeat 50% 50% fixed; 
  background-size: cover;
  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{
	/* The title of the page */
  color:#c5c5c5;
  font-family:'Georgia', sans-serif;
  font-size:38px;
  font-weight: normal;
}

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

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

#main{
	/* The main container */
  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;
}