/*---------------------------------------*
 |  Stylesheet for all Beeton's book of  |
 |          Household Management         |
 *---------------------------------------*/

@font-face {
  font-family: 'CapFont';
  font-style: normal;
  src: url("fonts/LMMonoCaps10-Regular.eot?#iefix") format('embedded-opentype'), /* IE6-IE8 */
       url("fonts/LMMonoCaps10-Regular.woff") format('woff'), /* Modern Browsers */
       url("fonts/LMMonoCaps10-Regular.woff2") format('woff2'), /* Super Modern Browsers */
       url("fonts/LMMonoCaps10-Regular.ttf") format('truetype'), /* Safari, Android, iOS */
       url("fonts/LMMonoCaps10-Regular.svg#LMMonoCaps10-Regular") format('svg'); /* Legacy iOS */
}
@font-face {
  font-family: 'handw';
  font-style: normal;
  src: url("fonts/handwriting.eot?#iefix") format('embedded-opentype'), /* IE6-IE8 */
       url("fonts/handwriting.woff") format('woff'), /* Modern Browsers */
       url("fonts/handwriting.woff2") format('woff2'), /* Super Modern Browsers */
       url("fonts/handwriting.ttf") format('truetype'), /* Safari, Android, iOS */
       url("fonts/handwriting.svg#LMMonoCaps10-Regular") format('svg'); /* Legacy iOS */
}

body {
   background:#fffacd;
   color:#800000;
   font-family:Calibri;
}

h1, h2, h3, h4, h5, h6 {
   font-family:"Comic Sans MS";
   text-align:center;
}
.beet {
  background:url("../img/be-bg.jpg");
  background-repeat:no-repeat;
  background-position:10px 10px;
}

.top {
   width:100%;
   text-align:center;
   height:150px;
}
.menu {
  width:15%;
  font-size:80%;
  height:600px;
  overflow:auto;
}
.menu p {
  margin:0;
  padding:5px;
  color:blue;
  text-decoration:none;
  padding-left:30px;
  text-indent:-15px;
}
.menu p:hover {
  cursor:pointer;
  color:red;border:
}
.menu a {
  margin:0;
  display:block;
  color:blue;
  text-decoration:none;
  padding-left:45px;
  text-indent:-40px;
}
.menu a.hfd {
   padding-left:0;
}
.menu a:hover {
  cursor:pointer;
  color:red;
}

.hw {
   font-family:'handw';
}
.fr {
   width:82%;
   float:right;
   height:1500px;
}
.tekst {
   width:80%;
   margin: 0 auto;
   text-align:justify;
}

.rec {
   width:80%;
   margin:0 auto;
   text-align:justify;
   float:left;
}
.vis {display:block;}
.inv {display:none;}

.rec p {
   column-count:2;
   column-gap:50px;
}
.rec p.ingr{
   font-style:italic;
   width:90%;
   margin:0 auto;
   margin-top:20px;
}
.rec table {
   width:100%;
}
.rec table td{
/*   width:50%;*/
   padding:20px;
}
.c1 {
   column-count:1;
}
.cap {
  font-family:'CapFont';
}

.motto {
   width:70%;
   margin:10px auto;
}
.motto u {
   text-decoration:none;
   font-style:italic;
   display:block;
   margin:0;
   text-align:right;
}
.ops {
   padding-left:2.5em;
   text-indent:-2.0em;
}  
img {
   display:block;
   margin :20px auto;
}
.fle {
  float:left;
  margin:5px;
}
.fri {
  float:right;
  margin:5px;
  }

.ce {text-align:center;}
.le {text-align:left;}
.sm {font-size:80%;}
.it {font-style:italic;}
.bo {font-weight:bold;}
.i30 {margin-left:30px;
      padding-left:30px;}

/*  page numbers */
s {color:magenta;
   padding:0;
   font-style:italic;
   font-size:90%;
   text-decoration:none;
   }
.card {
   width:60%;
   margin:20px auto; 
   border:4px double red; 
   font-style:italic;
   padding:20px;
   text-align:center;
}
td.r {
   border-right:1px solid #800040;
}
td.l {
   border-left:1px solid #800040;
}
td.t {
   border-top:1px solid #800040;
}
td.b {
   border-bottom:1px solid #800040;
}

/* footnotes */
i {
  position: relative;
  display: inline-block;
  font-style:normal;
  color: red;
}

i s {
  visibility: hidden;
  width: 300px;
  text-decoration:none;
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
  background-color:#ffffd0;
  color: #800040;
  text-align:justify;
  padding: 10px;
  font-style:normal;
  border:1px dotted #800040;
  border-radius: 6px;
  font-size:70%;
}
/* Show the text by hovering over tooltip */
i:hover s {
  visibility: visible;
}
i img {display:none;}
i:hover img {
  display: block;
  position: absolute;
    z-index: 2;
}