/* custom css */

:root {
    --black: #272727;
    --dark: #825635;
    --light: #CA9451;
    --white: #faf9f0;
    --gray: gray;
    --silver: silver;
    --lh1: 1.4;
    /* main line height */
    --sm: 0.9rem /* smaller text */
}

* {
    box-sizing: border-box;
    transition: none !important;
    font-size: 16px;
}

::selection {
    color: var(--white);
    background-color: var(--gray);
}

html, body, #panel {
    font-family: "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    background: black;
    text-align: left;
    color: var(--white);
    line-height: var(--lh1);
}

#menu{
    background: var(--black);
    font-family: Segoe UI Symbol;
}

p {
    margin-bottom: 1rem;
}

.block{
  display: block;
  clear: both;
}

.center {
    display: table;
    margin-left: auto;
    margin-right: auto;
    clear: both;
    text-align: center;
}

.grid-centered {
    max-width: 1000px;
}

.header-nav {
    border: 0;
    padding: 0;
}

.header-links {
    margin-bottom: 20px;
    display: block;
    float: none;
    text-align: right;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--light);
    margin: 15px 0 15px 0;
    font-weight: bold;
}

h1, .page-title {
    font-size: 3rem;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

h2 {
    font-size: 2.5rem;
}

h3 {
    font-size: 1.8rem;
}

h4 {
    font-size: 1.6rem;
}

h5{
    font-size: 1.3rem;
    margin-bottom: 0;
}


hr{
    border-bottom: 1px solid var(--dark);
}

hr.pagesep{ /* dividers between pages in a list */
    border: 0;
    border-bottom: 2px solid var(--black);
    width: 50%;
}

strong, b{
    font-weight: bold;
    font-size: inherit;
}
strong{ /* markdown bold */
    color: var(--light);
}
i, em {
    font-size: inherit;
}

a {
    color: var(--light);
    border-bottom: 1px solid var(--white);
    text-decoration: none;
    font-size: inherit;
	margin-bottom: 1px;
	display: inline-block;
}

a:hover {
    color: var(--silver);
    border-bottom: 1px solid var(--light);
    text-decoration: none;
}

#menu a{
    border: 0;
}

h1.list-item a{ /* titles of pages that are in a list */
    border-bottom: 0;
}

code{
    color: var(--gray);
    font-size: var(--sm);
    display: inline-table;
    padding: 5px;
}

:is(h1, h2, h3, h4, h5) code{ /* code when it's in a header */
   font-size: inherit;
}


ul, ol{
    text-align: left;
}

li::marker{ /* bullet color */
    color: var(--light);
}
li:not(#menu li){
    margin-bottom: 10px;
    font-size: 1rem;
}

li:not(#menu li) li{
    font-size: 95%;
}

li:not(#menu li) li li{
    margin-bottom: 2px;
    font-size: 90%;
}

.notice {
  margin: 2% auto;
  text-align: center;
  padding: 15px;
  max-width: 50%;
  border: 1px solid var(--dark);
  display: table;
}

/* notice boxes with subnavigations in them */


.navitoc h2{
    color: var(--dark);
    font-weight: normal;
    font-size: 1.5rem;
    margin: 0;
    margin-bottom: 10px;
    padding: 0;
}
.navitoc ul{
    margin: 0;
    padding: 0;
    display: block;
}

.navitoc li{
display: inline-block;
padding: 0 5px;
border-left: 1px solid var(--dark);
line-height: 0.7;
vertical-align: bottom;
}

.navitoc li:first-of-type{
    border-left: 0;
}
.navitoc li a{
    color: var(--gray);
    vertical-align: top;
    font-size: 0.9em;
	padding-bottom: 3px;
}
/* end notice boxes with subnav */


/* details */

details {
    margin-bottom: 15px;
    padding-left: 15px;
    margin-left: -15px;
}

details summary {
    color: var(--light);
    margin-bottom: 5px;
    display: list-item;
    cursor: pointer;
    font-weight: inherit;
}

details summary::marker{
    font-size: 20px;
}

details[open] {
    border-left: 3px dotted var(--dark);
}

details[open] details{
    margin-left: 1px;
    border-color: var(--light);
    border-width: 2px;
}

details[open] summary:not(details[open] details summary){
    font-weight: bold;
	color: var(--dark);
}

details[open] details[open] summary
{
 color: var(--light);
    font-weight: bold;
}



details li::marker{ /* list bullets are different color */
    font-size: inherit;
    color: var(--gray);
}

details summary > :where(h1, h2, h3, h4, h5){ /* fixes triangles not being aligned correctly */
    display: inline-block;
    vertical-align: sub;
}

details[open] summary > :where(h1, h2, h3, h4, h5){ /* makes sure the font color changes when open for headers */
    color: var(--dark);
}


/* end details */

/* anchor link plugin */
a.anchor::after, a.anchorjs-link, a.anchor{
    margin-left: 0;
    padding-left: 0;
    position: relative;
    left: -0.2em;
    top: 1px;
    font-size: 0.9rem;
    vertical-align: super;
    visibility: hidden;
    
}
a.anchor:hover::after, a.anchorjs-link, a.anchorjs{
    border: 0;
    display: inline-block;
    visibility: visible;
}

a.anchorjs-link, a.anchorjs{
cursor: copy;
}


/* end anchor link plugin */

a.btn, button {
    background-color: var(--light);
    border-radius: 10px;
    font-weight: bold;
    color: var(--white);
    font-size: 2rem;
    padding: 20px;
    border: 0;
    display: table;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    cursor:pointer;
}

a.btn:hover, button:hover{
    background-color: var(--dark);
}

div.flex {
  display: flex;
  margin-left: auto;
  margin-right: auto;
  max-width: 70%;
  flex-wrap: wrap;
  align-items: center;
}

div.flex div, div.flex iframe{
	max-width: 49%;
}

/* start schedule div */
.schedule {
  color: var(--silver);
  line-height: 1.2;
  font-size: var(--sm);
}

.schedule b { /* html bold */
  color: var(--white);
}

.schedule strong { /* markdown bold */
  font-weight: bold;
  font-style: unset;
  margin: 10px 0px 0px;
  background: var(--dark);
  padding: 5px;
  display: block;
  color: var(--white);
}

.schedule strong a{ /* links inside markdown bold */
    color: var(--white);
    border-bottom: 0;
}

.schedule > p > strong {
  margin-bottom: -10px;
}



/* end schedule div */

.awards img{
	max-width: 500px;
}

/* table sorting headers */

th.sorting::after {
  content: " △ \a ▽";
  white-space: pre;
  margin: 0px 10px;
  font-size: 5px;
  display: inline-block;
}

th.sorting_asc::after {
  content: "▲ \a ▽ ";
  white-space: pre;
  margin: 0px 10px;
  font-size: 5px;
  display: inline-block;
}

th.sorting_desc::after {
  content: " △ \a ▼";
  white-space: pre;
  margin: 0px 10px;
  font-size: 5px;
  display: inline-block;
}

/* end table sorting headers */

/* tables start */

th, thead{ /* table headers */
    color: var(--light);
    border-bottom: 1px solid var(--light);
    text-align: center;
}

.dataTable th {
  min-width: 1%;
}

th:empty, thead:empty { /* hide table headers if empty */
  border-bottom: 1px solid transparent;
}

tr:nth-child(even){ /* table rows */
    background: var(--black);
}

td{
    padding: 10px;
}

table.dataTable, .dataTables_wrapper, table {
  width: 100%;
}

.dataTables_wrapper {
  border: 1px solid var(--black);
  padding: 10px;
  clear: both;
 }


@media (max-width: 850px){ /* make data tables slightly better on mobile */
    .dataTables_wrapper{
    overflow-x: scroll;
    overflow-y: auto;
    max-height: 400px;
    }
    
    .dataTables_wrapper table.dataTable thead tr th{
    position: sticky;
   top: -11px;
    z-index: 2;
    background: black;
    font-size: small;
}
    
    .dataTables_wrapper table td, .dataTable table tr{
        font-size: 9px;
        padding: 0 5px 0;
        margin: 0;
        max-width: 75px;
        
    }
    
    .dataTables_wrapper table td:has(a){
        max-width: 100px;
        width: auto;
    }

}

.dataTables_length { /* show # entries */
  float: left;
  color: var(--gray);
}

.dataTables_length label select { /* show # entries dropdown */
  background: var(--black);
  border: 1px solid gray;
}

.dataTables_filter { /* table search */
  float: right;
  color: var(--gray);
}

.dataTables_filter label input { /* table search textbox */
  background: var(--black);
  border: 1px solid var(--gray);
  padding: 5px;
  margin-left: 5px;
}


td:nth-child(2n) {
  border-left: 1px solid var(--light);
  border-right: 1px solid var(--light);
}

td:last-of-type {
  border-right: 0;
}

.dataTables_info { /* showing X of Y entries */
  color: var(--gray);
  display: inline-block;
  float: right;
  margin-top: 15px;
}

.dataTables_paginate a.disabled, .dataTables_paginate a.disabled:hover { /* disabled pagination */
  cursor: not-allowed;
  color: var(--gray);
  border-color: transparent;
}

.dataTables_paginate a:hover, .dataTables_paginate a.current { /* current page */
  border: 1px solid var(--light);
  color: var(--light);
}

.dataTables_paginate a.paginate_button { /* general pagination */
  display: inline-block;
  margin: 10px 5px 5px;
  border: 1px solid transparent;
  background: var(--black);
  padding: 5px;
  cursor: pointer;
  box-sizing: border-box;
  color: var(--gray);
}

/* end tables */

.page-title#shabu-showdown, .page-title#shabu-showdown + hr.header-hr { /* don't show shabu showdown page title */
    display: none;
}

.thumb { /* 60px img for rice categories */
    display: table-cell;
    height: 100%;
    width: 70px;
    vertical-align: middle;
}

li:has(.thumb) { /* hide bullet if thumb image is there */
    list-style-type: none;
    display: table;
}

ul li .thumb:last-of-type:has(~ details){ /* fix wandering samurice */
position: relative;
bottom: 40px;
}