html {
  background-image: url("/images/background2.gif");
  background-color: "#000000";
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  font-size: 16px;
}

p {
  font-size: 1rem;
}

a:link {
  color: #00ff99;
  text-decoration: none;
}

a:visited {
  color: #ccffcc;
  text-decoration: none ;
}

a:active {
  color: #00ff99;
  text-decoration: underline;
}

a:hover {
  color: #00ff99;
  text-decoration: underline;
}

iframe {
  display: block;
  border: 0;
  max-width: 100%;
  margin: 0 auto;
}
.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  margin: 1em;
}
.masthead, .bannerad {
  text-align: center;
  margin: 0em;
  max-width: 100%;
  border-radius: 0.5rem;
}

.bannerad {
  margin-bottom: 1em;
}

/* This is for single-column phone display. See @media section for two column display */
.mastbottom {
  display: flex;
  flex-direction: column;
  margin-top: 0em;
  margin-bottom: 1em;
}
.mastleft, .mastright {
  color: #ffffff;
  font-size: 0.9rem;
  vertical-align: top;
  margin-top: 0em;
  margin-bottom: 0em;
}
.mastleft {
  display: none;
  text-align: center;
  white-space: wrap;
}
.mastright {
  text-align: center;
}
.mastbreak {
  display:flex;
}

.sectionheader {
  font-family: Helvetica, Arial, sans-serif;
  color: #ffffff;
  font-size: 1.3rem;
  text-align: center;
  vertical-align: top;
  margin-top: 0em;
  margin-bottom: 0.5em;
}

.article, .articlelink {
  position: relative;
  text-align: left;
  margin-bottom: 1em;
  font-weight: normal;
  font-size: 1rem;
}
.articlelink {
  font-weight: bold;
  font-size: 1.1rem;
}
a.article, a.articlelink {
  color: rgb(2, 134, 2);
}
img.article {
  border: 0;
  max-width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.left, .right, .contentleftcol, .contentrightcol {
  display: contents;
}
.left {
  background: #949494;
  border-radius: 0.5rem;
}
.contentleftcol {
  background: #ffffff;
  border-radius: 0.5rem;
}
.contentbg {
  background: #ffffff;
  border-radius: 0.5rem;
  margin-bottom: 2em;
}
.contentarticle {
  margin: 1em;
}
.contenthead {
  display: flex;
  flex-direction: row;
  margin-bottom: 1.25em;
  justify-content: space-between;
}
.contentheadleft, .contentheadright {
  vertical-align: top;
}
.contentheadleft {
  text-align: left;
  margin-right: 1em;
}
.contentheadright {
  text-align: center;
}


/* Features, Columns, etc. images */
img.blockimage{
  border: 0px;
  width: 18em;
  height: 3em;
  vertical-align: top;
  border-radius: 0.5rem;
}

img.quickieimage{
  border: 0px;
  width: 18em;
  height: 2.5em;
  vertical-align: top;
  border-radius: 0.5rem;
}

/* Model M Keyboard image */
img.poweredby{
  border: 0px;
  width: 125px;
  height: 56px;
  vertical-align: top;
  margin: 0.2em;
}

.cathead {
  text-align: center;
  margin: 1em;
}
.cattitle {
  font-size: 1.1rem;
  font-weight: bold;
  font-style: italic;
  margin-top: 0em;
  margin-bottom: 0em;
}
.catbg {
  border-radius: 0.5rem;
  background: #949494;
  margin-bottom: 1em;
}
.catarticle {
  margin: 1em;
}
img.catlink {
  display: block;
  margin-left: auto;
  margin-right: 0em;
  margin-top: 0em;
  margin-bottom: 0.5em;
}
.catfoot {
  text-align: center;
  margin-bottom: 1.5em;
}

.artlink {
  display: flex;
  flex-direction: row;
  margin-bottom: 1.25em;
}
.artlinkleft, .artlinkright {
  vertical-align: top;
}

.artlinkleft {
  text-align: center;
  margin-right: 1em;
}

.artlinkright {
  text-align: left;
}

.articletitle, .contenttitle {
  font-weight: bold;
  margin-top: 0em;
  margin-bottom: 0em;
  font-size: 1.1rem;
}

img.artlinkimage, img.contentimage {
  border: 0px;
  height: 120px;
  width: 120px;
  border-radius: 0.5rem;
  vertical-align: top;
}
.linkcategory, .contentcategory {
  font-size: 1rem;
  margin-top: 0.2em;
  margin-bottom: 0.5em;
}
a.contentcategory {
  color: rgb(2, 134, 2);
  font-style: italic;
}

.caption {
  font-size: 0.8rem;
  font-weight: bold;
  font-style: italic;
}

.artdate {
  font-size: 0.9rem;
  font-style: italic;
  margin-bottom: 1em;
  color: #000000;
  margin-bottom: 1em;
}

.artbyline, .contentbyline {
  color: #FFFFFF;
  font-size: 1rem;
  font-style: italic;
  font-weight: bold;
  margin-top: 0em;
  margin-bottom: 0.25em;
}
.contentbyline {
  color: #000000;
  margin-bottom: 0.1em;
}
a.contentbyline {
  color: rgb(2, 134, 2);
}

.contentlist {
  font-weight: bold;
}

a.contentlink:link {
  color: rgb(2, 134, 61);
  text-decoration: none;
}
a.contentlink:visited {
  color: rgb(33, 163, 92);
  text-decoration: none;
}
a.contentlink:active {
  color: rgb(2, 134, 2);
  text-decoration: underline;
}
a.contentlink:hover {
  color: rgb(2, 134, 2);
  text-decoration: underline;
}

a.contenttrap {
  color: #ffffff;
  font-size: 0.01rem;
  margin-top: 0em;
  margin-bottom: 0em;
}

.social {
  text-align: center;
}

.blurb {
  color: #000000;
  font-size: 1rem;
  margin-top: 0.25em;
  margin-bottom: 0.25em;
}

a.categorylink {
  font-size: 1.2rem;
  font-style: italic;
}

.more, .morelink {
  font-size: 1rem;
  font-weight: bold;
}
.morelink {
  text-align: right;
  margin-top: 0.25rem;
  margin-bottom: 1em;
}

.linkblurb {
  color: #FFFFFF;
  font-size: 1rem;
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

.menu {
  font-size: 1rem;
  font-weight: bold;
}

.quote {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.8rem;
  text-align: center;
}

.quotepagequote, .quotepageby {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.quotepagequote {
  font-weight: bold;
}
.quotepageby {
  font-weight: normal;
  font-style: italic;
}

.quickies {
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: calc(25% - 0.5em) 75%;
  gap: 0.5rem;
  align-items: baseline;
}
.quickiebyline, .quickieblurb, .quickiedate {
  text-align: left;
  font-size: 1rem;
}
.quickiebyline {
  color: #FFFFFF;
}
.quickiedate {
  color: #000000;
}

.footerblock {
  margin-top: 2em;
}
.footerwide {
  display: none;
}
.footernarrow {
  display: block;
}
.footermenu {
  color: #FFFFFF;
  text-align: center;
  font-size: 1rem;
  margin-top: 0.2em;
  margin-bottom: 0em;
}
.copyright {
  text-align: center;
  color: #FFFFFF;
  font-size: 1rem;
  margin-top: 0.5em;
  margin-bottom: 1em;
}

/* These are overrides for a two-column layout */
@media (min-width: 70em){
  .container{
    display: block;
    width: 80%;
    margin-left: 10%;
    max-width: 1600px;
  }
  .left, .right, .contentleftcol, .contentrightcol {
    display: inline-block;
    vertical-align: top;
  }
  .left{
    width: calc(40% - 1em);
    margin-right: 1em;
    background: #949494;
  }
  .right{
    width: calc(60% - 1em);
  }
  .contentleftcol {
    width: calc(60% - 1em);
    margin-right: 1em;
    background: #ffffff;
  }
  .contentrightcol {
    width: calc(40% - 1em);
  }
  .mastbottom {
    display: flex;
    flex-direction: row;
    margin-top: 0em;
    margin-bottom: 1em;
    justify-content: space-between;
  }
  .mastleft, .mastright {
    color: #ffffff;
    font-size: 0.9rem;
    vertical-align: top;
    margin-top: 0em;
    margin-bottom: 0em;
  }
  /* Show the build date in a 2 column layout */
  .mastleft {
    display: flex;
    text-align: left;
    white-space: nowrap;
    margin-right: 2em;
  }
  .mastright {
    text-align: right;
  }
  .mastbreak {
    display: none;
  }
  /* Less space for author name in a 2 column layout */
  .quickies {
    grid-template-columns: calc(20% - 0.5em) 80%;
  }
  /* Make these bigger in a 2 column layout */
  .articletitle {
    font-size: 1.2rem;
  }
  .contenttitle {
    font-size: 1.4rem;
  }
  img.contentimage {
    height: 160px;
    width: 160px;
  }

  .footerwide {
    display: block;
  }
  .footernarrow {
    display: none;
  }
}