body {
  color: #FFFFFF;
  background-color: #025c9d;
  background-image: url(../sprites/bg.jpg);
  background-size: 100%;
  background-size: cover;
  background-attachment: fixed;
}

body > div.message {
  padding: 0.5em;

  text-align: center;
  background-color: #0A0A40;
  border-bottom: 1px solid white;
}

div.hintFrame div.hint {
  padding: 0.25em 0;
  margin: 1em 0;

  width: 100%;

  background-color: #800000;
  background-image: linear-gradient(to bottom, #A00000, #700000);
  font-size: 80%;
  box-shadow: 0 2px 5px #404040;
}

@media (min-width: 1000px) {
  div.hintFrame {
    position: absolute;
    top: 0;
    right: 0;

    width: 300px;
    height: 300px;

    overflow: hidden;
  }

  div.hintFrame div.hint {
    margin: 0 -350px;
    width: 1000px;

    transform-origin: top center;
    transform: translate(calc(150px - 80px), calc(-0.75em + 80px)) rotate(45deg);
  }
}

div.hintFrame div.hint > div {
  padding: 0.25em 0;

  text-align: center;

  border-style: solid none;
  border-width: 2px;
  border-color: #FFFFFF;
  border-color: currentColor;
}

div.hintFrame div.hint > div > span {
  display: inline-block;

  width: 200px;
}

div.hintFrame div.hint a {
  text-decoration: none;
}

body > header {
  margin-bottom: 50px;

  text-align: center;
}

body > header nav.headerbar {
  display: table;

  width: 100%;

  text-align: left;
  font-size: 0.8em;

  transition: background-color 0.5s;
}

body > header nav.headerbar:hover,
body > header nav.headerbar.menuOpen {
  background-color: #0A0A40;
}

body > header nav.headerbar div.menu {
  position: relative;
  display: table-cell;

  padding: 0.5em 1.25em;
}

body > header nav.headerbar div.menu.issues {
  width: 5em;

  text-align: right;
}

body > header nav.headerbar div.menu span.menuTitle {
  cursor: pointer;
}

body > header nav.headerbar div.menu.open span.menuTitle {
  font-weight: bold;
}

body > header nav.headerbar div.menu ul {
  display: none;
  position: absolute;
  list-style-type: none;
  left: 0;
  top: 99%; /* 100% results in an ugly 1px-gap in webkit/blink browsers. 99%
    results in a non-visible, and thus better, 1px-overlay in gecko. */

  margin: 0;
  padding: 0.5em 1.25em;

  background-color: #0A0A40;
}

body > header nav.headerbar div.menu.issues ul {
  left: auto;
  right: 0;
}

body > header nav.headerbar div.menu.closed:hover ul {
  display: none;
}

body > header nav.headerbar div.menu ul li {
  padding: 0.5em 0;
  white-space: nowrap;
}

body > header a.logo,
body > header a.title {
  display: block;
}

body > header div.titleframe {
  margin: 3em auto 1em auto;

  max-width: 880px;
}

body > header a.title {
  font-size: 1.25em;
}

body > header a.title:hover {
  text-decoration: none;
}

@media (min-width: 600px) {
  body > header nav.headerbar div.menu.mainmenu span.menuTitle {
    display: none;
  }

  body > header nav.headerbar div.menu.mainmenu ul {
    position: static;
    display: inline;

    padding: 0;

    background-color: transparent;
  }

  body > header nav.headerbar div.menu.mainmenu li {
    display: inline;

    padding-right: 1em;
  }

  body > header div.titleframe {
    text-align: left;
  }

  body > header a.logo,
  body > header a.title {
    display: inline-block;

    margin-right: 1em;
    vertical-align: middle;

    font-size: 1.75em;
  }
}

body > header.issue {
  margin: 0 auto;
  padding: 1em;
  max-width: 880px;
}

body > header.issue > span {
  display: block;
  text-align: right;
}

  body > header.issue > a {
    display: inline-block;
    vertical-align: middle;
    padding-right: 1em;
  }

body > header.issue a.cover {
  float: right;

  display: none;

  margin: 0 -10px 0 1em;
  padding: 0;

  width: 350px;
  height: 495px;
}

body > header.issue a.cover img {
  width: 100%;
  height: 100%;
}

@media (min-width: 700px) {
  body > header.issue a.cover {
    display: block;
  }
}

ul.toc,
ul.toc ul {
  list-style-type: none;
  padding: 0;
}

ul.toc li {
  margin: 0.5em 0;
}

ul.toc li.heading {
  color: #6F6F6F;
  font-size: 0.75em;
  text-transform: uppercase;
}

ul.toc li.category > a.title {
  display: block;

  border-bottom: 2px solid #009EE3;

  color: inherit;
  text-align: right;
  font-size: 80%;
}

ul.toc li.category > a.title:hover {
  text-decoration: none;
}

ul.toc li.category + li.entry {
  margin-top: 1.5em;
}

ul.toc li > span {
  display: block;
}

ul.toc span.webExclusive {
  padding: 0.25ex 1ex;

  text-transform: uppercase;

  font-size: 80%;
  font-weight: bold;
  font-variant: small-caps;

  color: #FFFFFF;
  background-color: #009EE3;

  border-radius: 0.5ex;
}

ul.toc span.title {
  white-space: nowrap;
}

ul.toc span.description {
  font-size: 80%;
  color: #6F6F6F;
}

ul.toc span.description span.author {
  font-weight: bold;
  font-style: italic;
}

body > section {
  margin: 0 auto;

  max-width: 900px;
}

section.issue {
  min-height: 500px;
}

section.issue div.title {
  margin: 0 1em;
  text-align: right;
}

@media (min-width: 700px) {
  section.issue div.title {
    margin: 0 368px 0 1em;
    margin: 0 calc(350px + 1em) 0 1em;
  }
}

section.issue div.title a.icon {
  position: relative;
  top: 0;

  margin-right: -0.5em;
}

section.issue div.title a.icon.open {
  top: 1em;

  border-style: none none solid none;
  border-radius: 0;

  outline: none;

  transition: top 1s;
}

section.issue div.title a.icon.open:hover {
  color: inherit;
  background-color: transparent;
}

section.issue div#editors {
  display: none;
  font-size: 0.8em;
}

section.issue div#editors.open {
  display: block;
}

section.issue div#editors a {
  text-decoration: none;
}

section.issue div#editors:hover a {
  text-decoration: underline;
}

section.issue div.clear {
  margin-bottom: 4em;
}

section.issue ul.toc {
  height: 100%;

  overflow: hidden;
}

section.author div.contentFrame > img {
  display: block;
  margin: 0 auto;

  width: 200px;

  border: 2px solid currentColor;
}

section.author div.contentFrame article + article {
  margin-top: 2em;
}

@media (min-width: 600px) {
  section.author div.contentFrame > img {
    float: right;

    margin: 0 0 1em 1em;
  }
}

.contentFrame {
  padding: 0 1em;
}

.page {
  box-sizing: border-box;
  position: relative;
  margin: 0 auto;
  padding: 1em;
  max-width: 900px;

  overflow: hidden;

  color: #000000;
  background-color: #FFFFFF;
  box-shadow: 2px 2px 5px #000000;
}

.page.fixedHeader {
  padding-top: 94px;
  padding-top: calc(1em + 1.3em + 2px + 3em);
}

.page.toc {
  padding-bottom: 120px;
  background-image: url('../sprites/toc-big.png');
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% auto;
}

.page > header {
  margin-bottom: 3em;

  width: 100%;

  z-index: 1000;

  font-family: weblysleek_uilight, "Segoe UI", sans-serif;
  font-weight: 300;
}

.page > header.fixed {
  position: fixed;
  left: 0;
  top: 0;
}

.page > header.fixed div.positioningFrame {
  position: relative;

  padding: 1em 1em 0 0;

  background-color: #FFFFFF;
}

.page > header.fixed div.positioningFrame:after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  bottom: -1em;

  width: 100%;
  height: 1em;

  background: linear-gradient(to bottom, #FFFFFF, transparent);
}

.page > header div.blackline {
  border-bottom: 2px solid #000000;
}

.page > header div.whiteline {
  display: inline-block;

  margin-bottom: -2px;

  border-bottom: 2px solid #FFFFFF;
}

.page header span.name {
  font-style: italic;
}

.page header.fixed span.name {
  position: relative;
  display: inline-block;

  min-width: 80px;

  text-align: center;
  color: transparent;
}

.page header.fixed span.name:before {
  content: '';

  position: absolute;
  display: block;
  top: -0.24em;

  width: 100%;
  height: 141.43%;

  z-index: 100;

  color: transparent;
  background-image: url(../sprites/logo_small.png);
  background-repeat: no-repeat;
  background-size: auto 100%;
}

@media only screen and (min-resolution: 192dpi),
    only screen and (-webkit-min-resolution: 192dpi),
    only screen and (min-resolution: 2dppx),
    only screen and (-webkit-min-resolution: 2dppx) {
  .page header.fixed span.name:before {
    background-image: url(../sprites/logo_small.2x.png);
  }
}

.page header span.webExclusive:before {
  content: '\f005  ';

  font-family: FontAwesome;
  font-size: 80%;
}

.page header span.webExclusive span.text {
  display: none;
}

@media (min-width: 500px) {
  .page header span.webExclusive span.text {
    display: inline;
  }
}

@media (min-width: 600px) {
  .page header span.webExclusive span.text {
    display: none;
  }
}

@media (min-width: 700px) {
  .page header span.webExclusive span.text {
    display: inline;
  }
}

.page div.toc {
  float: right;
  position: relative;
}

.page div.toc > span {
  cursor: pointer;

  transition: color 1s;
}

.page div.toc.show > span {
  color: #009EE3;
}

.page div.toc > span > span.title {
  display: none;
}

@media (min-width: 500px) {
  .page div.toc > span > span.title {
    display: inline;
  }
}

.page > header div.toc ul.toc {
  box-sizing: border-box;
  display: block;

  position: absolute;
  top: 100%;
  right: -1em;

  margin: 0;
  padding: 0.5em;
  /*padding-bottom: 45px;*/

  width: 300px;

  z-index: 1010;

  border-top: 2px solid #000000;
  background-color: #FFFFFF;
  /*background-image: url('../sprites/toc.png');
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% auto;*/
  box-shadow: 0 3px 5px #000000;
  text-align: right;

  transition: right 1s;
}

.page > header.fixed div.toc ul.toc {
  max-height: 300px;
  max-height: calc(100vh - 2.25em - 2px);

  overflow: scroll;
  overflow-x: hidden;
  overflow-y: scroll;
}

.page > header div.toc.show ul.toc:before {
  content: '\f00d';
  display: block;
  position: absolute;
  top: 0.5em;
  left: 0.5em;

  width: 1em;
  height: 1em;

  z-index: 100;

  cursor: pointer;
  font-family: FontAwesome;
}

@media (min-width: 600px) {
  .page > header div.toc ul.toc {
    right: 0;
  }
}

.page div.toc ul.toc li.entry {
  margin: 0.25em 0;
}

.page div.toc ul li.entry.webExclusive:before {
  content: '\f005 ';

  font-size: 80%;
  font-family: FontAwesome;
}

.page div.toc ul.toc li.entry > a span.title {
  white-space: normal;
}

.page div.toc ul.toc li.entry > a span.webExclusive,
.page div.toc ul.toc li.entry > a span.description {
  display: none;
}

.page div.toc ul.toc li.category > a.title {
  text-align: left;
}

.page p img,
.page div img,
.page > figure {
  margin-left: calc(-1em);
  margin-right: calc(-1em);

  width: calc(100% + 2em);

  background-color: inherit;
}

.page iframe,
.page img.inText,
.page figure.inText {
  display: block;
  position: static;

  margin: 2em auto;

  width: auto;
  max-width: 100%;

  z-index: auto;
}

.page iframe {
  width: 100%;
}

.page figure.inText iframe,
.page figure.inText img {
  display: block;
  margin: 0 auto;
}

.page > figure figcaption {
  margin: 0 calc(1.25em);
}

article.page > figure.inText figcaption {
  margin: 0;
}

.page img.preview {
  cursor: -webkit-zoom-in;
  cursor: zoom-in;
}

article.page div.author,
article.page div.shortlink {
  text-align: right;

  font-family: weblysleek_uilight, "Segoe UI", sans-serif;
  font-weight: 300;
  font-size: 0.8em;
}

article.page div.author {
  margin-bottom: 1em;
}

article.page div.author img {
  display: none;
}

article.page div.author address {
  font-weight: 700;
  font-style: normal;
}

article.page div.author address:before {
  content: '\f14b  ';
  font-family: FontAwesome;
  font-weight: 300;
}

article.page div.author address a {
  color: inherit;
}

article.page div.author address a:hover {
  color: #009EE3;
}

article.page div.author aside {
  display: none;
}

article.page div.shortlink {
  display: none;
}

article.page div.shortlink:before {
  content: '\f0c1  ';
  font-family: FontAwesome;
}

article.page div.shortlink a {
  text-decoration: none;
}

article.page div.introtext {
  margin-bottom: 1em;
  font-style: italic;
}

article.page p.directCommentPossible {
  position: relative;
}

article.page span.directCommentLink {
  padding-left: 0.25em;
}

article.page span.directCommentLink a:before {
  content: '\f0e6';

  font-family: FontAwesome;
}

article.page > p span.directCommentLink,
article.page section.translations > p span.directCommentLink {
  display: block;

  position: absolute;
  right: -1.25em;
  bottom: -3px;

  padding: 7px 0 0 7px;

  width: 23px;
  height: 23px;

  font-size: 0.8em;
  text-indent: 0;

  background-image: url(../sprites/directComment.png);
  background-position: -100px -80px;
  background-repeat: no-repeat;
}

article.page p span.directCommentLink a:hover {
  text-decoration: none;
}

article.page aside.sidenote {
  display: none;
  position: absolute;
  left: 0;

  margin: 0;
  padding: 0.5em 1.25em;

  z-index: 100;

  color: white;
  background-color: #009EE3;
  box-shadow: 0 3px 5px black;
}

section.page.category h1 {
  text-align: center;
}

section.page.category ul.categoryIcons {
  list-style-type: none;

  margin: 2em 0;

  text-align: center;
}

section.page.category ul.categoryIcons li {
  display: inline-block;

  margin: 0.5em;

  width: 20px;
  height: 20px;

  overflow: hidden;
  vertical-align: middle;

  background-image: url(../sprites/categories.png);
  background-position: 0 0;
}

section.page.category ul.categoryIcons li.praefrontal {
  background-position: 0 0;
}

section.page.category ul.categoryIcons li.treibstoff {
  background-position: 0 -100px;
}

section.page.category ul.categoryIcons li.internationale-perspektiven {
  background-position: 0 -200px;
}

section.page.category ul.categoryIcons li.vom-wesen-der-dinge {
  background-position: 0 -300px;
}

section.page.category ul.categoryIcons li.in-die-werkstatt {
  background-position: 0 -400px;
}

section.page.category ul.categoryIcons li.die-maschine {
  background-position: 0 -500px;
}

section.page.category ul.categoryIcons li.literatur {
  background-position: 0 -600px;
}

section.page.category ul.categoryIcons li.neue-wege {
  background-position: 0 -700px;
}

section.page.category ul.categoryIcons li.active {
  width: 100px;
  height: 100px;
}

section.page.category ul.categoryIcons li.active.praefrontal {
  background-position: -100px 0;
}

section.page.category ul.categoryIcons li.active.treibstoff {
  background-position: -100px -100px;
}

section.page.category ul.categoryIcons li.active.internationale-perspektiven {
  background-position: -100px -200px;
}

section.page.category ul.categoryIcons li.active.vom-wesen-der-dinge {
  background-position: -100px -300px;
}

section.page.category ul.categoryIcons li.active.in-die-werkstatt {
  background-position: -100px -400px;
}

section.page.category ul.categoryIcons li.active.die-maschine {
  background-position: -100px -500px;
}

section.page.category ul.categoryIcons li.active.literatur {
  background-position: -100px -600px;
}

section.page.category ul.categoryIcons li.active.neue-wege {
  background-position: -100px -700px;
}

section.page.category ul.categoryIcons li a {
  display: inline-block;
  width: 100%;
  height: 100%;

  color: transparent;
}

section.page.category > ul.toc {
  list-style-type: circle;

  padding-left: 2em;
}

@media (min-width: 600px) {
  .page {
    padding: 4em;
  }

  .page.fixedHeader {
    padding-top: 133px;
    padding-top: calc(4em + 1.3em + 2px + 3em);
  }

  .page > header.fixed div.positioningFrame {
    box-sizing: border-box;

    margin: 0 auto;

    max-width: 900px;

    padding-left: 4em;
    padding-right: 4em;
  }

  .page p img,
  .page > figure {
    margin-left: calc(-4em);
    margin-right: calc(-4em);

    width: calc(100% + 8em);
  }

  .page > figure figcaption {
    margin: 0 calc(5em);
  }

  article.page {
    padding-right: 10em;
  }

  .page > header.fixed div.positioningFrame {
    padding-right: 10em;
  }

  article.page p img,
  article.page > figure {
    margin-right: calc(-10em);

    width: calc(100% + 14em);
  }

  article.page > figure figcaption {
    margin-right: calc(12.5em);
  }

  article.page div.author {
    position: relative;
    float: right;

    width: 7.5em;
    margin-right: -10em;

    z-index: 1100;

    text-align: left;
    border-top: none;
  }

  article.page div.author img {
    position: static;
    display: block;
    margin: 0 0 0.5em 0;

    width: 100%;

    z-index: auto;

    border-radius: 50%;
  }

  article.page div.author address:before {
    content: none;
  }

  article.page div.author aside {
    display: block;
  }

  article.page div.author.multiple > div + div {
    margin-top: 2em;
  }

  article.page div.author.multiple aside {
    display: none;
  }

  article.page div.shortlink {
    display: block;

    position: absolute;
    right: 12.5em;
    top: 8.75em;

    z-index: 1100;

    transform-origin: right top;
    transform: rotateZ(90deg) translate(calc(100% - 3.25em), -11.25em);
  }

  article.page > p span.directCommentLink,
  article.page section.translations > p span.directCommentLink {
    right: -40px;
    bottom: -3px;

    padding: 8px 0 0 105px;

    width: 35px;
    height: 32px;

    opacity: 0.5;

    font-size: inherit;

    background-position: 0 -40px;

    transition: opacity 0.5s;
  }

  article.page section.translations.original > p span.directCommentLink {
    left: -40px;

    padding: 8px 89px 0 16px;

    background-position: 0 0;
  }

  article.page p span.directCommentLink:hover {
    opacity: 1 !important;
  }

  article.page span.directCommentLink a {
    color: #6F6F6F;

    transition: color 1s;
  }

  article.page span.directCommentLink:hover a {
    text-decoration: none;
     color: #009EE3;
  }

  article.page aside.sidenote {
    display: block !important;
    left: auto;
    right: 2.5em;

    width: 7.5em;
    height: auto !important;

    z-index: 1100;

    /*margin-top: -1.5em !important;*/
    padding: 0;

    color: inherit;
    background-color: inherit;
    box-shadow: none;
  }

  @keyframes flashSidebox {
    from {
      background-color: inherit;
    }

    25% {
      background-color: #009EE3;
    }

    to {
      background-color: inherit;
    }
  }

  article.page aside.sidenote.flash,
  article.page aside.infobox.flash {
    animation: flashSidebox 1s linear;
  }

  article.page section.translations.translation aside.sidenote {
    right: -10em;
  }

  article.page aside.sidenote span.indicator {
    display: inline-block;
    float: none;

    margin: 0 0.25ex 0 0;

    min-width: auto;

    font-size: 1.25em;
    font-family: "Times New Roman", "Liberation Serif", liberation_serif, serif;
    font-weight: normal;
    color: #009EE3;
  }
}

@media (max-width: 599px) {
  article.page p span.directCommentLink {
    opacity: 1 !important;
  }
}

.page footer,
.page div.topBorder {
  margin-top: 1em;
  padding-top: 1em;
  border-top: 2px solid #000000;
}

@media (min-width: 600px) {
  .page footer,
  .page div.topBorder {
    margin-top: 3em;
  }
}

.page ul.interArticleLinks {
  display: table;

  margin: 0;
  padding: 0;

  width: 100%;

  text-align: center;
}

.page ul.interArticleLinks li {
  display: table-cell;

  min-width: 5em;

  vertical-align: middle;
}

.page ul.interArticleLinks li.first {
  width: 45%;

  text-align: right;
}

.page ul.interArticleLinks li.last {
  width: 45%;

  text-align: left;
}

.page ul.interArticleLinks li a {
  display: block;
  position: relative;

  color: inherit;
}

.page ul.interArticleLinks li:hover a {
  color: #009EE3;
  text-decoration: none;
}

.page ul.interArticleLinks li.first a {
  padding-left: 1.5em;
}

.page ul.interArticleLinks li.last a {
  padding-right: 1.5em;
}

.page ul.interArticleLinks li.first a:before,
.page ul.interArticleLinks li.last a:before {
  position: absolute;
  top: 50%;

  margin-top: -0.625em;

  font-family: FontAwesome;
  font-size: 2em;
}

.page ul.interArticleLinks li.first a:before {
  content: '\f100';

  left: 0;
}

.page ul.interArticleLinks li.last a:before {
  content: '\f101';
  right: 0;
}

.page ul.interArticleLinks li span.title {
  display: none;
  font-style: italic;
}

.page ul.interArticleLinks li span.unimportant {
  display: inline-block;
  width: 100%;

  text-align: center;
}

@media (min-width: 600px) {
  .page ul.interArticleLinks li span.title {
    display: inline;
  }
}

article.teaser div.content {
  position: relative;

  margin-top: 2em;

  height: 15em;

  overflow: hidden;
}

article.teaser div.content:after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;

  width: 100%;
  height: 2em;

  background: linear-gradient(to bottom, transparent, white 75%);
}

@media (min-width: 600px) {
  article.teaser {
    box-sizing: border-box;
    display: inline-block;
    padding: 0 0.5em;
    width: 50%;

    vertical-align: top;
  }

  article.teaser > h2:before {
    content: none;
  }

  article.teaser:first-of-type {
    padding-left: 0;
  }

  article.teaser:last-of-type {
    padding-right: 0;
  }

  article.teaser:nth-of-type(1):nth-last-of-type(3),
  article.teaser:nth-of-type(2):nth-last-of-type(2),
  article.teaser:nth-of-type(3):nth-last-of-type(1) {
    width: 33.33%;
  }

  article.teaser:nth-of-type(1):nth-last-of-type(4),
  article.teaser:nth-of-type(2):nth-last-of-type(3),
  article.teaser:nth-of-type(3):nth-last-of-type(2),
  article.teaser:nth-of-type(4):nth-last-of-type(1) {
    width: 25%;
  }

  article.teaser:nth-of-type(1):nth-last-of-type(5),
  article.teaser:nth-of-type(2):nth-last-of-type(4),
  article.teaser:nth-of-type(3):nth-last-of-type(3),
  article.teaser:nth-of-type(4):nth-last-of-type(2),
  article.teaser:nth-of-type(5):nth-last-of-type(1) {
    width: 20%;
  }
}

article.teaser.webExclusive h2:before {
  content: '\f005  ';

  font-family: FontAwesome;
  font-size: 80%;
}

article.teaser p.continueLink {
  text-align: right;
}

article section.translations p.language {
  margin-bottom: 0.5em;
  text-align: center;
  font-family: weblysleek_uilight, "Segoe UI", sans-serif;
  font-weight: 300;
}

article section.translations p.language:before {
  content: '\f11d  ';
  font-family: FontAwesome;
}

article section.translations:last-of-type p.language:before {
  content: '\f024  ';
}

article section.translations + section.translations {
  position: relative;
  margin-top: 3em;
  padding-top: 3em;
}

article section.translations + section.translations:before {
  content: '\f1ab';
  display: block;
  position: absolute;
  top: -0.5em;
  left: 50%;
  left: calc(50% - 0.4em);

  color: #000000;
  font-family: FontAwesome;
  font-size: 2em;
}

@media (min-width: 700px) {
  article section.translations {
    box-sizing: border-box;
    display: inline-block;
    padding-right: 0.5em;
    width: 50%;

    vertical-align: top;
  }

  article section.translations + section.translations {
    margin-top: 0;
    padding: 0 0 0 0.5em;
  }

  article section.translations + section.translations:before {
    content: none;
  }
}

article.comment > header {
  margin-bottom: 1em;
  padding-top: 0;

  transition: height 1s, margin-bottom 1s;
}

article.comment.noTransition > header {
  transition: none;
}

article.comment > header h1 {
  margin-bottom: 0;
}

article.comment > header address,
article.comment > header time {
  display: inline-block;
  font-size: 0.8em;
}

article.comment > header address {
  font-style: normal;
}

article.comment > header address:before {
  content: '\f14b  ';
  font-family: FontAwesome;
}

article.comment > header time {
  margin-left: 1em;
}

article.comment > header time:before {
  content: '\f017  ';
  font-family: FontAwesome;
}

article.comment > div.content {
  overflow: hidden;

  transition: height 1s, color 1s;
}

article.comment.noTransition > div.content {
  transition: none;
}

section.comments form + article.comment,
article.comment + article.comment {
  margin-top: 1.5em;
  padding-top: 1em;
  border-top: 2px solid #000000;

  transition: border-top-color 1s;
}

section.comments form + article.comment.noTransition,
article.comment + article.comment.noTransition {
  transition: none;
}

section.comments form {
  position: relative;
}

section.comments form div.mask {
  box-sizing: border-box;
  position: absolute;
  left: 0;
  top: 0;

  padding-top: 5em;

  width: 100%;
  height: 100%;

  z-index: 100;

  background-color: #FFFFFF;
  background-color: rgba(255, 255, 255, 0.90);
}

article.comment.quip-unapproved {
  color: #6F6F6F;
}

article.comment.minimized > header,
article.comment.maximized > header {
  position: relative;
}

article.comment.minimized > header h1,
article.comment.maximized > header h1 {
  cursor: pointer;

  transition: font-size 1s;
}

article.comment.minimized.noTransition > header h1,
article.comment.maximized.noTransition > header h1 {
  transition: none;
}

article.comment.minimized > header:after,
article.comment.maximized > header:after {
  display: block;
  position: absolute;
  top: 0;
  right: 0;

  font-family: FontAwesome;
  cursor: pointer;
}

article.comment.maximized > header:after {
  content: '\f147';
}

article.comment.minimized > header:after {
  content: '\f196';
}

article.comment.quip-unapproved > header:after {
  content: none;
}

article.comment.minimized + article.comment.minimized {
  border-top-color: #FFFFFF;
}

article.comment.minimized > header,
article.comment.quip-unapproved > header {
  margin-bottom: 0;

  /* Overrides a height set directly on the element by JavaScript */
  height: 1.5em !important;
}

article.comment.minimized > header h1,
article.comment.minimized > header address,
article.comment.minimized > header time,
article.comment.quip-unapproved > header h1,
article.comment.quip-unapproved > header address,
article.comment.quip-unapproved > header time{
  display: inline-block;
}

article.comment.minimized > header h1,
article.comment.quip-unapproved > header h1 {
  font-size: 120%;
  margin-right: 0.5em;
}

article.comment.minimized > div.content,
article.comment.quip-unapproved > div.content {
  position: relative;

  /* Overrides a height set directly on the element by JavaScript */
  height: 3.6em !important;

  color: #6F6F6F;
}

article.comment.minimized > div.content:after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;

  width: 100%;
  height: 1em;

  background: linear-gradient(to bottom, transparent, white);
}

article.comment.minimized.short > div.content,
article.comment.quip-unapproved > div.content {
  /* Overrides a height set directly on the element by JavaScript */
  height: auto !important;
}

article.comment.minimized.short > div.content:after,
article.comment.quip-unapproved > div.content:after {
  content: none;
}

article.comment div.content span.unapproved {
  display: block;

  font-style: italic;
}

article.comment a.continueLink {
  display: none;

  text-align: right;
  color: #009EE3;
}

article.comment.minimized a.continueLink {
  display: block;
}

article.comment.quip-unapproved a.continueLink,
article.comment.clicked a.continueLink {
  display: none;
}

body > footer {
  margin-top: 50px;
  padding: 1em 0;

  background-color: #080820;
  background-color: rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 2px 5px #000000;
  text-shadow: 3px 3px 2px #000000;
}

body > footer div.footerFrame {
  box-sizing: border-box;

  margin: 0 auto;
  padding: 0 1.25em;

  max-width: 900px;
}

body > footer ul {
  box-sizing: border-box;

  margin: 0 0 1em 50%;
  padding-left: 1em !important;

  border-left: 1px solid #FFFFFF;
}

body > footer ul:first-child {
  position: relative;
  left: 1px;
  list-style-type: none;

  float: left;

  margin-left: 0;
  margin-bottom: 0;
  padding: 0 1em 0 0 !important;

  width: 50%;

  border-left: none;
  border-right: 1px solid #FFFFFF;
}

@media (min-width: 600px) {
  body > footer ul {
    margin-left: 33%;
  }

  body > footer ul:first-child {
    width: 33%;
  }
}

body > footer li {
  padding: 0.25em 0;
}

body > footer ul.issues li:before {
  content: '\f02d  ';

  padding-right: 1ex;

  font-family: FontAwesome;
}

body > footer div.clearFix {
  clear: both;
}

body > footer div.fixedLinks {
  position: fixed;
  right: 0;
  bottom: 0;
  padding: 0.5em 1em;

  z-index: 10000;

  opacity: 1;

  color: #FFFFFF;
  background-color: #000000;
  background-color: rgba(0, 0, 0, 0.75);
  border-radius: 0.5em 0 0 0;

  transition: opacity 1s;
}

body > footer div.fixedLinks.hidden {
  opacity: 0;
}

body > footer div.fixedLinks a:hover {
  text-decoration: none;
}

body > footer div.fixedLinks span.text {
  display: none;
}

@media (min-width: 600px) {
  body > footer div.fixedLinks span.text {
    display: inline;
    padding-left: 0.25em;
  }
}

body div.slideshowBackground {
  display: table;
  position: fixed;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  z-index: 10000;
  cursor: -webkit-zoom-out;
  cursor: zoom-out;

  background-color: #000000;
  background-color: rgba(0, 0, 0, 0.75)
}

body div.slideshowBackground:before {
  content: '\f00d';

  position: absolute;
  top: 0.5em;
  right: 0.5em;

  cursor: pointer;

  font-family: FontAwesome;
}

body div.slideshowBackground div {
  display: table-cell;

  text-align: center;
  vertical-align: middle;
}

body div.slideshowBackground img {
  display: inline;
  box-sizing: border-box;

  max-width: 95vw !important;
  max-height: 95vh !important;

  /* Fix for some IE's, which don't keep the image's ratio if width and height
     are not explicitly set to auto. */
  width: auto;
  height: auto;

  border: 2px solid #FFFFFF;
}

div.startsite {
  overflow: hidden;
}

div.startsite div.welcomeText {
  margin: 2em 1em 4em 1em;

  text-align: center;
}

div.startsite p.logo img {
  margin-bottom: 2em;
  max-width: 100%;
}

div.startsite div.issues,
div.startsite div.asides {
  box-sizing: border-box;
  padding: 0 1em;
}

div.startsite h1 {
  font-size: 2em;
}

div.startsite div.issues ol {
  list-style: none;

  margin: 0;
  padding: 0;
}

div.startsite div.issues li + li {
  padding-top: 1em;
}

div.startsite div.issues li a {
  text-decoration: none;
}

div.startsite div.issues h1 {
  display: none;
}

div.startsite div.issues li {
  clear: right;

  text-align: right;
}

div.startsite div.issues li img {
  float: right;

  margin-left: 1em;
}

div.startsite div.issues li div.description h2 {
  margin: 0;
  font-size: 1.5em;
}

div.startsite div.issues li div.description ul {
  display: none;
  list-style-type: none;

  font-size: 0.8em;
}

div.startsite div.issues li div.description ul li {
  display: inline;
  padding-left: 1ex;
}

div.startsite div.issues li div.description ul li small {
  display: none;
}

div.startsite div.issues li div.description ul li:before {
  content: '\2009\2009';
  white-space: nowrap;
}

div.startsite div.asides {
  clear: right;

  padding-top: 3em;
}

div.startsite div.asides li {
  display: none;
}

div.startsite div.asides li:nth-child(1),
div.startsite div.asides li:nth-child(2),
div.startsite div.asides li:nth-child(3),
div.startsite div.asides li:nth-child(4),
div.startsite div.asides li:nth-child(5) {
  display: block;
}


div.startsite div.asides a.moreLink {
  display: block;

  margin: -1em 0 1em 0;

  text-align: right;
}

@media (min-width: 700px) {
  div.startsite div.issues {
    float: left;

    padding: 0 1.5em 0 0;

    width: 50%;
  }

  div.startsite div.issues h1 {
    display: block;

    text-align: right;
  }

  div.startsite div.asides {
    margin-left: 50%;
    padding: 0 0 0 1.5em;

    width: 50%;
  }
}

div.startsite div.internationalArticles ul,
div.startsite div.comments ol {
  box-sizing: border-box;

  margin: 1em 0;
  padding: 0;

  list-style-type: none;
}

div.startsite div.internationalArticles li {
  padding: 0.25em 0 0.25em 1.2em;
  text-indent: -1.2em;
}

div.startsite div.internationalArticles li:before {
  content: '\f15c  ';

  font-family: FontAwesome;
}

div.startsite div.internationalArticles li a {
  text-decoration: none;
}

div.startsite div.internationalArticles li:hover span.title {
  text-decoration: underline;
}

div.startsite div.internationalArticles span.language {
  padding: 0.25ex 1ex;

  text-transform: uppercase;

  font-size: 80%;
  font-weight: bold;
  font-variant: small-caps;

  border-radius: 0.5ex;
  border: 1px solid #FFFFFF;
}

div.startsite div.comments li {
  margin: 0;
  padding: 0;
}

div.startsite div.comments li + li {
  margin-top: 1em;
  padding-top: 1em;
  border-top: 1px solid #BBBBFF;
}

div.startsite div.comments li:first-child {
  margin-top: 0;
}

div.startsite div.comments li a {
  text-decoration: none;
}

div.startsite div.comments li p a:after {
  content: ' \f101 ';
  
  padding-left: 0;

  font-family: FontAwesome;

  transition: padding-left 1s;
}

div.startsite div.comments li:hover p a:after {
  padding-left: 1em;
}

div.startsite div.comments a.header {
  display: block;
  margin-bottom: 0.25em;
}

div.startsite div.comments a.header:before {
  content: '\f14b  ';
  font-family: FontAwesome;
}

div.startsite div.comments a.header address {
  display: inline;
  font-style: normal;
}

div.startsite div.comments p {
  margin: 0;
}

@media (min-width: 700px) {
  div.startsite div.issues li div.description {
    padding-top: 40px;

    height: 110px;
    overflow: hidden;

    transition: padding-top 1s, height 1s;
  }

  div.startsite div.issues li div.description ul {
    display: block;

    opacity: 0;

    transition: opacity 0.5s 0s;
  }

  div.startsite div.issues li:hover div.description {
    padding-top: 0;
    height: 150px;
  }

  div.startsite div.issues li:hover div.description ul {
    opacity: 1;

    transition: opacity 0.75s 0.25s;
  }
}