/* The Archives @ BostonRadio.org -- main style */
body { 
    font-family: "Optima", "Avenir Next", "DejaVu Sans", "Bitstream Vera Sans", "Lucida Grande", "Verdana", sans-serif;
}

/* For wide screens, render a maximum width of 1200px and use automatic
   margins to center the content on the viewport.  For anything narrower,
   render full width of the viewport and set margins of 5em on either side.
   (Reduced margins may be necessary on very small screens -- 5em is pretty
   big.)  No margins at all on non-screen media. */
@media screen and (max-width: 1200px) and (min-width: 600px) {
  body {
    margin-left: 5em;
    margin-right: 5em;
  }
}
@media screen and (min-width: 1200px) {
  body {
    margin-left: auto;
    margin-right: auto;
    max-width: 1200px;
  }
}
@media screen and (max-width: 600px) {
  body {
    margin-left: 10px;
    margin-right: 10px;
  }
}

h2 {
  font-size: 110%;
}

h3 {
  font-weight: normal;
  font-size: 100%;
}
h3.byline:before { content: "by "; }

/* Used for captioned image thumbnails */
figure.thumb {
  float: right;
  margin-left: 1em;
  clear: both;
}

/* Similar, but larger images centered in the text area */
figure.header {
  float: inherit;
  clear: both;
}

/* For all captioned images */
figure {
  border: solid black 1px;
  padding: 8px;
  text-align: center;
}
:link img { border:none }

/* The magic below causes captions to wrap at the width of
   the image (or other content in the figure); otherwise,
   the figure will become as wide as the unwrapped caption
   (up to the viewport width). */
figcaption {
  display: table-caption;
  width: 100%;
}

div.authors {
  border-top: solid black 1px;
  margin-top: 2ex;
  margin-bottom: 2ex;
}

div.authorbio {
  clear: both;
}

div.authorbio img {
  border: none;
  padding-right: 2em; 
  float: left;
}

div.authorsocial {
  text-align: center;
}

/* doesn't look good when centered 
div.authorsocial:before {
  content: "Social media: ";
}*/

div.media-descriptions {
  border-top: solid black 1px;
  margin-top: 2ex;
  margin-bottom: 2ex;
  font-size: 80%;
}
:target {
  border: solid red 2px;
  padding: 1em;
}
  
.sitebottombar {
  clear: both;
  padding-top: 2ex;
}

.twocolumn {
  -moz-column-count: 2;
  -moz-column-gap: 10px;
  -webkit-column-count: 2;
  -webkit-column-gap: 10px;
  column-count: 2;
  column-gap: 10px;
}

.twocolumn div {
  -moz-break-inside: avoid;
  -webkit-break-inside: avoid;
  break-inside: avoid;
}