* {
  box-sizing: border-box;
}

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


/* Home Page */

.MasterFrame
{
   background-color: white;
   width: 1200px;
   margin: 0 auto;
}

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

/* Hamburger Menu Styling */

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


/* DROP DOWN MENU*/

/* Style The Dropdown Button */
.dropbtn {
  background-color: white;
  color: black;
  padding: 1%;
  font-size: 3vw;
  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;
}

/************************************************************/
/* Rest of the Header                                       */
/************************************************************/

H1.NewLogo
{
   font-size: 250%;
   color: black;
   padding:1%; 
   flex: 60%;
   background-color: white;

   display: flex;
   justify-content:left;
   align-items: center;
}
a{
   text-decoration:none;
}
/* Subscribe Button */
A.Sub
{
  font-size: 150%;
  color: blue;
  background:yellow;
  text-decoration:none;
  padding:3px;
  border: 1px solid;
  border-radius: 12px;
  display: flex;
  justify-content:right;
  align-items: center;
}

A.Centered
{
   align-items:center;
}



HR.Divider{
   margin: 0 auto;
  
}


/************************************************************/
/* Body Announcement                                     */
/************************************************************/


/*** Content Containers    ***/
/*** Page divided into columns ***/


/* Column container */
.ColumnBox {  
 
  width: 100%;
  margin: 0 auto;  
  display: flex;
  flex-direction:row;

}

/* Create two unequal columns (40/60) that sit next to each other */
/* Sidebar/left column */
.SideBar {
  flex: 40%;
   flex-direction: column;
 
  background-color: #fafafa;
  padding: 1%;
}

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

/* Create columns that uses 50% of available space */
/* Sidebar/left column */
.HalfBar {
   
   flex: 48%;
   flex-direction: column;
   padding: 1%;
   justify-content: center;
 
}

/**** Content Container -- pages divided into rows **/



/* Horizontal Row Container */
.Row {  
  width:98%;
  margin: 0 auto;  

}

/* Column container */
.TiledMenuBox {  
  padding-top:1vw;
  width: 100%;
  margin: 0 auto;  
  display: flex;
  justify-content: space-evenly;
  flex-direction:row;
  flex-wrap: wrap;
}

.ColButtonTile
{
  width:350px;
  background-color: white;
  margin: 0 auto;
  padding-bottom:1vw;
}

IMG.SVGButton
{
   width:350px;
}


H1.TitleCentered
{
   font-size: 200%;
   color: black;
   text-align:center;
}


H2.SubTitleCentered
{
   font-size: 150%;
   color: black;
   text-align:center;
}
H2.SubTitleLeft
{
   font-size: 150%;
   color: black;
   text-align:leftr;
}

h3.SubTitleCentered
{
   font-size: 100%;
   color: black;
   text-align:center;
}

h3.SubTitleLeft
{
   font-size: 100%;
   color: black;
   text-align:left;
}

H3.ItemSub
{
   font-size:150%;
   text-decoration:none;
   color: black;
}

ul.MainPage
{  
   font-size: 120%;
   text-align:left;
   list-style-type: square;
}

p.PhotoCaption{
   font-size: 120%;
   text-align: center;
}
p.Def{
   font-size: 150%;
}
p.Cent{
   font-size: 150%;
   text-align: center;
}

/************************************************************/
/* Menu Tiles                                               */
/************************************************************/

.FlexPane{
  width:100%;
  margin: 0 auto;
  display: flex;
  flex-direction:row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: top;
  background-color:#fafafa;
  margin-top:1%;
}

.TileItem
{
  width: 350px;

  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;
}

.BalTileItem
{
  width: 350px;
  margin: 0 auto;
  background-color: white;
  padding: 1%;
  border: 1px solid;
  display: flex;
  justify-content: center;
  margin-bottom: 2vw;
}

.ButtonTile
{
  display: flex;
  width: 350px;
  justify-content: center;
  background-color: white;
  margin: 0 auto;
  margin-bottom: 1vw;
}

.StoryButtonTile
{
  background-color: white;
  margin-bottom: 1vw;

}

IMG.StoryButton
{
   width:250px;

}

.CaptionTile
{
  width: 350px;

  background-color: white;
  padding: 1%;
  margin: 0 auto;
  border: 1px solid;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.PromoBox{
  background-color: #FFFDD0;
  border: 1px solid;
  padding:2px;
  border-radius: 12px;
}

img.seller-pane{
   width: 100%;
   height: 100%;
}

img.BookImg
{
   width: 75%;
   display:flex;
   justify-content: center;
}

/************************************************************/
/* Footer                                              */
/************************************************************/


.CopyRow {
  width:66%;
  margin: 0 auto;
  background-color: white;
  justify-content: center;
  align-items: center;
}

P.MainCopyRight
{
   margin-top: 2vw;
   margin-left: 2vw;
   margin-right: 2vw;
   margin-bottom: 2vw;
   padding-bottom: 2vw;
   font-size:100%;
   text-decoration:none;
   color: black;
   text-align:center;
}





/************** CSS CODE FOR buttons on About page  ***********/

.SubscribeAbout
{
  text-align:center;
}

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

H2.ItemHead
{
   font-size:150%;
   text-decoration:none;
   color: #8b0000;
}

UL.Lecture
{
   font-size:150%;
}
LI.Lecture
{
   padding-top: 1%;
}


/************ MEDIA PAGE ******************/

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;
}

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;

}

span.Category
{
   color: #8b0000;
}


/******************* ARTICLE AND BLOG CSS  *********************/


.BlogPhoto
{
  width: 75%;

  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;
}

.BlogPhoto
{
  width: 75%;

  background-color: white;
  padding: 1%;
  margin-right:.5%;
  margin-left:.5%;
  margin-top: .5%;
  margin-bottom:.5%;
  border: 1px solid;
  display: flex;
  flex-direction: column;
  justify-content: center;
}





/******* 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) {

.MasterFrame
{
   background-color: white;
   width: 98%;
   margin: 0 auto;
}

.Header
{
    width: 98%;
}


H1.NewLogo
{
   font-size: 150%;
   padding: 1%;
   flex: 60%;
   justify-content:center;
}

.dropbtn {
  font-size: 7vw;
}
A.Sub
{
  font-size: 100%;
}

HR.Divider{
   width: 98%;
}

.FlexPane{
  width:98%;
  
}
.CopyRow {
  width:98%;
}


.ColButtonTile
{
  width:250px;
  
  margin: 0 auto;
  padding-top:1vw;
}

IMG.SVGButton
{
   width:250px;
 

}

.CaptionTile
{
  width: 250px;

  background-color: white;
  padding: 1%;
  margin: 0 auto;
  border: 1px solid;

}


/*** Content Containers    ***/
/*** Page divided into columns ***/


/* Column container */
.ColumnBox {  
  width: 100%;
  margin: 0 auto;  
  display: flex;
  flex-direction:row;
  flex-wrap: wrap;
}

/* Create two unequal columns (40/60) that sit next to each other */
/* Sidebar/left column */
.SideBar {
  flex: 40%;
   flex-direction: column;
 
  background-color: #fafafa;
  padding: 1%;
}

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

/* Create columns that uses 50% of available space */
/* Sidebar/left column */
.HalfBar {
  flex: 50%;
   flex-direction: column;
   background-color: #fafafa;
   padding: 1%;
   justify-content: center;
}

/**** Content Container -- pages divided into rows **/


































img.BookImg
{
   width: 100%;
   display:flex;
   justify-content: center;
}
H1.TitleCentered
{
   font-size: 150%;
   color: black;
   text-align:center;
}


H2.SubTitleCentered
{
   font-size: 125%;
   color: black;
   text-align:center;
}
H2.SubTitleLeft
{
   font-size: 125%;
   color: black;
   text-align:leftr;
}

h3.SubTitleCentered
{
   font-size: 100%;
   color: black;
   text-align:center;
}

h3.SubTitleLeft
{
   font-size: 100%;
   color: black;
   text-align:left;
}

p.Def{
   font-size: 125%;
}

H2.ItemHead
{
   font-size:120%;
   text-align:center;
}

H3.ItemSub
{
   font-size:120%;
   text-align:center;
}
A.SubAbout
{
  font-size: 120%;
  
}
}
}