/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  font-size: 18px;
  font-family: Arial, Helvetica, sans-serif;
  color: white;
  margin: 0;
  background-image: url("../images/bg_grad2.png");
  background-position: top;
  background-repeat: repeat-x;
  background-color: #007366;
}

p {
  color: #ffffff;
  padding: 0.5em 0;
  line-height: 1.7em;
  font-size: 1.1em;
}

h1 {
    color: #e6ff7d;
    font-size: 2em;
}
#content ul{
    list-style: none;
}
#content ul li::before{
    content: "•"; 
    color: #3bd48e;
    display: inline-block; 
    width: 1em;
    margin-left: -1em;
}
#content ul li{
    line-height: 1.7em;
    color: white;
    font-size: 1.1em;
}
#content ol{
    margin-left: -1em;
}
/*end*/
#content ol li {
  line-height: 1.7em;
    color: white;
}

img {
  max-width: 100%;
  height: auto;
  margin-top: 2em;
  margin-bottom: 0.5em;
}
.right {
  float: right;
  margin-left: 1em;
}
.left {
  float: left;
  margin-right: 1em;
}
.center {
  display: block;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}
@media only screen and (min-width: 600px) {
  .small {
  max-width: 60%;
  height: auto;
  }
}
.caption {
  margin-top: 0;
  font-size: 0.9em;
  font-style: italic;
  color: #3bd48e;
}

a:link  {
    color: #e6ff7d;
}

a:visited {
    color: #80d8ff;
}

a:hover { 
  background-color: #0a403a;
}

b {
  color: #3bd48e;
}

i {
    color: #3bd48e;
}

hr { 
  border: 0.5px solid #3bd48e;
  border-radius: 5px;
  width: 50%;
  margin-top: 2em;
  margin-bottom: 2em;
} 

blockquote {
    margin-left: 0;
    margin-right: 0;
}

/*figure and figcaption for image captions*/
figure {
  padding-bottom: 4px;
  margin: auto;
}

figcaption {
  font-style: italic;
  padding: 4px;
  text-align: right;
}

/*#CONTAINER is the rectangle that has contains everything but the background!*/
#container {
  margin: 3em auto 5em auto;
  width: 90%;
	max-width: 700px;
  color: #3bd48e; 
  outline-color: black;
  outline-style: solid;
  outline-width: 0;
  outline-offset: 0;
}

#content {
  padding: 10px 5% 20px 5%;
}

iframe {
  border: none;
  width: 600px;
  height: 338px;
  display: block;
  margin-right: auto;
  margin-left: auto;
  padding: 2em 0;
}

/*INDEX*/
.indexlist {
    list-style-type: none;
}

.indeximage {
    display: inline-block;
    max-height: 300px;
    width: 200px;
}

.indexlink {
    display: inline-block;
}

/*HEADER STYLE*/
#header {
  /*background-color: #b23f3f;*/
  padding: 250px 5% 0 5%;
  background-image: url("/images/funguszone_header2.png");
  background-position: top center;
  background-size: 400px;
  background-repeat: no-repeat;
}
#header ul {
  list-style-type: none;
  padding: 0.5em 0;
  margin: 0;
}
#header li {
  font-size: 1.2em;
  display: inline-block;
  margin-right: 1.5em;
  margin-bottom: 0.2em;
  margin-top: 0.2em;
}
#header li a {
  color: white;
  text-decoration: none;
  background-color: inherit;
}
#header li a:hover {
  text-decoration: underline;
}

/*DATE AND EST READING TIME*/
#dateEstRead {
    width: 100%;
    border-style: none;
}

#dateEstRead ul {
    display: flex;
    padding: 0;
    margin: 0;
    list-style-type: none;
    justify-content:space-between;
}

#dateEstRead li {
    font-size: 1.2em;
    display: inline-block;
}

/*NAVBAR*/
#navbar {
    width: 100%;
    padding: 0 5% 0 5%;
    border-style: none;
    border-width: 0 0 6px 0;
    margin-bottom: 10px;
}

#navbar ul {
    display: flex;
    padding: 0;
    margin: 0;
    list-style-type: none;
    justify-content: space-evenly;
}

#navbar li {
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 1.2em;
    display: inline-block;
    margin-right: 1.5em;
    margin-bottom: 0.2em;
    margin-top: 0.2em;
}

#navbar li a, #navbar li a:visited {
    color: #FFFFFF;
    text-decoration: none;
}

#navbar li a:hover {
    background-color: #0a403a;
    text-decoration: underline;
}

#flex {
    display: flex;
}

.center {
    display: block;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

/*TOP BUTTON*/
#topBtn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 99;
    border: none;
    outline: none;
    background-color: #ffffff;
    color: #3bd48e;
    cursor: pointer;
    padding: 15px 10px 10px 10px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: bold;
}

/*POST LIST STYLE*/
#postlistdiv ul {
  font-size: 1.2em;
  padding: 0;
  list-style-type: none;
}
#recentpostlistdiv ul {
  font-size: 1.2em;
  line-height: 1.7em;
  padding: 0;
  list-style-type: none;
}
#recentpostlistdiv ul li::before{
    content: "•"; 
    color: #3bd48e;
    display: inline-block; 
    width: 1em;
    margin-left: -1em
}
.moreposts {
  font-size: 0.8em;
  margin-top: 0.2em;
}

/*QUOTE BOX STYLE*/
.quotebox {
    font-style: normal;
    border-radius: 25px;
    background: #0a403a;
    padding: 5px 40px 30px 40px;
    margin-bottom: 1.2em;
    margin-left: 2em;
    margin-right: 2em;
}
.quotecredit {
    padding: 0;
    margin: 0;
    text-align: right;
    color: #3bd48e;
    font-style: italic;
}

/*SCRIPT BOX STYLE*/
.scriptbox {
    font-style: normal;
    border-radius: 25px;
    background: #e9eae0;
    padding: 30px 40px 30px 40px;
    margin-bottom: 1.2em;
    margin-left: 2em;
    margin-right: 2em;
}

.scriptbox p {
  font-family:'Courier New', Courier, monospace;
  font-size: 1em;
  font-weight: 700; 
  color: #454545;
  padding: 0;
}

.script-name {
  margin-left: 10em;
  margin-bottom: 0;
}

.script-dialogue {
  margin-left: 6em;
  margin-top: 0;
}

/*DONATE BOX STYLE*/
.donatebox {
    font-style: normal;
    border-radius: 25px;
    background: #0a403a;
    padding: 20px 30px;
    margin: 3em 0 2em 0;
    font-size: 0.9em;
}
@media only screen and (max-width: 600px) {
  .quotebox {
    margin-left: 1em;
    margin-right: 1em;
    }
}

/*NEXT AND PREVIOUS LINKS STYLE*/
#nextprev {
  text-align: center;
  margin-top: 1.4em;
}

/*DISQUS STYLE*/
#disqus_thread {
  margin-top: 1.6em;
}

/*FOOTER STYLE*/
#footer {
  font-size: 0.8em;
  padding: 10px 5% 10px 5%;
}

/*EGGBUG EGGRING*/
#eggbug-eggring {
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
}

#eggbug-eggring table {
  margin-left: auto;
  margin-right: auto;
  table-layout: fixed;
  width: 420px;
}

#eggbug-eggring table tr td {
  padding: 15px;
  line-height: 1.2em;
}

#eggbug-eggring th td {
  width: 140px;
}

#eggbug-eggring img {
    display: block;
    margin-top: 8px;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
}

/*BUTTON CORNER*/
#buttoncorner {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
#buttoncorner img {
    margin-top: 4px;
    margin-bottom: 2px;
    display: inline-block;
    text-align: center;
}

/*MEDIA RECCOMENDATION CARDS*/
.mediacardcontainer {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-gap: 1em;
}
.mediacard {
   display: inline-grid;
   grid-template-columns: auto auto auto auto auto auto;
   width: 18em;
   height: 30em;
   border: 10px solid #666;
   border-radius: .5em;
   padding: 1em;
   margin: 0 .5em .5em 0;
   text-align: center;
   position: relative;
   background-color: #333;
   box-shadow: .2em .3em 0.1em #333;
}
/*.mediacenter {
  vertical-align: center;
}*/
.mediacardtitle {
   grid-column-start: 1;
   grid-column-end: 5;
   color: #fff;
   font-size: 1em;
   font-weight: 600;
   text-align: left;
}
.mediatypeicon {
  grid-column-start: 6;
  grid-column-end: 7;
  font-size: 1em;
  text-align: right;
  border: 10px solid #ccc;
  border-radius: 10em;
  background-color: #ccc;
  height: 1.5em;
  width: 1.5em;
}
.mediacardimage {
  grid-column-start: 1;
  grid-column-end: 7;
  border: 2px solid #666;
  margin: auto;
  color: blue;
}
.mediacardimage img{
  width: 18em;
}
.mediacardsubtitle {
  grid-column-start: 1;
  grid-column-end: 7;
  text-align: center;
  font-size: .8em;
  font-style: italic;
  font-weight: 400;
}
.mediacarddescription {
   font-size: 1em;
   grid-column-start: 1;
   grid-column-end: 7;
   padding: 1em 1em;
   background-color: #444;
}