/* 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 {
  background-color: white;
	background-position: top;
  font-size: 18px;
  font-family: Helvetica, Georgia, "Times New Roman", serif;
  margin: 0;
}

p {
  line-height: 1.6em; /*I find the default HTML line-height tends to be a bit claustrophobic for main text*/
}

hr {
  border: black;
  border-width: 2px 0 0 0;
}

img {
  max-width: 100%;
  height: auto;
  margin-top: 0.5em;
  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;
}

a:hover { 
  background-color: grey;
}


h1 {
    text-decoration:none;
    border:0;
    width : 300px;
    margin :0;
    padding : 0;
    background : url(logo.png) no-repeat 0 0;
}
 

h2, h3, h4, h5 {
  font-family: Tahoma, Geneva, sans-serif;
  color: black;
}



/*#CONTAINER is the rectangle that contains everything but the background!*/
#container {
  margin: 3em auto;
  width: 90%;
	max-width: 700px;
	background-color: white;
  color: #151515; 
  outline-color: #a9a9a9;
  outline-style: ridge;
  outline-width: 4px;
  outline-offset: 0;
  box-shadow: 5px 5px 3px 1px #999;
}

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

/*experimenting with div grids*/
div.mycontainer {
  width:100%;
  height:100%;
  height:4in;
  overflow:auto;
}
div.mycontainer div {
  width:100%;
  float:left;
}

.changelog {
  width:3in;
  height:1in;
  overflow:scroll;
  border: 2px outset gray;
  padding: 0 5px 5px 5px;
  box-shadow: 1.5px 1.5px 1px .5px #99999999;
  font-size: 12px;
}

p.changelog {
  padding:7px;
}

/*experimenting with sticky*/
.mysticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding: 2px;
  margin-bottom:-21px;
  background-color:rgba(210, 210, 210, 0.9);
  border: 2px outset gray;
}

/*trying to set up flexboxes*/
.flex-container {
  display: flex;
  background-color:white;
  border:2px gray;
}

.flex-container > div {
  margin: 2px;
  padding: 2px;
  border:2px outset gray;
  font-size:12px;
  box-shadow: 5px 5px 3px 1px #999;
}

/*button stuff*/
.textbutton {
  background: none;
  border: none;
  color: inherit;
  font-size: inherit;
}

.hidden{
display : none;
}
.clicky:hover {
  background-color: grey;
}
.tags{
 margin-top:-10px;
 margin-left:5px;
 margin-right:5px;
}
      
      /** modal gallery code*/
      .mycontainer2 {
        width:100%;
        height:100%;
        height:3in;
        overflow:auto;
      }
      
      .row > .column {
        padding: 0;
        width: 33.33%;
      }
      
      .row:after {
        content: "";
        display: table;
        clear: both;
      }
      
      /* Create four equal columns that floats next to eachother */
      .column {
        float: left;
        width: 33.33%;
      }
      
      /* The Modal (background) */
      .modal {
        display: none;
        position: fixed;
        z-index: 1;
        padding-top: 10px;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0, 0, 0, 0.9);
        transition:0.3s ease;
      }
      
      /* Modal Content */
      .modal-content {
        position: relative;
        background-color: rgba(0, 0, 0, 0.9);
        margin: auto;
        padding: 0;
        width: 90%;
        max-width: 700px;
        transition:0.3s ease;
      }
      
      img.modal-content {
      flex:50%;
      max-width: 70%;
      }
    
      
      /* The Close Button */
      .close {
        color: white;
        position: absolute;
        top: 10px;
        right: 25px;
        font-size: 50px;
        font-weight: bold;
        z-index: 1;
      }
      
      .close:hover,
      .close:focus {
        color: #999;
        text-decoration: none;
        cursor: pointer;
      }
      
      /* Hide the slides by default */
      .mySlides {
        display: none;
      }
      
      /* Next & previous buttons */
      .prev,
      .next {
        cursor: pointer;
        position: absolute;
        top: 50%;
        width: auto;
        padding: 16px;
        margin-top: -50px;
        color: white;
        font-weight: bold;
        font-size: 50px;
        transition: 0.1s ease;
        user-select: none;
        -webkit-user-select: none;
      }
      
      /* Position the "next button" to the right */
      .next {
        right: 0;
      }
      
      /* On hover, add a black background color with a little bit see-through */
      .prev:hover,
      .next:hover {
        background-color: rgba(0, 0, 0, 0.8);
      }
      
      /* Number text (1/3 etc) */
      .numbertext {
        color: #f2f2f2;
        font-size: 12px;
        padding: 0px 3px;
        position: absolute;
        top: 0;
        background-color: rgba(0, 0, 0, 0.8);
      }
      
      /* Caption text */
      .caption-container {
        text-align: center;
        background-color: rgba(0, 0, 0, 0.8);
        padding: 0px 3px;
        color: white;
      }
      
      img.demo {
        opacity: 0.6;
      }
      
      .active,
      .demo:hover {
        opacity: 1;
      }
      
      img.hover-shadow {
        transition: 0.3s;
      }
      
      .hover-shadow:hover {
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      }
      
      
      
      
      
      div.scroll-container {
      background-color: rgba(0, 0, 0, 0.8);
      overflow: auto;
      white-space: nowrap;
      display: flex;
      padding: 3px;
      height: 1.5in;
      
    }
    
    div.scroll-container img {
      padding: 2px;
      width: auto;
      height: auto;
      
    }
      
      
      /*no more modal gallery code*/


/*HEADER STYLE*/
#header {
  background-color: lightgrey;
  padding: 0 5%;
  border-color: black;
  border-style: ridge;
  border-width: 0 0 4px 0;
}
#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: black;
  text-decoration: none;
  background-color: lightgrey;
}
#header li a:hover {
  text-decoration: underline;
}

/*POST LIST STYLE*/
#postlistdiv ul {
  font-size: 1.2em;
  padding: 0;
  list-style-type: none;
}
#recentpostlistdiv ul {
  font-size: 1.2em;
  padding: 0;
  list-style-type: none;
}
.moreposts {
  font-size: 0.8em;
  margin-top: 0.2em;
}

/*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: 0 5% 10px 5%;
}