html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
}

body {
	font-family:
	"Noto Sans",
	"Noto Sans CJK JP",
	"Noto Sans CJK KR",
	"Noto Sans CJK SC",
	"Noto Sans CJK TC",
	"Roboto",
	"Arial",
	"Osaka",
	sans-serif;
	overflow: hidden;
}

.container {
	height: 90vh;
	width: 820px;
	margin: 0 auto;
	overflow: auto;
}

.containerInner {
	padding: 50px;
}

h1.heading,
h2.smg,
h3.map {
	display: inline-block;
	clear: both;
}

.topNav {
	display: inline-block;
	float: right;
	padding-top: 15px;
}

.topNav a {
	font-weight: bold;
	text-decoration: none;
	font-size: 120%;
	padding-left: 5px;
}

.style-switcher {
	float: right;
	clear: right;
	display: inline-block;
}

.stsw {
	display: inline-block;
	clear: right;
}

.stsw.fa {
	height: 10px!important;
	padding-top: 0px;
}

.stsw.picker {
	height: 16px;
	width: 16px;
	border-width: 1px;
	border-style: solid;
	border-radius: 50%;
	margin-top: 9px;
}

#DarkGrey {
	background-color: #ccc;
}

#FehBlue {
	background-color: #02354e;
}

#PureWhite {
	background-color: #fff;
}

#PerfectRed {
	background-color: #8A4144;
}

#LowContrastDark {
	background-color: #333;
}

.timestamp {
	float: right;
	display: inline-block;
	font-style: italic;
	margin-top: 5px;
	font-size: 95%;
	clear: right;
}

/* begin patreon collapse */

.highlightbox {
	border-width: 1px;
	border-style: solid;
	text-align: center;
	padding: 5px;
	font-size: 16px;
	font-weight: bolder;
}

#patreon-collapse-msg {
	cursor: pointer;
}

#patreon-collapse {
	margin: 5px;
}

.collapsed {
	display: none;
}

.expanded {
	display: block;
}

/* end patreon collapse */

.archiveList li {
	margin-top: 40px;
	text-align: center;
}

.archiveList a {
	text-decoration: none;
	padding: 10px 16px 10px 16px;
	border-radius: 6px;
	border-width: 2px;
	border-style: solid;
	font-size: 200%;
}

.about {
	margin-bottom: 20px;
}

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

ul.stratform {
	font-variant: small-caps!important;
}

ul.formex {
/*add styles for the form example but not the blank form*/
}

.about.postscript {
	font-size: 80%;
	font-style: italic;
}

.inlinepre {
	display: inline-block;
	margin: 0;
}
.submitform input[type="radio"] {
	display: none;
}

.submitform label,
input[type="submit"],
.CustomButton,
a > .CustomButton,
select,
input {
	border-width: 1px;
	border-style: solid;
	cursor: pointer;
	display: inline-block;
	padding: 5px 10px;
	margin-top: 5px;
	background-color: transparent;
	color: inherit;
	font-size: inherit;
	font-family: inherit;
	text-decoration: none;
}

.selectContainer{
    overflow:hidden;
    display: inline-block;
}

.selectContainer select{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

select option {
	color: black;/*change this color for each style eventually*/
	background-color: white;/*change this color for each style eventually*/
}

#stratCode {
	font-family: monospace;
}

table.guidetable {
	border-collapse: collapse;
	vertical-align: top;
	width: 100%;
}

table.guidetable th {
	font-weight: bold;
	text-align: left;
	background-color: cornflowerblue; /*overwrite this color in individual color stylesheets, this is temp*/
}

table.guidetable td,
table.guidetable th {
	border: 1px solid whitesmoke; /*overwrite this color in individual color stylesheets, this is temp*/
	padding: 5px 10px 5px 10px;
	vertical-align: top;
}

table.guidetable td,
table.guidetable tr th:not(:first-of-type) {
	width: 100px;
}

table.guidetable td:not(:empty) {
	background-color: yellow; /*overwrite this color in individual color stylesheets, this is temp*/
}

table.guidetable td:empty {
	background-color: whitesmoke; /*overwrite this color in individual color stylesheets, this is temp*/
}

h4.new,
h4.hard,
h4.lunatic,
h4.infernal {
	padding-top: 10px;
	clear: both;
}

h4.new::before {
	content:"New";
}

h4.hard::before {
	content: "Hard";
}

h4.lunatic::before {
	content: "Lunatic";
}

h4.infernal::before {
	content: "Infernal";
}

h4.abyssal::before {
	content: "Abyssal";
}

.strategy,
.strat-etc {
	padding: 10px;
	width: 685px;
}

div.hard h4::before {
	content: "Hard";
}

div.lunatic h4::before {
	content: "Lunatic";
}

div.infernal h4::before {
	content: "Infernal";
}

div.abyssal h4::before {
	content: "Abyssal";
}

.video {
	display: inline-block;
	background-color: #000!important;
	min-width: 475px!important;
	min-height: 267px!important;
}

.data {
	display: inline-block;
	margin-left: 20px;
	margin-right: 20px;
	font-size: 14px;
	vertical-align: top;
	overflow: auto;
	width: 165px;
}

.note {
	font-size: 70%;
}

.note::before {
	content: " ";
}

ul {
	list-style: none;
	margin-left: -2em;
}

.data ul li:nth-of-type(2),
.data ul li:nth-of-type(3),
.data ul li:nth-of-type(4),
.data ul li:nth-of-type(5) {
/*This is for Units*/
	font-stretch: semi-condensed;
}

.data ul li:nth-of-type(6),
.data ul li:nth-of-type(7),
.data ul li:nth-of-type(8),
.data ul li:nth-of-type(9) {
/*This is for SI/Seals/Merges/Supports*/
	font-size: 90%!important;
}

.rarity img {
	height: 12px;
	width: auto;
}

.rarity {
	float: right;
	margin-left: 9px;
}

.credit {
	font-size: 85%!important;
}

.credit::before {
	content: "by: ";
}

.footer {
	height: 10vh;
	width: 820px;
	margin: 0 auto;
	clear: both;
	font-size: 14px;
}

.footerInner {
	padding-left: 50px;
	padding-right: 50px;
}


/* AD STYLING */

.spacer50h {
	height: 50px!important;
	clear: both!important;
}

.adcontainer {
	margin: 0px 119px 0px 118px!important;
}


/* Media Queries Below */


@media (min-width: 1600px) {



	.container,
	.footer {
		width: 1540px;
	}

	div[class*="strat"]:nth-of-type(odd) {
		float: left;
		clear: left;
	}

	div[class*="strat"]:nth-of-type(even) {
		float: right;
		clear: right;
	}

	table.guidetable {
		width: 70%;
		margin: 0 auto;
	}

	table.guidetable td,
	table.guidetable tr th:not(:first-of-type) {
		width: 150px;
	}

	table.guidetable td,
	table.guidetable th {
		padding-left: 20px;
	}



}


/* Media Queries Above */