/* ----------------------------------------------------------------------------------------------------
-- LAYOUT
-- This CSS is just for the basic layout and positioning. Don't use colors in this CSS file!
-- To change a theme's colors, view the light or dark folder!
---------------------------------------------------------------------------------------------------- */

/* --------------------------------------------------
-- SCREEN RESOLUTION RULES
-------------------------------------------------- */

@media (max-width: 800px) {
  .flex-item-right, .flex-item-left {
    flex: 100%;
  }
}

/* --------------------
-- Base
-------------------- */
header {
	display: block;
	height: 100px;
}

body {
	display: block;
	background-color: var(--bg-primary);
}

body:focus {
	outline: none;
}

/* --------------------
-- Selected Elements
-------------------- */	

/* This all mostly just inverts color honestly */
::selection, ::-moz-selection{
	background: var(--selection-bg);
	color: var(--selection-color);
	text-shadow: none;
}

box-header::selection, a::selection, 
box-header::-moz-selection, a::-moz-selection
{
	background: var(--selection-bg);
	color: var(--primary-color);
}

header-text-color::selection, .header-nav-button::selection,
header-text-color::-moz-selection, .header-nav-button::-moz-selection
{
	background: var(--nav-selection-bg);
	color: var(--primary-color);
}

header-text::selection, .header-nav-button::selection,
header-text::-moz-selection, .header-nav-button::-moz-selection
{
	background: var(--nav-selection-bg);
	color: var(--nav-selection-color);
}

/* This just uses inverted selection values */
releases-sd-text::selection, releases-720-text::selection, releases-1080-text::selection,
releases-sd-text::-moz-selection, releases-720-text::-moz-selection, releases-1080-text::-moz-selection
{
	background: var(--selection-color);
	color: var(--selection-bg);
}

/* --------------------
-- Hyperlinks
-------------------- */

a:link {
	color: var(--primary-color);
}

a:visited {
	color: var(--primary-color);
}

a:hover, a:visited:hover {
	color: var(--link-hover);
	cursor: pointer;
}

a:active {
	color: var(--link-hover);
}

/* --------------------
-- Div IDs
-------------------- */

#header-nav {
	background-color: var(--nav-primary);

	position: relative;
	text-align: center;
	margin: 0px 0px 0px;
	height: 100px;
	top: 0px;
	right: 0;
	left: 0;

	width: 100%;
	max-width: 100%;
	/*
	display: inline-flex;
	flex-direction: row;
	align-self: flex-start;
	align-content: stretch;
	flex-basis: auto;
	flex-direction: row;
	flex-grow: 1;
	flex-shrink: 1;
	flex-wrap: wrap;
	*/
}

#header-text {
	position: relative;
	text-align: center;
	margin: 0px 0px 0px;
	height: 100px;
	max-width: 500px;
	float: left;
}

#header-nav-text {
	position: relative;
	text-align: center;
	margin: 0px 14.53% 0px;
	height: 100px;
	top: 0px;
	right: 0;
	left: 0;
	vertical-align: middle;
}

#body-container {
	/*margin top, right, bottom, left*/
	/*margin top, left/right, bottom*/
	margin: 50px 14.53% 0;
	/* overflow: auto; */
	overflow: visible;			/* Prevent clipping on the drop shadows (light mode) */
}

#banner{
	background-color: var(--bg-secondary);
}

#releases{
	background-color: var(--bg-secondary);
	box-shadow: 0 1px 16px 0 var(--dropshadow-color);
	margin-right: 50px;

	position: relative;
	float: left;
	height: 400px;
	width: 900px;
	max-width: auto;
	overflow-y: auto;

	display: flex;
	justify-content: flex-start;
	align-self: flex-start;
	flex-basis: auto;
	flex-direction: row;
	flex-grow: 1;
	flex-shrink: 2.25;
	flex-wrap: wrap;
}

#schedule{
	background-color: var(--bg-secondary);
	box-shadow: 0 1px 16px 0 var(--dropshadow-color);

	position: relative;
	float: left;
	height: 400px;
	width: 400px;
	max-width: auto;
	overflow-y: auto;

	display: flex;
	justify-content: flex-start;
	align-self: flex-start;
	flex-basis: auto;
	flex-direction: row;
	flex-grow: 2.25;
	flex-shrink: 1;
	flex-wrap: wrap;
}

#disqus{
	background-color: var(--bg-secondary);
	box-shadow: 0 1px 16px 0 var(--dropshadow-color);

	position: relative;
	float: center;
	height: auto;
	width: 100%;
	overflow: auto;
}

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

#header-text-button {
	color: var(--nav-link-primary);

	position: relative;
	text-align: left;
	margin: 0px 0px 0px;
	height: 100px;
	width: auto;
	max-width: 500px;
	float: left;
}

#header-text-button:link {
	color: var(--nav-link-primary);
	text-decoration: none;
}

#header-text-button:visited {
	color: var(--nav-link-active);
	text-decoration: none;
}

#header-text-button:hover, #header-text-button:visited:hover {
	color: var(--nav-link-visited);
	text-decoration: none;
}

#header-text-button:active {
	color: var(--nav-link-hover);
	text-decoration: none;
}

/* --------------------
-- HEADER NAV
-------------------- */

.header-nav-button-border-left {
	border: solid;
	border-width: 0 0 0 2px;
	border-image-source: url('../../../../images/header-nav-button-border-single.png');
	border-image-slice: 4 fill;			/* 4px wide fill */
	height: 100px;
}

.header-nav-button-border-center {
	border: solid;
	border-width: 0 2px 0 2px;
	border-image-source: url('../../../../images/header-nav-button-border-single.png');
	border-image-slice: 4 fill;			/* 4px wide fill */
	height: 100px;
}


.header-nav-button-border-right {
	border: solid;
	border-width: 0 2px 0 0;
	border-image-source: url('../../../../images/header-nav-button-border-single.png');
	border-image-slice: 4 fill;			/* 4px wide fill */
	height: 100px;
}


.header-nav-button {
	color: var(--nav-link-primary);

	position: inherit;
	font-size: 30px;
	font-family: Arial, Helvetica, "Times New Roman", Times, serif;
	float: right;
	text-align: center;
	width: 154px;

	/* VERTICAL CENTER */
	line-height: 100px;
	display: inline-block;
	text-align: center;
	vertical-align: middle;
}

.header-nav-button:link {
	color: var(--nav-link-primary);
	text-decoration: none;
}

.header-nav-button:visited {
	color: var(--nav-link-visited);
	text-decoration: none;
}

.header-nav-button:hover, .header-nav-button:visited:hover {
	color: var(--nav-link-hover);
	text-decoration: none;

	animation: navbar-text .2s forwards;

}

@-webkit-keyframes navbar-text {
	from {
		text-shadow: 0 0 0 #eeeeee;
	}

	to {
		text-shadow: 0 0 50px #eeeeee;
	}
}

.header-nav-button:active {
	color: var(--nav-link-active);
	text-decoration: none;
}

/* --------------------
-- ROW CONTAINERS
-------------------- */

.banner {
	margin: inherit;
	padding: inherit;
	object-fit: cover;
	width: inherit;
	height: inherit;
	object-position: 0px 0px;
	min-width: 100%;
	background-position: center center;
}

.banner-container {
	position: relative;
	float: center;
	margin: 0 0 50px 0;
	height: 200px;
}

.time-container {
	position: relative;
	float: center;
	margin: 0 0 50px 0;
	height: 400px;

	display: inline-flex;
	flex-direction: row;
	align-self: flex-start;
	align-content: stretch;
	flex-basis: auto;
	flex-direction: row;
	flex-grow: 1;
	flex-shrink: 1;
	flex-wrap: wrap;
}

.disqus-container {
	position: relative;
	float: center;
	margin: 0 0 50px 0;
	height: auto;
	overflow: auto;
}

/* --------------------
-- SUB CONTAINERS
-------------------- */

.releases-subcontainer {
	position: relative;
	float: center;
	margin: -2% auto 0;
	width: 840px;
	height: 291px;

	line-height: 400px;
}

.releases-row-container {
	background-color: var(--bg-divider);

	position: relative;
	float: left;
	margin: 0 0 0 0;
	width: 840px;
	height: 1px;

	line-height: 1px;
}

.releases-text-container {
	position: relative;
	float: left;
	margin: 0 0 0 0;
	width: 583px;
	height: 27px;
}

.releases-sd-container {
	background-color: var(--resolution-tag);

	position: relative;
	float: left;
	margin: 3px 5px 0 0;
	padding: 0 0 0 0;
	width: 40px;
	height: 20px;
}

.releases-720-container {
	background-color: var(--resolution-tag);

	position: relative;
	float: left;
	margin: 3px 5px 0 0;
	padding: 0 0 0 0;
	width: 45px;
	height: 20px;
}

.releases-1080-container {
	background-color: var(--resolution-tag);

	position: relative;
	float: left;
	margin: 3px 5px 0 0;
	padding: 0 0 0 0;
	width: 55px;
	height: 20px;
}

.releases-date-container {
	position: relative;
	/* float: right; */
	float: left;
	margin: 0 0 0 0;
	/* width: 50px; */
	width: 102px;
	height: 27px;
}

.schedule-subcontainer {
	position: relative;
	float: center;
	/* margin: -22.5% auto 0; */
	margin: -13% auto 0;
	width: 335px;
	/* height: 219px; */
	height: 257px;
}

.schedule-row-container {
	background-color: var(--bg-divider);

	position: relative;
	float: left;
	margin: 0 0 0 0;
	width: 335px;
	height: 1px;

	line-height: 1px;
}

.schedule-text-container {
	position: relative;
	float: left;
	margin: 0 0 0 0;
	width: 285px;
	height: 21px;
}

.schedule-timestamp-container {
	position: relative;
	float: left;
	margin: 0 0 0 0;
	width: 50px;
	height: 21px;
}

.schedule-full-container {
	position: relative;
	float: left;
	margin: 5% 0 0 0;
	width: 230px;
	height: 14px;

	line-height: 400px;
}

.disqus-subcontainer {
	position: relative;
	float: center;
	margin: 0 5.5% 0;
	height: auto;
	width: 100%;
	overflow: auto;
}

/* --------------------
-- Text
-------------------- */

p {
	color: var(--font-primary);

	font-family: Arial, Helvetica, "Times New Roman", Times, serif;
	font-size: 15px;
	font-weight: normal;
	
	display: block;
	margin-top: 1em;
	margin-bottom: 1em;
	margin-left: 0;
	margin-right: 0;

}

div {
	color: var(--font-primary);

	display: block;
	margin-top: 1em;
	margin-bottom: 1em;
	margin-left: 0;
	margin-right: 0;

}

header-text {
	color: var(--nav-text);

	font-family: Arial, Helvetica, "Times New Roman", Times, serif;
	font-size: 48px;

	float: left;

	margin: 0 0 0 0;
	padding: 0 0 0 0;
	line-height: 100px;
}

header-text-color {
	color: var(--primary-color);

	font-family: Arial, Helvetica, "Times New Roman", Times, serif;
	font-size: 48px;

	float: left;

	margin: 0 0 0 0;
	padding: 0 0 0 0;
	line-height: 100px;
}

box-header {
	color: var(--primary-color);

	font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;
	font-size: 48px;
	font-weight: bold;

	margin: -23px -2px 0;		/* Reset to center */
	padding: 28px 28px 0px;		/* Push out to proper alignment */
}

releases-text {
	color: var(--font-soft-primary)

	font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;
	font-size: 24px;
	font-weight: normal;

	float: left;

	margin: 0 0 0 0;
	padding: 0 0 0 0;
	line-height: 27px;
}

releases-sd-text {
	color: var(--font-soft-invert);

	font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;
	font-size: 18px;
	font-weight: bold;

	text-align: center;
	position: center;
	float: left;
	display: inline-block;
	width: 50%;

	margin: 0 26% 0;
	line-height: 20px;
}

releases-720-text {
	color: var(--font-soft-invert);

	font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;
	font-size: 18px;
	font-weight: bold;

	text-align: center;
	position: center;
	float: left;

	margin: 0 10% 0;
	line-height: 20px;
}

releases-1080-text {
	color: var(--font-soft-invert);

	font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;
	font-size: 18px;
	font-weight: bold;

	text-align: center;
	position: center;
	float: left;

	margin: 0 8% 0;
	line-height: 20px;
}

releases-date-text {
	color: var(--font-soft-primary);

	font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;
	font-size: 24px;

	float: right;

	margin: 0 0 0 0;
	padding: 0 0 0 0;
	line-height: 27px;
}

schedule-text {
	color: var(--font-soft-primary);

	font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;
	font-size: 18px;

	float: left;

	margin: 0 0 0 0;
	padding: 0 0 0 0;
	line-height: 21px;
}

schedule-timestamp-text {
	color: var(--font-soft-primary);

	font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;
	font-size: 18px;

	float: right;

	margin: 0 0 0 0;
	padding: 0 0 0 0;
	line-height: 21px;
}

.schedule-full-text {
	color: var(--font-soft-primary);

	font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;
	font-size: 18px;

	float: left;

	margin: 0 0 0 0;
	padding: 0 0 0 0;
	line-height: 21px;
}

.schedule-full-text:link {
	text-decoration: none;
	color: var(--font-soft-primary);

}

.schedule-full-text:visited {
	text-decoration: none;
	color: var(--font-soft-primary);
}

.schedule-full-text:hover {
	color: var(--primary-color);
	text-decoration: none;
}

.schedule-full-text:active {
	text-decoration: none;
	color: var(--font-primary);
}

h1 {
	color: var(--primary-color);
}

h2 {
	color: var(--primary-color);
}

h3 {
	color: var(--primary-color);
}

h4 {
	color: var(--primary-color);
}

h5 {
	color: var(--primary-color);
}

h6 {
	color: var(--primary-color);
}

/* --------------------
-- Disqus
-------------------- */

disqus_thread {
	width: 100%;
	/* top: -60px; */
	height: auto;
	overflow-y: auto;
}