@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,300,400,700,800);
@import url(https://fonts.googleapis.com/css?family=Inconsolata);
@font-face {
  font-family: 'Marydale';
  src: url("/fonts/marydale/marydale-webfont.eot");
  src: url("/fonts/marydale/marydale-webfont.eot?#iefix") format("embedded-opentype"), url("/fonts/marydale/marydale-webfont.woff") format("woff"), url("/fonts/marydale/marydale-webfont.ttf") format("truetype"), url("/fonts/marydale/marydale-webfont.svg#marydaleregular") format("svg");
  font-weight: normal;
  font-style: normal; }
/*
tw-grey is hsl(145, 5%, 52%)
*/
@font-face {
  font-family: 'FontAwesome';
  src: url("https://netdna.bootstrapcdn.com/font-awesome/4.0.0/fonts/fontawesome-webfont.eot");
  src: url("https://netdna.bootstrapcdn.com/font-awesome/4.0.0/fonts/fontawesome-webfont.eot?#iefix") format("embedded-opentype"), url("https://netdna.bootstrapcdn.com/font-awesome/4.0.0/fonts/fontawesome-webfont.woff") format("woff"), url("https://netdna.bootstrapcdn.com/font-awesome/4.0.0/fonts/fontawesome-webfont.ttf") format("truetype"), url("https://netdna.bootstrapcdn.com/font-awesome/4.0.0/fonts/fontawesome-webfont.svgfontawesomeregular") format("svg");
  font-weight: normal;
  font-style: normal; }
html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

*, *:before, *:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit; }

@font-face {
  font-family: 'FontAwesome';
  src: url("https://netdna.bootstrapcdn.com/font-awesome/4.0.0/fonts/fontawesome-webfont.eot");
  src: url("https://netdna.bootstrapcdn.com/font-awesome/4.0.0/fonts/fontawesome-webfont.eot?#iefix") format("embedded-opentype"), url("https://netdna.bootstrapcdn.com/font-awesome/4.0.0/fonts/fontawesome-webfont.woff") format("woff"), url("https://netdna.bootstrapcdn.com/font-awesome/4.0.0/fonts/fontawesome-webfont.ttf") format("truetype"), url("https://netdna.bootstrapcdn.com/font-awesome/4.0.0/fonts/fontawesome-webfont.svgfontawesomeregular") format("svg");
  font-weight: normal;
  font-style: normal; }
.icon-twitter:before {
  content: "";
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  text-decoration: inherit;
  -webkit-font-smoothing: antialiased; }

.icon-rss:before {
  content: "";
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  text-decoration: inherit;
  -webkit-font-smoothing: antialiased; }

.icon-bars:before {
  content: "";
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  text-decoration: inherit;
  -webkit-font-smoothing: antialiased; }

.help-icon:before {
  content: "";
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  text-decoration: inherit;
  -webkit-font-smoothing: antialiased; }

.icon-close:before, .navmenu .close:before {
  content: "⨉"; }

/* ==== banner ================ */
div#banner {
  display: grid;
  background-color: black;
  height: 100px;
  font-family: Open Sans, sans-serif;
  color: white;
  grid-template-columns: 2fr 2fr 60px;
  grid-template-areas: "lg sh nb" "tm tm .";
  grid-template-rows: 1fr 1.5em; }
  div#banner .search {
    grid-area: sh;
    text-align: right;
    padding-top: 10px;
    padding-right: 30px; }
    div#banner .search .button {
      cursor: pointer;
      background-color: transparent;
      color: white;
      width: 24px;
      font-size: 100%;
      border: none; }
      div#banner .search .button:before {
        content: "";
        font-family: FontAwesome;
        font-weight: normal;
        font-style: normal;
        text-decoration: inherit;
        -webkit-font-smoothing: antialiased; }
    div#banner .search input.field {
      width: 15em; }
  div#banner .name-logo {
    grid-area: lg;
    padding-left: 10px; }
  div#banner .navmenu-button {
    grid-area: nb;
    font-size: 36px;
    padding-right: 5px; }
  div#banner .icon:hover {
    text-decoration: none; }
  div#banner a:hover {
    color: #ef5ba1; }
  div#banner .top-menu {
    grid-area: tm;
    text-align: right; }
    div#banner .top-menu ul {
      float: right;
      list-style-image: none;
      list-style-position: outside;
      list-style-type: none;
      margin: 0;
      padding: 0; }
    div#banner .top-menu ul li {
      float: left;
      padding-right: 18px; }
  @media screen and (max-width: 600px) {
    div#banner {
      grid-template-columns: 1fr 60px;
      grid-template-areas: "lg nb"; }
      div#banner .search, div#banner .top-menu {
        display: none; } }

/* ................................................................ */
/* ==== footer ================ */
#footer {
  position: relative;
  background-color: black;
  color: white;
  min-height: 80px; }
  #footer a {
    color: white;
    text-decoration: none; }
  #footer div.copyright {
    display: block;
    font-size: 80%;
    position: absolute;
    bottom: 5px;
    left: 5px; }
    #footer div.copyright a:hover {
      padding-top: 5px;
      color: #ef5ba1;
      text-decoration: underline; }
  @media screen and (min-width: 600px) {
    #footer {
      min-height: 40px; }
      #footer div.copyright {
        left: auto;
        right: 60px; } }
  #footer .tw-logo {
    position: absolute;
    left: 5px;
    top: 5px; }
    #footer .tw-logo img {
      width: 200px; }
  #footer .menu-button {
    position: absolute;
    right: 10px;
    top: 5px;
    font-size: 200%; }

/* ................................................................ */
.navmenu {
  padding: 5px;
  color: white;
  background-color: black;
  font-size: 16px;
  font-family: Open Sans, sans-serif;
  line-height: 36px; }
  .navmenu .nav-head {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    grid-template-areas: ".  sh  cl"; }
  .navmenu .nav-body {
    display: grid;
    grid-template-columns: 3fr 1fr 1fr 1fr 1fr;
    grid-template-areas: "tp ab ct fd  tw"; }
  .navmenu h2 {
    column-span: all;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 14px; }
  .navmenu .search {
    grid-area: sh; }
  .navmenu .closediv {
    grid-area: cl;
    text-align: right; }
  .navmenu .topics {
    grid-area: tp;
    column-count: 2; }
  .navmenu .about {
    grid-area: ab; }
  .navmenu .content {
    grid-area: ct; }
  .navmenu .tw {
    grid-area: tw; }
  .navmenu .feeds {
    grid-area: fd; }
  .navmenu a:hover {
    color: #ef5ba1; }
  .navmenu .search {
    display: block; }
    .navmenu .search .button {
      cursor: pointer;
      background-color: transparent;
      color: white;
      width: 24px;
      font-size: 100%;
      border: none; }
      .navmenu .search .button:before {
        content: "";
        font-family: FontAwesome;
        font-weight: normal;
        font-style: normal;
        text-decoration: inherit;
        -webkit-font-smoothing: antialiased; }
    .navmenu .search input.field {
      width: 10em; }
  .navmenu .close {
    color: white;
    cursor: pointer;
    padding-right: 0.5em; }
    .navmenu .close:hover {
      color: #ef5ba1; }
  .navmenu .icon-close, .navmenu .close {
    font-size: 200%; }
  @media screen and (min-width: 600px) {
    .navmenu .search {
      display: none; } }
  @media screen and (max-width: 800px) {
    .navmenu .nav-head {
      grid-template-areas: "sh  sh  cl"; }
    .navmenu .nav-body {
      grid-template-columns: 1fr 1fr;
      grid-template-areas: "sh cl" "tp tp" "ab ct" "fd  tw"; } }

/* ==== framing ================ */
body {
  font-size: 16px; }

#content, #banner, #footer, .navmenu {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  margin-left: 5px;
  margin-right: 0; }
  #content::after, #banner::after, #footer::after, .navmenu::after {
    clear: both;
    content: "";
    display: table; }
  @media screen and (min-width: 750px) {
    #content, #banner, #footer, .navmenu {
      margin-left: 20px; } }

#top-navmenu {
  display: none; }

#bottom-navmenu {
  display: block; }

.navmenu-button {
  cursor: pointer; }

/* ................................................................ */