/* BASICS */

/* Consistent theme colors */
:root {
	--black: #000000ff;
	--dark: #002615ff;
	--middle: #7C917Dff;
	--light: #9EFFA6ff;
	--accentdark: #4A9D69ff;
	--accentlight: #D0F8C8ff;
	--white: #ffffff;
}

/* Import the VCR and TTYD fonts */
@font-face {
  font-family: VCR; 
  src: url(VCR_OSD_MONO.ttf);
}
/* @font-face {font-family: ttyd; src: url(PopJoyStd-B_Scaled.ttf);} */ /*Limitation only let me import one font for now.*/

/* Some general formatting stuff that keeps the layout functional */
* {box-sizing: border-box;}
img {
	max-width: 100%;
	height: auto;
}

/* LAYOUT CONTROL */

/* Mobile display */
#sitecontainer {
	width: 100%;
	margin: auto;
}
.row, #mainheader, #mobilemenu, #maincontent, #mainfooter {
	width: 100%;
	display: block;
}

#leftsidebar, #rightsidebar{
  display: none; /*strange bug where it keeps stealing defaultlogo.png?*/
}

/* PC display */
@media only screen and (min-width: 768px) {
	/* Change widths/displays */
	.row {display: table;}
	#sitecontainer {width: 90%}
	#mobilemenu {display: none;}
	#leftsidebar, #rightsidebar {
		width: 16.66%;
		display: table-cell;
	}
	#maincontent {
		width: 66.66%;
		display: table-cell;
	}
}

/* STYLING */

/* Basic styling at default */
body {
	background-color: var(--dark);
	color: var(--black);
	font-family: 'ttyd', Verdana;
	font-size: 16px;
}

/* Main content holders */
#mainheader {
	text-align: center;
	border-radius: 15px 15px 0px 0px;
	border-bottom: 5px solid var(--white);
	padding: 25px 0px;

	/*background-image: url(/images/themes/defaultbg.png);*/
	background-repeat: repeat-x;
	background-size: auto 100%;
}
#mainheader span { /* The logo */
	display: inline-block;
	width: 276px;
	max-width: calc(100% - 14px);
	height: 64px;

	/*background-image: url(/images/themes/defaultlogo.png);*/
	background-repeat: no-repeat;
	background-size: contain;
}

#mobilemenu {background-color: var(--middle);}
#menucontent {display: none;}

#leftsidebar, #rightsidebar {
	background-color: var(--middle);
	vertical-align: top;
}

#maincontent {
	background-color: var(--light);
	vertical-align: top;
	padding: 10px;
}

#mainfooter {
	border-radius: 0px 0px 15px 15px;
	background-color: var(--white);
	text-align: center;
	padding-bottom: 10px;
	color: var(--dark);
}

/* Remove default spacing around header/p/etc elements */
h1, h2, h3, h4, h5, h6, p, table, ul, ol {
	margin: 0;
	padding: 0;
}

/* Give them new values */
h1 {font-size: 28px;}
h1, h2, h3, h4, h5, h6 {
	font-family: VCR;
	padding: 10px 0px;
}
p {padding: 5px 0px;}
ol, ul {padding: 5px;}
li {padding: 4px 0px;}
img {margin: 5px;}

hr {
	border: none;
	border-top: 2px dotted var(--accentdark);
}

/* This makes stuff like long links wrap properly on all browsers */
.word-wrap {
	-ms-word-break: break-all;
	word-break: break-all;
	word-break: break-word;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}

/* Clearfix */
.clear {
	clear: both;
}

/* Class just for the title of each page */
.maintitle {text-align: center;}

/* The bit at the bottom of every page */
.lastupdated {text-align: center;}
.lastupdated p {font-style: italic;}

/* Spaces out sections */
section {margin: 10px 0px;}
article {margin: 10px 0px;}

/* The div that holds the button to toggle the menu */
#menubutton {
	width: 100%;
	background-color: var(--accentdark);
	text-align: center;
}
#menubutton button { /* These are the same values as a large light button */
	padding: 10px;
	margin: 10px;
	font-size: 14px;
	background-color: var(--light);
	color: var(--dark);
}
#menubutton button:hover {
	background-color: var(--dark);
	color: var(--white);
}

/* Sidebar link styling (applies to the mobile menu as well) */
.sidebar {
	color: var(--white);
	padding: 10px;
}
.sidebar ul {
	list-style-type: none;
	background-color: var(--dark);
	border-radius: 4px;
	text-align: center;
	margin-top: 5px;
}
@media only screen and (max-width: 767px) { /* Adjust for the mobile menu */
	.sidebar ul {
		width: 95%;
		margin: auto;
		margin-bottom: 12px;
	}
}

.sidebar a:link, .sidebar a:visited {
	color: var(--accentlight);
	text-decoration: none;
	border: none;
}
.sidebar a:hover, .sidebar a:active {
	color: var(--white);
	background-color: var(--middle);
	text-decoration: none;
	border: none;
}
.sidebar .imagelink a:hover, .sidebar .imagelink a:active {background-color: transparent;}
.imagelink img {vertical-align: middle;}
.sidebar img {
	border: 2px dotted var(--middle);
	margin: 0px;
}
.sidebar img:hover {border: 2px dotted var(--light);}

/* Credits/Sources */
.credits p:first-child {font-style:italic;}

/* Table styling used throughout */
.basictable table {
	border-spacing: 0px;
	margin-top: 5px;
	margin-bottom: 5px;
}
.basictable th {
	background-color: var(--dark);
	color: var(--accentlight);
	padding: 10px;
}
.basictable td {
	background-color: var(--accentdark);
	color: var(--white);
	padding: 5px;
}
.basictable td.tableborder {
	border-left: 2px dashed var(--dark);
}
.borderedtable td:not(:first-of-type) {
	border-left: 1px solid var(--dark);
}
.borderedtablehor tr:not(:last-of-type) td {
	border-bottom: 1px dashed var(--dark);
}

/* List styling used throughout */
.basiclist ul, .basiclist ol {
	list-style-position: inside;
	text-align: justify;
	background-color: var(--accentdark);
	margin-top: 5px;
	margin-bottom: 5px;
}
.basiclist ul {
	list-style-type: square;
	list-style-image: url('/styles/pokebullet.png');
}
.basiclist li {
	color: var(--white);
}

.basictable td img, .basiclist li img {
	margin: 0;
}

/* Columns */
.halfcolumn {width: 49.5%;}
.columns > .halfcolumn:nth-of-type(1) {float: left;}
.columns > .halfcolumn:nth-of-type(2) {float: right;}

.thirdcolumn {width: 32%;}
.columns > .thirdcolumn:nth-of-type(1) {float: left;}
.columns > .thirdcolumn:nth-of-type(2) {float: right;}
.columns > .thirdcolumn:nth-of-type(3) {margin: auto;}
.columns + * {clear: both;}

/* Divider sections */
.dividerdark, .divideraccent, .simpletool {
	color: var(--white);
	width: calc(100% + 20px);
	margin-left: -10px;
	padding: 10px;
}
.dividerdark, .simpletool {background-color: var(--dark);}
.divideraccent {background-color: var(--accentdark);}

/* Images with captions */
figure {
	margin: 5px;
	text-align: center;
}
figcaption {
	color: var(--accentdark);
	margin: auto;
}
figure img {
	margin: 0;
}
.smallfig, .smallfig figcaption {max-width: 160px;}
.mediumfig, .mediumfig figcaption {max-width: 250px;}
.largefig, .largefig figcaption {max-width: 350px;}

/* Images in a set */
.imageset {
	text-align: center;
	margin-top: 9px;
}
.imageset img {margin:0;}

/* Various text aligns */
.alignleft {text-align:left;}
.alignright {text-align:right;}
.aligncenter {text-align:center;}
.alignjustify {text-align:justify;}

/* Various font sizes */
.sizesmall {font-size:10px;}
.sizesmaller {font-size:12px;}
.sizemedium {font-size:14px;}
.sizelarge {font-size:18px;}

/* Various font colors */
.colordark {color:var(--dark);}
.colormiddle {color:var(--middle);}
.colorlight {color:var(--light);}
.coloraccentdark {color:var(--accentdark);}
.coloraccentlight {color:var(--accentlight);}
.colorwhite {color:var(--white);}

/* The three fonts used on the site */
.verdana {font-family:Verdana;}
.VCR {font-family:VCR;}
.ttyd {font-family:ttyd;}

/* Three different float properties */
.floatL {float:left;}
.floatR {float:right;}

/* Widths and margins */
.fullwidth {width:100%;}
.largewidth {width:95%;}
.halfwidth {width:50%;}
.marginauto {margin:auto;}
.marginmedium {margin:10px;}
.marginsmall {margin:4px;}
.marginzero {margin:0;}

/* Vertical aligns */
.valignmiddle {vertical-align:middle;}
.valigntop {vertical-align:top;}
.valignbottom {vertical-align:bottom;}

/* Displays */
.inlineblock {display:inline-block;}
.horizontalflip {
	-moz-transform: scaleX(-1);
	-o-transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
	filter: FlipH;
	-ms-filter: "FlipH";
}

/* Button styling */
button, input[type=submit] {
	border: none;
	border-radius: 4px;
	font-family: VCR;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	margin: 2px;
	padding: 4px;
	font-size: 14px;
}

button:hover, input[type=submit]:hover {
	cursor: pointer;
}

a button {cursor: pointer;}

.Blarge {padding:10px;font-size:14px;}
.Bmedium {padding:4px;font-size:14px;}
.Bsmall {padding:4px;font-size:10px;}

.Blight {background-color: var(--white);color: var(--middle);}
.Blight:hover {background-color: var(--accentdark);color: var(--white);}
.Baccent, input[type=submit] {background-color: var(--accentdark);color: var(--white);}
.Baccent:hover, input[type=submit]:hover {background-color: var(--dark);}
.Bdark {background-color: var(--dark);color: var(--white);}
.Bdark:hover {background-color: var(--accentdark);}
.simpletool button:hover, .simpletool input[type="submit"]:hover {
	background-color: var(--white);color: var(--dark);
}
.basictable table button {background-color: var(--dark); color: var(--light);}
.basictable table button:hover {background-color: var(--light); color: var(--dark);}

input[type=submit][disabled], input[type=submit].disabled {
	opacity: .5;
}
input[type=submit][disabled]:hover, input[type=submit].disabled:hover {
	background-color: var(--accentdark);
	color: var(--white);
}

button.link {
	border-radius: 0;
	font-family: Verdana;
	text-align: left;
	margin: 0;
	padding: 0;
	text-transform: none;
	background-color: transparent;
	text-decoration: underline;
	display: inline;
}

/* Form Styling */
.standardform label {
	display: block;
	margin: 8px 0px;
	font-weight: bold;
}
.standardform span {
	display: inline-block;
	margin-bottom: 4px;
}
.standardform textarea, .standardform select, .standardform input[type="text"], .standardform input[type="email"], .standardform input[type="file"], .standardform input[type="number"], .standardform input[type="range"] {
	display: block;
	padding: 4px;
	border-radius: 4px;
	outline: none;
}
.standardform textarea, .standardform input[type="text"], .standardform input[type="email"], .standardform input[type="number"] {
	border: 1px solid var(--middle);
	color: var(--middle);
}
.standardform textarea:focus, .standardform input[type="text"]:focus, .standardform input[type="email"]:focus, .standardform input[type="number"]:focus {
	border: 1px solid var(--accentlight);
	color: var(--dark);
}
.standardform select {
	border: 1px solid var(--middle);
	color: var(--dark);
}
.standardform textarea {
	resize: none;
}
.inlineform textarea, .inlineform select, .inlineform input[type="text"], .inlineform input[type="email"], .inlineform input[type="file"], .inlineform input[type="number"] {
	display: inline-block;
}
.radios {
	font-weight: bold;
}
.radios label {
	font-weight: normal;
}

button:disabled, input[type="submit"]:disabled {opacity:.5; pointer-events:none;}

.outlined {
	border: 2px solid var(--accentdark);
	border-radius: 5px;
	display: inline-block;
	padding: 0px 15px;
}

.asidecard {
	background-color: var(--accentdark);
	color: var(--white);
	border-radius: 4px;
	padding: 10px;
	margin: 6px;
	text-align: center;
}
.asidecard h3 {
	padding: 0;
}
.asidecard button, .asidecard input[type="submit"] {
	background-color: var(--dark);color: var(--white);
}
.asidecard button:hover, .asidecard input[type="submit"]:hover {
	background-color: var(--white);color: var(--dark);
}

.highlight span {
	font-weight: bold;
	color: var(--dark);
}

/* Link colors */
/* Colors for basic links in text passages */

a:link, a:visited, button.link {color:var(--accentdark);}
a:hover, a:active, button.link:hover {color:var(--dark);}

.dividerdark a:link, .dividerdark a:visited, .simpletool a:link, .simpletool a:visited {color:var(--accentlight);}
.dividerdark a:hover, .dividerdark a:active, .simpletool a:hover, .simpletool a:active {color:var(--white);}
.dividerdark button.link, .simpletool button.link {color:var(--accentlight);}
.dividerdark button.link:hover, .simpletool button.link:hover {color:var(--white);}

.basiclist ol a:link, .basiclist ol a:visited, .basiclist ul a:link, .basiclist ul a:visited {color:var(--accentlight);}
.basiclist ol a:hover, .basiclist ol a:active, .basiclist ul a:hover, .basiclist ul a:active {color:var(--white);}
.basiclist ol button.link, ul button.link {color:var(--accentlight);}
.basiclist ol button.link:hover, ul button.link:hover {color:var(--white);}

.asidecard a:link, .asidecard a:visited, .asidecard button.link {color:var(--accentlight);}
.asidecard a:hover, .asidecard a:active, .asidecard button.link:hover {color:var(--white);}


/* MOBILE/PC DEPENDENT */

/* Mobile */
@media only screen and (max-width: 767px) {
	body {font-size: 12px;} /* Makes main font smaller */
	h1 {font-size: 24px;}
	button.link {font-size: 12px;} /* Bandaid fix */
	.mobilehide {display: none;} /* Hides anything that shouldn't display*/
	/* Takes float off of large elements */
	.mobileblock {
		float: none;
		margin: auto;
		width: 100%;
		display: block;
	}
}

/* Desktop */
@media only screen and (min-width: 768px) {
	.pchide {display: none;} /* Hides anything that shouldn't display */
}


/* ACCESSIBILITY */
.keyboardhide a {
	font-weight: bold;
	font-size: 20px;
	text-transform: uppercase;
}
.keyboardhide a:link, .keyboardhide a:visited, .keyboardhide a:hover, .keyboardhide a:active {
	color: transparent;
	position: fixed;
	margin-left: -99999px;
}
.keyboardhide a:link:focus, .keyboardhide a:visited:focus, .keyboardhide a:hover:focus, .keyboardhide a:active:focus {
	color: black;
	position: static;
	margin-left: 0px;
}