body { 
  background-color:#fff; 
  font-family: 'Lora', serif;
}

#sidenav {
  height: 100%;
  width: 40px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #7cc242;
  color:#fff;
  overflow-x: hidden;
  padding: 10px;
  border-right:2px solid #ddd;
}

#sidenav a, #sidenav a:link, #sidenav a:visited, #sidenav a:hover {
  color: #fff;
  text-decoration: none;
}

#menu_toggle {
  font-weight: bold;
  font-size: 0.8em;
  text-align: center;
}

#mt_con {
  cursor: pointer;
}

.menu_title {
  margin-top: 2em; 
  text-align: center;
  text-decoration: underline;
}

.menu_main_list {
  text-align: center;
}

.menu_main_list ul {
  list-style-type: none;
  margin-left:0; 
  padding-left:0;
  margin-top:0.2em;
  font-size: 1.4em;
}

.menu_main_list ul li {
  margin-bottom: 5px;
}

.main {
  margin-left:60px;
}

#header_left {
  float:left;
}

#header_right {
  float:right;
  padding:10px 60px 10px 60px;
}

#header_right_page {
  float: right;
  padding: 5px 60px 5px 60px;
}

#header_right ul li, #header_right_page ul li {
  display:inline;
  margin-right:10px;
}

header h1 {
  font-size: 4em;
  margin-left: 0.5em;
  margin-bottom:0; padding-bottom:0; 
  margin-top:0;
}

header h2 {
  font-size: 3em;
  margin-left: 0.5em;
  margin-bottom:0; padding-bottom:0; 
  margin-top:0;
}

header h2 a, header h2 a:link, header h2 a:visited, header h2 a:hover {
  text-decoration:none;
  color:#000;
}

header h3 {
  font-size: 1.5em;
  margin-left:1em;
  margin-top:-0.4em; padding-top:0;
}

.a_button, a_button:active, a_button:hover, a_button:visited {
  background-color: #aaa;
  color: #000;
  padding: 0.5em 2em;
  text-decoration: none;
  font-weight: bold;
  border:1px solid #222;
}

.main_hero {
  height: 320px;
  padding: 20px;
}

.main_hero_shadow {
  width: 50%;
  height: 280px;
  padding: 20px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  font-family: 'Open Sans', sans-serif;
  font-size:1.1em;
  position:relative;
}

.main_hero_shadow h1 {
  font-family: 'Lora', serif;
  font-size:4em;
  line-height:0.9em;
}

.main_hero_shadow h3 {
  font-size:2em;
  font-family: 'Lora', serif;
}

.main_article_hero {
  padding: 20px;
}

.main_article_hero_shadow {
  width: 85%;
  padding: 20px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  font-family: 'Open Sans', sans-serif;
  font-size:1.1em;
}

.main_article_hero_shadow h1 {
  font-family: 'Lora', serif;
  font-size:4em;
  line-height:0.9em;
}

.main_hero_shadow h3 a:link, .main_hero_shadow h3 a:hover, .main_hero_shadow h3 a:visited {
  color:#fff;
  text-decoration: none;
}

.hero_subtitle {
  font-family: 'Lora', serif;
  font-size:1.4em;
  bottom: 8px;
  padding: 8px;
  position: absolute;
}

.thirds {
  margin: 20px 0px 10px 0px;
}

.thirds h2 {
  margin-left:1%;
  font-size:1.6em;
  margin-bottom:0.2em;
}

.third {
  float: left;
  height: 240px;
  width: 31%;
  margin: 1%; 
  border: 1px solid #444; 
  position: relative;
}

.third_shadow {
  position: absolute;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  bottom: 10px;
  width: 100%;
}

.third_shadow h3 {
  font-size:1.5em;
  margin: 10px 10px 20px 10px;
}

.third_shadow h3 a:link, .third_shadow h3 a:hover, .third_shadow h3 a:visited {
  color:#fff;
  text-decoration: none;
}

#blog_link {
  text-align: right;
  margin-right: 2%;
  font-size: 0.9em;
  font-weight: bold;
}

#blog_link a, #blog_link a:visited, #blog_link a:hover {
  color:#000;
}

#byline {
  margin:40px;
  font-family: 'Open Sans', sans-serif;
  font-size:0.9em
}

#page_content {
  margin:40px;
  font-family: 'Open Sans', sans-serif;
  font-size:1.4em;
}

#page_content h3 {
  margin-top:40px;
  margin-bottom:18px;
}

#page_content ul {
  margin-top:10px;
}

.citation {
  font-size:0.8em;
  vertical-align:super;
}

footer {
  border-top: 1px solid #ccc;
  margin: 0 40px 0 40px;
}

#footer_left {
  padding-top: 16px;
  float:left;
}

#footer_right {
  float:right;
}

#footer_right ul li {
  display: inline; margin-right: 12px;
}

footer a, footer a:active, footer a:hover, footer a:visited {
  text-decoration: none;
  color: #000;
}

@media only screen and (max-width: 1300px) {
  .main_hero_shadow h1 { padding-top:0; margin-top:0; font-size:3.4em; }
  .hero_subtitle { bottom:16px; }
}

@media only screen and (max-width: 1000px) {
  header h1 { font-size:3em; }
  #header_right ul li img { width:48px !important; }
  .main_hero_shadow h3 { margin:0; padding:0; }
}

@media only screen and (max-width: 850px) {
  .main_hero_shadow { width: 85%; }
  .main_hero_shadow h3 { font-size:1.4em; }
  #header_right { float:left; }
}

@media only screen and (max-width: 750px) {
  #header_right, #header_right_page { display:none; }
  .main_hero_shadow h1, .main_article_hero_shadow h1 { font-size:2.4em; }
  .third { width:100%; margin:0 0 10px 0; }
  #page_content { margin:20px; }
  #footer_left, #footer_right { width:100%; text-align:center; }
}

@media only screen and (max-width: 600px) {
  header h1, header h2 { font-size:2em; }
  header h3 { font-size:1.2em; }
}