:root {
    --light: #F6F0BC;
    --midlight: #B1B990; 
    --middark: #374340;
    --dark: #28312F;
    --accent1:#397339; /* on light */
    --accent2:#89A149; /* on dark */
    --bgimg: url(/img/res/bg/dimbg.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/dim.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;
  font-family: Verdana;
  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", sans-serif;
  color: var(--light);
  background-color: var(--middark);
  border-bottom: 2px solid var(--accent2);
}

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

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

.dropdown-content a:hover,
.nav a:hover,
.right a:hover,
.left a:hover {
  text-decoration: none;
  font-family: Verdana;
  color: var(--light);
  background-color: var(--middark);
  border-color: var(--middark);
}

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

/* body */

/* code styling */

.simplecontainer  {
  background-color:var(--middark);
  color:var(--light);
  border-radius:20px;
}

/* 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 ul {
  list-style-type: "~";
}

.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", sans-serif;
  letter-spacing: 2px;
}

.content h3 {
  color: var(--midlight);
  background:var(--middark);
  background-image: none;
  font-weight: initial;
  border-radius:0 25px 25px 0;
  font-family: "sour gummy", 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", sans-serif;
}
.content a {
  color: var(--midlight);
}
.content a:hover {
  text-decoration: none;
  font-style: italic;
}
.content a:visited {
  color: var(--midlight);
}

/* recent blog posts */
.updtbl th {
  background-color: var(--middark);
  background-repeat: repeat;
  font-family: "sour gummy", 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(--dark);
  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);
  border-color:var(--middark);
  text-align: left;
  border-style:double;
}

.flavortable tr {
  border: none;
  background-image: none;
  color: var(--light);
}

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

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

/* 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;
}

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

.blognavbar a:hover {
  color: var(--dark);
  background-color: var(--midlight);
  font-decoration:underline;
  font-style:initial;
}

.blognavbar .inactive {
  color:var(--middark);
  background-color:var(--dark);
  border-color: var(--middark);
  border-style:dashed;
}

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

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

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

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

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

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

/* art posts */

details {
  background-color:var(--dark);
  color:var(--light);
  border:1px solid var(--middark);
}

details:hover {
  background-color:var(--middark);
}

.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(--middark);
  border: none;
  color: var(--light);
}
.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(--dark);
  color: var(--light);
  border-top: 2px solid black;
  border-bottom: 2px solid black;
}

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

.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);
  border-color:var(--midlight);
}

.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 {
  font-family: Verdana;
  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);
}