/* default stylesheet for rulebook */

html {
  font-family: sans-serif;
}

#maincontent {
  padding-top: 30px;
  padding-left: 10px;
}

/* hidden elements (for compatibility with certain/older browsers */
.hide {
  display: none;
  visibility: hidden;
}

/* SIDE NAVIGATION MENU */
/* sidenav menu */
.sidenav {
  height: calc(100% - 60px); /* ensure the navbar does not keep going off the bottom of the screen! */
  width: 0; /* this opens with the JavaScript openNav() function */
  position: fixed; /* stays in place */
  z-index: 1; /* lies above other layers */
  top: 0; /* stay at the top of the page */
  left: 0;
  background-color: #111;
  overflow-x: hidden; /* disable horizontal scroll */
  scrollbar-width: thin;
  scrollbar-color: rgba(155, 155, 155, 0.7) transparent;
  padding-top: 60px; /* place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */
.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 20px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

/* change navigation links color on mouse-over (web only) */
.sidenav a:hover {
  color: #f1f1f1;
}

/* position and style the sidenav menu close button (top right corner) */
.sidenav .closebutton {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidenav {
    padding-top: 15px;
  }
  .sidenav a {
    font-size: 18px;
  }
}

/* +++ TOP NAVIGATION BAR +++ */
#topnavbar {
  background-color: #111;
  position: fixed; /* stuck in position */
  top: 0; /* stuck to top of page */
  left: 0;
  width: 100%;
  transition: top 0.3s; /* time to appear/disappear */
}

#topnavbar a,
#topnavbar span {
  float: left;
  display: flex;
  color: white;
  text-align: center;
  padding: 15px;
  text-decoration: none;
}

#topnavbar a:hover {
  background-color: #ddd;
  color: black;
  cursor: pointer;
}

#appsettings {
  float: right;
}

#pagetitle {
  font-weight: bold;
}

#pagesubtitle {
  color: lightgray;
}

table,
th,
td {
  font-size: smaller;
  border: 1px solid black;
  border-collapse: collapse;
}

.full_width {
  width: 100%;
}

th {
  text-align: left;
  background-color: black;
  color: white;
}

.consequence_track {
  font-size: large;
  text-align: center;
  width: 100%;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  border-left: 1px solid black;
  border-right: 1px solid black;
}

.no_border {
  border: none;
  border-left: 1px solid black;
}

#enabler_link,
#engineer_link,
#oddball_link,
#scientist_link,
#scout_link,
#warrior_link,
#clan_nugov,
#clan_wastelanders,
#clan_knights,
#clan_host,
#tradition,
#scout_skill,
#carnage_skill,
#pharmacology_skill,
#medic_skill,
#engineer_skill,
#and_chewing_gum,
#assistant,
#coordinator,
#counselling,
#d-fens,
#first_aid,
#never_say_die,
#psychoanalysis,
#reputation,
#resistance,
#second_wind,
#teamwork,
#thicker_than_water,
#true_grit,
#firearms {
  text-indent: 1em;
}

.archetype_toggle a,
.collapsible {
  display: block;
  text-decoration: none;
  color: white;
  background-color: black;
  padding: 5px;
  margin-top: 5px;
  margin-bottom: 5px;
}

.chargen_content,
.tradition_content,
.design_notes {
  display: none;
}

.class_skills {
  width: 100%;
}

.class_skills td {
  vertical-align: top;
}

.archetype_span {
  text-align: center;
}

.clan_archetype_button {
  width: 40px;
  height: 40px;
  margin: 5px;
  border: 5px solid transparent;
}

.float_right {
  float: right;
}

.clans_display {
  display: flex;
  align-items: center;
}

.clans_display img {
  margin: 10px;
}

.clans_display span {
  font-size: larger;
}

.pink_text {
  color: #ea005f;
  font-style: italic;
}

.logo_tiny {
  height: 50px;
  width: 50px;
  vertical-align: middle;
  margin: 2px;
}

.vertical_mid {
  vertical-align: middle;
}

.logo_medium {
  height: 150px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}