* {
  box-sizing: border-box;
}

/* Style the body */
body {
  font-family: Raleway, Arial;
  margin: 0;
}


.Header
{
    position: sticky;
    top: 0px;
    width: 100%;
    background: white;
    display: flex;
    justify-content:left;
    align-items: center;
}

.hamburger
{
  flex: 5%;
  background-color: white;
  padding: 1%;
  display: flex;
  justify-content:right;
   align-items: center;
}

.Logo
{
  flex: 60%;
  background-color: white;
  padding: 1%;
  display: flex;
  justify-content:left;
  align-items: center;
}

.Subscribe
{
  flex: 35%;
  background-color: white;
  padding: 1%;
  display: flex;
  justify-content:right;
   align-items: center;
}

.PromoDeal
{
  flex: 35%;
  background-color: white;
  padding: 1%;
  display: flex;
  justify-content:center;
   align-items: center;
}





.SubscribeAbout
{
 
 
  text-align:center;
}

.PromoBox
{
   width:80%;
   align-items:center;
   margin:auto;
   background-color:#F0F8FF;
   padding:2%;
   font-size: 150%;
}


H1.NewLogo
{
   font-size: 250%;
   color: black;
   padding:3px; 
}

H1.Title
{
   font-size: 200%;
   color: black;
}
 
H2.SubTitle
{
   font-size:150%;
   text-decoration:none;
   color: black;
}
H2.ItemHead
{
   font-size:150%;
   text-decoration:none;
   color: #8b0000;
}

H2.BookItemHead
{
   font-size:150%;
   text-decoration:none;
   color: black;
   text-align:center;
}

H2.SubHead
{
   font-size: 175%;
   color: #8b0000;
}
H3.BlogSubHead
{
   font-size:100%;
   color:black
}
P.ItemHead
{
   font-size:100%;
   text-decoration:none;
   color: black;
}


P.AboutText
{
   font-size:150%;
}
P.SourceText
{
   font-size:150%;
   text-align:right:
}
UL.Lecture
{
   font-size:150%;
}
LI.Lecture
{
   padding-top: 1%;
}
span.Category
{
   
   color: #8b0000;
}

.MediaRow
{
  width:100%;
}

P.MediaEvent
{
   font-size: 125%;
   color: black;

}
span.MediaTitle
{
   
   color: black;
   font-style:italic;
}
span.MediaType
{
   
   color: blue;
}
span.MediaAddr
{
   color:black;
}
span.MediaDate
{
   
   color: black;
   font-weight: bold;
}



H3.ItemSub
{
   font-size:150%;
   text-decoration:none;
   color: black;
}
A.Item
{
   text-decoration:none;
}
A.Sub
{
  font-size: 150%;
  color: blue;
  text-decoration: none;
  background:yellow;
  padding:3px;
  border: 1px solid;
  border-radius: 12px;
}

A.SubAbout
{
  font-size: 150%;
  color: blue;
  text-decoration: none;
  background-color:yellow;
  padding:3px;
  border: 1px solid;
  border-radius: 12px;
  text-align:center;
}

A.MediaDetail
{
  font-size: 100%;
  color: blue;
  text-decoration: none;
  background-color:aqua;
  padding:3px;
 
  line-height:200%;
  border: 1px solid;
  border-radius: 12px;

}

A.MediaConsume
{
  font-size: 100%;
  
  background-color: lime;
  text-decoration: none;
  line-height:200%;
  padding:3px;
  border: 1px solid;
  border-radius: 12px;

}


P.CenterSlide
{
   text-align:center;
}
A.ReadOnline
{
  font-size: 150%;
  color: blue;
  text-decoration: none;
  background:yellow;
  padding:3px;
  border: 1px solid;
  border-radius: 12px;
}
H5.Logo
{
   font-size: 125%;
   color: white;
}
 img.Entry
 {
    width:75%;
 }
A.Hamburger
{
  color: black;
 font-size: 175%;
  text-decoration: none;
  text-align: center;

}

/* Column container */
.row {  
  display: flex;
  flex-wrap: wrap;
}

.NewRow {  
  display: flex;
  flex-direction:row;
  align-items: top;
  
}

.PictLeft {
  flex:40%;
  background-color: #fafafa;
  padding: 1px;
}

P.CaptionText{
text-align:center;
font-size: 100%;
}
  

.TextRight
 {
  flex:60%;
  background-color: #fafafa;
  padding: 1%;
}

IMG.FBox
{
   width: 100%;
}


.MediaRow
{
  width:100%;
}

.rowentry {  
  display: flex;
  flex-wrap: wrap;
    border: 1px solid;
    margin-bottom:1%;
}
.rowx {  
  display: flex;
  flex-wrap: wrap;
  justify-content:center;
}
.entryrow{
   display:flex;
   flex-direction:column;
}
.BlogTitles
{
   display: flex;
   align-content: left;
}
.TextBoxLeft
{
   display: flex;
   align-content: left;
   flex-direction: column;
}
p.BlogText
{
   font-size:150%;
}
p.BlogDesc
  {
    font-size:120%;
  }
.BlogTextLeft
{
   display: flex;
   align-content: left;
   flex-direction: column;
   font-size:150%;
}
.triptych {  
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: top;
  background-color:#fafafa;
  margin-top:1%;
}

.bookseller{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: top;
  background-color:#fafafa;
  margin-top:1%;
}
.seller {
  width: 22%;
  background-color: white;
  padding: 2%;
  margin-right:.5%;
  margin-left:.5%;
  margin-top: .5%;
  margin-bottom:.5%;
  border: 1px solid;
  display: flex;
  justify-content: center;
  
}
img.seller-pane{
   width: 100%;
   height: 100%;
}


.diptych {  
  display: flex;
  justify-content:center;
  flex-wrap: wrap;
  background-color:#fafafa;
  padding-top:2%;
}
/* Create two unequal columns (40/60) that sit next to each other */
/* Sidebar/left column */
.side {
  flex: 40%;
   flex-direction: column;
 
  background-color: #fafafa;
  padding: 1%;
}

/* Main column */
.main {
  flex: 60%;
  background-color: #fafafa;
  padding: 1%;
}

/* Create three columns (40/60) that sit next to each other */
/* Sidebar/left column */
.tri {
  width: 31%;
  background-color: white;
  padding: 1%;
  margin-right:.5%;
  margin-left:.5%;
  margin-top: .5%;
  margin-bottom:.5%;
  border: 1px solid;
  display: flex;
  justify-content: center;
  
}


.LeftFullRow {
  flex: 100%;
  background-color: white;
  display: flex;
  justify-content: left;
  align-items: left;
}

.LeftJustRow {

  background-color: white;

  justify-content: left;
  align-items: left;
}
.CenteredFullRow {
  flex: 100%;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}
.CenterButton {
  padding-top:1%;
  padding-bottom:1%;
  flex: 100%;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}
.CenterSwirl {
  padding-top:1%;
  padding-bottom:1%;
  flex: 100%;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Main column */


.BookImg
{
  
   display:flex;
   justify-content: center;

}
IMG.Cons
{
   width:250px;

}

/* Legacy Tags Rewritten With Flexbox */

.ColBox {  
  display: flex;
  flex-wrap: wrap;
}
.Col-25 {
  flex: 20%;
  background-color: white;
  padding: 2%;
  margin-right:1px;
  margin-left:1px;
  border: 1px solid;
  display: flex;
  justify-content: center;
  
}




/* DROP DOWN MENU*/

/* Style The Dropdown Button */
.dropbtn {
  background-color: white;
  color: black;
  padding: 1%;
  font-size: 300%;
  border: none;
  cursor: pointer;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  right:0;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}



/* Footer */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
}
.PageFrame
{
   width:66%;
   margin-right:auto;
   margin-left:auto;
}
hr.Short
{
   width:50%;
  margin-top:1%;
}

/* Responsive layout - when the screen is less than 1200px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 1200px) {
  .row 
  {   
    flex-direction: column;
  }
  .triptych 
  {  
     flex-direction:column;
     justify-content: center;
     align-items: center;
  }
  .navbar{
    flex-direction: row;
    flex-wrap: wrap;
  }
 .tri {
  width: 100%;
  background-color: white;
  padding: 2%;
  margin-right:1px;
  margin-left:1px;
  border: 1px solid;
  display: flex;
  justify-content: center;
  
}
  
  
 .hamburger
 {
   flex: 5%;
   background-color: white;
   padding: 1%;
   display: flex;
   justify-content:left;
   align-items: left;
 }

.Logo
{
  flex: 65%;
  background-color: white;
  padding: 1%;
  display: flex;
  justify-content:left;
  align-items: center;
}

.Subscribe
{
  flex: 30%;
  background-color: white;
  padding: 1%;
  display: flex;
  justify-content:right;
   align-items: center;
}
  
.SubscribeAbout
{
  text-align: center;
}

  .PromoDeal
{
  flex: 30%;
  background-color: white;
  padding: 1%;
  display: flex;
  justify-content:center;
   align-items: center;
}
  
  
  
  
  .PageFrame
  {
     width:96%;
     margin-right:auto;
     margin-left:auto;
  }
  H1.Logo
  {
   font-size:125%;
   color: white;
   padding:0px;
  }
  H1.Title
  {
   font-size: 125%;
   color: black;
  }
  H1.BlogTitle
  {
   text-align:left;
   font-size: 1250%;
   color: black;
  }
  H2.SubTitle
  {
   font-size: 100%;
   color: black;
  }
  H2.SubHead
  {
   font-size: 100%;
   color: #8b0000;
  }
  
  H2.ItemHead
{
   font-size:100%;
   text-decoration:none;
   color: #8b0000;
 }
  H2.BookItemHead
{
   font-size:100%;
   text-decoration:none;
   color: black;
   text-align:center;
  }
  H3.ItemSub
  {
   font-size:100%;
   text-decoration:none;
   color: black;
  }
  H5.Logo
  {
    font-size: 100%;
    color: white;
  }
  p.BlogDesc
  {
    font-size:150%;
  }
  p.BlogText
{
   font-size:150%;
}

P.AboutText
{
   font-size:100%;
}

UL.Lecture
{
   font-size:100%;
}
LI.Lecture
{
   padding-top: 5%;
}


  /* Style The Dropdown Button */
.dropbtn {
  background-color: white;
  color: black;
  padding: 1%;
  font-size: 125%;
  border: none;
  cursor: pointer;
}
  
 img.Entry
 {
    width:100%;
 }
 IMG.Cons
{
   width:100%;

}

.PromoBox
{
   width:80%;
   align-items:center;
   margin:auto;
   background-color:#F0F8FF;
   padding:2%;
   font-size: 100%;
}


H1.NewLogo
{
  font-size: 150%;
   color: black;
}
  
A.Sub
{
  font-size: 85%;
  color: blue;

  text-decoration: none;
  background:yellow;
  padding:3px;
  border: 1px solid;
  border-radius: 12px;
   
}
A.MediaListen
{
  font-size: 100%;
  color: blue;
  text-decoration: none;
  background-color:yellow;
  padding:3px;
  border: 1px solid;
  border-radius: 12px;
 
}
A.SubAbout
{
  font-size: 100%;
  color: blue;
  text-decoration: none;
  background-color:yellow;
  padding:3px;
  border: 1px solid;
  border-radius: 12px;
  text-align:center;
}

A.MediaDetail
{
  font-size: 100%;
  color: black;
  text-decoration: none;
  background-color:aqua;
  padding:3px;
  padding-top:3px;
  line-height: 200%;
  border: 1px solid;
  border-radius: 12px;

}

A.MediaConsume
{
  font-size: 100%;
  color:black;
  background-color: lime;
  text-decoration: none;
  line-height: 200%;
  padding:3px;
  border: 1px solid;
  border-radius: 12px;

}
  A.ReadOnline
{
  font-size: 85%;
  color: blue;
  text-decoration: none;
  background:yellow;
  padding:3px;
  margin:auto;
  border: 1px solid;
  border-radius: 12px;
}
  
  
  
.NewRow {  
  display: flex;
  flex-direction:column;
  align-items: top;
  
}

.PictLeft {
  flex:100%;
  background-color: #fafafa;
  padding: 1px;
}

P.CaptionText{
text-align:center;
font-size: 100%;
}
  

.TextRight
 {
  flex:100%;
  background-color: #fafafa;
  padding: 1%;
}
  
  
}