body, p, div, ul, li, span, a { font-family: "Open Sans",sans-serif; font-weight: 300; font-style: normal; color: #090909; text-decoration: none;  }
a { text-decoration: underline; text-decoration-color: #a2dffb; }
h1, h2, h3, h4, p  { line-height: 1.6rem; }
h1 { font-size: 1.8rem; font-weight: 300; }
h2 { font-size: 1.4rem; margin-bottom: 25px; }
img { border: 0px; }

#mainFrame { max-width: 1400px; padding: 0px 20px 0px 20px; margin-left: auto; margin-right: auto; }
#mainContent { max-width: 870px; margin-left: auto; margin-right: auto; }

#header { margin-bottom: 40px; margin-top: 20px; }
#footer { margin-top: 40px; margin-bottom: 20px; border-top: 1px solid #DDD; padding-top: 40px;}


#logo { float: left; }
#logo, #logo a, #logo .subtitle { color: #090909; }

#mininav { float: right; }
#mininav, #mininav a { margin-left: 14px; font-style: normal; line-height: 36px; color: #090909 }

.content-grid {
  display: grid;
  grid-gap: 10px;     
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
}

.item { 
  background-color: #FAFAFA;
  padding: 20px 20px 30px 20px;
}

.item div.center-image { 
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.item:hover { 
  background-color: #F0F0F0;  
}

.item img { 
  max-width: 100%;
}

.item p {   
  font-size: 1.2rem;
  display: block; width: 100%; height: 100%;
}

.item span.attribution { 
  display: block;
  margin-top: 20px; 
  font-size: .9rem;
  color: #888;
}

.item span.title { 
  font-weight: bold;
}

.item img.tile_header { max-width: 100px; max-height: 30px;   opacity: 0.2;   filter: grayscale(100%); padding-bottom: 20px; }

.item:hover img.tile_header { opacity: 1; filter: none; }

.blog_archive_item { font-size: .8rem; background-color: #FCFCFC; padding: 10px 20px; }
.blog_archive_item .title { color: #666; }
.blog_archive_item .subtitle { color: #CDCDCD; font-size: .69rem;}

.sectionHeader { display:block; height: 30px; background-color: #000000; color: #FFFFFF; padding: 7px 5px 5px 10px; width: 200px; font-weight: 300; margin: 0px 0px 5px 1px; }

.articleBody {
  max-width: 600px;
  float: left;
  position: relative;
}

.articleBody p, .articleBody ul, .articleBody li { 
  line-height: 1.7; 
}
.articleBody li { margin-bottom: 15px; }

.articleSidebar {
  padding: 15px 0px 15px 0px;
  margin: 60px 40px 10px auto;
  font-size: .8rem;
  position: relative;
  right: -40px;
  width: 250px;  
}




.sidenote {
  position: absolute; 
  right: -240px;  
  width: 200px;
  margin-top: 10px; 
}

.blog_original_post { font-style: italic; font-size: .8rem; margin-top: 40px; }

#writingMiniNav { margin-top: 30px; padding-top: 30px;  margin-bottom: 30px; padding-bottom: 30px;}

#mainContent h1 { max-width: 650px; line-height: 2rem; margin-top: 40px;}
#mainContent h2 { padding: 15px 0px 0px 0px; }
#mainContent h3 { padding: 15px 0px 0px 0px; }
#mainContent p, #mainContent li { max-width: 650px; }
#mainContent img { padding-top: 5px; padding-bottom: 5px;  max-width: 99%; }









@media only screen and (min-width:800px ) and (max-width:920px) {  
  .sidenote {
    position: absolute; 
    right: -140px;  
    width: 100px;
    margin-top: 10px; 
    font-size: .7rem;
  } 
}

@media only screen and (min-width:480px ) and (max-width:799px) {
  /*Small Desktop / Large Tablet View*/
  .articleBody { width: 100%; float: none; }
  .articleSidebar { 
    margin: auto; 
    border: 0px; 
    padding: 15px 0px 15px 0px;
    font-size: 1rem;
    position: inherit; 
    right: auto; 
    width: 100%; 
    }  
  .sidenote { 
    display: block;
    padding: 0px !important;
    margin: 20px 0px;     
    position: relative; 
    left: auto; 
    width: auto; 
    right: auto; 
    color: #CDCDCD;
  }  
  .sidenote a { 
    color: #CDCDCD;
  }
}


@media only screen and (max-width:650px) {

  .articleBody { width: 100%; }

  .articleSidebar { 
    margin: auto; 
    border: 0px; 
    padding: 15px 0px 15px 0px;
    font-size: 1rem;
    position: inherit; 
    right: auto; 
    width: 100%; 
    }
  .sidenote { 
    display: block;
    padding: 0px !important;
    margin: 20px 0px; 
    color: #CDCDCD;
    position: relative; 
    left: auto; 
    width: auto; 
    right: auto; 
  }
  .sidenote a { 
    color: #CDCDCD;
  }
  
}


@media only screen and (max-width:480px) {
  /* Smartphone view*/
   
  #mininav { font-size: .7rem; }

  #logo { float: none; margin-top: 0px; }
  #mininav, #mininav a { float: none; margin-left: 0px; }
  .articleSidebar { 
    margin: auto; 
    border: 0px; 
    }   
  .sidenote { display: none; }
  

  #logo { 
    margin: 20px 0px; 
    border-top: 1px solid #EBEBEB; 
    border-bottom: 1px solid #EBEBEB;
    padding: 20px 0px; 
  }

}