/* a few generic ones */

body {
      background:url('../img/bkg.jpg');
      font-family:sans-serif; font-size:100%;
      width:auto;
/*      overflow-x:scroll; */
}

input[type="submit"], input[type="button"]{
    border: 1px solid #ddd;
    margin-top: 20px;
    padding:5px 15px; 
    background:#ccc; 
    cursor:pointer;
    -webkit-border-radius: 5px;
    border-radius: 5px; 
    font-size:80%;
    align:center;
}

input[type="submit"]:hover, input[type="button"]:hover {
    background-color: #eee;
}

input[type="text"], input[type="password"], select, input[type="date"], input[type="file"], textarea {
    border: 1px solid #ddd;
    margin-top: 5px;
    padding:5px 5px; 
    background:#eee; 
    -webkit-border-radius: 2px;
    border-radius: 2px; 
    font-family:sans-serif;
    font-size:80%;
    align:center;
}

form {
 margin: 0px;
}

/* done ! */



/* edit */
img.photo_edit {
   max-width:130px;
   max-height:130px;
}

img.img_pdel {
  max-width:24px;
  max-height:24px;
  margin:auto;
}
td.td_pdel {
 padding:10px;
 vertical-align:middle;
 text-align:center;
}
input.input_pdel {
  height:24px;
}

/* menu stuff */

div.menu {
  position:fixed;
  background-color: #FDFAFA;
  float:left;
  min-width: 40%;
  height: 90px;
  vertical-align:middle;
  -webkit-border-radius: 5px;
  border-radius: 5px; 
  display:table;
  clear:right;
  z-index:1;
}


div.menu div {
  display: table-cell;
  width:40%;
  vertical-align:middle;
  text-align:left;
  padding:5px;
}

div.menu a {
   display: table-cell;
   text-align:center;
   vertical-align:middle;
}


div.menu img {
	  width:64px;
	  margin:10px;
}

div.menu img:hover {
	width:70px;
	margin:7px;
}



/* main show zone */

div.show_zone {
    text-align:center;
    vertical-align:middle;
    position:absolute;
    top:110px;
}
div.innerdiv {
    position: absolute;
    top:0px;
    left:0px;
/*    border: 1px solid #eee;
    -webkit-border-radius: 5px;
    border-radius: 5px;  */
    box-sizing:border-box;
}


/* all fiche related stuff */

div.fiche {
    position: absolute;
    top:0px;
    left:0px;
    padding:10px;
    background-color: #EDEAEA;
    border: 1px solid #aaa;
    -webkit-border-radius: 5px;
    border-radius: 5px; 
    display:inline-block;
    box-sizing:border-box;
}
div.fiche.fzoom2 {
    padding:8px;
}
div.fiche.fzoom3 {
    padding:6px;
}
div.fiche.fzoom4 {
    padding:4px;
}
div.fiche.fzoom5, div.fiche.fzoom6 {
    padding:2px;
}

div.fiche:hover {
    background-color: #FFFFFF;
}

div.fiche.main_1 {
    background-color: #BBDDFF;
}
div.fiche.main_2 {
    background-color: #BBFFBB;
}


div.fiche div.top {
     width:100%;
     overflow: auto;
     display:table;  /* -row; */
     cursor:pointer;
}

div.fiche img.top {
    position:static;
    /* float: left; */
    margin:auto;
    display:table-cell;
    text-align:center;
    vertical-align:middle;
}

div.topimg {
    text-align:center;
    vertical-align:middle;
}

div.fiche.fzoom1 img.top, div.fiche.fzoom0 img.top {
    max-width:128px;
    max-height:128px;
}
div.fiche.fzoom1 div.topimg, div.fiche.fzoom0 div.topimg {
    width:128px;
    height:128px;
}
div.fiche.fzoom2 img.top {
    max-width:96px;
    max-height:96px;
}
div.fiche.fzoom2 div.topimg {
    width:96px;
    height:96px;
}
div.fiche.fzoom3 img.top {
    max-width:64px;
    max-height:64px;
}
div.fiche.fzoom3 div.topimg {
    width:64px;
    height:64px;
}
div.fiche.fzoom4 img.top {
    max-width:48px;
    max-height:48px;
}
div.fiche.fzoom4 div.topimg {
    width:48px;
    height:48px;
}
div.fiche.fzoom5 img.top, div.fiche.fzoom6 img.top {
    max-width:32px;
    max-height:32px;
}
div.fiche.fzoom5 div.topimg, div.fiche.fzoom6 div.topimg {
    width:32px;
    height:32px;
}

div.fiche p.top {
   position:static;
   vertical-align:middle;
   display:table-cell;
}

div.fiche.fzoom1 p.top, div.fiche.fzoom0 p.top {
   margin-left:128px;
   font-size:128%;
   padding:2em;
   white-space:nowrap;
}
div.fiche.fzoom2 p.top {
   margin-left:96px;
   font-size:96%;
   padding:2em;
   white-space:nowrap;
}
div.fiche.fzoom3 p.top {
   margin-left:64px;
   font-size:64%;
   padding:1em;
   white-space:nowrap;
}
div.fiche.fzoom4 p.top {
   margin-left:48px;
   font-size:48%;
   padding:0.5em;
   white-space:nowrap;
}
div.fiche.fzoom5 p.top, div.fiche.fzoom6 p.top {
    display:none;
}


div.fiche div.hr {
     margin:5%;
     width:90%;
     background-color:#777777;
     border: 1px solid #eee;
     -webkit-border-radius: 2px;
     border-radius: 2px;
}

div.fiche.fzoom0 div.hr, div.fiche.fzoom1 div.hr, div.fiche.fzoom2 div.hr {
 display:block;
}
div.fiche.fzoom0 div.hr { height:5px; }
div.fiche.fzoom1 div.hr { height:3px; }
div.fiche.fzoom2 div.hr { height:1px; }

div.fiche.fzoom3 div.hr, div.fiche.fzoom4 div.hr, div.fiche.fzoom5 div.hr, div.fiche.fzoom6 div.hr {
 display:none;
}



div.fiche.fzoom0 div.bottom, div.fiche.fzoom1 div.bottom {
  display:table;
  font-size:100%;
  width:100%;
}
div.fiche.fzoom2 div.bottom {
  display:table;
  font-size:60%;
  width:100%;
}
div.fiche.fzoom3 div.bottom, div.fiche.fzoom4 div.bottom, div.fiche.fzoom5 div.bottom, div.fiche.fzoom6 div.bottom {
  display:none;
}

div.fiche div.bottom td.italic {
    font-style:italic;
    vertical-align:top;
}


/* white box for login */

div.white_box {
    background-color: #FDFAFA;
    min-width: 500px;
    width: 42%;
    height: 150px;
    margin: auto;
    margin-top: 25%;
    text-align: center;
    vertical-align: middle;
    padding: 20px;
    border: 1px solid #eee;
    -webkit-border-radius: 5px;
    border-radius: 5px; 
    font-size:120%;
    display:table;
}

div.white_box div {
  width:150px;
  height:100%;
  background:transparent;
  margin-top: auto;
  display:table-cell;
  vertical-align:middle;
}

div.white_box div img {
  vertical-align:middle;
}

div.white_box form {
  margin:0px;
  margin-left:150px;
  height:100%;
  vertical-align: middle;
  display:table-cell;
}

/* anniv name class */
span.anniv_name {
 cursor:pointer;
}


/* class extra for extra photo on fiche */
.extra {
    position:absolute;
    top:110px;  /* juste like show zone in index */
    right:20px;
    height:80vh;
    color: lightgray;
    font-size:80%;
    text-align:center;
    display:flex;
    align-items: center;
    justify-content: center;
}