/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* Copyright (C) 2011-Present, Firenewt Networks.  All rights reserved.      */
/* Void where prohibited by law.                                             */
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

html,
body {
  width: 100%;
  height: 100%;  
  padding: 0;
  margin: 0;
  font-family: Typewriter, 'Times New Roman', Times, serif;
  font-size: 18px;
  color: var(--fg-color);
  background-color: var(--bg-color);
  scroll-behavior: smooth;
}

* {
  box-sizing: border-box;
}


/* Fonts */

/* Typewriter font: https://www.onlinewebfonts.com/download/a67d98abe8980caaa1768b6e27b323c6 */

@font-face {
  font-family: Typewriter;
  src: url("/app/lib/font/Typewriter.ttf"); /* TTF file for CSS3 browsers */
}

@font-face {
  font-family: Typewriter;
  src: url("/app/lib/font/Typewriter.eot"); /* EOT file for IE */
}

/* misc */

hr.breaker {
  width: 50%;
  margin: 10px auto;
  clear: both;
}

/* link */

a[href],
a[href]:visited {
  color: var(--link-fg-color);
  text-decoration: none;
}

a[href]:hover,
a[href]:focus,
a[href]:active {
  color: var(--link-fg-color2);
  text-decoration: underline dotted var(--link-fg-color2);
}

a[href] > div,
a[href] > img {
  border: none;
  text-decoration: none !important;
}

/* layout */

header, main, footer {
  width: 100%;
  margin: 0 auto;
  padding: 5px;
/*
  border-width: 0 1px 0 1px;
  border-style: dotted;
  border-color: var(--bd-color);
*/
}

@media only screen and (min-width: 900px) {
  header, main, footer {
    width: 90%;
  }
}

/* header */

header {
  text-align: center;
  font-variant: small-caps;
  color: var(--header-fg-color);
  background-color: var(--header-bg-color);
  background-image: var(--header-bg-image);
  /* border-bottom: 1px solid var(--header-bd-color); */
}


/* footer */

footer {
  /* margin-top: 20px; */
  color: var(--footer-fg-color);
  background-color: var(--footer-bg-color);
  border-top: 1px solid var(--footer-bd-color);
}


/* main */

main {
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: center;
  color: var(--main-fg-color);
  background-color: var(--main-bg-color);
}


/* Content */

hr.sep {
  margin: 30px auto;
  width: 50%;
  height: 1px;
  background: linear-gradient(to right, transparent, currentColor, transparent);
  opacity: .4;
}

.badgeGrp {
  text-align: center;
  font-variant: small-caps;
}

.badgeGrp > div {
  display: inline-block;
  width: 30%;
}

#Counter, #Verses, #myWewaAffLink {
  display: inline-block;
  vertical-align: middle;
  width: fit-content;
  padding: 5px;
  text-align: center;
  color: #DDD;
  background-color: #000;
  border: 1px solid #000;
  border-radius: 5px;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.35));
}

#myWewaAff img {
  height: auto;
  width: 100px;
  margin: 0 auto;
}

#Copyright {
  height: 40px;
  margin: 0;
  padding: 0;
  text-align: left;
  font-family: 'Times New Roman', Times, serif;
}


/* #Title */

#Title,
#Title:visited {
  display: inline-block;
  vertical-align: middle;
  font-size: 48px;
  font-family: Typewriter, "Times New Roman", Times, serif;
  letter-spacing: 8px;
  text-decoration: none;
  color: var(--title-fg-color);
  border-bottom: 1px solid var(--bd-color);
}

#Title:hover,
#Title:focus,
#Title:active {
  text-decoration: none;
  color: var(--title-fg-color);
}

#Title .tm {
  vertical-align: super;
  font-size: 0.5em;
}

/* #News */

#News {
  display: inline-block;
  vertical-align: top;
  text-align: center;
}

#News .header {
  padding: 5px;
  text-align: center;
  font-size: 1.5em;
  font-family: Typewriter, 'Times New Roman', Times, serif;
  font-variant: small-caps;
  font-weight: 900;
  color: var(--page-header-fg-color);
  background-color: var(--page-header-bg-color);
  background-image: var(--page-header-fade);
  border: 1px solid var(--page-header-bd-color);
  border-radius: 5px 5px 0 0;
  /* border-bottom: 1px solid var(--page-header-bd-color); */
}

#News img.cover {
  width: 90%;
  max-width: 540px; /* 90% of 600px */
  aspect-ratio: 900 / 1164;
  height: auto;
  object-fit: cover;
  border: 1px solid black;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.35));
}

/* #List, #Recent */

#List,
#Recent {
  display: inline-block;
  vertical-align: top;
}

#List .header,
#Recent .header {
  padding: 5px;
  text-align: center;
  font-size: 1.2em;
  font-variant: small-caps;
  color: var(--page-header-fg-color);
  background-color: var(--page-header-bg-color);
  background-image: var(--page-header-fade);
  border: 1px solid var(--page-header-bd-color);
  border-radius: 5px 5px 0 0;
}

#List .body,
#Recent .body {
  padding: 5px;
  text-align: left;
  border: 1px solid var(--page-header-bd-color);
}

#List .body ul,
#Recent .body ul {
  margin-block-start: 0.5em;
  margin-block-end: 0.5em;
  padding-inline-start: 20px;
  list-style-type: disc;
}

#List .body ul li,
#Recent .body ul li {
  font-size: 1.1em;
  line-height: 1.2em;
}

#List .current,
#Recent .current {
  list-style-type: circle;
}

#List .list,
#Recent .list {
  color: inherit;
  background-color: var(--main-bg-color);
  border: 1px solid var(--page-header-bd-color);
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.35));
  border-radius: 5px 5px 0 0;
}

#Recent .list li,
#List .list li {
  word-break: normal;
  overflow-wrap: normal;
  hyphens: auto;
}

#Recent .header,
#List .header {
  border: 1px solid var(--page-header-bd-color);
}

/* #Recent */

#Recent {
  width: 215px;
  margin: 10px;
}

#Recent .latest,
#Recent .all {
  width: 90%;
  font-size: 0.9rem;
  text-align: center;
  margin-bottom: 8px;
}

/* #List */

#List {
  max-width: 600px;
  margin: 10px;
}

/* #Issue */

#Issue {
  display: inline-block;
  vertical-align: top;
  text-align: center;
  max-width: 600px;
  margin: 10px;
  border-bottom: 1px dotted var(--bd-color);
}

#Issue .header {
  padding: 5px;
  margin-bottom: 20px;
  text-align: center;
  text-decoration: none;
  color: var(--page-header-fg-color);
  background-color: var(--bg-color);
  background-image: var(--page-header-fade);
  border: 1px solid var(--page-header-bd-color);
}

#Issue .title {
  font-size: 1.2em;
  font-variant: small-caps;
}

#Issue .body {
  text-align: center;
}

#Issue a.page[href],
#Issue a.page[href]:visited,
#Issue a.page[href]:hover,
#Issue a.page[href]:focus,
#Issue a.page[href]:active {
  display: inline-block;
  padding-right: 10px;
  padding-bottom: 20px;
  text-decoration: none;
  color: transparent;
  border: none;
}

#Issue a.page[href] > .header,
#Issue a.page[href]:visited > .header {
  width: 180px;
  padding: 5px;
  text-align: center;
  font-size: 1.2em;
  font-variant: small-caps;
  text-decoration: none;
  color: var(--page-header-fg-color);
  background-color: var(--bg-color);
  background-image: var(--page-header-fade);
  border: 1px solid var(--page-header-bd-color);
}

#Issue a.page[href]:hover > .header,
#Issue a.page[href]:focus > .header,
#Issue a.page[href]:active > .header {
  text-decoration: none;
  background-image: var(--page-header-fade2);
}

#Issue a.page[href] > .thumb,
#Issue a.page[href]:visited > .thumb {
  /* width: 180px; */
  width: calc(calc(600px)  / 3);
  width: 185px;
  height: auto;
  padding: 0;
  margin: 0;
  border: 2px solid var(--page-thumb-bd-color);
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.35));
  text-decoration: none;
}

#Issue a.page[href]:hover > .thumb,
#Issue a.page[href]:focus > .thumb,
#Issue a.page[href]:active > .thumb {
  text-decoration: none;
  border: 2px dotted var(--page-thumb-bd-color2);
}

#Issue .nopage {
  text-decoration: none;
  background-color: var(--page-missing-bg-color);
}

#Issue .noissue {
  margin-bottom: 15px;
  text-align: center;
  font-size: 1.5em;
}

/* #Page */

body.page header .title {
  font-size: 1.5em;
}

#Page {
  vertical-align: top;
  border: 1px solid black;
  margin-bottom: 10px;
}

#Page > header {
  vertical-align: top;
  text-align: center;
}

#Page > header .title {
  display: inline-block;
  vertical-align: top;
  width: 32%;
}

#Page > header .issue {
  display: inline-block;
  vertical-align: top;
  width: 32%;
}

#Page > header .ctrl {
  display: inline-block;
  vertical-align: top;
  width: 32%;
}

#Page > main {
  background-color: black;
}

#Page > main .body {
  vertical-align: top;
  max-width: 900px;
  margin: 0 auto;
  background-color: white;
}

#Page > main .body img {
  width: 100%;
  height: auto;
}

#Page > footer {
  color: white;
  background-color: black;
}

#Page > footer .content {
  border-top-color: white;
}

#Page > footer .tracker {
  display: none;
}

#Page > footer .counter {
  display: none;
}

/* #About */

#About {
  display: inline-block;
  vertical-align: top;
  max-width: 450px;
  padding: 5px;
  text-align: justify;
  /* border-bottom: 1px solid black; */
}

/* #Shop */

#Shop {
  display: inline-block;
  vertical-align: top;
  max-width: 350px;
  padding: 5px;
}

#Shop a[href] .shirt,
#Shop a[href]:visited .shirt {
  height: 200px;
  width: 200px;
  margin: 10px auto;
  background-color: transparent;
  background-image: url('/app/img/tshirt1.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 200px 200px;
  border: 2px dashed var(--shop-bd-color);
}

#Shop a[href]:focus .shirt,
#Shop a[href]:hover .shirt,
#Shop a[href]:active .shirt {
  background-image: url('/app/img/tshirt2.jpg');
  border: 2px dashed var(--link-fg-color);
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* EOF */