body {
    margin: 0;
    padding:0;
    font-family: 'Arial', sans-serif;
   /* background-image: url("/Pictures/SitePictures/BookBackground.png");
   /* background-image: linear-gradient(white, blue);
    background-attachment:inherit;
    background-repeat:no-repeat;
    background-position:center 50px;
    background-size:contain;*/
    overflow-x: hidden;
}


.title {
    float: right;
    display:inline-block;
   /* background-color: #333; */
    color:orange;
    text-align: right;
    padding: 6px 16px;
    text-decoration: none;
    font-size: 30px;
    width:47.6%;
    margin-top:-46px;
    margin-right:20px;
    z-index:1;
}


#left {
 top:300px;
 width:19%;
 margin-left:1.5%;
 float:left;
 margin-top:5px;
}


#box{
  width:100%;
}

#box img {
    max-width: 500px;
    max-height:788px;
    width: 100%;
    height: auto;
    margin:0 auto;
    margin-bottom:5px;
    margin-top:5px;

}


#centre {                /* CHANGE FROM right **/
overflow:hidden;
float:left;
width:49%;
 margin-top:5px;
margin-left:1%;
margin-right:1%;
max-height:1650px;
  overflow-y: scroll;
  margin-bottom:20px;

}

#centre p {
 font-weight:bold;
 margin-left:10px;
 font-size:20px;

}



#right { 
 width:26%;
 float:left;
margin-top:10px;
margin-right:0.5%;
background-color:#e0ffff;
border: 2px solid #b0e0e6;
/*border-radius:6px;*/
/*background-color: #FFD700;*/
/*border-color:#ffa828; */

}

#categoryList li a{
  text-decoration:none;
  color:blue;
  line-height:1.4;
}

#categoryList li a:hover {
  color:grey;
}

.button {
  position:relative;
  padding:5px;
  background-color: white;
    color: black;
    border: 2px solid #2b78c3;
 width:150px;
 height:35px;
 top:5px;
 margin-bottom:10px;
 margin-right:15px;
 margin-top:-58px;
 float:right;
  -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    border-radius:2px;
}

.button:hover {
   background-color: #2b78c3; /* Green */
    color: white;
}

#listWrapper {

 /*width:100%; */
 margin-top:15px;
 margin-left:0;
 background-color:yellow;
 margin-bottom:200px;
}


.author {
 display:inline-block; 
 color:green;
}

.tag {
 display:none;
}

h3 {
 color:#2b78c3;
 text-align:left;
 margin-left:10px;
 font-size:20px;
 margin-top:5px;
 margin-bottom:10px;
 
}

h4 {
  text-align:center;
  font-size:20px;
  margin-top:10px;
  margin-bottom:10px;
  color:#2b78c3;

}

h5 {
 float:left;
 margin-top:15px;
}

/* Search functions below */

.searchBar {
  padding-bottom:10px;

}

#tags {

 /*  position:absolute;
    top:77px;
     right:15px; */
     position:relative;
     top:5px;
     margin-left:10px;
    width:45%;
   font-size:18px;
   height:26px;

}

#titles {
 margin-top:15px; 
}

#authors {
   margin-top:15px;
}

label {
  position:relative;

}

#myUL {
    /* Remove default list styling */
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#myUL li {
 margin-left:30px;


}

#myUL li a {
 
   margin-top: -1px;
    padding: 5px;
    text-decoration: none;
    font-size: 14px; 
    color: black;
    display: inline-block;
}

#myUL li a:hover {
 background-color:lightgrey; 
}

#myUL li a.headerTitle {  /* Styles the Alphabet Letters */
  cursor:default;
 color:#2b78c3; 
 /* margin-left:-25px; */
  font-weight:bold;
  font-size:25px;
  margin-top:5px;
 
}

#myUL li a.headerTitle:hover {
  background-color:transparent;
}

#myUL li a.header:hover {
  background-color:transparent;
}

#myUL li a.headerSeries:hover {
  background-color:transparent;
}

#myUL li a.header {  /* Styles the Alphabet Letters */
  cursor:default;
 /* color:#2b78c3; */
 color:orange;
 margin-left:-25px;
  font-weight:bold;
  font-size:25px;

}

#myUL li a.headerSeries {  /* Styles the Series Titles */
  cursor:default;
  font-weight:bold;
  font-size:18px;

}

#myUL li a.headerSeries em {
color:#2b78c3;
font-style:normal;
}



/* Tooltip container */

.tooltip {
    position: static;
    display: inline;
    float:left;
   /* border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
   width:fit-content;
  width:1000px;
   overflow:visible;
}


/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    background-color: #fbf488;
    color: #000;
    margin-left:20px;
    margin-right:20px;
    text-align: left;
    padding: 5px 0;
    border-radius: 6px;
    border:1px solid brown;
    padding-right:10px;
 
    /* Position the tooltip text - see examples below! */
    position: absolute;
    margin-left:10px;
    z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
}

/* Style the arrow */
.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    top: 5%;
    right: 100%; /* To the left of the tooltip */
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent brown transparent transparent;
  
}

/* Fade In */
.tooltip .tooltiptext {
    opacity: 0;
    transition: opacity 1s;
}

.tooltip:hover .tooltiptext {
    opacity: 1;
}