:root {
  --light: #23260D;
  --midlight: #474500;
  --middark: #ede1b7;
  --dark: #FFFAEB;
  --accent: #696A19; /* on dark */
  --bgimg: url(/img/res/bg/ltile.png);
}

/* bg image fix */
.content,
.desc,
.right,
.left,
.nav,
.links,
h1,
h2,
.dropbtn,
.dropdown-content,
.subtitle,
.fancybox,
.updtbl th,
.drctry,
.reviewsummary td,
.reviewtitle td,
.reviewsummary td:nth-child(even),
.main h2,
.main h1,
.main h3,
.flavortable {
  background-image: none;
}

/* main */

/* banner should be ~900px, or i guess 878 to be exact, but background-size:cover can fix bigger banners (like pre-update). */
.banner {
  background-image: url("/img/res/ban/lm.png");
  background-size: cover;
  background-position: center center;
}

/* borders */
.main,
.nav {
  border-left: 4px double var(--dark);
}

.right {
  border-left: 1px solid var(--middark);
}

.right hr {
  border-color: var(--midlight);
  width: 50%;
}
.left {
  border-right: 1px solid var(--middark);
}
.content,
.main {
  border: none;
}

body {
  background-image: none;
  background-color: var(--dark);
  background-size: initial;
  background-image: var(--bgimg);
  background-repeat: repeat;
}

/* navi */

.nav,
.right,
.left {
  color: var(--light);
  background-color: var(--dark);
}
.subtitle {
  font-weight: initial;
  font-family: "sour gummy", Calibri, sans-serif;
  color: var(--light);
  background-color: var(--middark);
  border-bottom: 2px solid var(--accent);
}

.dropdown-content a,
.nav a,
.right a,
.left a,
.links a,
.droplinks a,
.dropbtn, .spcontent a {
  color: var(--midlight);
}

.dropbtn {
  background-color:var(--dark);
}

.links p,
.droplinks {
  border-color: var(--middark);
}

.dropdown-content a:hover,
.nav a:hover,
.right a:hover,
.left a:hover {
  color: var(--accent);
  border-color: var(--middark);
}

.dropbtn {
  border-color: var(--middark);
}

/* body */

/* directory under banner */

.drctry {
  background-color: var(--middark);
  color: var(--midlight);
}

.content {
  color: var(--light);
  background-color: var(--dark);
  background-image: none;
}

/* misc cosmetic */

.content h1 {
  background-color: var(--middark);
  color: var(--light);
  border-top:3px solid var(--midlight);
  border-bottom:3px solid var(--midlight);
  border-collapse: collapse;
  font-weight: initial;
  font-family: "sour gummy", Calibri, sans-serif;
  letter-spacing: 2px;
  margin-bottom: 15px;
}

.content h2 {
  color: var(--midlight);
  background-color: var(--middark);
  font-weight: initial;
  border-bottom: 1px solid var(--midlight);
  border-top: 1px solid var(--midlight);
  font-family: "sour gummy", Calibri, sans-serif;
  letter-spacing: 2px;
}

.content h3 {
  color: var(--midlight);
  background:var(--middark);
  border:none;
  background-image: none;
  font-weight: initial;
  border-radius:0 25px 25px 0;
  font-family: "sour gummy", Calibri, sans-serif;
  letter-spacing: 2px;
}

.content h4 {
  color: var(--midlight);
  border-bottom: 2px solid var(--middark);
  background-image: none;
  font-weight: initial;
  border-radius:initial;
  font-family: "sour gummy", Calibri, sans-serif;
}
.content a {
  color: var(--midlight);
}
.content a:hover {
  text-decoration: none;
  color: var(--accent);
}

/* recent blog posts */
.updtbl th {
  background-color: var(--middark);
  background-repeat: repeat;
  font-family: "sour gummy", Calibri, sans-serif;
  font-weight: initial;
}

.updtbl th a {
  color: var(--midlight);
}

.rectags a {
  padding: 10px;
  background-color: var(--middark);
  color: var(--midlight);
  border-radius: 20px;
}

.datestamp {
  background-color: var(--middark);
  color:var(--light);
  border-color: var(--middark);
}

/* blog table */

.rectags {
  background-image: none;
  color: var(--midlight);
  border-color: var(--middark);
  border-style: solid none;
  border-width: 2px 0;
}

.flavortable {
  background-color: var(--middark);
  color: var(--light);
  text-align: left;
}

.flavortable tr {
  border: none;
  background-image: none;
}

.flavortable h1 {
  background-color: var(--dark);
}

.flavbody {
  background-image: none !important;
  background-color: var(--dark);
  color: var(--light);
  border-top: 1px solid var(--midlight);
}

.flavortable td {
}

/* review tables */
.reviewsummary {
  border-color: var(--middark);
}
.reviewsummary td:nth-child(even),
.reviewsummary td:nth-child(even) {
  background-color: var(--middark);
  color: var(--light);
}
.reviewsummary td {
  background-color: var(--dark);
  color: var(--light);
}
.reviewtitle a,
.reviewtitle a:visited {
  color: var(--light);
}

/* generic 2-column code needed this */

.col h2,
.summ h2 {
  color: var(--light);
  background-color: var(--middark);
}

/* art gal */

.recentart img,
.randomart img {
  border-color: var(--midlight);
}

.randomart a, .randomart a:hover {
  background-color:transparent;
}

.tblnavbtnl,
.tblnavbtnr {
  color: var(--light);
}

.tblnavbtnl a,
.tblnavbtnr a {
  color: var(--midlight);
  background-color: var(--dark);
  border-color: var(--middark);
}

.tblnavbtnl a:hover,
.tblnavbtnr a:hover {
  color: var(--light);
  background-color: var(--middark);
  border-color: var(--midlight);
}

.artnav {
  border-top: 2px solid var(--middark);
  border-bottom: 6px double var(--dark);
  background-color: var(--middark);
}

.artdate {
    background-color:var(--middark);
    color:var(--midlight);
}

.flavortable tr {
  color: var(--light);
}

.flavortable {
  background-color: var(--middark);
  color: var(--light);
}

.sigimg {
  background-color:var(--midlight);
}

.flavtd {
  background-color: var(--middark);
  color:var(--light);
  border-color: var(--middark);
}

/* art posts */

details {
  border: 1px solid var(--midlight);
}

.titl {
  border-bottom: 2px solid var(--midlight);
}

.imgnav a,
.imgprev a,
.imgnext a {
  color: var(--light);
}
.imgnav a:visited,
.imgprev a:visited,
.imgnext a:visited {
  color: var(--midlight);
}

.imgnav,
.imgprev,
.imgnext {
  background-image: linear-gradient(
    var(--middark),
    var(--middark),
    var(--dark),
    var(--middark)
  );
  color: var(--light);
}

.desc {
  background-color: var(--dark);
  border: none;
  color: var(--midlight);
}
.imgnext {
  border-right: 3px double var(--dark);
}
.imgprev {
  border-left: 3px double var(--dark);
}

/* thumbs for art */

.thmtble {
  background-color: var(--dark);
}
.thmb {
  background-color: var(--middark);
  border: 4px solid var(--midlight);
  color: var(--light);
}
.thmb:hover {
  border: 4px double var(--light);
  background-color: var(--midlight);
}
/* ?? */

.sidelink a:hover,
.sidelink a {
  background-color: initial !important;
  color: var(--light);
}

/* front page box */

.fancybox {
  border: 4px solid var(--middark);
  background-color: var(--dark);
  color: var(--light);
  background-image: none;
}

.fancybox a {
  color: var(--midlight);
}

.fancybox a:visited {
  color: var(--light);
  font-style: italic;
}

/* foot */

.footer {
  background-color: var(--middark);
  color: var(--light);
}

.footer a {
  color: var(--accent);
}

.divider {
  border-color: var(--middark);
}

/* comments shoutbox etc */

#c_widget {
  color: var(--light);
}

#c_widget button,
#c_widget input[type="submit"] {
  background-color: var(--middark);
  color: var(--light);
  border: 2px solid var(--dark);
}

#c_widget button:hover,
#c_widget input[type="submit"]:hover {
  color: var(--midlight);
  background-color: var(--dark);
}

#c_widget button:disabled,
#c_widget input[type="submit"]:disabled {
  opacity: 60%;
}
#c_widget button:disabled:hover,
#c_widget input[type="submit"]:disabled:hover {
  color: var(--light);
}

/* Input section */
#c_inputDiv {
  background-color: var(--dark);
}

#c_widgetTitle {
  font-style: italic;
  font-weight: bold;
  background-color: var(--middark);
  background-image: none !important;
  color: var(--light) !important;
  font-family: "sour gummy", Calibri, sans-serif;
  letter-spacing: 2px;
}

.c-input:focus {
  border: 1px solid var(--middark);
}

#c_submitButton {
  border: 1px solid var(--light);
}

#c_submitButton:hover {
  background-color: var(--middark);
  color: var(--midlight);
}

#c_replyingText {
  color: var(--light);
}

/* Comment section */
.c-comment {
  background-color: var(--middark);
}

.c-comment:nth-child(even) {
  background-color: var(--dark);
}
.c-reply {
  border-color: var(--dark);
  background-color: var(--middark);
}

.c-replyContainer {
  background-color: var(--dark);
}

.c-name {
  font-weight: bold;
}
.c-comment h3 {
  color: var(--light);
  background-color: var(--dark);
  border-color:var(--midlight);
}
.c-site {
  color: var(--midlight);
}

.c-site:hover {
  color: var(--light);
}

.c-timestamp {
  color: var(--midlight);
}

.c-text {
  color: var(--light);
}

/* special bold class */

.b {
  background-color:var(--middark);
  color:var(--midlight);
}

/* about table styling */

.abouttable th {
  background-color:var(--middark);
  color:var(--midlight);
}

form select {
  background-color:var(--middark);
  color:var(--light);
  border-radius:3px;
  border:1px solid var(--accent);
  padding:2px;
}

.arrow {
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent; 
  border-left:50px solid var(--dark); 
}

@media only screen and (max-width: 970px) {

  .arrow {
    border-left: 50px solid transparent;
    border-right: 50px solid transparent; 
    border-bottom:50px solid var(--dark);
  }

  .spimg img {
    width:300px;
    height:auto;
  }

}