/* Basic fonts */
a {
	color: #7bf;
}
a:hover {
	color: #fff;
}
section main .pane a {
	color: #e68126;
}
section main .pane .help {
	color: #444444;
}
section main .pane .help a {
	font-size: 12px;
}
section main .pane a:hover,
section main .pane .help a:hover {
	color: #ffa758;
}
h1, h2, h3 {
	font-family: 'CrypticChampionsFont';
	text-transform: uppercase;
	background: linear-gradient(to bottom, #ffd339, #ff5c01);
	background-clip: text;
	-webkit-background-clip: text;
	color: rgba(0, 0, 0, 0);
	font-size: 32px;
}
h2 {
	font-size: 23px;
}
h3 {
	font-size: 19px;
}
hr {
	height: 2px;
	border: 2px solid #0E1B29;
	background-image: linear-gradient(to bottom, #8e8244 0%, #8e6c37 100%);
	margin: 0 20px;
	display: none;
}
section main .pane hr,
section dialog hr {
	display: block;
}
input[type=submit] {
	font-size: 34px;
	font-family: 'CrypticChampionsFont';
	background-image: url('/static/img/co/button.png');
	text-shadow: 3px 3px #080100;
	color: #ffa01d;
	padding-bottom: 4px;
}
input[type=text]:focus,
input[type=password]:focus {
	border-color: #e68126;
}
section main {
	color: #7bf;
}
section main .pane h2,
section main .pane h3 {
	background-image: url('/static/img/co/button.png');
	text-shadow: 2px 2px rgba(8, 1, 0, 0.75);
	color: #ffa01d;
}
section main .pane > div,
section dialog > div {
	border: 1px solid #d4d4d4;
	box-shadow: inset 0 0 0 3px #0d2132;
	background-image: url('/static/img/co/bg-pane.jpg');
}
section main .pane .curtain {
	background-image: url('/static/img/co/bg-pane.jpg');
}
section main .pane .curtain img {
	width: 100px;
	height: 100px;
}
section main .pane .content hr {
	margin: 20px 55px;
}
section main .countdown {
	background-image: url('/static/img/co/logo.png');
	background-repeat: no-repeat;
	background-position: 0 65px;
}
section main .countdown a {
	font-family: 'CrypticChampionsFont';
	letter-spacing: 1px;
	font-size: 30pt;
}
section main .pane.link .error {
	color: #e52910;
	text-shadow: 0 0 3px #080100;
}
section main .patching .progress .bar {
	background-image: linear-gradient(to right, #a91314, #eda636);
}
section main .patching .shards ul li {
	background-color: rgba(16, 16, 16, 0.25);
}
section main .patching .shards ul li.selected {
	background-color: #0d2132;
}
section main .news div {
	height: 22px;
}
section main .patching {
	margin-top: 10px;
}
section main .patching .shards {
	height: 62px;
}

/* Social media links */
section main .social a.facebook { background-image: url('/static/img/co/social/facebook.png'); }
section main .social a.twitter  { background-image: url('/static/img/co/social/twitter.png'); }
section main .social a.twitch   { background-image: url('/static/img/co/social/twitch.png'); }
section main .social a.discord   { background-image: url('/static/img/co/social/discord.png'); }
section main .social a.forums   { background-image: url('/static/img/co/social/forums.png'); }

/* Copyright section */
section footer {
	margin-top: 10px;
	background-position: 0 6px;
}
section footer .version {
	opacity: 0.75;
}

/* Platform linking */
section main .pane.link-platform > div {
	left: 200px;
	width: 400px;
}
section main .pane.link-platform .content hr {
	margin: 10px 55px;
}
section main .pane a h3 {
	text-transform: none;
	font-family: Verdana;
	font-weight: bold;
	font-size: 14px;
	text-shadow: none;
	color: #999;
}
section main .pane a:hover h3 {
	color: #fff;
}
section main .pane a h3 span {
	font-weight: bold;
}
section main .pane a i {
	color: #6cc4e5;
}
section main .pane a:hover i {
	color: #b9ecff;
}

/* Dialogs */
section dialog button,
section dialog .buttons button {
	background-color: #0d2132;
	color: #aaa;
}
section dialog button:hover,
section dialog .buttons button:hover {
	background-color: #1e3f5b;
	color: #fff;
}
section dialog#options .content {
	margin-left: 40px;
}
section dialog#options h1 {
	color: #fff;
	font-weight: normal;
}
section dialog#options h2 {
	font-family: Verdana;
	font-weight: bold;
	font-size: 16px;
	text-shadow: none;
	color: #999;
}
section dialog#options hr {
	margin: 3px 60px;
}
section dialog input[type=checkbox] {
	border-color: #234564;
	background-color: #0d2132;
}
input[type=checkbox]:checked {
	background-image: url('/static/img/co/checked.png');
}
section dialog#options input[type=text],
section dialog#options select {
	background-color: #0d2132;
	border-color: transparent;
}

@font-face {
	font-family: 'CrypticChampionsFont';
	src: url('/static/fonts/blambotfxprobb-heavy.ttf');
}