:focus {
	outline: 0;
}

 
@font-face {
    font-family: 'beanpole';
    src: url('fonts/beanpole.woff2') format('woff2'),
         url('fonts/beanpole.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
 
@font-face {
    font-family: 'mrseavesroman_regular';
    src: url('fonts/mrseavesroman_regular.eot');
    src: url('fonts/mrseavesroman_regular.eot?#iefix') format('embedded-opentype'),
         url('fonts/mrseavesroman_regular.woff') format('woff'),
         url('fonts/mrseavesroman_regular.ttf') format('truetype'),
         url('fonts/mrseavesroman_regular.svg#mrseavesroman_regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

 

/* Site-wide properties ======================================================== */
html {
  width: 100%;
  height: 100%; 
  font-family: Georgia, serif;
  color:#000; 
  background: url('images/fleuri/bg_body.jpg') repeat;
}

body{     
    width: 100%;	
    height: 100%;
    font-family: 'mrseavesroman_regular';
    box-sizing: border-box;
}
  
/* Fibonacci based heading scale ratio */
h1{ font-size: 4.4em; font-weight: normal; }
h2{ font-size: 2.8em; font-weight: bold; }
h3{ font-size: 1.6em; font-weight: bold; }
h4{ font-size: 1.2em; font-weight: bold; }
h5{ font-size: 1em; font-weight: bold; }
h6{ font-size: 1em; font-weight: bold; }
    
h1{
}
h2{
}

a{
  color: #f4a4a5;
  text-decoration: none;
}
a:hover{
  color: #f4a4a5;
}
img{
  max-width:100%;
}
hr{
}
p{
}

#mainpage_container {
  width: 820px;
  margin: 0 auto;
  padding: 0 40px;
  transform: scale(1.2);
  transform-origin: top;
}
#topic_container {
  width: 820px;
  margin: 0 auto;
  padding: 0 0px;
  transform: scale(1.2);
  transform-origin: top;
}
/* ------ HEADER MAINPAGE ------ */
/* title */
#mainpage_container #title{
  clear:both;
  width:340px;
  margin: auto;
  text-align: center; 
  background: url('images/fleuri/bg_header3.png') no-repeat center 20px;
  background-size: 340px;
  padding-top: 120px;
}
#mainpage_container #title:hover{
  background-image: url('images/fleuri/bg_header2.png');
}
#mainpage_container #title h1.website_title{
  font-weight: normal;
  font-family: 'beanpole';
  font-size: 3.5em;
  text-transform: uppercase; 
  font-variant: small-caps;
  display: block;
  text-align: center;
  line-height: 130%;
  margin-top: 5px; 
  color: rgba(0,0,0,0);
}
#mainpage_container #title:hover h1.website_title{
  color: rgba(0,0,0,1);
}
#mainpage_container #title h6.website_date{  
  font-family: 'mrseavesroman_regular';
  font-weight: normal;
  margin-top: 80px;
  margin-bottom: 5px;    
  font-size: 1.6em;
  letter-spacing: .1em;
  display: inline-block;
}
#mainpage_container #title h6.website_countdown{  
  font-size: 1.2em;
  font-weight: bold;
  margin-top: 5px;
  margin-bottom: 15px;    
  display: block;
}
/* ----------- NAV MAINPAGE ------------- */
#mainpage_container nav{
  width: 100%;
  display: inline-block;
  clear: both;
	margin-bottom: 20px;
	margin-top: 25px;
	padding-top: 25px;
	padding-bottom: 35px;
  background: url('images/fleuri/bg_menu.png') no-repeat center top;
}
#mainpage_container nav ul{
  list-style-type: none;
  text-align: center;
  line-height: 100%;
	padding-bottom: 40px;
  background: url('images/fleuri/bg_menu.png') no-repeat center bottom;
}
#mainpage_container nav ul li{
  padding-left: 20px;
  display: inline-block;
  padding-right: 0px;  
  font-size: 1.3em;
  font-variant: small-caps;
}
#mainpage_container nav ul li a{
  text-decoration:none;
  font-weight:normal;
  color: #000;
}
#mainpage_container nav ul li.first{
  padding-left:0;
  background:none;  
}
#mainpage_container nav ul li a:hover,
#mainpage_container nav ul li a.menu_active{
  text-decoration:none;
  color: #f4a4a5;
}

/* ----------- NAV TOPIC PAGE ------------- */
#topic_container nav {
  width: 100%;
  height: 140px;
  padding-left: 140px;
  display: block;
  background: url('images/fleuri/bg_header3.png') no-repeat left;
  background-size: 120px;
  box-sizing: border-box;
  margin-bottom: 40px;
}

#topic_container nav ul{
  list-style-type: none;
  text-align: center;
  line-height: 100%;
  padding-left: 0px;
  padding-top: 0px;
  padding-bottom: 20px;
  margin: 5px;
  background: url('images/fleuri/bg_menu.png') no-repeat center bottom;
}

#topic_container nav ul li{
  padding-left: 20px;
  display: inline-block;
  padding-right: 0px;  
  font-size: 1em;
  font-variant: small-caps;
}

#topic_container nav ul li a{
  text-decoration:none;
  font-weight:normal;
  color: #000;
}
#topic_container nav ul li.first{
  padding-left:0;
  background:none;  
}
#topic_container nav ul li a:hover,
#topic_container nav ul li a.menu_active{
  text-decoration:none;
  color: #f4a4a5;
}
#topic_container nav h2 {
    text-align: center;
    font-family: 'mrseavesroman_regular';
    margin-top: 10px;
    margin-bottom: 0px;
    padding-bottom: 40px;
    background: url('images/fleuri/bg_title.png') no-repeat center bottom;
}

.progTable {}
.progTable th,.progTable td {
    text-align: left;
}
.progTable th {
    padding-top: 10px;
    padding-bottom: 5px;
}
.progTable td {
    padding-top: 10px;
    padding-bottom: 5px;
    padding-left: 8px;
    vertical-align: top;
}
.progTable td p {
    padding-top: 0px;
    margin-top: 0px;
}
.progTable td img {
  max-width: 200px; 
  max-height: 200px;
}

/* Reusable classes ============================================================ */

.center{
  width:100%;
  text-align:center; 
}
.p1{
  width:48%;
  float:left;
}
.p2{
  width:50%;
  float:right;
}
.route{
  margin-top:10px;
}
.photo_droite{
  float:right;
  margin-left:15px;
  margin-bottom:15px;
  margin-right:35px;
}
.photo_left{
  float:left;
  margin-bottom:7px;
  margin-right:10px;
}
.custom_photo_thumb, .custom_photo_thumb img{
  width:200px;	
}
div.message{
  background: #fff url('images/icon_valid.png') no-repeat 2% center;
  width:92%;
  padding:2% 2% 2% 6%;
  border:0.1em solid #00850c;
  color:#00850c;
}
div.warning{
  background: #fff url('images/icon_warning.png') no-repeat 2% center;
  width:92%;
  padding:2% 2% 2% 6%;
  border:0.1em solid #f5d851;
  color:#c67109;
}
.item{
  margin-top:15px;
  padding-bottom: 40px;
}
.item img{
  float:left; 
  margin-right:2%;
  margin-bottom:2%;  
}
.item img.small_icon{
  margin:0 2px 0 0; 
  float:none;
}



a.member_btn{
  font-size:1.3em;
}
a.member_btn img{
  height:25px;
  float:left;
  margin-right:3px;
}
a.menu_btn{
  float:right;
  margin-top:10px;
  width:40%;
  text-align:center;
  margin-bottom:5px;
}
a.see_profil_btn{
  width:auto;
  float:right;  
}
a.valid_presence,
a.valid_presence img,
a.add_photo_member img,
a.edit_website img,
a.edit_profil{
  display:none;
}



/* Left & Right alignment */
.left{ float: left; }
.right{ float: right; }

/* The inside class provides consistent padding. To be used often! */
.inside{  }

/* The fraction classes are useful for column lists */
.half, .third, .quarter, .fifth, .sixth{ width: 100%; }
.half li, .third li, .quarter li, .fifth li, .sixth li{ float: left; }
.half li{ padding-right: 5%; width: 45% }
.third li{  padding-right: 5%; width: 28.3% }
.quarter li{  padding-right: 5%; width: 20% }
.fifth li{  padding-right: 5%; width: 15% }


/* For when a <br /> just ain't enough */
.separator{
    clear: both;
    float: left;
    height: 1px;
    width: 100%; }

/* Basic Structure ============================================================= */


#allpage{
  width:100%;
}
#container{
  width: 820px;
  margin: 0 auto;
  padding: 0 40px;
}
#container2,
#container3{
  width:100%;  
}


    /* Header */
    header{   
         }
    
    /* Content */
    article{
        }
    
    /* Sidebar */
    aside{  
         }
        
    /* Footer */
    
    footer { 
      width: 100%;
    }
    footer img{
      margin: 5px 0;
    } 

    
/* Project specifics =========================================================== */
/* Pour some CSS below ========================================================= */




/* ----------- CONTENT ------------- */
#container_content{ 
  margin-bottom:40px; 
  line-height: 140%;
  font-size: 1.7em;
  font-weight: normal;
}
#content{ 
  width:100%;  
}
#content{ 
}
#FamilyTree{
  margin:0 auto; 
}
#gene{
  overflow:auto; 
  /* overflow-y:hidden; */
	font-size:10px;
	width:100%;
	padding-top:10px;
	background:#fff;
	line-height: normal;
}
#gene img{
   max-width: none; /* résoud le pb d'affichage du max-width:100% */
}
#gene a{
  color: #3E3E3E; 
	font-size:10px;
}
table#family_table tr td img{
  display:none; 
}
h2.event_title {  
  font-weight: normal;
  font-size:1.3em;
	display:block;
	margin-bottom:15px;
	padding-bottom:5px;
	text-align: center;
	border-bottom: 1px solid #f4a4a5;
}
div.title,
h2.page_title {
  font-family: 'beanpole';
  text-align: center;
  text-transform: uppercase;
  font-weight:normal;
  font-size: 1.5em;
	margin-bottom:30px;
	padding-bottom:70px; 
  background: url('images/fleuri/bg_title.png') no-repeat center bottom;
}

div.title{
  margin:60px 0 15px 0;    
}
h3.small_title {
  font-size:1.5em;
	display:block;
	font-weight:normal;
	width:100%;
	margin-bottom:3px;
	padding-bottom: 5px;
	border-bottom:1px dashed #fff;
}
h3.small_title a{
  text-decoration:none;  
}





div.error{
  background: #fff url('images/icon_exclamation.png') no-repeat 2% center;
  width:92%;
  padding:2% 2% 2% 6%;
  border:0.1em solid red;
  color:red;
}

 
/* ------ GENERAL ----- */



@media screen and (max-width:1001px){
}
@media screen and (max-width:900px){
  #container{        
    width: 96%;
    padding-left: 3%;
    padding-right: 3%;
  }
}
@media screen and (max-width:700px){
  #bg_pushs{
    background:none;  
  }
}
@media screen and (max-width:511px){
  footer{
    position: static;
    height:50px;
    padding: 0;
    margin:0;
  }
  nav{
    display:none;  
  }
  .push_accueil1 h2,
  .push_accueil2 h2,
  .push_accueil3 h2,
  h2.page_title{
  }
  #random_home_photo{
    display:none;
  }
  #add_comment_form input[type=text],
  #add_comment_form input[type=password]{
    width:98%;
  }
  #add_comment_form input.captcha_input{
    width:70px;
  }
  #connexion a.connexion_backend_link,
  #connexion a.connexion_login_link{
    font-size:0;
    width:15px;
    height:15px;
    float:right;
    margin:0;
  }
  .trajet_detail{
    width:96%;
    margin-right: 0;
  }
  #direction_list,
  #direction_map{
    width:100%;  
  }
  .last_items{  
    width:85%;
    margin-right:0;
    margin-left:8%;
    height:auto;
  }
  .last_visits{
    display:none;
  }
  #profilForm label{
    width:100%;  
    float:left;
  }
  #profilForm textarea,
  #profilForm input[type=text],
  #profilForm input[type=password]{
    width:98%;    
    float:left;
    margin:0;
  }
  .profil_photo{
    width: 95%;  
  }
  #info_user{
    width: 100%;  
    margin:10px 0;
  }
  a.gallery_bloc {  
    width:42%;
  }
  .push_accueil1,
  .push_accueil2,
  .push_accueil3{
    margin:20px auto 0 auto;
    display:block;
    float:none;
    width:100%;
  }
  .presence_title{
    width:49%;
  }
  .presence_choice{
    width:50%;
  }
}
@media screen and (min-width:1001px){

}