/***************** MAIN.CSS *****************
carries main styling for CWS. colour schemes etc. are not found here
*/

/*@import url('http://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic&subset=latin,latin-ext,greek,greek-ext,cyrillic,cyrillic-ext');*/
/*@import url(http://fonts.googleapis.com/css?family=Noto+Sans);*/

body, input, select, textarea{ padding: 0; margin: 0;
	/* font-family: 'Andika Basic', Ubuntu, Helvetica, sans !important; */
	font-family: 'Noto Sans', sans-serif;
	/* font-family: 'Roboto', sans-serif */
	/*font-family: Verdana, sans-serif;*/
}
body{
	overflow: -moz-scrollbars-vertical; 
	overflow-y: scroll;
	background-color: #efefef;
} 

input, select, textarea{ outline: none; }

div.main_container{
	width: 85%; /* colours are in flat/gloss.css */
	/*width: 450px;*/  /* mobile width */
	margin-left: auto; margin-right: auto;
	overflow-y: visible;
	background-color: #fefefe;
	padding-bottom: 10px;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
}

div.content{
    margin: 15px 10px 10px;
	color: #333;
}

div.parag{
	font-size: 0.8em;
	margin-bottom: 10px;
}

div.title{
	color: #666;
	font-size: 1.4em;
	padding-bottom: 5px;
	background: #eee;
	text-indent: 10px;
	margin-bottom: 10px !important; margin-top: 10px;
	font-weight: normal !important;
	text-shadow: 0 1px 0 rgba(255,255,255,.5); /* 50% white from bottom */
}
div.title b{
	font-weight: normal !important;
}
div.title .right{
	float: right; font-size: 0.5em; margin-right: 5px; margin-top: 5px;
}

form div, .form div{
	display: inline-block;
	margin: 10px;
	width: 46%;
	vertical-align: top;
}

form div .list, .form div .list{
	width: 95% !important;
}

form div input, form div select, .form div input, .form div select, .form div textarea, form div textarea, .fta, input, select, textarea{
	display: block;
	margin-top: 5px;
	max-width: 98%;
	color: #666;
	background-color: #eee;
	border: none;
}

/* full width! */
form div.full_width, .form div.full_width{
	width: 92% !important;
}
form div.third, .form div.third{
	width: 30% !important;
}
form div.full_width textarea, .form div.full_width textarea{
	max-width: 800px !important;
}
form div.third textarea, .form div.third textarea{
	max-width: 250px !important;
}

#scribble:focus{
	color: #333;
}
#counter_box{
	text-align: right;
	font-size: 0.8em;
	max-width: 100px;
}

/* cluster forms */
form div div input, .form div div input{
	display: inline-block !important;
	margin-right: 10px;
}	
form div div, .form div div{
	display: block;
	width: 100%;
	margin: 0 !important;
}

input, textarea, select, div.right a{
	padding: 5px;
	text-decoration: none;
	font-size: 1.0em;
}
input[type="radio"], input[type="checkbox"]{ /* remove styles from checkboxes and radio... this is only an issue in IE */
	background-color: transparent !important;
	border: none !important;
}
input[readonly], input[readonly]:focus, textarea[readonly], textarea[readonly]:focus, select[disabled], select[disabled]:focus{
	/*border: 1px solid #ddd !important;*/
	color: #999 !important;
	text-indent: 0 !important;
	background-image: none !important;
	background-color: #eee;
}

font.match{ color: white; background-color: #c0c; padding: 2px; }

label{
	display: inline-block;
	font-size: 0.8em !important;
	color: #999;
	cursor: pointer;
}
label input{
	display: inline !important;
}
label:focus, label:hover{
	color: #099;
}
input[type="checkbox"], input[type="checkbox"]:focus{
	border: 1px solid white !important;
	box-shadow: none;
	color: #999;
	padding: 0;
}
input[type="checkbox"]:disabled{
	color: #ccc; 
}

input.sub_form, select.sub_form{ /* not a main form, so smaller */
	font-size: 0.75em !important;
	padding: 1px;
	margin-bottom: 1px; margin-top: 1px;
}

a.mem, a.path, a{ color: #099; text-decoration: none; }
a.mem:hover, a.path:hover, a:hover{ color: #066; }

a.mem_staff, a.mem_staff:visited, a.mem_staff:active{ color: #909; text-decoration: none; }
a.mem_staff:hover{ color: #606; }

a img{
	border: none;
	display: inline-block !important;
}

div.path{
	margin-left: 10px; margin-top: 5px;
	color: #ccc;
	font-size: 0.8em;
}

div.avatar img, img.avatar{
	max-width: 50px;
	max-height: 50px;
	border-radius: 25px;
	border: 1px solid #efefef;
	display:block;
}
div.avatar{
	display: inline-block;
	font-size: 0.75em;
	text-align: left !important;
}
div.avatar_big{
	vertical-align: top;
	font-size: 1.2em;
	display: block;
	margin: 0;
}
div.avatar_big img{
	vertical-align: top;
}

span.faux, span.half_faux{
	display: block;
	padding: 5px;
	background-color: white;
	text-decoration: none;
	font-size: 0.8em;
	border: 1px solid #eee;
	color: #555;
	margin-bottom: 5px !important;
	overflow-y: hidden;
	overflow-x: hidden;
}
span.half_faux{
	display: inline-block !important;
	width: 45%;
}

span.faux img{
	width: auto !important;
	max-width: 99%;
}

/* **************************************** HEADER **************************************** */

.head{
	text-shadow: 0 1px 0 rgba(255,255,255,.5); /* 50% white from bottom */
	padding: 10px;
	border-left: none !important; border-right: none !important;
	margin-top: -2px;
}
.head_under, div.right{
	display: inline-block;
	font-size: 1.0em;
	padding-left: 10px;
}
.trbtn {
    border-radius: 18px !important;
    display: inline-block;
    height: 18px;
    width: 18px;
    line-height: 18px;
    vertical-align: middle;
    text-align: center;
}
.head_under img{
	max-width: 20px; max-height: 20px;
	margin-right: 10px;
}
.head a{
	color: inherit;
	text-decoration: none;
	border: none;
}
.head img{
	border: none;
}

div.right{
	display: inline-block;
	margin-right: 10px;
	margin-top: 10px;
	float: right;
}

span.new_indic{
	color: #f90;
    font-weight: bold;
	display: inline-block;
	margin-right: 2px;
    width: 22px !important;
    text-align: center;
}
span.new_indic span {
    display: inline-block !important;
    background: #f90;
    color: #fff;
    width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 10px;
    text-align: center;
}
div.legend{
	color: #999;
	font-size: 0.75em; margin-left: 20px;
}	

/* **************************************** MENU BAR **************************************** */

.menu { display: block; position: relative; width: 100%; font-size: 0.8em; transition: box-shadow .3s ease-in-out; z-index: 999; }

/* hover functionality */
.menu ul ul{ display: none; }
.menu ul li:hover > ul, .menu ul.guess li:hover > ul{
	display: block;
}

/* Mini home and language-switch button (displayed when menu becomes fixed upon scroll) */
.header_btn_home a {
    transition: .2s ease-in-out;
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    height: 20px;
    width: 50px;
    display: block;
    line-height: 20px;
    text-align: center;
    font-size: large;
    box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.4);
    font-weight: bold;
    color: #555;
    text-decoration: none;
    outline: none;
    border: none;
}
.header_btn_home.is_shown a {
    opacity: 1 !important;   
}

.header_btn_lang a {
    transition: .2s ease-in-out;
    opacity: 0;
    position: fixed;
    top: 0;
    right: 0;
    height: 20px;
    width: 50px;
    background: #fff;
    display: block;
    line-height: 20px;
    text-align: center;
    font-size: medium;
    box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.4);
    font-weight: bold;
    color: #444;
    text-decoration: none;
    outline: none;
    border: none;
}
.header_btn_lang a:hover {
    background: #e9e9e9;   
}
.header_btn_lang.is_shown a {
    opacity: 1 !important;   
}

/* main menu (parents - ul) */
.menu ul {
	list-style: none;
	position: relative;
	background-color: #c33;
	width: 100%;
	padding: 0; margin: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
}
.menu ul li {
	float: left;
	text-indent: 10px;
    flex-grow: 1;
}
.menu ul li a {
	display: block; padding-top: 5px; padding-bottom: 5px;
	text-decoration: none;
	transition:.2s;
}
/* submenu (ul ul) */
.menu ul ul {
	border-radius: 0; padding: 0;
	position: absolute; top: 100%; 	width: 20%;
	z-index: 50;
    box-shadow: 0 4px 15px -2px rgba(0, 0, 0, 0.3);
}
.menu ul ul li {
	float: none;
	position: relative;
	width: 100%;
}
.menu ul ul li a {
	padding-top: 10px; padding-bottom: 10px;
	text-indent: 10px;
	width: 100%;
}	

/* sub-submenu (ul ul ul) */
.menu ul ul ul {
	border-radius: 0; padding: 0;
	position: absolute; width: 100%;
	left: 100%; top: 0 !important;
	z-index: 999;
}
.menu ul ul ul li {
	position: relative;
	width: 100%;
}
.menu ul ul ul li a {
	padding-top: 10px; padding-bottom: 10px;
	text-indent: 10px;
	width: 100%;
}

/* pointer thing */
.menu ul ul li a span{
	float: right;
	margin-right: 10px;
}

/* **************************************** NOTIFY **************************************** */
.notify{
	display: block;
	text-align: center;
	padding: 5px;
	margin-bottom: 0;
	margin-top: 0;
	font-size: 0.8em;
	cursor: pointer;
}
.notify_container{
	margin-bottom: 5px;
}

/* **************************************** BANNER **************************************** */

.newban{
	width: 90%;
    margin: 15px auto;
    padding: 10px;
}
.newban span{
	margin-top: 3px; margin-bottom: 3px;
	display: inline-block; 
}
.newban span#a { width: 10%; vertical-align: middle; text-align: center; }
.newban span#a span#aa { padding: 2px; width: 20px; height: 20px; border-radius: 25px; font-weight: bold; font-size: 1.0em !important; }
.newban span#b { width: 89%; vertical-align: middle; font-size: 0.8em; }

/* **************************************** COLLAPSE STUFF (LB/WC) **************************************** */

label.collapse_top, div.collapse_top{
	display: block !important;
	width: auto !important;
    margin: 2px 0 0;
    color: #333;
	text-decoration: none;
    padding: 5px 5px 5px 20px;
    cursor: pointer;
	background-color: #eee;
	transition: .1s;
}
label.collapse_top:hover, div.collapse_top:hover{
	background-color: #ccc;
}
div.collapse_top{
	font-size: 0.8em;
}
.collapse_top span{
	display: inline-block; width: 40%;
}
.collapse_top span.small, .list span.small{
	display: inline-block; width: 20%;
	font-size: 0.8em;
}
label.collapse_top input[type="checkbox"]{
	border: 1px solid #ccc !important;
	margin-right: 15px !important;
}
div.list.collapse{
	font-size: 0.8em !important;
}
div.list.collapse.info_only{
	color: #999; background-color: #eee;
	border-top: 1px solid #eee; border-bottom: 1px solid #999; border-left: 1px solid #999;
	margin-top: -1px; margin-left: -1px;
	margin-bottom: 5px;
}
div.list.collapse.info_only:hover{
	background-color: #eee;
}	
span.collapse_hide{
	display: none;
	margin-left: 20px;
	border-left: 1px solid #ccc;
}
.colour_mark{ width: auto !important; display:inline; margin-right: 10px; }

/* **************************************** COLLAPSE FORUM POSTS **************************************** */

label.collapse_top.post_top{
	margin-left: 20px; margin-top: 0;
	background-color: white;
}
label.collapse_top.post_top:hover{
	background-color: #0cc;
}

span.forum_hide.pop{
	/* must set parent div to position: relative; */
	position: absolute;
	background-color: white;
	border: 1px solid #ccc; width: 98%;
}

span.forum_hide{
	padding: 5px;
	display: none;
}
	span.forum_hide .post, .post{
		margin: 10px;
		display: block;
		vertical-align: top;
		font-size: 0.8em;
		padding-left: 2px;
	}
	.post.boards{
		border: 1px solid #ccc;
		box-shadow: #ccc 1px 1px 2px;
		padding: 10px;
	}
		span.forum_hide .post .avatar, .post .avatar{
			vertical-align: top;
		}
		span.forum_hide .post .post_text, .post .post_text{
			display: inline-block;
			vertical-align: top;
			margin-left: 10px;
			width: 85%;
			padding: 10px; padding-top: 0 !important; padding-bottom: 0 !important;
			word-wrap: break-word;
		}
		span.forum_hide .post .post_text .forum_button, .post .post_text .forum_button{
			display: block; margin-top: 10px;
		}
		span.forum_hide .post .post_text .forum_button a, .post .post_text .forum_button a{
			font-size: 0.8em;
			padding: 2px !important;
		}
		span.forum_hide .post .post_text .post_title,
		.post .post_text .post_title {
			color: #099;
			margin-bottom: 5px;
		}

		span.forum_hide .post .post_text .post_title .post_time, .post .post_text .post_title .post_time,
		span.forum_hide .post .post_text .post_title .post_cont, .post .post_text .post_title .post_cont{
			display: block; float: right;
			color: #999; font-size: 0.8em;
			margin-left: 5px;
		}
		span.forum_hide .post .post_text .post_title .post_cont a{
			color: #099 !important; text-decoration: none;
		}
		.post_text textarea{
			font-size: 0.8em; display: block;
		}	

		.post_text img{
			width: auto !important;
			max-width: 95%;
			z-index: 1 !important;
		}

        .post_text img.fleft, span.faux img.fleft {
            float: left;
            margin: 10px 10px 10px 0;
        }
        .post_text img.fright, span.faux img.fright {
            float: right;
            margin: 10px 0 10px 10px;
        }
		

.cb_form{
	display:inline-block;
	width: 80%;
	margin-left: 10px;
}
.cb_form textarea, .cb_form input{
	margin-bottom: 1px;
	display: block;
	width: 80%;
	padding: 5px;
	color: #333;
}
.cb_form .button{
	display: inline-block;
	padding: 1px;
	min-width: 20px;
	text-align: center;
}
.cb_form .button.five{
	padding: 5px;
}

/* **************************************** WORDBANK STUFF **************************************** */

div.word_bank{
	display: inline-block;
	background-color: #aaa;
	color: #333 !important;
	padding: 0 !important;
	width: 280px !important;
}

.wb_inp{
	font-size: 0.8em !important;
	padding: 2px !important;
	margin: 0 !important;
}
select.wb_inp{
	width: 275px;
}

div.word_bank label{
	margin: 0 !important;
	margin-right: 5px !important;
	color: #333;
	padding: 2px;
}

div.word_bank span#word_bank_hide{
	display: none;
	padding: 2px;
	background-color: #ccc;
}

/* **************************************** LIST/REPORT STUFF **************************************** */

.list.report{
	font-size: 0.8em;
}
.list.report.top{
	font-weight: bold;
}

/* **************************************** LIST STUFF **************************************** */

.list{
	margin: 0;
    border-bottom: 1px solid #eee;
	color: #666;
	text-decoration: none;
    padding: 5px 5px 5px 20px;
    cursor: pointer;
	transition: .1s;
}
.list:hover{
	color: #333;
	border-bottom: 1px solid #ccc;
}

.list span{
	display: inline-block;
	width: 24%;
}

.list span.wc{
	font-size: 0.8em;	
	width: 12% !important;
}
.list span.time{
	width: 15% !important;
}
.list span.btn{
	text-align: right;
}
.list span a{
	display: inline !important;
	padding: 2px !important;
	margin: 0 !important;
}
.list span input[type="checkbox"]{
	border: 1px solid #999 !important;
}

/* **************************************** FOOT STUFF **************************************** */

div.foot{
	margin-top: 10px;
	width: 80%;
	margin-left: auto; margin-right: auto;
	font-size: 0.75em;
	color: #ccc;
	text-align: center;
}

/* **************************************** HOVER_ICON (+ clan_symbol, + gloss) **************************************** */
.hover_icon{
	display: inline-block;
	max-width: 25px !important;
	min-width: 25px !important;
	width: 25px !important;
	margin-left: 10px; margin-right: 10px;
	text-align: center;	
	font-size: 0.75em;
	font-weight: bold;
	cursor: pointer;
	position: absolute;
	z-index: 1;
}
span.faux .hover_icon{
	margin-top: 10px !important;
}
.clan_symbol{
	margin: 0;
	display: inline-block !important;
	text-align: center;	
	font-weight: bold;
	cursor: pointer;
	z-index: 1;
	font-size: 0.9em;
	min-width: 25px;
	max-width: 30px;
	text-indent: 0;
}
.gloss{
	margin: 0;
	display: inline-block !important;	
	cursor: pointer;
	z-index: 1;
	text-indent: 0;
	border-bottom: #333 1px dotted;
	color: inherit;
	transition: .1s;
}
.gloss:hover{
	background-color: #eee;
}
.hover_icon span, .clan_symbol span, .gloss span, .ipa_table_hover span{
	display:none !important;
}
.hover_icon:hover span, .clan_symbol:hover span, .gloss:hover span, .ipa_table_hover:hover span{
	margin: 0;
	display: block !important;
	font-weight: normal !important;
	position: absolute;
	text-align: left;
	width: 200px;
	padding: 5px;
	background-color: inherit;
	color: inherit;
}
.hover_icon:hover, .clan_symbol:hover, .gloss:hover{
	z-index: 10;
}
.gloss:hover span{
	padding: 10px;
	color: #333 !important;
}
.list .gloss{
	width: auto !important;
}
/* red '!' */
.hover_icon.warning{
	border-color: #caa !important;
	background-color: #caa;
	color: #600;
}
.hover_icon.warning span{
	background-color: #caa;
	color: #600;
}
/* blue '?' */
.hover_icon.information{
	border-color: #acc !important;
	background-color: #acc;
	color: #066;
}
.hover_icon.information span{
	background-color: #acc;
	color: #066;
}
/* grey '*' */
.hover_icon.dictionary{
	margin: 0 !important;
	border-color: #ccc !important;
	background-color: #ccc;
	color: #666;
}
.hover_icon.dictionary span{
	background-color: #ccc;
	color: #666;
}

/* **************************************** MISC STUFF **************************************** */

.msg_clan_avatar {
    height: 50px;
    width: 70px;
    border-radius: 25px;
    background-color: #2e9935;
    max-width: 50px;
    max-height: 50px;
    float: left;
    text-align: center;
}

.msg_clan_avatar > span {
    text-align: center;
    color: #fff;
    font-weight: bold;
    padding-right: 10px;
    padding-top: 4px;
    font-size: 30px;
}

.wl_drop_down{
	display: none;
	position: absolute;
	border: 1px solid #999;
	margin-top: -1px;
	width: 320px !important;
	background-color: white;
	font-size: 0.8em;
	box-shadow: 5px 5px 5px 0 #aaa;
	z-index: 50;
}
#wl_drop_down_scroll{
	display: block;
	max-height: 150px !important;
	overflow-y: scroll;
	border-bottom: 1px solid #999;
	margin-bottom: -1px;	
	width: 100% !important;
}
.wl_drop_down #wl_drop_down_scroll .list{
	padding: 2px !important;
	background-color: white;
	width: 98% !important;
	border: none;
	vertical-align: top;
}
.wl_drop_down #wl_drop_down_scroll .list:hover{
	background-color: #eee;
}
.wl_drop_down #wl_drop_down_scroll .list span{
	width: 45%;
	vertical-align: top;
}
.wl_drop_down a{
	display: inline-block;
	padding: 5px !important;
	color: #c0c;
	text-decoration: none;
}
.wl_drop_down a:hover{
	color: #909;
}
.wl_trans_list:hover{
	background-color: #eee;
}
/* conlang translation list */
.wl_trans_list span, .wl_trans_list a.mem, .wl_trans_list a.mem_staff{
	min-width: 25%;
	display: inline-block;
	margin: 5px;
	max-width: 35%;
	vertical-align: top;
	padding: 0;
	font-size: 0.8em;
}

/********************* MISC ***********************************/

.flag_line{
	display:block;
	margin: 5px;
}
.flag_line img{
	margin-right: 5px;
	display: inline-block;
	vertical-align: middle;
}
.flag_line span{
	display: inline-block;
	vertical-align: middle;
}

span.hidden_select{
	display: none;
}

.online_mark,.idle_mark{
	border-radius: 10px;
	font-size: 0.5em;
	display: inline-block;
	width: 5px !important;
	height: 5px !important;
	margin-bottom: 2px;
	vertical-align: middle !important;
}
.online_mark{
	border: 1px solid #6c6;
	background-color: #6c6;
}
.idle_mark{
	border: 1px solid #fa6;
	background-color: #fa6;
}

.redir_banner{
	display: block;
	height: 15px;
	width: 100%;
	position: fixed;
	bottom: 0;
	left: 0;
	background-color: #dedede;
	color: #999;
	padding: 15px;
	text-align: center;
	font-size: 0.9em;
}

/* QF - QuickFu-... i mean find. */
.qf_container{
	display: block;
	color: black;
	font-size: 1.2em;
	width: 30px;
	height: 30px;
	text-align: center;
	position: relative;
	z-index: 100000 !important;
}
.qf_container:hover{
	z-index: 100005 !important;
}
.qf_form{
	position: absolute;
	top: 0 !important;
	background-color: inherit;
	padding: 5px;
	/*top: -100%;*/
	left: 100%;
	display: none;
	opacity: 0.33;
	z-index: 100000 !important;
}
.qf_form:hover, .qf_container:hover .qf_form, .qf_form:hover input{
	opacity: 1.0 !important;
	z-index: 100005 !important;
}
.qf_form input{
	margin-bottom:5px;
	font-size: 0.8em;
}
.qf_button{
	display: inline-block;
	cursor: pointer;
	width: 99%;
	height: 99%;
    position: relative;
}
.qf_button .qf_counter {
    display: block;
    position: absolute;
    top: -8px;
    right: -8px;
    width: 20px;
    height: 20px;
    background: #ea3;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    border-radius: 20px;
    font-size: small;
    color: #fff;
    line-height: 20px;
    text-align: center;
    vertical-align: middle;
}
.qf_list{ background-color: #fff; cursor: pointer; font-size: 0.75em; z-index: 100005 !important; }
.qf_note{ background-color: #fff; opacity: 0.9; font-size: 0.7em; }
.qf_list,.qf_note{
	padding: 3px;
	text-align: left !important;
}
.qf_list:hover{
	background-color: #eee;
}
.qf_list span{
	display: inline-block;
}

.lang_tree{
	display: block;
	text-align: center;
}
.lang_tree_span{
	display: inline-block;
	background-color: rgba(238,238,238,0.5);
	border: 1px solid #ddd;
}
.node_case{
	text-align: center; display: inline-block; vertical-align: top;	
	margin: 2px;
}
.node_arrow{
	display: inline-block; width: 95%; text-align: center; margin: 0 !important;
	color: #aaa;
}
.node{
	background-color: #fff;
	text-align: center;
	display: block;
	font-size: 0.8em;
	border: 1px solid #999;
	width: 100%;
}
.node:hover .hidden{
	display: block;
}
.node .hidden{
	display: none;
	position: absolute;
	background-color: #eee;
	font-size: 0.8em;
	padding: 5px;
	width: auto !important;
}
.inner_node{
	margin-right: 5px !important;
	margin-top: 5px !important;
	margin-bottom: 5px !important;
	display: inline-block;
}
.dead{
	margin-left: 5px !important;
	color: #999;
	font-size: 0.8em;
	display: inline-block;
}
.unco{
	border-color: #AAA !important;
	color: #AAA;
}
.proto{
	border-style: dashed;
}

.award_outer{
	margin: 5px !important;
	display: inline-block !important;
	padding: 7px !important;
	font-size: 0.8em !important;
	width: 235px !important;
	border-radius: 5px !important;
	text-align: left !important;
	vertical-align: middle !important;
}
.award_inner_text{
	/*text-shadow: 1px 1px 5px #eeeeee !important;*/
	font-weight: bold;
}
.award_inner{
	display: inline-block !important;
	padding: 5px !important;
	text-align: center !important;
	margin-right: 10px !important;
	border-radius: 5px !important;
	width: 20px !important;
	vertical-align: middle !important;
}

						#fade, .fade{
							display: none;
							position: fixed;
							top: 0;
							left: 0;
							width: 100%;
							height: 100%;
							background-color: #000;
							z-index:1001;
							-moz-opacity: 0.7;
							opacity:.70;
							filter: alpha(opacity=70);
							margin: 0 !important;
						}
						#light, .light{
							display: none;
							position: fixed !important;
							top: 30%;
							left: 20%;
							
							width: 60%;
							height: 50%;
							
							margin-top: -100px;   
                            
                            box-shadow: 0 0 20px #000;
							
							padding: 10px;
							z-index:1002;
							overflow-x:visible;
							overflow-y: auto;
						}
						#light, .light{	background: #EEEEEE; }
						.light select, .light input, .light textarea, .light span.flat_select{
							background-color: #DDDDDD !important;
						}
						.light .half{
							display: inline-block !important; width: 45% !important; margin: 10px !important;
						}
						.light .under{
							color: #999999; font-size: 0.8em;
						}
						
/* LEXIBUILD DIAGRAMS */

.pic_label{
	font-size: 0.8em;
	width: 100px !important;
	display: block; position: absolute; 
	text-align: center;
	overflow-x: visible !important;
	overflow-y: hidden;
	z-index: 99;
	/*border: 1px solid red;*/
}
.pic_label span{
	opacity: 0.65;
	filter: alpha(opacity = 65);
	overflow-x: hidden !important;
	padding: 2px;
	background-color: black; color: white;
	z-index: 2;
}

.pic_label:hover{
	z-index: -1;
}
.pic_label span:hover{
	opacity: 1.0;
	filter: alpha(opacity = 100);
	cursor: pointer;
	position: relative;
	z-index: 5 !important;
}

.pic_label a{
	color: white !important;
}

.pic_mark{
	cursor: crosshair;
}

/* translation stuff */
.tran_ico{
	width: 26px;
	display: inline-block;
	height: 26px;
	opacity: 0.45;
	filter: alpha(opacity = 45);
	margin-bottom: 0 !important;
	border-radius: 20px;
	border: 1px solid white;
	overflow: hidden;
}
.tran_ico:hover{
	opacity: 1.0;
	filter: alpha(opacity = 100);
}
.tran_ico img{
	width: 100%;
	height: 100%;
}

/* circle flags */
.circle_flag_container{
	margin: 5px;
	overflow: visible;
}
.circle_flag{
	width: 50px;
	height: 50px;

	display: inline-block;
	overflow: hidden;
	text-align: center;
	
	border-radius: 25px;
	box-shadow: 0 0 5px 2px #eee;

    background: no-repeat 50% 50%;
}
.lang_circle_tag{
	display: none;
	vertical-align: top;
	font-size: 12px;
	top: 12px;
}
.circle_flag_container:hover .lang_circle_tag{
	display: inline-block;
	position: relative;
}
.lang_circle_tag .tag_text{
	background-color: black;
	padding: 5px;
	color: white;
	display: inline-block;
	position: absolute;
	margin-left: 10px;
	min-height: 15px;
}
.lang_circle_tag .triangle{
	display: inline-block;
	vertical-align: middle;
    width: 0;
	height: 0;
    border-style: solid;
	border-width: 10px 15px 10px 0;
	border-color: transparent #000000 transparent transparent;
	position: absolute;
    margin: 3px -10px 0 0;
}

/* THINGS FOR VIDEO TRANSLATION */
    .tl-song {
        display: table;
        width: 100%;
        box-sizing: border-box;
        table-layout: fixed;
    }
    .tl-song-player {
        display: table-cell;
        vertical-align: top;
        padding: 10px;
    }
    .tl-song-controls {
        margin: 10px 0;
    }
    .tl-song-controls button {
        padding: 10px;
        background: #3cf;
        color: #03f;
        border: none;
        outline: none;
        font-weight: bold;
    }
    .tl-song-body {
        display: table-cell;
        vertical-align: top;
        padding: 10px;
    }
    .tl-song-line {
        border: 1px solid #ccc;
        padding: 10px;
        display: table;
        width: 100%;
        box-sizing: border-box;
        margin: 5px 0;
        transition: background .5s ease-in-out;
        -webkit-transition: background .5s ease-in-out;
        -moz-transition: background .5s ease-in-out;
    }
    .tl-song-lnum {
        display: table-cell;
        vertical-align: middle;
        width: 60px;
        font-weight: normal;
    }
    .tl-song-lnum span {
        display: inline-block;
        padding: 10px;
        border-radius: 20px;
        color: #fff;
        background: #37f;
    }
    .tl-song-linebody {
        display: table-cell;
        text-align: left;
    }
    .tl-song-len {
        margin-bottom: 5px;
        font-size: small;
        color: #444;
    }
    .tl-song-current {
        border: 1px solid #ccc;
        padding: 10px;
        display: table;
        width: 100%;
        box-sizing: border-box;
    }
    .tl-song-current-lnum {
        display: table-cell;
        vertical-align: middle;
        width: 60px;
    }
    .tl-song-current-lnum span {
        display: inline-block;
        padding: 10px;
        border-radius: 20px;
        color: #fff;
        background: #37f;
    }
    .tl-song-current-linebody {
        display: table-cell;
        text-align: left;
    }
    .tl-song-current-len {
        margin-top: 5px;
        font-size: small;
        color: #777;
    }
    .tl-song-current-conlang {
        font-size: large;
        font-weight: bold;
    }
    .tl-generic-box {
        border: 1px solid #ccc;
        padding: 10px;
        margin: 5px 0 !important;
        display: block;
        box-sizing: border-box;
    }
    .tl-generic-small {
        border: 1px solid #ccc;
        padding: 10px;
        margin: 5px 0 !important;
        font-size: small;
        box-sizing: border-box;
        display: block;
    }
    .iscurrent {
        font-weight: bold;
        background: #cdf;
    }
/* END OF THINGS FOR VIDEO TRANSLATION */
/* GENERIC DISPLAYING THINGIE */
div.fw_table {
    width: 92%;
    padding: 5px 5px 5px 20px;
    font-size: 0.8em;
    display: table;
    table-layout: fixed;
    margin: 0;
}
div.fw_row {
    display: table-row;  
    table-layout: fixed;
}
div.fw_row span {
    cursor: pointer;
    color: #555;
    border-bottom: 1px solid #eee;   
}
div.fw_row:hover span {
    color: #333;
    border-bottom: 1px solid #ccc;
}
div.fw_table span {
    display: table-cell;
    padding: 10px;
    vertical-align: middle;
}
div.fw_table.tight span {
    padding: 3px 6px;   
}
div.fw_row.vtight span {
    padding: 3px 10px;   
}
div.fw_table span input, div.fw_table span textarea, div.fw_table span select {
    width: 100%;
}
div.fw_table span.mid {
    text-align: center;   
}


/****************************** AVATAR-ONLY ONLINE NOW THING *********************************************/
.olnow_mem {
	display: inline-block;
	margin-right: 12px;
	position: relative;
}
.olnow_info_wrap {
	position: absolute;
	bottom: 100%;
	padding-bottom: 7px;
	display: inline-block;
	text-align: center;
	left: 50%;
	transform: translateX(-50%);
}
.olnow_info {
	display: none;
	background: #444;
	padding: 5px 8px;
	color: #fff;
	position: relative;
	width: auto;
	height: auto;
	white-space: nowrap;
}
.olnow_info .olnow_curpage {
	display: block;
	color: #bbb;
	font-style: italic;
}
.olnow_mem:hover .olnow_info {
	display: block;
}
.olnow_info:after {
	top: 100%;
	left: 50%;
    content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
    border: 8px solid rgba(68, 68, 68, 0);
    border-top-color: #444;
    margin-left: -8px;
}
.olnow_avatar {
	text-decoration: none;
	outline: none;
	border: none;
	color: #333;
}
.olnow_avatar img {
	width: 32px;
	height: 32px;
	border-radius: 32px;
	border: 2px solid;
}
.olnow_avatar:hover img {
	width: 28px;
	height: 28px;
	border-width: 4px;
}
/************************************** AVATAR AND PIC ONLINE NOW THING ******************************************/
.alt_olnow_mem {
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 4px;
}
.alt_olnow_inner {
    display: table;
    table-layout: fixed;
}
.alt_olnow_avatar {
    display: table-cell;
    vertical-align: middle;
    width: 32px;
}
.alt_olnow_avatar img {
    width: 32px;
    height: 32px;
    border-radius: 32px;
    outline: none;
    border: none;
    vertical-align: middle;
}
.alt_olnow_info {
    display: table-cell;
    padding-left: 5px;
    vertical-align: middle;
}
.alt_olnow_info .alt_olnow_info_name {
    display: block;
}
.alt_olnow_info .alt_olnow_info_page {
    display: block;
    padding-left: 2px;
    color: #aaa;
    
}

/******************************************* CUSTOM SCROLLBARS ********************************************/
.cws_thinscroll::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
.cws_thinscroll::-webkit-scrollbar-track {

}
.cws_thinscroll::-webkit-scrollbar-thumb {
    width: 8px;
    background: #999;
    border-radius: 5px;
}
.cws_thinscroll:hover::-webkit-scrollbar-thumb {
    background: #666;   
}
.cws_thinscroll::-webkit-scrollbar-thumb:hover {
    background: #444 !important;   
}

/********************** New feed styles ***************************************/
.new_feed_update{
	display: block;
	margin: 0 !important;
	padding: 5px;
	padding-left: 10px !important;
	font-size: 0.8em;	
}
.new_feed_update.future{
	background-color: #ffc;
	border-bottom: 1px solid #ccc;
	
	max-height: 70px;
	overflow-y: hidden;
}
.new_feed_update.future:hover{
	max-height: none;
}
.new_feed_update .nfava{
	display: inline-block;
	max-width: 10%;
}
.new_feed_update .nfupt{
	display: inline-block;
	max-width: 85%;
}
.nfuptit{
	position: relative;
	display: block;
	color: #999;
}
.nftime{
	visibility: hidden;
	opacity: 0;
	transition: visibility 0s, opacity 0.2s linear;
  
	font-size: 0.8em;
	color: #999;
	position: absolute;
	right: 0;
	background-color: #eee;
	padding: 2px;
}
.new_feed_update:hover .nfupt .nfuptit .nftime{
	visibility: visible;
	opacity: 1;
}
.nfcont{
	color: #444 !important;
}



/* Gallery stuff */
.gall_thumb, .gall_hover{
    width: 100px; height: 100px;
	border: 1px solid #ddd;
	text-align: center;
	padding: 5px;
}
.gall_thumb{
	opacity: 0.5;
}
.gall_thumb:hover{
	opacity: 1.0;
}
.gall_hover #overbtn{
	display: none;
}
.gall_hover:hover #overbtn{
	display: block;
	position: absolute;
}
.gall_hover #hlfbtn{
	padding-top: 15px;
	vertical-align: middle;
	display: block;
	height: 35px;
	width: 100px;
	text-align: center;
	opacity: 0.7;
	background-color: #CCC;
	color: #000;
	text-shadow: 1px 1px #999;
}
#hlfbtn:hover{
	background-color: #3CC;
	color: #011;
	text-shadow: 1px 1px #066;
}
.gall_helper{
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.gall_thumb img, .gall_hover img{
	vertical-align: middle;
}
.gall_head{
	padding-left: 10px;
	font-size: 0.8em;
	vertical-align: top;
	display: inline-block;
}