body {font-family: Arial;}




/* Style the tab */
.tab {
    overflow: hidden;
    position: fixed;
    right: 2%;
    background-color: #ccc;
}

/* Style the buttons inside the tab */
.tab button {
    background-color: #ccc;
    
    width: 80px;
    outline: none;
    cursor: pointer;
    padding: 5px 18px;
    transition: 0.3s;
    font-size: 14px;
    
    
}
/* Change background color of buttons on hover */
.tab button:hover {
    background-color: #eee;
}

/* Create an active/current tablink class */
.tab button.active {
    background-color: #ccc;
}



.bbb-small {text-align: center;
font-size:20px;
    font-family:'Josefin Sans';
    color:pink;
    font-style:italic;
    font-weight:bold;
    text-shadow: 2px 2px 2px #000;
    
}


.hl {font-size:38px;
    font-family:'Josefin Sans';
    color:pink;
    font-style:italic;
    font-weight:bold;
    position: relative; left:10%;
    text-shadow: 2px 2px 2px #000;
    margin-top: -20px;
}

.hlbox {  display:block;
width:50%;
text-align:center;
margin-left:auto;margin-right:auto;
color:#fff;
background-color:#933262;
font-size:18px;
font-family:'Josefin Sans';
font-style:italic;
text-shadow:1px 1px 1px #000;
font-weight:bold;
padding:10px;
max-width:400px;min-width:170px;
border-radius:3px;
box-shadow:3px 3px 15px #333;

}

.crbox {
word-spacing:3px;
position:fixed; 
bottom:1%;
right:1%;
color:#fff;
font-family:'Open Sans',arial;
text-shadow:2px 2px 1px #000;
font-size:9px;
background:#666;
padding: 2px 10px; 
border-radius:3px;

}


.fade {
   color:#6ff;
   opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
   }

.fade:hover {
      -webkit-stroke-width: 5.3px;
      -webkit-stroke-color: #FFFFFF;
      -webkit-fill-color: #FFFFFF;
      text-shadow: 2px 2px 30px #ff0;
      text-decoration:none;
      color:#fff;
    
      }
      
      
.fader {
   opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
   }

.fader:hover {
      opacity: 0.65;
      }      
      
html { 
  background: linear-gradient( rgba(0,0,0,0.6), rgba(0, 0, 0, 0.6) ), url(../images/bg-1a.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
   
 
}      

.line {border-bottom:1px solid #888;
  width:60%;
  display:block;
  margin-left:auto;margin-right:auto;
  padding:15px 0;

}  



   
/* BOOK AND DROPDOWN STYLING */


.book { width:125px;
        height:188px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        line-height: 20px;

}

.booktitle {font-weight:bold;
            border-bottom:1px solid #000;
            text-align:center;
}




.dropdown {
  position: relative;
  display: inline-block; 
  padding: 20px;
 
}

.dropdown-content {
  display: none;
  position: absolute;
  

  background-color: #F8CAF6;
  width: 200px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.8);
  z-index: 1;


  font-size: 10px; font-weight:bold;
  font-family: 'Open Sans';
  padding: 10px;
  border-radius: 3px;
  line-height:1.4;
  text-align: justify; 
 
   
  
}

.dropdown:hover .dropdown-content {
  display: block;
  top: 50px;
  left: 0px;
  
}

a:link {color:#00f; text-decoration: none;}

a:hover {text-decoration: underline;}

.linkshadow {text-shadow: 1px 1px 0px #ccc; font-size: 12px;}