@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap'); /* MotK's font */

html{color:#EEEEEE;background:#111111;}
table{
  border-collapse:collapse;
  border-spacing:0;
}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{
  font-style:normal;
  font-weight:normal;
}
li{list-style:none;}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{
  font-size:100%;
}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
input,textarea,select{
  font-family:inherit;
  font-size:inherit;
  font-weight:inherit;
}
input,textarea,select{font-size:100%;}
body{/*Font size: The /1.25 refers to the spacing between lines*/
  font:13.5px/1.25 arial,helvetica,clean,sans-serif;
}
select,input,button,textarea{
  font:99% arial,helvetica,clean,sans-serif;
}
table{
  font-size:inherit;
  font:100%;
}
pre,code,kbd,samp,tt{
  font-family:monospace;
  font-size:94%;
  line-height:100%;
}
body{text-align:center;}

/* START animated spoiler CSS by Bloggersentral.com */
.spoilerbutton {display:block;margin:5px 0;}
.spoiler {overflow:hidden;background: #222222;}
.spoiler > div {-webkit-transition: all 0.2s ease;-moz-transition: margin 0.2s ease;-o-transition: all 0.2s ease;transition: margin 0.2s ease;}
.spoilerbutton[value="Show"] + .spoiler > div {margin-top:-100%;}
.spoilerbutton[value="Hide"] + .spoiler {padding:0px;}
/* END animated spoiler CSS by Bloggersentral.com */

a:link{color:rgb(192,255,255);}
a:visited {color:rgb(50,200,200);}
a:hover {color:rgb(82,235,251);}

footer{clear:both;}

#top{
  text-align: left;
  margin:auto 10px;
  width:auto;
}

h1 {font-size: 138.5%;}
h2 {font-size: 123.1%;}
h3 {font-size: 108%;}
h1, h2, h3 {  
  margin-top: 1em;  
  margin-right: 0px;  
  margin-bottom: 1em;  
  margin-left: 0px;
}
h1, h2, h3, h4, h5, h6, strong {font-weight: bold;}
em {font-style: italic;}
blockquote, ul, ol, dl {  
  margin-top: 1em;  
  margin-right: 1em;  
  margin-bottom: 1em;  
  margin-left: 1em;
}
ol, ul, dl {margin-left: 2em;}
ol li {  
  list-style-type: decimal;  
  list-style-position: outside;  
  list-style-image: none;
}
ul li {  
  list-style-type: disc;  
  list-style-position: outside;  
  list-style-image: none;
}
dl dd {margin-left: 1em;}
th, td {  
  border-top-width: 1px;  
  border-right-width: 1px;  
  border-bottom-width: 1px;  
  border-left-width: 1px;  
  border-top-style: solid;  
  border-right-style: solid;  
  border-bottom-style: solid;  
  border-left-style: solid;  
  border-top-color: black;  
  border-right-color: black;  
  border-bottom-color: black;  
  border-left-color: black;  
  padding-top: 0.5em;  
  padding-right: 0.5em;  
  padding-bottom: 0.5em;  
  padding-left: 0.5em;
}
th {  
  font-weight: bold;  
  text-align: center;
}
p, fieldset, table, pre {margin-bottom: 1em;}

/* ----- TUTORIAL ASSIST BY SPAREN ----- */
.tut_exercise{
    background-color: #000080;
    color: #66FFEE;
    border-color: #00FFCC;
    border-style: double;
    border-width: 3px;
    padding: 4px;
}
.tut_checkpoint{
    background-color: #400000;
    color: #FFBBFF;
    border-color: #FF99FF;
    border-style: double;
    border-width: 3px;
    padding: 4px;
}

.danmakanvasdisc {
    background-color: #004000;
    color: #BBFFFF;
    border-color: #99FFFF;
    border-style: solid;
    border-width: 1px;
    padding: 4px;
}

/* ----- IMAGE ENHANCEMENT STYLING ----- */

.pixelimg {
    image-rendering: -moz-crisp-edges;         /* Firefox */
    image-rendering:   -o-crisp-edges;         /* Opera */
    image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */
}

/* ----- MAIN WEBSITE COMPONENTS ----- */

/* Wrapper for page content. Centers content. */
#pagecontentwrapper {
  text-align: center;
}

/* Page content. Uses inline block in order to render properly. */
#pagecontent {
  text-align: left;
  max-width: 1000px;
  width: 100%;
  display: inline-block;
}

#pagecontentwrapper_tut {
  margin-left:13.30769em;
}

/* Page content. Uses inline block in order to render properly. */
#pagecontent_tut {
  text-align: left;
  max-width: 1000px;
  width: 100%;
}

.alert .alert_inner {
  background-color: #440000;
  color: white;
  font-size: 1.5rem;
  border: 2px double #AA0000;
  border-radius: 8px;
  text-align: center;
  padding: 16px;
  margin-top: 1rem;
}

.alert .alert_inner_sm {
  background-color: #440000;
  color: white;
  font-size: 0.75rem;
  border: 2px double #AA0000;
  border-radius: 8px;
  text-align: center;
  padding: 8px;
  margin-top: 1rem;
}

.alert .notice_inner {
  background-color: #004444;
  color: white;
  font-size: 1.5rem;
  border: 2px double #00AAAA;
  border-radius: 8px;
  text-align: center;
  padding: 16px;
  margin-top: 1rem;
}

.alert .notice_inner_sm {
  background-color: #004444;
  color: white;
  font-size: 0.75rem;
  border: 2px double #00AAAA;
  border-radius: 8px;
  text-align: center;
  padding: 8px;
  margin-top: 1rem;
}

/* ----- MENUS BY SPAREN. PLACED AT BOTTOM IN ORDER TO OVERRIDE ALL DEFAULTS ----- */

/* ----- Main Menu: Origianlly on the left side; shifted to float center for better mobile support ----- */
#menubar {
  padding: 2px;
  text-align: center;
}
#menubar ul {
  text-align:center;
  list-style-type: none;
  margin: 0px; 
  padding: 0px; 
  overflow: hidden; 
  max-width: 1000px;
  display: inline-block;
}
#menubar li {
  float: center;
  display:inline-block;
  text-align: center;
  margin: 2px 0px; /* Add spacing when there is overflow onto the next row */
}
#menubar a { /* Unlike tutorial nav bar, using a instead of li because every item is in fact a link */
  float: center;
  list-style-type: none;
  display:inline-block;
  width: 142px;
  height: 24px;
  /*font-weight: bold;*/
  background-color: #003329;
  text-align: center;
  padding-left: 4px;
  padding-right: 4px;
  padding-top: 10px;
  padding-bottom: 4px;
  text-decoration: none;
  border-style: solid;
  border-width: 2px 2px 2px 2px;
  border-color: #00DDAA;
}
#menubar a:hover {
  background-color: #004C3D;
}

.tutnavbar {
  text-align:center;
}
.tutnavbar ul {/*For ph3 tutorial navigation list*/
  text-align:center;
  list-style-type: none;
  margin: 0; 
  padding: 0; 
  overflow: hidden;
}
.tutnavbar li {
  float: center;
  display:inline-block;
  text-align: center;
}

.tutnavbar a, .tutnavbar span {
  float: center;
  list-style-type: none;
  display:inline-block;
  width: 120px;
  font-weight: bold;
  background-color: #00804C;
  text-align: center;
  padding: 6px;
  text-decoration: none;
  border-style: solid;
  border-width: 2px;
  border-color: #00AADD;
}

.tutorialnav a {
  list-style-type: none;
  display:inline-block;
  width: 80%;
  font-weight: bold;
  background-color: #002030;
  padding: 4px;
  text-decoration: none;
  border-style: solid;
  border-width: 2px;
  border-color: #00AADD;
}
.tutorialnav a:hover {
  background-color: #003344;
}

/* Small version of tutorialnav, used for Contest Database */
.tutorialnavsmall a {
  list-style-type: none;
  display:inline-block;
  background-color: #002030;
  text-decoration: none;
}
.tutorialnavsmall a:hover {
  background-color: #003344;
}

.tutorialnavsmall_headers, .tutorialnavsmall_elements {
  text-align: center;
}
.tutorialnavsmall_headers a {
  border-style: double solid double solid;
  border-width: 2px;
  border-color: #00AAAA;
  padding: 2px 2px 2px 4px;
  margin: 4px;
  width: 100%;
}
.tutorialnavsmall_elements a {
  border-style: solid;
  border-width: 0px 2px;
  border-color: #0088AA;
  padding: 4px 4px 4px 4px;
  border-radius: 4px;
}
/*END MENUS BY SPAREN*/

/* ----- Loading fonts ----- */

@font-face{
  font-family: pmdfont;
  src: url(PKMN-Mystery-Dungeon.ttf);
}

/* ----- YOUTUBE EMBEDDED VIDEOS - Styling ----- */

.ytembed{
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  padding-top: 25px;
  height: 0;
  width: 100%;
  max-width: 720px;
}

.ytembed_sm{
  position: relative;
  padding-bottom: 37.5%; /* 16:9 */
  padding-top: 25px;
  height: 0;
  width: 100%;
  max-width: 480px;
}

.ytembed embed, .ytembed_sm embed, .ytembed iframe, .ytembed_sm iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ----- DIV STYLING FOR DEVLOGS ----- */
.indexdevlogA{
  border:2px solid; 
  border-radius: 5px; 
  border-color: rgb(59,248,80);
  background-color: #004444;
}

.indexdevlogtitleA{
  padding: 5px;
}

/* ----- STYLING FOR VARIOUS SUBSITES ----- */
.dnhstylediv{
  padding: 10px;
  border-style: solid;
  border-width: thin;
  border-color: rgb(59,248,80);
}

.conteststylediv{
  padding: 10px;
  border:2px solid; 
  border-radius: 16px; 
  border-color: #7FFFD4;
  background-color: #001122;
}

.contestdbtable {
  border-color: white;
}

.contestdbtable td, .contestdbtable th {
  border-color: white;
}

/* ----- MOTK ARCHIVE STYLING (most styles copied from MotK v2 CSS) ----- */

.motkdiv {
  font-family: 'Open Sans', sans-serif;
  color: black;
  background-color: #DEDEDE;
  padding: 16px 32px;
  border-radius: 4px;
}

.motkdiv a {
  font-weight: bold;
  text-decoration: none;
}

.motkdiv a:link, .motkdiv a:visited {
  color: #0F6800;
}

.motkdiv a:hover {
  color: #000000;
}

/* ----- HEADER STYLING ----- */

/* toplevelheadera: replaces boring orange text h1s */
.toplevelheadera {
  color: #FFDDBB;
  background-color: #995511;
  border-width: 6px; 
  border-color: #FFCCAA; 
  border-style: none none none solid; 
  padding-left: 5px; 
}

/* toplevelheaderb: replaces ordinary code color text h1s */
.toplevelheaderb {
  color: rgb(59,248,80);
  background-color: #115544;
  border-width: 6px; 
  border-color: rgb(59,248,80); 
  border-style: none double none double; 
  padding-left: 5px; 
}

/* tocheader: replaces standard aqua text */
.tocheader {
  color: aqua;
  background-color: #002266;
  border-width: 4px; 
  border-color: aqua; 
  border-style: none none none double; 
  padding-left: 4px; 
}

/* ph3tutorialheader: replaces boring yellow text h2s on top level pages and in the ph3 tutorials section */
.ph3tutorialheader {
  color: #FFEECC;
  background-color: #226655;
  border-width: 4px; 
  border-color: #CCEEFF; 
  border-style: none solid none solid; 
  padding-left: 4px; 
}

/* projectheader: replaces boring yellow text h2s in the projects section (AKA only the projects page since everything else uses custom headers) */
.projectheader {
  color: #EEFFCC;
  background-color: #226655;
  border-width: 4px; 
  border-color: #CCFFEE; 
  border-style: none solid none solid; 
  padding-left: 4px; 
}