html
{ height: 100%;}

*
{ margin: 0;
  padding: 0;}

body
{ font: normal .80em arial;
  background-image: url("essaybg.jpg");
  background-repeat: repeat;
  color: #FFFFF0; /*changes body color  Ivory rn*/
}

p
{ padding: 0 0 20px 0;
  line-height: 1.7em;}

i
{ color: #FFFFF0;} /* I think this one affects the links of the stuff but not sure */

a, a:hover
{ outline: none;
  text-decoration: none;
  color: #FFFFF0;}

a:hover
{ outline: none;
  text-decoration: none;
  color: #fff;}

.left
{ float: left;
  width: auto;
  margin-right: 10px;}

.right
{ float: right; 
  width: auto;
  margin-left: 10px;}

.center
{ display: block;
  text-align: center;
  margin: 20px auto;}
ul
{ margin: 2px 0 22px 17px;}

ul li
{ list-style-type: circle;
  margin: 0 0 6px 0; 
  padding: 0 0 4px 5px;}

ol
{ margin: 8px 0 22px 20px;}

ol li
{ margin: 0 0 11px 0;}

#main, #logo, #menubar, #site_content, #footer
{ margin-left: auto; 
  margin-right: auto;}

#header
{ background-image: url("bg.jpg");
  background-repeat: repeat;
  height: 520px;}

#menubar
{ width: 877px;
  height: 72px;
  padding: 0;
  background: #EBEBEA url(City Scape.gif) repeat;} 

ul#menu, ul#menu li
{ float: left;
  margin: 0; 
  padding: 0;}

ul#menu li
{ list-style: none;}

ul#menu li a
{ letter-spacing: 0.1em;
  font: normal 100%, Georgia;
  display: block; 
  float: left; 
  height: 37px;
  padding: 29px 26px 6px 26px;
  text-align: center;
  color: #FFC0CB; /*link header color*/
  text-transform: uppercase;
  text-decoration: none;
  background: transparent;} 

ul#menu li a:hover, ul#menu li.selected a, ul#menu li.selected a:hover
{ color: #FFC0CB;
  background: url(hover.png) repeat-x;}

#site_content
{ width: 837px;
  overflow: hidden;
  margin: 0 auto 0 auto;
  padding: 20px 24px 20px 37px;
  background-image: url("bg.jpg");
  background-repeat: repeat;}

.sidebar
{ float: right;
  width: 200px;
  padding: 0 15px 20px 15px;}

.sidebar ul
{ width: 200px; 
  padding: 4px 0 0 0; 
  margin: 4px 0 30px 0;}

.sidebar li
{ list-style: none; 
  padding: 0 0 7px 0; }

.sidebar li a.selected
{ color: #444;
  text-decoration: none;} 

#content
{ text-align: left;
/*background-color: #6495ED; /* Cornflower Blue */ /* This is where I put back ground thing to read better */
/*opacity: 0.7; */
  width: 555px;
  padding: 300;}

#content ul
{ margin: 2px 0 22px 0px;}

#content ul li
{ list-style-type: none;
  background: url(bullet.png) no-repeat;
  margin: 0 0 6px 0; 
  padding: 0 0 4px 25px;
  line-height: 1.5em;}

#footer
{ width: 878px;
  font: normal 100% 'lucida sans unicode', arial, sans-serif;
  height: 33px;
  padding: 24px 0 30px 0;
  text-align: center; 
  background: url(menu.png) repeat-x;
  color: #F9FAEA;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background-color: #6495ED; /* Cornflower Blue */ /* This is where I put back ground thing to read better */
  opacity: 0.7;}

#footer a
{ color: #BC8F8F;
  text-decoration: none;}

#footer a:hover
{ color: #FFF;
  text-decoration: none;}

#colours
{ height: 0px;
  text-align: right;
  padding: 66px 16px 0px 300px;}

.separator
{ width: 100%;
  height: 0;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  margin: 0 0 20px 0;}
 

.fade {
   opacity: 0.5;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
   }

   .fade:hover {
      opacity: 1;
      }
      
      .dropbtn {
  background-color: #515166;
  color: #CCC;
  padding: 16px;
  font-size: 16px;
  border: none;
}

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

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #515151;
  min-width: 249px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #515166;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #515166;}

.button {
  background-color: #BC8F8F; /* Green */
  border: none;
  color: #BC8F8F;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  cursor: pointer;
}

.button1 {
  background-color: #515151; 
  color: #BC8F8F; 
  border: 2px solid #515151;
}

.button1:hover {
  background-color: #FAA856;
  color: #fff;
}
#player-controls
{
    width: 190px;
    height: 100%;
    overflow: hidden;
}

.control
{
    width: 33.333%;
    float: left;
    padding: 12px 0;
}

.xbutton
{
    width: 5px;
    height: 5px;
    padding: 15px;
    background-color: #565659;
    border-radius: 6px;
    cursor: pointer;
}

.xbutton i
{
    display: block;
    color: #FAA856;
    font-size: 26px;
    text-align: center;
    line-height: 1;
}

.xbutton, .button i
{
    transition: 0.2s ease all;
}

blockquote{
  display:block;
  background: url(menu.png) repeat-x;
  padding: 15px 20px 15px 45px;
  margin: 0 0 20px;
  position: relative;
  
  /*Font*/
  font-family: Georgia;
  font-size: 14px;
  line-height: 1.2;
  color: #B0C4DE; /* blockquote color and headers for side stuff etc. */
}
  
  /*Font*/
  font-family: Georgia;
  font-size: 60px;
  color: #BC8F8F;
  
  /*Positioning*/
  position: absolute;
  left: 10px;
  top:5px;
  
}

blockquote::after{
  /*Reset to make sure*/
  content: "";
}

blockquote a{
  text-decoration: none;
  background-image: url("bg.jpg");
  background-repeat: repeat;
  cursor: pointer;
  padding: 0 3px;
  color: #E6E6FA;
}

blockquote em{
  font-style: italic;
}
.gallery { /* this is the main div that wraps your gallery */
  display:flex;
  flex-wrap:wrap;
  width:800px; /* this can be modified to make the gallery wider */
}

.gallery img {
  width:200px; /* this sets the width for every image */
  height:150px; /* this sets the height for every image. Try setting it to 'auto' and see how it looks weird since every image has a slightly different height? */
  object-fit:cover; /* this crops the image so they are all the same size. This might be an issue if you have landscape AND portrait images. Feel free to take this property out temporarily to see exactly what it does! */
  
}

/* this is the div which CROPS every image */
.gallery > div {
  width:200px; /* this should match the image height */
  height:150px; /* this should match the image width */
  margin-right:10px; /* this controls the gaps between the images */
  margin-bottom:60px; /* this controls the gaps between the images */
}

/* this resizes the image on hover. note that objects in 'portrait'  */
.gallery img:hover {
  transform:scale(2.5); /* this scales up the image when you hover over it */
  object-fit:contain; /* this keeps the aspect ratio of the original images*/
}

.desc > div {
  color: #FFFFF0
}