// ====================================================================
// Tankazon minisite main stylesheet
//
//   - much of this css was originally written between 2003-2008
//   - reformatted with Prettier
//   - converted to .scss
//
// ====================================================================

body {
  margin: 0;
  padding: 0;
  background: #000000;
  font-size: 0.875rem;
  line-height: 1.5em;
  font-family: Arial, Helvetica, sans-serif;
  color: #afafaf;
}

/* reset */
p,
pre,
blockquote,
address,
dl,
dt,
dd,
h1,
h2,
h3,
h4,
h5,
form,
label,
fieldset {
  margin: 0;
  padding: 0;
}
input,
select,
textarea {
  font: 11px Arial, sans-serif;
  color: #333;
  line-height: 1.2em;
}
table,
caption,
td,
th {
  margin: 0;
  padding: 0;
  font-size: 12px;
  line-height: 1.3em;
  font-weight: normal;
}
img {
  display: inline;
}

/* base spacing */
section {
  padding: 0;
  margin: 0 0 2em;
}
.article {
  width: 90%;
}
p,
ul {
  margin: 0 0 1em;
}

/* colors */
.red {
  color: #cf8f20;
}
.green {
  color: #20cf20;
}
.rare {
  color: #cccc00;
}
.magic {
  color: #33ccff;
}

b {
  color: #cfcfcf;
}
em {
}
small {
  font-size: 8pt;
}
pre {
  font-family: courier, monospace;
  color: #9e9e9e;
  font-size: 10pt;
}

/* headings */
h1,
h2,
h3,
h4,
h5 {
  font-weight: bold;
  line-height: 1.1em;
  margin: 0 0 0.5em;
}
h2 {
  font-size: 16px;
}
h3 {
  font-weight: 500;
  color: #b4ac92;
}

/* lists */
ul {
  position: relative;
  margin-left: 16px;
  padding-left: 6px;
}
li {
  padding-left: 5px;
  margin: 0 0 0.8em 0;
}

/* links */
a {
  color: #b4ac92;
  font-family: Arial, Helvetica, sans-serif;
  text-decoration: none;
}
a:visited {
  color: #b4ac92;
}
a:active {
  color: #ffffff;
}
a:hover {
  color: #ffffff;
}

a.sma {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-size: 8pt;
  text-decoration: underline;
}
a.sma:link {
  color: #b4ac92;
}
a.sma:visited {
  color: #928a72;
}
a.sma:active {
  color: #ffffff;
}
a.sma:hover {
  color: #ffffff;
}

/*
table   { margin:0 0 2em; color:#afafaf; font-size:13px; }
tr.head td { padding:4px 8px; background:#400000; color:#c0c080; font-weight:normal; line-height:1.3em; }
tr      { background:#000; line-height:11pt; }
td      { font-size:13px; background:#200000; padding:3px 8px; }
tr.head { background-color:#400000; color:#c0c080; font-weight:normal; line-height:12pt; }
.centered td { text-align:center; }
*/

/* wiki tables */
.tr-Table {
  border-spacing: 0;
  margin: 0 0 2em;
  color: #afafaf;
  font-size: 13px;
}
.tr-Table tr {
  background: #000;
  line-height: 11pt;
}
.tr-Table td {
  font-size: 13px;
  background: #200000;
  padding: 3px 8px;
}
.tr-Table tr.head {
  background-color: #400000;
  color: #c0c080;
  font-weight: normal;
  line-height: 12pt;
}
.tr-Table .centered td {
  text-align: center;
}
.tr-Table tr.head td {
  padding: 4px 8px;
  background: #400000;
  color: #c0c080;
  font-weight: normal;
  line-height: 1.3em;
}

/* IAS breakpoint tables */
.tr-Table-fpa {
  text-align: center;
  border-spacing: 1px;
}
.tr-Table-fpa td {
  text-align: center;
}

/* misc */
em.v {
  color: #8c8;
} /* patch version */

.bold {
  font-weight: bold;
}
.resetbg {
  background-color: black;
  color: #afafaf;
  font-weight: normal;
  line-height: normal;
}

/* site layout */
#header {
  margin: 0;
  padding: 0;
  background: #000 url(../img/hr-gold.gif) repeat-x 0 100px;
  width: 100%;
  height: 117px;
}
#header h1 {
  display: block;
  position: absolute;
  left: 25px;
  top: 9px;
  width: 309px;
  height: 79px;
}
#header h1 a {
  border: none;
  display: block;
}
#header h1 img {
  display: block;
  border: 0;
}
#header p.sub {
  margin: 0;
  padding: 0;
  position: absolute;
  left: 85px;
  top: 69px;
}
#header p.sub span {
  color: #71b643;
}

#main-container {
  position: relative;
  width: 100%;
}

#sidebr {
  position: absolute;
  left: 0;
  top: 0;
  width: 144px;
  padding: 15px 0 0 0;
  line-height: 1.3em;
}
#sidebr h2 {
  text-align: center;
  margin: 0 0 4px;
  padding: 0;
  color: #bab197;
  font: 16px/1em Arial, sans-serif;
}
#sidebr ul {
  margin: 0 0 1em;
  padding: 0;
  list-style: none;
}
#sidebr li {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
}
#sidebr li a {
  display: block;
  text-align: center;
  text-decoration: none;
  outline: none;
}
#sidebr li a:link {
  color: #b4ac92;
}
#sidebr li a:visited {
  color: #928a72;
}
#sidebr li a:active {
  color: #fff;
}
#sidebr li a:hover {
  color: #fff;
}
#sidebr li a.active {
  color: #fff;
}

#main {
  margin: 0 20px 0 164px;
  padding: 15px 0 0 0;
}

/* basic layout */
div.clear {
  clear: both;
  overflow: hidden;
  height: 0;
}
div.col {
  float: left;
  margin: 0 20px 0 0;
}
div.col-50 {
  width: 45%;
}

/* Item Bonuses */
table.itb {
  margin: 10px 40px 20px;
}
table.itb th,
table.itb td {
  padding: 1px;
  font-size: 13px;
  line-height: 1.1em;
}
table.itb th {
  background: #000;
  width: 340px;
  text-align: left;
}
table.itb td {
  background: #000;
}

.set {
  color: #00c400;
  font-weight: bold;
}
.uni {
  color: #928a70;
  font-weight: bold;
}
.run {
  color: #9658b0;
  font-weight: bold;
}
.gem {
  color: #d7621c;
  font-weight: bold;
}

.bo1 {
  color: #4850b8;
}
.gld {
  color: #908858;
  font-weight: bold;
}

/* super uniques */
#tsu td em {
  color: #888;
  font-size: 70%;
}
#tsu td u {
  color: #4c4;
  font-size: 80%;
  text-decoration: none;
  margin-left: 0.5em;
}
#tsu .bold td {
  font-weight: bold;
} /* act boss */
#tsu .mmap {
  color: #888;
  font-size: 0.8em;
  display: inline-block;
  padding: 0 0 0 1em;
}

/* weapon tables */
tr.num {
  line-height: 10px;
}
td.base {
  color: #40cf40;
}
p.legend {
  font-size: 13px;
  margin-left: 1em;
}

/* misc. utilities */
.text-center {
  text-align: center;
}

// --------------------------------------------------------------------
// Runewizard page redirect (2021-03)
// --------------------------------------------------------------------
.RunewizardPage {
  a {
    text-decoration: underline;
  }

  &-screenshot {
    margin: 1rem 0 2rem 2rem;
  }
  &-screenshot a {
    display: block;
    padding: 4px;
    max-width: 800px;

    border: 2px solid #303030;

    &:hover {
      border-color: #5b841a;
    }
  }
  &-screenshot img {
    display: block;
    width: 100%;
  }
}
