/* ****************************************************************************** MAIN SCREEN SETTINGS ******************************************************************* */


body {
  background-image: url("/Pictures/SitePictures/SeamlessWallpaper/full-bloom.png");
  background-repeat: repeat;
  font-size:10px;
}

.flex-container {
width: 100%;   /* width across screen of all columns */
display: -webkit-flex; /* Safari */     
display: flex; /* Standard syntax */
margin-left:auto;
margin-right:auto;
flex-wrap:wrap;
}

.flexmenu {
  width:100%;
  clear:both;
  overflow:hidden;
}
            
.columnone {
width:18%;
background-color:transparent;
margin:0 5px 0px 5px;
}

.columntwo {
width:59%;
background-color:transparent;
margin:0 5px 0px 5px;
padding:0 15px 0 15px;
}

.columnthree {
width:18%;
background-color:transparent;
margin:0 20px 0px 5px;
} 


/* ************************************************************************************** FONTS *********************************************************************************** */
 
 @font-face {
        font-family: dickensheading;
        src: url(/Fonts/dickensheading.ttf);
               }
       
       
  @font-face {
        font-family: dickenstext;
        src: url(/Fonts/dickens.ttf);
               }
       
  p {  font-family: "Times New Roman", Times, serif;
     }
     
 /* *********************************************************************************** HEAD OF PAGE ********************************************************************************* */    

.icon {
  width:100px;
  text-align:left;
  display:inline-block;
  vertical-align: bottom;
}

.title {
  font-family: eliotheading;
         text-align:left;
         width:80%;
         font-size:10em;
         padding: 10px 0 10px 15px;
         color:black;
         z-index:100;
         display:inline-block;
         margin-top:-20px;
}


.heading {
         font-family: PrestigeScript, "Times New Roman", Times, serif;
         text-align:left;
         width:80%;
         font-size:8em;
         padding: 10px 0 10px 15px;
         color:#a80703;
         margin-left:300px;
        margin-top:-65px;
         display:inline-block;
       }



/* ******************************************************************************* LEFT PAGE - PUBLICATION DETAILS *********************************************************************** */

.coverimage {
  width:97.5%;
  display:block;
  margin-left:auto;
  margin-right:auto;
  margin-top:10px;
  margin-bottom:1em;
  border: 1px solid #fff;
  box-shadow: 0 0 0 1px #bbb;
 }

 h4 {
  color:#a80703;
  text-align:center;
  background-color:black;
  width:100%;
  padding:10px 8px 7px 9px;
  margin-left:-8px;
  font-family:arial;
  font-size:1.6em;
}      
 
  .pubdetails {
  width:93%; 
  background: rgba(236, 232,195, 0.4);
 /* border: 3px solid #cf0c08;*/
   box-shadow: 0 0 0 1px #bbb;
  padding:10px;
  margin-top:10px;
 /* border-top:3px solid black;*/
  padding:8px;
  text-align:left;
 }
 
 .pubdetails p {
  font-size:1.6em; 
 }
 
 .pubdetailscontent p span {
   font-weight:bold;
 }
 
 .pubdetailslist li {
  font-size:1.6em; 
 }
 
 .pubdetailscontent {
  /* margin-top:-30px;*/
   font-size:1em 
 }
 
 
  .pubdetailslist {
    margin-top:-15px;

  }
 
 .summary {
   width:90%; 
  background: rgba(236, 232,195, 0.4);
  border: 3px solid #cf0c08;
  padding:8px;
  margin-top:3px;
  text-align:left;
 }
 
 .rating {
  width:60%;
  display:block;
  margin-left:auto;
  margin-right:auto;
 }


/* ****************************************************************************** MIDDLE OF PAGE - REVIEW ******************************************************************************** */

 
    /* **** HIDDEN ELEMENTS *** */
    
  .titlepanel {
   border: 1px solid #fff;
  box-shadow: 0 0 0 1px #bbb;
  padding:10px;
  background: rgba(236, 232,195, 0.7);
  margin-top:10px;
  margin-bottom:10px;
  overflow:hidden;
  display:none;
  }
  
  .screennote {
   color:brown;
   text-align:left;
   font-size:2em;
  }
  
  .screennote span {
   font-weight:bold; 
  }
  
  .coverhid {
   width:20%;
   margin:10px;
   float:left;
  }
  
  .ratinghid {
  width:10%;
  
 }
 
 .titlepanel p {
  font-size:1.6em; 
 }
 
 .titlepanel p span {
   font-weight:bold;
 }
 
    
    /* **** VIEWABLE ELEMENTS **** */
 
 
  .review {
  border: 1px solid #fff;
  box-shadow: 0 0 0 1px #bbb;
  padding:10px;
  background: rgba(236, 232,195, 0.4);
  margin-top:10px;
  margin-bottom:20px;
  }
  
 h2 {
  font-size:2.2em;
  margin:0 0 -5px 15px;
  font-family: eliotheading;
  color:#a80703;
}
  
  .review p {
   font-size:2em; 
  }
  
  p .dropcap {
  color: #a80703;
  float: left;
  font-family: Georgia;
  font-size: 75px;
  line-height: 60px;
  padding-top: 3px;
  padding-right: 8px;
  padding-left: 3px;
}

blockquote p {
 font-size:1.7em;
 font-style:italic;
 font-family: Times;
 text-align:left;
 text-indent:30px;
 margin-bottom:0.6em;
}

.blockquotecaption {
 margin-top:10px; 
 font-weight:bold;
 font-size:1.6em;
 margin-left:25px;
}

 .majorQuote {

 font-family: 'Arial', sans-serif;
  width:80%;
  margin:0 auto;
  padding-left:10px;
  text-align:left;
  font-size:2.5em;
  font-weight:bold;
  color:black;
  border-left: thick solid darkred;
  border-left-width:1.3em;
 
}

.majorQuoteAttribution {
   width:80%;
  text-align:right;
  font-weight:bold;
  font-size:0.7em;
  margin-top:1em;
}

.video {
  text-align:center;
  overflow:hidden;
  margin-top:30px;
}






/* ********************************************************************************* RIGHT COLUMN ***************************************************************************************** */

.CharlesDickens {
   width: 98%;
   margin-left:auto;
   margin-right:auto;
   text-align:center;
   margin-top:-200px;
    }
     
  .dickensimage {
      z-index:100;
      width:100%;
      margin-top:100px;
 }
 
 .dickens {
    width: 98%;
   margin-left:auto;
   margin-right:auto;
   text-align:center;
 }
 
 
 
 h5 {
 color:#a80703;
            text-align:center;
            font-size:2.3em;
            font-family:arial;

}

  .caption1 {
     text-align:center;
   font-family: Arial;
   font-size:1.6em;
   font-style:italic;
   margin-bottom:30px;
   margin-top:20px;
   font-weight:bold;
  }
 
 .caption {
   text-align:center;
   font-family: Arial;
   font-size:1.6em;
   font-style:italic;
   margin-bottom:30px;
   margin-top:20px;
 }
 
 .caption p {
   text-align:center;
   font-family: Arial;
   font-size:1.6em;
   font-style:italic;
   margin-bottom:30px;
   margin-top:20px;
 }
 
  .dickensillustration {
      z-index:100;
      width:96%;
      border: 1px solid #fff;
      box-shadow: 0 0 0 1px #bbb;
      display:block;
      margin-left:auto;
      margin-right:auto;
 }
 
 
 
 
 /* ********************************************************************************** DIALOG BOXES **************************************************************************************** */
  
   /* DIALOGUE BOXES */
        
 .link, #opener, #opener500, #opener300, #opener2, #opener3, #opener4, #opener5, #opener6, #opener7, #opener8, #opener9, #opener10, #opener11, #opener12, #opener13, #opener14, #opener15, #opener16, #opener17, #opener18, #opener19, #opener20, #opener21, #opener22 {
    color:purple;
    border-bottom: 1px dotted purple;
    text-decoration: none;
  }
  
  .link:hover, #opener:hover, #opener500:hover, #opener300:hover, #opener2:hover, #opener3:hover, #opener4:hover, #opener5:hover, #opener6:hover, #opener7:hover, #opener8:hover, #opener9:hover, #opener10:hover, #opener11:hover, #opener12:hover, #opener13:hover, #opener14:hover, #opener15:hover, #opener16:hover, #opener17:hover, #opener18:hover, #opener19:hover, #opener20:hover, #opener21:hover, #opener22:hover {
   cursor:pointer;
   opacity:0.7;
   color:red;
    text-decoration-color: red;
    transition:2s;
    cursor:pointer;
    border-bottom: 1px dotted red;
  }
  
  .dialoguebox {
 
 }

 
 .dialoguebox p {
  font-size:1.8em;
  color:black;
 }
 
 .myTitleClass .ui-dialog-titlebar {   
    background-image: linear-gradient(to right, #a80703 , #c46361);
    font-size:1.8em;
    color:white;
    border:none;
    }
    
    
  .imglink {
  border:none;
  background-color: rgba(207,12,8,0.1);
  padding:2px;
  font-size:1em;
  font-family: "Times New Roman", Times, serif;
  text-decoration:none;
 }
 
 .imglink:hover {
  cursor: pointer;
  background-color: rgba(207,12,8,0.3);
  transition:0.75s;
  text-decoration:none;
 }  
  
  
  
  .link {
  border:none;
  background-color: rgba(207,12,8,0.1);
  padding:2px;
  font-size:1em;
  font-family: "Times New Roman", Times, serif;
 }
 
 .link:hover {
  cursor: pointer;
  background-color: rgba(207,12,8,0.3);
  transition:0.75s;
 } 
 
 .modal-img {
  width:50%;
  display:block;
  margin-left:auto;
  margin-right:auto;
 }
 

  



/* ***************************************************************************** DICKENS BOOK COLLECTION AT BOTTOM OF THE PAGE *********************************************************** */

.dickensbooks {
  display:block;
  width:98%;
  margin-left:auto;
  margin-right:auto;
}

.coverswrapper1 {
 width:100%;
 overflow:hidden;
 clear:both;
 display:inline-block;
 text-align:center;
}

.coverswrapper2 {
 width:100%;
 overflow:hidden;
 clear:both;
 margin-bottom:30px;
 display:inline-block;
 text-align:center;
}


.dickenscovers {
 width:9.5%;
 margin:0 0.5% 20px 0.5%;

}

.dickensunread {
  width:9.5%;
 margin:0 0.5% 20px 0.5%;
  -webkit-filter: grayscale(1);
            filter: grayscale(1);
            opacity:0.5;
}



.currentcover {
  border:3px solid #cf0c08;
  width:9.5%;
 margin:0 0.5% 20px 0.5%;

}





/* ********************************************************************************* FOOTER ************************************************************************************************** */


.comment {
  /* color:#a80703;*/
   padding:0 10%;
   background: rgba(255, 255,255, 0.4);
  /* border: 1px solid #fff;*/
  /* box-shadow: 0 0 0 1px #bbb;*/
   width:60%;
   display:block;
   margin-left:auto;
   margin-right:auto;
   font-size:1.5em;
  }
  
  
  /* .comment {              */                     /* THIS LEFT HERE TO TEST WHEN THERE IS TIME 
   color:#a80703;
   padding:0 10%;
   background: rgba(255, 255,255, 0.4);
   border: 1px solid #fff;
   box-shadow: 0 0 0 1px #bbb;
   width:50%;
   display:block;
   margin-left:auto;
   margin-right:auto;
  }  */

.footer {
	float:left;
	width:100%;
	clear:both;
	text-align:center;
}

h6 {
 font-size:12px; 
}

/* *************************************************************************** RESPONSIVE SCREEN LAYOUTS ***************************************************************************************** */

 
 
 
        /* **** 1536PX **** */

 @media (max-width: 1536px) {
   
      html {
    width:100%; 
   }
   
   body {
    width:100%; 
   }
   

.columnone {
width:14%;
background-color:transparent;
margin:0 5px 0px 5px;
}

.columntwo {
width:57%;
background-color:transparent;
margin:0 5px 0px 5px;
padding:0 15px 0 15px;
}

.columnthree {
width:22%;
background-color:transparent;
margin:0 20px 0px 5px;
} 

.coverimage {
  width:99%;
}


.dickens {
 width:90%; 
}

.pubdetails p {
  font-size:1.3em; 
 }
 
 .pubdetailslist li {
  font-size:1.3em; 
 }
 
 .pubdetailscontent {
 /*  margin-top:-30px;*/
   font-size:1em;
   margin-bottom:10px;
 }
 
 
  .pubdetailslist {
    margin-top:-15px;

  }


}

@media (max-width: 1366px) {
  
     html {
    width:100%; 
   }
   
   body {
    width:100%; 
   }
   
   
   .columnone {
           width:13% !important;
            margin:0 5px 0px 5px;
            background-color:transparent
        }
        
         .columntwo {
           width:59.5% !important;
            margin:0 5px 0px 5px;
            padding:0 15px 0 15px;
            background-repeat: repeat;
         
        }
        
        .columnthree {
          width:21% !important;
            margin:17px 20px 0px 5px;
            background-color:transparent;
        
        } 
}


@media (max-width: 1170px) {
   
   html {
    width:100%; 
   }
   
   body {
    width:100%; 
   }
   

   
   .columnone {
           display:none;

        }
        
         .columntwo {
           width:70% !important;
            margin:0 5px 0px 5px;
            padding:0 15px 0 15px;
            background-repeat: repeat;
         
        }
        
        .columnthree {
          width:20% !important;
            margin:17px 20px 0px 5px;
            background-color:transparent;
        
        } 
        
        .title {
 /* font-family: eliotheading;
         text-align:left;*/
         width:85%;
         font-size:7em;
       /*  padding: 10px 0 10px 15px;
         color:black;*/
         z-index:100;
        /* display:inline-block;
         margin-top:-100px;*/
         }


.heading {
      /*   font-family: PrestigeScript, "Times New Roman", Times, serif;
         text-align:left;*/
         width:80%;
         font-size:5em;
       /*  padding: 10px 0 10px 15px;
         color:#a80703;*/
         margin-left:200px;
        margin-top:-50px;
      /*  display:inline-block; */

       }
       
       .icon {
  width:8%;
   /* display:inline-block;*/
    margin-top:40px
   /*  vertical-align: bottom;*/
}
        
        .titlepanel {
        display:block;
}

      .screennote {
       display:none; 
      }
      
      .comments {
       width:80%; 
      }
        
}


@media (max-width: 900px) {
    .dickensimage {
    visibility:hidden; 
   }
  
}




 

  /* **** PHONE SETTINGS **** */
        

@media only screen and (min-width: 360px) and (max-width: 768px) {
  

.columnone {
 display:none !important; 
}

.columntwo {
 width:100% !important; 
}

.columnthree {
 width:100% !important; 
}


.icon {
  width:10%;
   /* display:inline-block;
    margin:20px 0;
     vertical-align: bottom;*/
}

.title {
 /* font-family: eliotheading;
         text-align:left;*/
         width:85%;
         font-size:4em;
       /*  padding: 10px 0 10px 15px;
         color:black;*/
         z-index:100;
        /* display:inline-block;
         margin-top:-100px;*/
         }


.heading {
      /*   font-family: PrestigeScript, "Times New Roman", Times, serif;
         text-align:left;*/
         width:80%;
         font-size:3em;
       /*  padding: 10px 0 10px 15px;
         color:#a80703;*/
         margin-left:50px;
        margin-top:-50px;
      /*  display:inline-block; */

       }

.titlepanel {
 display:block;
}

   .screennote {
       display:block; 
      }

.titlepanelinfo {
 overflow:hidden; 
}

.majorQuote {
  margin:0 auto;
  padding-left:10px;
  text-align:left;
  font-size:2em;
  font-weight:400;
  color:black;
  border-left: thick solid darkred;
  border-left-width:1.3em;
 
}

.majorQuoteAttribution {
   width:80%;
  text-align:right;
  font-weight:bold;
  font-size:0.7em;
  margin-top:1em;
}

.CharlesDickens {
 display:none; 
}

.dickensbooks {
 display:none; 
}

.comment {
 width:70%;
 display:block;
 margin-left:auto;
 margin-right:auto;
}

  /* DIALOGUE BOXES */
        
 .link, #opener, #opener500, #opener300, #opener2, #opener3, #opener4, #opener5, #opener6, #opener7, #opener8, #opener9, #opener10, #opener11, #opener12, #opener13, #opener14, #opener15, #opener16, #opener17, #opener18, #opener19, #opener20, #opener21, #opener22 {
    color:black;
    border-bottom: none;
    text-decoration: none;
  }
  
  .link:hover, #opener:hover, #opener500:hover, #opener300:hover, #opener2:hover, #opener3:hover, #opener4:hover, #opener5:hover, #opener6:hover, #opener7:hover, #opener8:hover, #opener9:hover, #opener10:hover, #opener11:hover, #opener12:hover, #opener13:hover, #opener14:hover, #opener15:hover, #opener16:hover, #opener17:hover, #opener18:hover, #opener19:hover, #opener20:hover, #opener21:hover, #opener22:hover {
   cursor:default;
   opacity:1;
   color:black;
    text-decoration-color: black;
    transition:0;
    cursor:none;
    border-bottom: none;
  }
  
 
    
  .imglink {
  border:none;
  background-color: transparent;
  padding:0;
  font-size:1em;
  font-family: "Times New Roman", Times, serif;
  text-decoration:none;
 }
 
 .imglink:hover {
  cursor: default;
  background-color: transparent;
  transition:0;
  text-decoration:none;
 }  
  
  
  
  .link {
  border:none;
  background-color: transparent;
  padding:0;
  font-size:1em;
  font-family: "Times New Roman", Times, serif;
 }
 
 .link:hover {
  cursor: default;
  background-color: transparent;
  transition:0;
 }
 
 .ratinghid {
  height:15px;
  width:auto;
 }


}