:root{
	--outline: -1px -1px #000,0px -1px #000,1px -1px #000,
				-1px 0px #000,1px 0px #000,
				-1px 1px #000,0px 1px #000,1px 1px #000;
	--bold: -0.2px -2px #000, -1px -2px #000, 0em -2px #000, 1px -2px #000, 2px -2px #000,
	-0.2px -1px #000, -1px -1px #000, 0em -1px #000, 1px -1px #000, 2px -1px #000,
	-0.2px 0em #000, -1px 0em #000, 1px 0em #000, 2px 0em #000,
	-0.2px 1px #000, -1px 1px #000, 0em 1px #000, 1px 1px #000, 2px 1px #000,
	-0.2px 2px #000, -1px 2px #000, 0em 2px #000, 1px 2px #000, 2px 2px #000,
	-0.2px 3px #000, -1px 3px #000, 0em 3px #000, 1px 3px #000, 2px 3px #000,
	-0.2px 4px #000, -1px 4px #000, 0em 4px #000, 1px 4px #000, 2px 4px #000;
	--dropshadow: 0 5px 0 1px rgba(0,0,0,0.7);
}

body.processing, body.processing *{
	cursor:progress;
}

#page_background{
	position:absolute;
	width:100%;
	height:100%;
	background-size:cover;
	background-position:center;
	background-attachment:fixed;
	z-index:-10;
}

/* -------------------- */
/* Bootstrap extensions */
/* -------------------- */

.container-fluid{
	/* flex breaks this */
	width:100%;
}
table.table{
	/*table-layout: fixed;*/
}
table a:not(.btn), .table a:not(.btn){
	text-decoration:none;
}
/* forced condensed tables */
.table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td{
	padding:2px 8px;
	white-space:nowrap;
}

.table-padded>thead>tr>th, .table-padded>tbody>tr>th, .table-padded>tfoot>tr>th, .table-padded>thead>tr>td, .table-padded>tbody>tr>td, .table-padded>tfoot>tr>td{
	padding:10px;
}

.table tr td p{
	margin:0 0 5px;
}

.img-thumbnail{
	background:#000;
	box-shadow:var(--dropshadow);
	padding:0px;
	border-radius:0px;
	-webkit-transition: none;
	-o-transition: none;
	transition: none;
}
.img-thumbnail-full{
	margin-bottom:20px;
	padding:5px;
	-webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}
.img-responsive{
	margin-left:auto;
	margin-right:auto;
}
a>.img-thumbnail:hover,
a>.img-thumbnail:focus{
	border-color:#fff;
}

h1>a:hover, h2>a:hover, h3>a:hover, h4>a:hover{
	text-decoration:none;
}

.navbar{
	margin-bottom:0;
}
.navbar-nav {
	text-align:center;
}
.navbar-brand {
	width:100%;
	padding: 0 15px;
	text-align:center;
}
.navbar-default {
	background:transparent;
}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus {
	background-color:#333;
}
.navbar-default .navbar-nav>li>a {
	color:#ccc;
}
.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus {
	color:#fff;
}
@media (max-width: 767px) {
	.navbar {
		text-align:center;
	}
}

.nav.nav-pills { /* needed for category list */
	margin-bottom:5px;
}

/* worked for pills, not for navbar
.nav{
	margin-bottom:5px;
}
.nav>li>a{
	padding:5px 15px;
}
.nav-pills>li.active>a{
	text-shadow:none;
}
*/

.breadcrumb{
	background:none;
}
.panel-heading>.breadcrumb{
	margin:0;
	padding:0;
}

.btn{
	font-weight:bold;
	transform:translatey(-2px);
	text-shadow:var(--outline);
	box-shadow:0 2px 0 1px rgba(0,0,0,0.7);
}
.btn:hover{
	transform:translatey(-1px);
	box-shadow:0 1px 0 1px rgba(0,0,0,0.7);
}
.btn:active{
	transform:translatey(0px);
	box-shadow:0;
}

span.label{
	text-shadow:none;
	/*box-shadow:var(--dropshadow);
	vertical-align: text-top;*/
}
.label-black{
	background:#000;
}

.panel{
	box-shadow:var(--dropshadow);
	border-color:transparent;
}

@media (min-width: 768px) {
	.form-horizontal .form-group-lg-condensed .control-label {
		padding-top: 5px;
	}
}
.form-group-lg-condensed .form-control{
	height:auto;
	min-height:35px;
	padding:5px 27px;
}
.form-group-lg-condensed .input-group-addon{
	padding:5px 15px;
}
.form-group-sm .input-group-addon{
	padding:9px 15px;
}

#input>.form-group{
	padding:5px 0;
	margin-bottom:5px;
}

.input-group-addon{
	font-weight:bold;
	background-color: rgba(255,255,255,0.25);
}
.input-group-addon.operator{
	background-color: #606060;
	min-width:3em;
}
.input-group-addon.operator:empty{
	background-color: #ffffff;
}
.input-group-addon.operator.result{
	background-color: #ebebeb;
}

input.time{
	text-align:right;
	/*text-shadow:var(--outline);
	background:none;
	color:#ffffff;*/
}
.input-xs{
	height:25px;
	padding:1px 5px;
	font-size:13px;
	line-height:25px;
	border-radius:3px;
}

.help-block{
	color:#c0c0c0;
}

textarea{
	font-family:monospace;
	resize:vertical;
}

pre{
	background:#111;
	color:#fff;
}

small, .small{
	font-weight:bold;
	color:#a0a0a0;
}

.wrtime{
	font-weight:bold;
	font-size:1.25em;
}

.modal-content{
	box-shadow:var(--dropshadow)!important;
}
.modal-body{
	background:#222222;
}

.selectize-control{
	text-shadow:none;
}

@media (min-width: 1440px) {
	.col-xl-24 {
		width: 20%;
	}
	.modal-lg{
		width: 1280px;
	}
}

@media (min-width: 1900px) {
	.col-hd-2 {
		width: 16.66666667%;
	}
}

.pagination>li>a, .pagination>li>span {
	padding:0 8px;
}

li>hr{
	margin:10px 0;
}

/* -------------------- */
/* Custom Styles        */
/* -------------------- */

body{
	position:relative;
	text-shadow:var(--outline);
	display:flex;
	height:100%;
	min-height:100vh;
	flex-direction:column;
	justify-content:space-between;
}
#header {
	border-bottom:3px solid #000;
	margin-bottom:10px;
	/*background:rgba(34,34,34,0.8);*/
	background:#222222;
}
#header h2{
	margin:0;
}

#footer {
	border-top:3px solid #000;
	padding:20px 0 40px;
	margin:auto 0 0;
	/*background:rgba(34,34,34,0.8);*/
	background:#222222;
	text-align:center;
}

#notification_tray {
    position: fixed;
    top: 10px;
    right: 20px;
    z-index: 2000;
}

section#welcome{
	margin-top:2em;
	margin-bottom:2em;
}

#notice{
	width:100%;
	padding:20px;
	background:#f00;
	color:#fff;
}

table a:hover, table a:active{
	color:#fff;
}

a.name {
    text-decoration: none;
}
a.name:hover>span, a.name:active>span{
	color:#fff!important;
}

img.game_cover{
	height:150px;
	width:100%;
	margin-bottom:20px;
	border-radius:4px;
	box-shadow:var(--dropshadow);
	object-fit: cover;
	background:#000;
}

body.leaderboard.game img.game_cover,
body.leaderboard.level img.game_cover{
	height:200px;
	width:auto;
}

code{
	background:#111;
	color:#fff;
	text-shadow:#c7254e 0 0 3px;
	cursor:pointer;
}

/* -------------------- */
/* Social               */
/* -------------------- */

table#social{
	width:auto;
	margin:0 auto;
	text-align:center;
}
table#social td{
	padding:0 5px;
}
.social{
	text-shadow:var(--bold);
}
.social:hover, .social:active{
	color:#fff;
	text-decoration:none;
}
.social-facebook{
	color:#3b5998;
}
.social-twitter{
	color:#55acee;
}
.social-instagram{
	color:#c13584;
}
.social-twitch{
	color:#6441a5;
}
.social-youtube{
	color:#cd201f;
}
.social-patreon{
	color:#f96854;
}
.social-reddit{
	color:#ff4500;
}
.social-speedruncom{
	color:#e9b949;
}
.trophy-gold{
	color:gold;
}
.trophy-silver{
	color:silver;
}
.trophy-bronze{
	color:saddlebrown;
}

/* -------------------- */
/* Rainbow              */
/* -------------------- */

.btn.rainbow{
	color:#ffffff;
	border-color:rgba(0,0,0,0.5);
}

.rainbow {
	background-image: linear-gradient(90deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #ff2400);
	background-size: 1000% 1000%;
	-webkit-animation: rainbow 10s linear infinite;
	-z-animation: rainbow 10s linear infinite;
	-o-animation: rainbow 10s linear infinite;
	animation: rainbow 10s linear infinite;
}

@-webkit-keyframes rainbow {
	0%{background-position:0%}
	50%{background-position:50%}
	100%{background-position:111%}
}
@-moz-keyframes rainbow {
	0%{background-position:0%}
	50%{background-position:50%}
	100%{background-position:111%}
}
@-o-keyframes rainbow {
	0%{background-position:0%}
	50%{background-position:50%}
	100%{background-position:111%}
}
@keyframes rainbow {
	0%{background-position:0%}
	50%{background-position:50%}
	100%{background-position:111%}
}

.text-rainbow{
	-webkit-animation: text-rainbow 2s linear infinite;
	-z-animation: text-rainbow 2s linear infinite;
	-o-animation: text-rainbow 2s linear infinite;
	animation: text-rainbow 2s linear infinite;
}

@-webkit-keyframes text-rainbow {
	0%{color:#ff2400}
	12.5%{color:#e81d1d}
	25%{color:#e8b71d}
	37.5%{color:#e3e81d}
	50%{color:#1de840}
	62.5%{color:#1ddde8}
	75%{color:#2b1de8}
	87.5%{color:#dd00f3}
	100%{color:#ff2400}
}
@-moz-keyframes text-rainbow {
	0%{color:#ff2400}
	12.5%{color:#e81d1d}
	25%{color:#e8b71d}
	37.5%{color:#e3e81d}
	50%{color:#1de840}
	62.5%{color:#1ddde8}
	75%{color:#2b1de8}
	87.5%{color:#dd00f3}
	100%{color:#ff2400}
}
@-o-keyframes text-rainbow {
	0%{color:#ff2400}
	12.5%{color:#e81d1d}
	25%{color:#e8b71d}
	37.5%{color:#e3e81d}
	50%{color:#1de840}
	62.5%{color:#1ddde8}
	75%{color:#2b1de8}
	87.5%{color:#dd00f3}
	100%{color:#ff2400}
}
@keyframes text-rainbow {
	0%{color:#ff2400}
	12.5%{color:#e81d1d}
	25%{color:#e8b71d}
	37.5%{color:#e3e81d}
	50%{color:#1de840}
	62.5%{color:#1ddde8}
	75%{color:#2b1de8}
	87.5%{color:#dd00f3}
	100%{color:#ff2400}
}