@import url('https://fonts.googleapis.com/css?family=Titillium+Web');

* {
	font-family: "Titillium Web";
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #666;
    opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: red;
}

::-ms-input-placeholder { /* Microsoft Edge */
    color: red;
}

:root {
	--body-background: #333;
	--body-background-image: url('test_texture.10.jpg');

	--main-border: 1px solid #222;
	--main-box-shadow: 0px 8px 16px #000;	
	--main-background: #080808;

	--label-color: #999;

	--h1-color: #aaa;

	--a-color: #39f;

	--input-background: transparent;
	--input-color: #eee;
	--input-border: 0;
	--input-border-bottom: 1px solid #444;

	--button-background: linear-gradient(to bottom, #1a0, #180, #160);
	--button-background-hover: linear-gradient(to bottom, #1c0, #1a0, #180);
	--button-background-active: linear-gradient(to bottom, #1f0, #1d0, #1b0);
	--button-background-done: linear-gradient(to bottom, #4f0, #4d0, #4b0);
	--button-background-error: linear-gradient(to bottom, #a00, #800, #600);
	--button-color: #111;
	--button-color-hover: #111;
	--button-shadow-hover: 0px 0px 14px #060;
	--button-shadow-active: 0px 0px 24px #080;
	--button-shadow-done: 0px 0px 14px #666;
	--button-shadow-error: none;

	--result-link-color: #c70;
	--result-link-border: 0;

	--error-background: #300;
	--error-border: 1px solid #800;
	--error-message-color: #f00;

	--warning-background: #220;
	--warning-border: 1px solid #aa0;
	--warning-message-color: #dd0;

	--confirmation-background: #210;
	--confirmation-border: 1px solid #830;
	--confirmation-message-color: #c70;

	--powered-background: transparent;
	--powered-color: #777;
	--powered-border: 0;
	--powered-a-color: #777;

	--option-background: linear-gradient(to bottom, #444, #555, #111, #333, #222);
	--option-color: #bbb;

	--option-background-hover: linear-gradient(to bottom, #980, #cb0, #430, #760, #540);
	--option-color-hover: #ccc;

	--option-background-selected: linear-gradient(to bottom, #760, #a90, #210, #540, #320);
	--option-color-selected: #ccc;

	--float-option-background: linear-gradient(to bottom, #333, #222, #000);
	--float-option-background-hover: linear-gradient(to bottom, #0cf, #0ad, #08b);
	--float-option-color: #ddd;
	--float-option-color-hover: #000;
}

html {
	height: 100%;
}

body {
	margin: 20px 0 0 0;
	background: var(--body-background);
    background-image: var(--body-background-image);
    background-repeat: repeat;
	display: flex;
	justify-content: center;
	align-items: center;
}

.fillbody {
	height: 100%;
	margin: -40px 0 0 0 !important;
}

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

h1 {
	color: var(--h1-color);
	padding: 0;
	margin: 0;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

li {
	padding: 18px 18px 0 18px;
}

label {
	width: 100%;
	display: block;
	text-align: left;
	font-size: 12px;
	color: var(--label-color);
	text-transform: uppercase;
	margin: 0 0 6px 0;
}

input, textarea {
	font-size: 12px;
	outline: none;
	padding: 12px;
	width: 90%;
    background: var(--input-background);
    color: var(--input-color);
	margin: 0;
    border: var(--input-border);
	border-bottom: var(--input-border-bottom);
}

button {
	width: 50%;
	border: 0;
	border-radius: 4px;
	padding: 12px;
	background: var(--button-background);
	color: var(--button-color);
	text-transform: uppercase;
	outline: none;
}

button:hover {
	background: var(--button-background-hover);
	color: var(--button-color-hover);
	-webkit-transition: all 0.15s ease-in-out;
	-moz-transition: all 0.15s ease-in-out;
	-ms-transition: all 0.15s ease-in-out;
	-o-transition: all 0.15s ease-in-out;
	box-shadow: var(--button-shadow-hover);
	cursor: pointer;
}

button.done {
	background: var(--button-background-done);
	box-shadow: var(--button-shadow-done);
}

button.error {
	background: var(--button-background-error);
	box-shadow: var(--button-shadow-error);
}

button:active {
	-webkit-transition: all 0.15s ease-in-out;
	-moz-transition: all 0.15s ease-in-out;
	-ms-transition: all 0.15s ease-in-out;
	-o-transition: all 0.15s ease-in-out;
	background: var(--button-background-active);
	box-shadow: var(--button-shadow-active);
}

textarea {
	white-space: pre;
	overflow: hidden;
}

#options_container {
	margin-top: 24px;
	display: flex;
	justify-content: center;
}

#options {
	width: 80%;
	text-align: center;
	border-width: 0;
	border-radius: 0px;
}

#options div {
	cursor: default;
	display: inline-block;
	width: 30%;
	background: var(--option-background);
	color: var(--option-color);
	margin: 0 2px 0 2px;
	padding: 6px 0 6px 0;
	font-size: 0.7rem;
	text-transform: uppercase;
	border-radius: 6px 0 6px 0;
}

#options div:hover {
	background: var(--option-background-hover);
	color: var(--option-color-hover);
	cursor: pointer;
}

#options .option_selected {
	background: var(--option-background-selected);
	color: var(--option-color-selected);
}

#main {
	width: 480px;
	min-width: 360px;
	border-radius: 4px;
	padding: 0;

	text-align: center;

	background: var(--main-background);
	border: var(--main-border);
	box-shadow: var(--main-box-shadow);
}

#header {
	padding: 18px 18px 0 18px;
}

#content {
	padding: 12px 0 18px 0;
	margin: 0 0 0.67em 0;
}

#error, #warning, #confirmation, #list {
	border-radius: 4px;
	margin: 18px;
	padding: 12px;
	display: none;
}

#error {
	background: var(--error-background);
	border: var(--error-border);
}

#error_message, #error_message a {
	color: var(--error-message-color);
}

#warning {
	background: var(--warning-background);
	border: var(--warning-border);
}

#warning_message, #warning_message a {
	color: var(--warning-message-color);
}

#confirmation {
	background: var(--confirmation-background);
	border: var(--confirmation-border);
}

#confirmation_message {
	color: var(--confirmation-message-color);
}

#result_link {
	text-align: center;
	font-size: 18px;
	color: var(--result-link-color);
	border: var(--result-link-border);
	padding-bottom: 0;
}

#dlc_li {
	display: none;
}

#powered {
	z-index: 1;
	position: fixed;
	display: none;
	background: var(--powered-background);
	left: 4px;
	bottom: 4px;
	padding: 2px 4px 2px 4px;
	border: var(--powered-border)
}

#powered_text {
	font-size: 0.6rem;
	color: var(--powered-color);
}

#powered a {
	color: var(--powered-a-color);
}

#powered img {
	height: 24px;
}

#float_options {
	z-index: 2;
	position: fixed;
	display: flex;
	background: var(--float-option-background);
	bottom: 8px;
	right: 8px;
	border-radius: 4px;
	padding: 2px 6px 2px 6px;
	border: var(--powered-border)
}

#float_options:hover {
	background: var(--float-option-background-hover);
}

#float_options a {
	font-size: 0.6rem;
	color: var(--float-option-color);
	padding: 0;
	margin: 0 0 0 2px;
	font-weight: bold;
	text-decoration: none;
}

#float_options:hover a {
	color: var(--float-option-color-hover);
}

#url_list_revealed {
	font-family: terminal, monospace;
	padding: 6px;
	font-size: 0.65rem;
	background: #eee;
	color: #111;
	outline: 1px solid var(--label-color);
	border: 2px solid var(--main-background);
}

@media all and (max-width: 480px), all and (orientation: portrait) {
	:root {
		--body-background: var(--main-background);
		--body-background-image: inherit;
		--main-border: 1px solid var(--main-background);
		--main-box-shadow: 0 0 0;
	}

	#powered, #decoration {
		display: none;
	}
}

@media all and (min-height: 900px) {
	body {
		height: 100%;
		margin: -20px 0 0 0 !important;
	}
}