/*

Theme CSS override

Contents:

1. Layout
	1. Header
	2. Navigation
	3. Footer
	4. Responsive widths/main
	5. Announcements
2. Content
	1. Forms
	2. Toggle box
	3. Button styles
	4. Tables
	5. Material UI Feedback
	6. Spectrum colour picker fallback
3. Pages
	1. Front page
	2. Searching
	3. Group chats
	4. Your chats
	5. Admin
	6. Settings
	7. Character creator
4. Chat window
	1. Topbar and info panel
	2. PM & My Chats lists
	3. Sidebars
	4. Conversation and send form
	5. Log pages
	6. Global Announcements
	7. Responsive chat width
5. HDPI assets
6. Settings overrides

*/

/* 1. Layout */

body { background-color: #000;}

a:link {
	color: #2cff4b;
}

a:visited {
	color: #2cff4b;
}

a:hover, a:active {
	color: #24cf38;
}


/* Header and main spacing. */

#logo {background: transparent url('/static/img/logo-felt.png') no-repeat scroll 0px bottom; background-size:contain; max-width:100%;image-rendering: auto; -ms-interpolation-mode: auto;}

@media (min-width: 1000px) {
	#logo img {max-width:208px; height:77px}
}

/* Style dynamic header prompt */
#prompt:before {content: '> ';}
#prompt {vertical-align:2px;color: #fff; margin-left:-17px;}
@media (max-width: 1000px) { #prompt {margin-left:2px}}
#prompt-cursor {background: transparent url('/static/img/cursor-felt.png') no-repeat scroll 0px bottom; image-rendering: -moz-crisp-edges; -ms-interpolation-mode: nearest-neighbor; image-rendering: -webkit-optimize-contrast; image-rendering: pixelated;}

/* Wrapper */
#wrapper { background: #082900 url('/static/img/felt_manor_background.png') no-repeat bottom right; background-attachment: fixed;}

/* Style scrollbars */

body:not(.no_forms) * { scrollbar-base-color: #197A05; scrollbar-arrow-color: #197A05; scrollbar-shadow-color: #104f03; scrollbar-track-color: #104f03; }
body:not(.no_forms) *::-webkit-scrollbar-track, *::-webkit-scrollbar-corner { background: #104f03; }
body:not(.no_forms) *::-webkit-scrollbar-thumb { background-color: #083000; border:1px solid #197A05;}

/* 1.1. Header */

#users_online p { color:#156704}

/* 1.2. Navigation */

#global_navigation { background-color: transparent;}
#global_navigation, #global_navigation a { color: #fff; }
#global_navigation ul { margin: 0; padding: 0; list-style-type: none; background-color: #156704;}
#global_navigation a:hover, #global_navigation button:hover { color: #fff; }
#global_navigation #unread_counter { color: #2cff4b; background-color: #20a107; border-left:1px solid #1c8c06; }
#global_navigation:before {
	border-color: transparent #082900;
}
#global_navigation #unread_counter:before {
	border-color: #1e9607 #082900;
}

@media (min-width: 686px) {
	/* just in case a potato cannot handle :not, let us break this here to prevent tragedies */
	#global_navigation:not(.in_chat_nav) .user:hover ul, #global_navigation:not(.in_chat_nav) .user a:hover + ul, #global_navigation:not(.in_chat_nav) .user a:focus + ul, #global_navigation:not(.in_chat_nav) .user a:active + ul {  border-top:1px dashed #197905}
}

@media (max-width: 685px) {
	#global_navigation li:active {background-color:#177204} 
	#global_navigation label { background-color: #156704;}
	#global_navigation label:hover { color: #fff; }
}

/* 1.3. Footer */

footer, footer a, footer a:link, footer a:visited { color: #156704; }
footer a:hover { color: #20a107; }

/* 1.4. Responsive widths / main */


@media (max-width: 650px) { 
	#prompt-cursor {height:5.8vw; background-size:contain;}
	body { margin: 0; min-height:100vh; background:#082900;} 
	/* do not use fixed background on small/mobile screens as this causes redraws and is prone to stutter */
	#fixed-bg {position:fixed;top:0px;bottom:0px;right:0px;left:0px;background: #082900 url('/static/img/felt_manor_background.png') no-repeat bottom center; background-size:900px;transform: translateZ(0);will-change:scroll-position;pointer-events: none;}
	#wrapper {background:transparent }
	footer, footer a, footer a:link, footer a:visited {color: #2cff4b}
	footer a:hover {color:#fff}
}


/* 1.5. Announcements */

#announcements { background-color: #0e4603; }
#announcements h2 {color:#20a107;}


/* 2. Content */

body {color:#fff}

h2, h3, h4, h5, h6, h2 a, h3 a, h4 a, h5 a, h6 a { color: #fff; }
tbody tr:nth-child(2n+1) { background-color: #104f03; }

#subnav { border-bottom:1px solid #135f04;}
#subnav a, #subnav .tab_active {background:#104f03;border:1px solid #0f4b03; border-top: 2px solid #156704; border-bottom-color:#135f04; }
#subnav a:hover {background:#135f04;color:#fff}
#subnav .tab_active {border-bottom-color:#0e4603; background:#0e4603;color:#20a107; font-weight:bold; border-top: 2px solid #1a8005;}

/* 2.1. Forms */

input:invalid + .pattern_error { color: #f00; }
.textlabel {color:#fff;}

/* 2.1.b Forms override */

.input label, .not_input label {
	color: #fff;
}

.input .help-block {
	color: #20a107;
}

body:not(.no_forms) .input input[type='text'],
body:not(.no_forms) .input input[type='number'],
body:not(.no_forms) .input input[type='email'],
body:not(.no_forms) .input input[type='password'],
body:not(.no_forms) .input textarea,
body:not(.no_forms) #color_hex_input {
	border-bottom: 1px solid #156704;
	background: #000;
	color: #fff;
}

body:not(.no_forms) .input input[type='text']::-webkit-input-placeholder,
body:not(.no_forms) .input input[type='email']::-webkit-input-placeholder,
body:not(.no_forms) .input input[type='password']::-webkit-input-placeholder,
body:not(.no_forms) .input input[type='number']::-webkit-input-placeholder,
body:not(.no_forms) .input textarea::-webkit-input-placeholder {
	color: #000;
}
body:not(.no_forms) .input input[type='text']:-moz-placeholder,
body:not(.no_forms) .input input[type='email']:-moz-placeholder,
body:not(.no_forms) .input input[type='password']:-moz-placeholder,
body:not(.no_forms) .input input[type='number']:-moz-placeholder,
body:not(.no_forms) .input textarea:-moz-placeholder {
	color: #000;
}
body:not(.no_forms) .input input[type='text']::-moz-placeholder,
body:not(.no_forms) .input input[type='email']::-moz-placeholder,
body:not(.no_forms) .input input[type='password']::-moz-placeholder,
body:not(.no_forms) .input input[type='number']::-moz-placeholder,
body:not(.no_forms) .input textarea::-moz-placeholder {
	color: #000;
}
body:not(.no_forms) .input input[type='text']:-ms-input-placeholder,
body:not(.no_forms) .input input[type='email']:-ms-input-placeholder,
body:not(.no_forms) .input input[type='password']:-ms-input-placeholder,
body:not(.no_forms) .input input[type='number']:-ms-input-placeholder,
body:not(.no_forms) .input textarea:-ms-input-placeholder {
	color: #000;
}
body:not(.no_forms) .input input[type='text']:-webkit-autofill,
body:not(.no_forms) .input input[type='email']:-webkit-autofill,
body:not(.no_forms) .input input[type='password']:-webkit-autofill,
body:not(.no_forms) .input input[type='number']:-webkit-autofill,
body:not(.no_forms) .input textarea:-webkit-autofill {
	box-shadow: 0 0 0 1000px black inset;
}
body:not(.no_forms) .input input[type='text']:focus,
body:not(.no_forms) .input input[type='email']:focus,
body:not(.no_forms) .input input[type='number']:focus,
body:not(.no_forms) .input input[type='password']:focus,
body:not(.no_forms) .input textarea:focus,
body:not(.no_forms) #color_hex_input:focus {
	box-shadow: 0 1px 0 #2cff4b;
	border-color: #2cff4b;
	background: #000;
}
body:not(.no_forms) .input input[type='text']:focus::-webkit-input-placeholder,
body:not(.no_forms) .input input[type='email']:focus::-webkit-input-placeholder,
body:not(.no_forms) .input input[type='number']:focus::-webkit-input-placeholder,
body:not(.no_forms) .input input[type='password']:focus::-webkit-input-placeholder,
body:not(.no_forms) .input textarea:focus::-webkit-input-placeholder {
	color: #0e4603 !important;
}
body:not(.no_forms) .input input[type='text']:focus:-moz-placeholder,
body:not(.no_forms) .input input[type='email']:focus:-moz-placeholder,
body:not(.no_forms) .input input[type='number']:focus:-moz-placeholder,
body:not(.no_forms) .input input[type='password']:focus:-moz-placeholder,
body:not(.no_forms) .input textarea:focus:-moz-placeholder {
	color: #0e4603 !important;
}
body:not(.no_forms) .input input[type='text']:focus::-moz-placeholder,
body:not(.no_forms) .input input[type='email']:focus::-moz-placeholder,
body:not(.no_forms) .input input[type='number']:focus::-moz-placeholder,
body:not(.no_forms) .input input[type='password']:focus::-moz-placeholder,
body:not(.no_forms) .input textarea:focus::-moz-placeholder {
	color: #0e4603 !important;
}
body:not(.no_forms) .input input[type='text']:focus:-ms-input-placeholder,
body:not(.no_forms) .input input[type='email']:focus:-ms-input-placeholder,
body:not(.no_forms) .input input[type='number']:focus:-ms-input-placeholder,
body:not(.no_forms) .input input[type='password']:focus:-ms-input-placeholder,
body:not(.no_forms) .input textarea:focus:-ms-input-placeholder {
	color: #0e4603 !important;
}
body:not(.no_forms) .input input[type='text'][disabled],
body:not(.no_forms) .input input[type='email'][disabled],
body:not(.no_forms) .input input[type='number'][disabled],
body:not(.no_forms) .input input[type='password'][disabled],
body:not(.no_forms) .input textarea[disabled],
body:not(.no_forms) #color_hex_input[disabled] {
	color: #104f03;
	background-color: #082a00;
}
body:not(.no_forms) .input input[type='text'][disabled] + label,
body:not(.no_forms) .input input[type='email'][disabled] + label,
body:not(.no_forms) .input input[type='number'][disabled] + label,
body:not(.no_forms) .input input[type='password'][disabled] + label,
body:not(.no_forms) .input textarea[disabled] + label {
	color: #20a107;
}
body:not(.no_forms) .input input[type='text'].error,
body:not(.no_forms) .input input[type='email'].error,
body:not(.no_forms) .input input[type='number'].error,
body:not(.no_forms) .input input[type='password'].error,
body:not(.no_forms) .input textarea.error,
body:not(.no_forms) #color_hex_input.error {
	border-color: #f6f660;
	box-shadow: 0 1px 0 #f6f660;
}
body:not(.no_forms) .input input[type='text'].error ~ .help-block,
body:not(.no_forms) .input input[type='email'].error ~ .help-block,
body:not(.no_forms) .input input[type='number'].error ~ .help-block,
body:not(.no_forms) .input input[type='password'].error ~ .help-block,
body:not(.no_forms) .input textarea.error ~ .help-block {
	color: #f6f660;
}

body:not(.no_forms) .input input[type='checkbox'] + label:before {
	border: 2px solid #0b3902;
	background: #082a00;
}

body:not(.no_forms) .input input[type='checkbox']:checked + label:before {
	background: #1e9607;
	border-color: #1e9607;
}

body:not(.no_forms) .input input[type='checkbox'].indeterminate + label:before {
	background: #1a8005;
	border-color: #1a8005;
}

body:not(.no_forms) .input input[type='checkbox'] + label:after {
	border-right: 2px solid #1a8005;
	border-bottom: 2px solid #1a8005;
}

body:not(.no_forms) .input input[type='checkbox'].indeterminate + label:after {
	border-right: 2px solid #104f03;
	border-bottom: 2px solid #104f03;
}

body:not(.no_forms) .input input[type='checkbox']:checked + label:after {
	border-right: 2px solid #ffffff;
	border-bottom: 2px solid #ffffff;
}
body:not(.no_forms) .input input[type='checkbox'][disabled] + label {
	color: #1e9607;
}
body:not(.no_forms) .input input[type='checkbox'][disabled] + label:before {
	border-color: #1e9607;
}
body:not(.no_forms) .input input[type='checkbox'][disabled]:checked + label:before {
	background: #1e9607;
}

body:not(.no_forms) .input input[type='radio'] + label:before,
body:not(.no_forms) .input input[type='radio'] + label:after {
	border: 2px solid #104f03;
	background: #082a00;}

body:not(.no_forms) .input input[type='radio'] + label:after {
	background: #1e9607;
	border: 2px solid #082a00;
}
body:not(.no_forms) .input input[type='radio']:checked + label:before {
	border-color: #1a8005;
}

body:not(.no_forms) .input input[type='radio'][disabled] + label {
	color: #1e9607;
}
body:not(.no_forms) .input input[type='radio'][disabled] + label:before {
	border-color: #1e9607;
}
body:not(.no_forms) .input input[type='radio'][disabled]:checked + label:before,
body:not(.no_forms) .input input[type='radio'][disabled]:checked + label:after {
	background: #1e9607;
}

body:not(.no_forms) .input.select:after {
	border: solid transparent;
	border-top-color: #fff;
}

body:not(.no_forms) .input.select select {
	color: #fff;
	border-bottom: 1px solid #156704;
	background-color: #156704;
}

body:not(.no_forms) .input.select select:focus, body:not(.no_forms) .input.select *, body:not(.no_forms) .input.select select optgroup, body:not(.no_forms) .input.select select optgroup option {
color: #fff;
}

body:not(.no_forms) .input.select select:focus { background:#166c04;}

body:not(.no_forms) .input.select select[disabled] {
	color: #156704;
	background-color: #1e9607;
	border-bottom: 1px dashed #1e9607;
}
body:not(.no_forms) .input.select select[disabled] + label {
	color: #156704;
}
body:not(.no_forms) .input.select select:-moz-focusring {
	color: transparent;
	text-shadow: 0 0 0 #fff;
}

.input_table p.color-double label {  color: #fff;}

body:not(.no_forms) #color_input, body:not(.no_forms) #color_header_set { -webkit-appearance: none;
	background: #000;
	border-bottom: 1px solid #156704;
}
	
body.no_forms #color_hex_input, body.no_forms .input textarea, body.no_forms .input input[type="text"] , body.no_forms .input input[type="password"], body.no_forms .input input[type="email"] {background:#000}
body.no_forms .input.select select, body.no_forms button {color:#000}

/* 2.2. Toggle box */

.common_box_wrap, .roulette_head + p, #search_settings, #filter_settings, #character_settings, #quirk_settings, .common_box_wrap {background:#0e4603; border-bottom:3px solid #156704;}

.common_box > h2, .roulette_head, .toggle_box > input:first-child:checked + h2 {background-color: #104f03;border-color: #197a05;}

.common_box > h2 label span:after, .roulette_head span:after, .toggle_box > input:first-child:checked + h2 label:after {border-color: #197a05 transparent transparent;}

.common_box > h2 label, .common_box > h2 label:active, .roulette_head span, .toggle_box > input:first-child:checked + h2 label, .toggle_box > input:first-child:checked + h2 label:before  {background-color:#197a05;} 

.common_box_wrap, .roulette_head + p, .toggle_box > input:first-child:checked + h2 + #character_settings, .toggle_box > input:first-child:checked + h2 + #quirk_settings, .toggle_box > input:first-child:checked + h2 + #filter_settings, .toggle_box > input:first-child:checked + h2 + #search_settings {background-color: #0e4603;border-right-color:#197a05;}

.toggle_box > input:first-child:not(:checked) + h2 ~ *, .toggle_box > input:first-child:not(:checked) + h3 ~ * { display: none; }

.group_toggle + label {color: #1e9607;}
.group_toggle + label:hover, .group_toggle + label:active, .group_toggle:focus + label {background:#104f03;}

.groupcount {color:#b9b9b9}

/* 2.3 Button styles */

body:not(.no_forms) button {
	background: #156704;
	color: #fff;
}

body:not(.no_forms) button:disabled {
	background: #104f03;
	color:#082a00;
	cursor:not-allowed;
}

body:not(.no_forms) button:focus {background:#166c04;}

/* 2.4 Tables */

.common_box table tbody, .settings_box table tbody {border-bottom:2px solid #156704}
.common_box table thead, .settings_box table thead {color:#082900;background-color:#156704}
.admin_user_info tr td:nth-of-type(1){color:#1e9607}

@media (max-width: 750px) {
	.admin_userlist tr td:nth-of-type(1) {color:#1e9607;}
	.admin_userlist:not(.admin_userlist_permissions) tr td:nth-of-type(5):before {color:#1e9607}
	.admin_userlist:not(.admin_userlist_permissions) tr td:nth-of-type(6):before {color:#1e9607}
	.admin_userlist:not(.admin_userlist_permissions) tr td:nth-of-type(7):before {color:#1e9607}
	.admin_userlist:not(.admin_userlist_permissions) tr td:nth-of-type(8):before {color:#1e9607}
	.admin_userlist.admin_userlist_permissions tr td:nth-of-type(3):before {color:#1e9607}
	.admin_userlist.admin_userlist_permissions tr td:nth-of-type(4):before {color:#1e9607}
	.admin_userlist.admin_userlist_permissions tr td:nth-of-type(5):before {color:#1e9607}
	.admin_userlist.admin_userlist_permissions tr td:nth-of-type(6):before {color:#1e9607}
}

@media (max-width: 682px) {
	.blocks_table tr td:nth-of-type(1):before {color:#1e9607;}
	.blocks_table tr td:nth-of-type(2):before {color:#1e9607;}
	.blocks_table tr td:nth-of-type(4):before {color:#1e9607;}
	.blocks_table tr td:nth-of-type(6):before {color:#1e9607;}
	.blocks_table tr td:nth-of-type(7):before {color:#1e9607;}
}

@media (max-width: 540px) {
	.admin_chats_list tr td:nth-of-type(1) {color:#1e9607;}
	.admin_chats_list tr td:nth-of-type(3):before {color:#1e9607;}
	.admin_chats_list tr td:nth-of-type(4):before {color:#1e9607;}
	.admin_chats_list tr td:nth-of-type(5):before {color:#1e9607;}
	.spam_table tr td:nth-of-type(1) {color:#1e9607}
	.spam_table tr td:nth-of-type(2):before {color:#1e9607;}
	.spam_table tr td:nth-of-type(3):before {color:#1e9607;}
	.spam_table tr td:nth-of-type(4):before {color:#1e9607;}
	.spam_table tr td:nth-of-type(5):before {color:#1e9607;}
	.spam_table tr td:nth-of-type(6):before {color:#1e9607;}
	.spam_table tr td:nth-of-type(7):before {color:#1e9607;}
	.ban_table tr td:nth-of-type(1):before {color:#1e9607;}
	.ban_table tr td:nth-of-type(2):before {color:#1e9607;}
	.ban_table tr td:nth-of-type(3):before {color:#1e9607;}
	.ban_table tr td:nth-of-type(4):before {color:#1e9607;}
}

@media (max-width: 500px) {
	.admin_log tr td:nth-of-type(1) {color:#1e9607;}
	.admin_log tr td:nth-of-type(4):before {color:#1e9607;}
	.user_blocked tr td:nth-of-type(1):before {color:#1e9607;}
	.user_chartable thead {background-color:#104f03 !important; border-bottom:20px solid #0e4603; border-top:2px solid #156704}
	.user_chartable thead th {color:#1e9607;}
}

@media (max-width: 400px) {
	.chat_user_table.admin_version tr td:nth-of-type(2):before, .chat_user_table:not(.admin_version) tr td:nth-of-type(1):before {color:#1e9607;}
	.chat_user_table.admin_version tr td:nth-of-type(3):before, .chat_user_table:not(.admin_version) tr td:nth-of-type(2):before {color:#1e9607;}
	.chat_invites_table tr td:nth-of-type(4):before {color:#1e9607;}
}

/* 2.5 Material UI Feedback */

.ripple {
	background: rgba(0,5,0,.25);
}

/* 2.6 Spectrum colour picker fallback */

/* Spectrum Theme options */

.sp-container {
	background-color: #104f03;
	border: solid 1px #156704;
}
.sp-color, .sp-hue, .sp-clear {
	border: solid 1px #156704;
}

body:not(.no_forms) .sp-input {
	background-color:#000000;
	border-bottom:1px solid #156704;
	color: #fff;
}
body:not(.no_forms) .sp-input:focus {
	border-bottom:2px solid #2cff4b;
}
body:not(.no_forms) .sp-input.sp-validation-error {
	box-shadow: 0 1px 0 #a94442;
}

/* Palettes */
.sp-palette-container {
	border-right: solid 1px #0e4603;
}

.sp-palette .sp-thumb-el:hover, .sp-palette .sp-thumb-el.sp-thumb-active {
	border-color: #20a107;
}

/* Initial */
.sp-initial {
	border: solid 1px #2cff4b;
}

/* Replacer (the little preview div that shows up instead of the <input>) */
.sp-replacer {
	border-bottom: solid 1px #156704;
	background: #000;
	color: #fff;
}
.sp-replacer:hover, .sp-replacer.sp-active {
	color: #2cff4b;
}
.sp-replacer.sp-disabled {
	border-color: #104f03;
	color: #146504;
}
.sp-preview {
	border: solid 1px #808080;
}

.sp-palette .sp-thumb-el {
	border: solid 1px #197a05;
}

.sp-palette span:hover, .sp-palette span.sp-thumb-active {
	border-color: #23ab07;
}

/* 3. Pages */

/* 3.1. Front page */

body:not(.no_forms) .snap_top p, body:not(.no_forms) .snap_top_double p {margin-top:0px}
body:not(.no_forms) .snap_top_double {margin-top:-1em }

body:not(.no_forms) .robo_calculate .input {display:inline-block;margin-top:5px;margin-right:15px}
body.no_forms .robo_q {margin-top:10px;clear:both;display:block}

#text_preview_container { background-color: #000; border:1px solid #082900; }

/* increase buttons to make tapping easier, and adapt box flows*/

@media (max-width: 543px) {
	#subnav .tab_active {border-bottom:1px solid #0F4B03}
	.common_box h2 label, .roulette_head span, .toggle_box > input:first-child:checked + h2 label {background: #156704}
	.toggle_box > input:first-child:checked + h2 label:before {background:#156704}

	input:first-child:checked + h2 label[for="toggle_with_settings"], input:first-child:checked + h2 label[for="toggle_with_settings"]:before {background:#1a8005}
}

@-webkit-keyframes lightUp {
	from { background:#082900; margin-top:0px; border-color: transparent; transform: translate(0px, 0px);}
	   to {  transform: translate(0px, -14px); }
}

@keyframes lightUp {
	from { background:#082900; margin-top:0px; border-color: transparent; transform: translate(0px, 0px);}
	   to { transform: translate(0px, -14px); }
}

/* 3.2. Searching */

#spinner { width: 140px; height: 140px; margin: 0 auto; }

#search_connecting, #search_error {font-family: 'VT323', monospace;font-weight:normal;text-transform:uppercase}

#search_connecting, #spinner, #search_error { margin: 50px auto 30px; text-align: center; font-size: 16pt; }
#search_connecting {font-size:22pt}

#search_error { color: #f00; }

#spinner_image {background:url('/static/img/8_ball_big.gif'); background-size:140px 140px;width:140px;height:140px}

/* 3.3. Group chats */

#group_chats li {background-color: #104f03; border-bottom:2px solid #156704}
#group_chats .subtitle { color: #20a107; }
#group_chats li a{color:#fff;}
#group_chats li a:hover{color:#2cff4b}
#group_chats li.unread {font-style:normal;background:#135e04}
#group_chats li.unread {border-bottom:2px solid #2cff4b}
#group_chats li.unread a {color:#fff}
#group_chats li.unread a:hover {color:#2cff4b}
#group_chats li.unread h3:after {color:#20a107}

#group_chats li:after {border-color:  #0f4c03 #0e4603;}
#group_chats li.unread:after {border-color:  #125309 #0e4603;}

/* 3.4. Your chats */

body:not(.no_forms) .unsubscribe {background:transparent; color:#20a107;}
body:not(.no_forms) .unsubscribe:hover, .unsubscribe:focus {background: #156704;}

/* 3.6. Settings */

.settings_box {background-color:#0E4603; border-right: 4px solid #197A05; border-bottom: 3px solid #156704}
.settings_box h2 {color:#25ba08}
body:not(.no_forms) .remove_sl_item {background:#104f03;}
.sl_item_wrap {border-bottom:1px dashed #0b3a02;}
body:not(.no_forms) .remove_sl_item:active {background: #156704;}
.sl_points {color: #1a8005}

.explanation_link {color:#2cff4b;}
.explanation_link:hover {color:#24cf38}
.explanation {color: #25ba08;}

/* 4. Chat window */

body.chat { background-color: #000;}

#archive_conversation a:visited, #conversation a:visited, .rules a:visited, .description a:visited, #text_preview a:visited {
	color: #20a107;
}

#archive_conversation a:hover, #conversation a:hover, .rules a:hover, .description a:hover, #text_preview a:hover {
	color: #24cf38;
}

.chat h2 { color: #25ba08}

.sidebar, #info_panel, #edit_info_panel {color:#fff;}

#chat_wrapper { background: #082900 url('/static/img/felt_manor_background.png') no-repeat bottom right; background-attachment: fixed;}

body:not(.no_forms) .chat input, body:not(.no_forms) .chat textarea, body:not(.no_forms) .chat button, body:not(.no_forms) .chat select { background-color: #1a8005; }

body:not(.disable_left_bar) #chat_logo {top:13px;left:20px; background: transparent url('/static/img/logo-felt.png') no-repeat scroll 0px bottom; background-size:cover; width:150px;height:54px; background-size:150px 54px;image-rendering: auto; -ms-interpolation-mode: auto;}

@media (max-height: 600px) {
	body:not(.disable_left_bar) #chat_logo {top:5px;}
}

#global_navigation.in_chat_nav #mobile_nav_toggle:checked + .mobile_nav_wrap {background:#0e4603;border-right:2px solid #156704;color:#fff;box-shadow:4px 0px 10px rgba(0,0,0,.2)}

.mobile_nav:hover:before, .hide_nav:hover:before {background: #197b05;}
.chat .mobile_nav_user {color:#fff}

.mobile_nav_wrap hr, .sidebar hr {background-image: linear-gradient(to right, #0e4603, #156704, #0e4603);}

#global_navigation .mobile_nav_button, #global_navigation .mobile_nav_link_button {background:#104f03; color:#20a107;}
#global_navigation .mobile_nav_button:hover, #global_navigation .mobile_nav_link_button:hover {background:#135d04;color:#2cff4b}
#global_navigation .mobile_nav_button:focus, #global_navigation .mobile_nav_link_button:focus {background:#135d04;}

@supports ( (transform: translateX(1px)) or (-webkit-transform:translateX(1px)) )  {
	/* this is ugly, but the chat is otherwise unusable on severely antiquated browsers */
	.mobile_nav_wrap {background:#0e4603;border-right:2px solid #156704;color:#fff;}
}

.flag_label {color:#20a107}

.chat .infolink, #invites_link {color:#fff}

/* 4.1. Topbar and info panel */

#topbar { background-color: #104f03; color:#20a107}
#topbar .topic {color:#20a107}
#topbar h1 { color:#fff; background-color: #125803;}
#info_panel, #edit_info_panel { border-bottom:5px solid #156704;background-color: #0E4603;}
.topic:empty:before { color: #20a107;}
.description:empty:before { color: #20a107; }

/* 4.2. PM & My Chats lists */

body:not(.no_forms) #my_chats .filter_button.input.select select {background:#0e4603;color:#20a107;}
body:not(.no_forms) #my_chats .filter_button.input.select select:focus, body:not(.no_forms) #my_chats .filter_button.input.select select option:focus  {color:#1e9607}
body:not(.no_forms) #my_chats .filter_button.input.select select:-moz-focusring {color:transparent;text-shadow: 0px 0px 0px #1e9607}

body:not(.no_forms) #my_chats .filter_button .ripple {background: rgba(32,161,7,.2);}
body:not(.no_forms) #my_chats .filter_button.input.select:after {border-top-color:#20a107}
body:not(.no_forms) #my_chats .filter_button.input.select select option {color:#20a107}

#pm_chat_list li, #my_chats_list li {border:1px solid #104f03; border-bottom:1px solid #0b3a02; background:#104e03;}
#pm_chat_list li.active, #my_chats_list li.active {background:#135b04; border-left:2px solid #20a107; border-right:2px solid #20a107}

#pm_chat_list li a, #my_chats_list li a{color:#fff;}
#pm_chat_list li.online, #pm_chat_list li.unread, #my_chats_list li.unread {border-left:2px solid #2cff4b; border-right:2px solid #2cff4b}
#pm_chat_list li.unread a, #pm_chat_list li.online a, #my_chats_list li.unread a {color:#fff}
#my_chats_list li.unread a:before {color:#2cff4b}

#my_chats_list .chatlist_topic {color:#20a107}
#my_chats_list .chatlist_info {color:#24cf38}


/* 4.3. Sidebars */

body .sidebar { background-color: #0e4603; }

#sidebar_tabs button, #sidebar_left_tabs button {color:#2cff4b; background:#156704;border:1px solid #156704; border-top: 2px solid #177104;}
#sidebar_left_tabs button {border-bottom: 2px solid #177104;border-top-color:#156704}

body.no_forms #sidebar_tabs button, body.no_forms #sidebar_left_tabs button {color:#2cff4b}

.switch_character_open #sidebar_tabs .switch_character_button, .settings_open #sidebar_tabs .settings_button, .user_list_container_open #sidebar_tabs .userlist_button  {background:#197A05; color:#fff;border-top-color:#20a107}
.my_chats_open #sidebar_left_tabs .my_chats_button {background:#197A05; color:#fff;border-bottom-color:#20a107}
#global_navigation .mobile_nav_wrap .ripple, .my_chats_open #sidebar_left_tabs .my_chats_button .ripple, .switch_character_open #sidebar_tabs .switch_character_button .ripple, .settings_open #sidebar_tabs .settings_button .ripple, .user_list_container_open #sidebar_tabs .userlist_button .ripple {background: rgba(44,255,75,.25);}

.sidebar {border-top:15px solid #197A05;border-right:4px solid #197A05;border-bottom:3px solid #156704;}
.sidebar_title {background:#104f03;color:#fff;}
.sidebar_title span {background:#197A05;}
.sidebar_title span:after {border-color: #197A05 transparent transparent;}

.sidebar.left {border-right:none;border-left:4px solid #197A05;}

#user_list_container a, #mod_tools h3 label { color: #2cff4b; }
#user_list_container a:hover, #mod_tools h3 label:hover {color: #24cf38}

/* selectively darken userlist so colours more closely match the chat window */
#user_list, #user_list + p {background:#082900}
#user_list {margin-bottom:0;padding-top:7px;border-top-left-radius:5px;border-top-right-radius:5px;border-right:1px solid #104f03}
#user_list li {margin-bottom:0;margin-top:4px;font-weight:bold;text-shadow: 0px 0px 3px #041200;}
.col_circle {box-shadow:0px 0px 3px #041200;}
#user_list + p {margin:0; padding:5px;padding-bottom:9px;border-bottom:1px solid #104f03; border-right:1px solid #104f03; border-bottom-left-radius:5px;border-bottom-right-radius:5px}
#user_list + p a, #user_list + p {color:#156704}

#action_list { color: #20a107;}

/* 4.4. Conversation and send form */

#conversation, #archive_conversation { background-color: #000;}
#conversation_wrap {min-height:100%;box-sizing:border-box;}
#conversation div, #archive_conversation div { clear: both; overflow: hidden; }
#conversation p, #archive_conversation p { margin: 0; padding: 2px 5px; overflow: hidden; }
#status_bar { color: #156704; }

#conversation #conversation_wrap, #archive_conversation #conversation_wrap {border-left:3px solid #061e00;}

#conversation h2, #archive_conversation h2 {color:#20a107;border-bottom:3px double #082900;}

#conversation .unum, #archive_conversation .unum { color:#1a8005;}
.unum .unum_hash {color:#082a00}
body:not(.touch) .unum:hover, body:not(.touch) .unum:focus, body:not(.touch) .unum:hover + p, body:not(.touch) .unum:focus + p {background:#041700}
body:not(.touch) .highlighted .unum:hover + p {background:#061d00}

.unum #action_list {border:2px solid #156704;}

.unum #action_list li {color:#fff}

.unum #action_list .action_user_title {color:#20a107}

.unum #action_list {background:#0b3a02;}

.unum #action_list:before {border-color:  transparent #156704;}

.unum #action_list:after {border-color:  transparent #0b3a02;}

.highlighted{ background-color: #041700; border-top:1px solid #061d00; border-bottom:1px solid #061d00}

.spoiler { border: 1px dashed #0e4603; background: #041700;}

p:hover > .timestamp {color:#0e4603; }

#conversation hr, #archive_conversation hr { border-color: #082a00; }

#send_form {background: #0e4603; }

#activity_spinner {width:35px;height:40px;float:left;background-image:url('/static/img/8_ball_off.gif'); background-repeat:no-repeat; background-position:0px 5px; background-size:30px 30px;position:absolute;bottom:7px}
#send_form:not(.disable_activity_indicator) #activity_spinner.active_sb {background-image:url('/static/img/8_ball_bg.gif');}
#send_form:not(.disable_activity_indicator) #activity_spinner.active_self {background-image:url('/static/img/8_ball.gif');}

/* adjust preview zone for black text box */

.chat #text_preview {background:#000;border:1px solid #0e4603;margin-left:32px }
.log_button { display: inline-block; color: #fff; text-decoration: none; margin:5px}

body:not(.no_forms) #button_wrap {bottom:4px}
body:not(.no_forms) #chat_line_input {top:2px}
body:not(.no_forms) .no_preview #chat_line_input {top:0px}

/* 4.5. Log pages */

.chat .pager { background-color: #0e4603; }
.log_top_nav, .log_bottom_nav {background:#0e4603}
#log_options {border-bottom: 3px solid #061E00; color: #20A107}
#log_options button {background:#082D00; color:#156704;}
#log_options button.is_shown, #log_options button:active {background: #0E4603}
#log_options button span {color:#156704}
#log_options button.is_shown span{color:#20A107}

/* 4.6. Global Announcements */

.announcement { background-color: #0e4603; border-color: #20a107;}


/* 4.7 Responsive chat width & layout collapse */

@media (min-width: 1650px) {body:not(.disable_left_bar) #chat_logo {top:5px; left:1px;width:180px;height:65px;background-size: 180px 65px}}


/* collapse left column */

@media (max-width: 1270px) {
	#chat_logo {display:none}
	.sidebar.left {border-left:none;border-right:4px solid #197A05;border-bottom:3px solid #156704;}
}

@media (max-width: 1270px) and (min-height: 650px){ 
	body:not(.disable_left_bar) #chat_logo {display:block;left:auto;right:76px;top:10px}
}

body.disable_left_bar #chat_logo {display:block;left:auto;right:90px; top:10px; background: transparent url('/static/img/logo-felt.png') no-repeat scroll 0px bottom; background-size:cover; width:150px;height:54px; background-size:150px 54px;image-rendering: auto; -ms-interpolation-mode: auto;}

@media (min-width: 781px) and (min-height: 501px) {
	#global_navigation.in_chat_nav .user:hover ul, #global_navigation.in_chat_nav .user a:hover + ul, #global_navigation.in_chat_nav .user a:focus + ul, #global_navigation.in_chat_nav .user a:active + ul { border-top:1px dashed #197905}
}

@media (max-width: 780px), (max-height: 500px) {
	#global_navigation.in_chat_nav li:active {background-color:#177204}
	#global_navigation.in_chat_nav label { background-color: #156704;}
	#global_navigation.in_chat_nav label:hover { color: #fff; }
	#topbar, #topbar .topic {color: #fff}
	#topbar h1, #topbar {background:transparent}
}

/* collapse last side bar and engage mobile navigation & menu */
@media (max-width:650px) {
	#chat_wrapper { background: #082900; }
	#topbar, .chatting > #chat_wrapper #chat_content #topbar { background-color: transparent; }
	#conversation #conversation_wrap { margin-left:28px; border-left:2px solid #082900; }
	.sidebar { border-right:none !important;border-left:none !important;border-top:15px solid #104F03; }
	body #topbar, body.disable_left_bar.chatting > #chat_wrapper #chat_content #topbar, .chatting > #chat_wrapper #chat_content #topbar { top: 4px; left:34px; right: 61px;}
	#send_form, #info_panel, #edit_info_panel { bottom: 0px;}
	#topbar ~ #conversation, #conversation, #topbar ~ .sidebar, .sidebar, #info_panel, #edit_info_panel { top: 33px; }
	.sidebar_title span {background:transparent}
}

/* 5. HDPI assets  */

@media (-webkit-min-device-pixel-ratio: 1.1), (min-device-pixel-ratio: 1.1), (min-resolution: 100dpi) {
	#activity_spinner {background-image:url('/static/img/8_ball_off.gif');}
	#send_form:not(.disable_activity_indicator) #activity_spinner.active_sb {background-image:url('/static/img/8_ball_bg.gif');}
	#send_form:not(.disable_activity_indicator) #activity_spinner.active_self {background-image:url('/static/img/8_ball.gif');}
	#spinner_image {background:url('/static/img/8_ball_big.gif'); background-size:140px 140px;}
}

@media (-webkit-min-device-pixel-ratio: 1.1) and (max-width:600px), (min-device-pixel-ratio: 1.1) and (max-width:600px), (min-resolution: 100dpi) and (max-width:600px) {
	#spinner_image {background-size:100px 100px;background-position: center center;background-repeat:no-repeat}
}

/* Color Overrides */

.announcement[style*="background-color: #535353"] {background-color:#0e4603 !important}

/* override character colours */

*[style*="color: #000000"]:not([style*="background-color"]), *[style*="color: rgb(0, 0, 0)"]:not([style*="background-color"]){color: #fff !important}
*[style*="color: #000000"].system, *[style*="color: rgb(0, 0, 0)"].system{color: #2cff4b !important}
.message_disconnect p[style*="color: #000000"],.message_disconnect p[style*="color: rgb(0, 0, 0)"],
.message_join p[style*="color: #000000"],.message_join p[style*="color: rgb(0, 0, 0)"],
.message_user_group p[style*="color: #000000"],.message_user_group p[style*="color: rgb(0, 0, 0)"],
.message_chat_meta p[style*="color: #000000"],.message_chat_meta p[style*="color: rgb(0, 0, 0)"],
.message_timeout p[style*="color: #000000"],.message_timeout p[style*="color: rgb(0, 0, 0)"],
.message_user_action p[style*="color: #000000"],.message_user_action p[style*="color: rgb(0, 0, 0)"],
.message_user_info p[style*="color: #000000"],.message_user_info p[style*="color: rgb(0, 0, 0)"] {color: #2cff4b !important}
*[style*="color: #000056"],*[style*="color: rgb(0, 0, 86)"]{color: #2323ed !important}
*[style*="color: #2b0057"],*[style*="color: #2B0057"],*[style*="color: rgb(43, 0, 87)"]{color: #6d03de !important}
*[style*="color: #0715cd"],*[style*="color: #0715CD"],*[style*="color: rgb(7, 20, 205)"]{color: #172aff !important}

.col_circle[style*="background-color: #000000"], .col_circle_inner[style*="background-color: #000000"] {background-color:#fff !important}
.col_circle[style*="background-color: #2B0057"], .col_circle_inner[style*="background-color: #2B0057"], .col_circle[style*="background-color: #2b0057"], .col_circle_inner[style*="background-color: #2b0057"] {background-color:#6d03de !important}
.col_circle[style*="background-color: #000056"], .col_circle_inner[style*="background-color: #000056"] {background-color:#2323ed !important}
.col_circle[style*="background-color: #0715CD"], .col_circle_inner[style*="background-color: #0715CD"], .col_circle[style*="background-color: #0715cd"], .col_circle_inner[style*="background-color: #0715cd"] {background-color:#172aff !important}