databap/style/databap.scss

/* Librairies */

@import 'variables';
@import 'fa';
@import 'fa-custom';
@import 'lightbox';
@import 'common';

/* Container */

#container {
	background:$col_main_1;
	padding:10px 10px 1px 1px;
}

/* Header */

#header {
	padding:0 0 10px 0;
	margin:0;

	table td.cell {
		width:50%;
		height:35px;
		margin:0;
	}

	.logo {
		position:absolute;
		top:9px;
		width:200px;
		height:35px;
		margin-left:36px;
	}

	#query, #search_btn_submit {
		height:25px;
		color:$col_main_1;
		border:none;
		float:right;
		padding:0 10px;
		font-size:15px;
	}

	#query {
		background:$col_none;
		width:250px;
	}

	#search_btn_submit {
		background:$col_main_2;
		height:20px;
		padding-top:5px;
	}

	#search_btn_submit:hover {
		background-color:$col_hover_1;
	}
}

/* Main */

#main_container {
	background:$col_main_2;
	margin-left:35px;
	position:relative;
	overflow:hidden;
	border:10px solid $col_main_2;
}

#page_title .side_margins {
	margin:0 0 10px 0;
}

#page_title h1 {
	padding:2px 0; /*To fit the icon in*/
	margin:0;
	width:100%;
	font-family: 'Databap', sans-serif;
	font-size:32px;
	line-height:32px;
	font-style:italic;
	font-weight:bold;
}

#page_title h1 #title_feedback {
	text-align: right;
}

#title_feedback .feedback {
	margin:0;
	padding: 0 5px;
	border:none;
	position:absolute;
	right:10px;
	top:14px;
}

#main {
	margin:0;
	padding:0;
	overflow:hidden;
}

/* Menu */

#menu {
	position:absolute;
	width:auto;
	padding:10px 0;
	z-index:10;

	#menu_title {
		position:relative;
		padding:0;
		margin:21px 0 0 0;
		text-align:center;
		cursor:pointer;
		font-size:20px;
		line-height:20px;
		font-weight:bold;
	}

	#menu_box ul {
		margin:0;
		padding:0;
		text-align:left;
		font-size: 20px;
		list-style:none;
	}

	#menu_box ul li {
		padding:10px 10px 10px 0;
		margin:0;
		list-style:none;
		cursor:pointer;
		line-height:20px;
		height:20px;
		font-size:20px;
		text-transform:capitalize;
	}

	#menu_box ul li:FIRST-CHILD {
		padding-top:0;
	}

	#menu_box ul li:FIRST-CHILD a {
		padding-top:8px;
	}

	#menu_box ul li a {
		padding:10px 0 10px 0;
		color:$col_main_2;
		display:inline-block;
		width:100%;
	}

	#menu_box ul li:hover a {
		color:$col_hover_1;
	}

	#menu_box a.active {
		background:#88B2F0;
		color:$col_hover_1;
		padding-right: 10px;
		@include round(10px, 10px, 10px, 10px);
	}

	#menu_box ul li a span {
		display: none;
	}

	#menu_box a.active span {
		display:inline-block;
		text-transform:capitalize;
		background:#04357B;
	}

	#menu_box ul li a.active .fa {
		margin-right:10px;
	}


	#menu_box ul li#rss_ln a {
		color:$col_main_1;
	}
}

/* Welcome */

#welcome #welcome_container {
	background:$col_main_3;
	padding:10px;
}

#welcome p.welcome_text {
	font-weight:bold;
	padding-top:0;
	padding-bottom:5px;
	border-bottom:1px solid #04357B;
	margin-bottom:20px;
}

#welcome #welcome_container ul {
	margin-top:0px;
}

#welcome #welcome_container ul li {
	font-size:$size_vbig;
	margin-top:10px;
	font-weight: bold;
}
#welcome #welcome_container ul li .fa-li {
	top: 0.242857em;
}

#welcome #welcome_container ul li ul {
	font-size:$size_big;
	margin-top:2px;
}

#welcome #welcome_container ul li ul li {
	font-weight:normal;
}

#welcome #welcome_container ul li:FIRST-CHILD, #welcome #welcome_container ul li ul li {
	margin-top:0px;
}

#welcome span.milestone {
	margin-left:5px;
	padding:2px 5px;
	font-weight:bold;
	border:1px solid $col_main_1;
	cursor:pointer;
	background: $col_none;
	background: -moz-linear-gradient(top,  $col_none 15%, $col_main_2 85%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(15%,$col_none), color-stop(85%,$col_main_2));
	background: -webkit-linear-gradient(top,  $col_none 15%,$col_main_2 85%);
	background: -o-linear-gradient(top,  $col_none 15%,$col_main_2 85%);
	background: -ms-linear-gradient(top,  $col_none 15%,$col_main_2 85%);
	background: linear-gradient(to bottom,  $col_none 15%,$col_main_2 85%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$col_none', endColorstr='$col_main_2',GradientType=0 );
}
#welcome span.milestone:hover {
	color:$col_hover_1;
	border-color:$col_hover_1;
	background: -moz-linear-gradient(top,  $col_none 15%, $col_hover_2 85%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(15%,$col_none), color-stop(85%,$col_hover_2));
	background: -webkit-linear-gradient(top,  $col_none 15%,$col_hover_2 85%);
	background: -o-linear-gradient(top,  $col_none 15%,$col_hover_2 85%);
	background: -ms-linear-gradient(top,  $col_none 15%,$col_hover_2 85%);
	background: linear-gradient(to bottom,  $col_none 15%,$col_hover_2 85%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$col_none', endColorstr='$col_hover_2',GradientType=0 );
}
#welcome span.milestone .fa {
	margin-right:5px;
}

#welcome a {
	text-decoration:underline;
}

/* Add Code */

#add_code_container, #add_code_container input {
	font-size:$size_vbig;
}

#add_code_container table {
	text-align:left;
}

#add_code_container table tr td {
	padding:5px 5px 5px 0;
}

#add_code_container table tr td:first-child {
	font-weight: bold;
}

#add_code_container table tr td.last {
	padding-bottom:0px;
}

#add_code_container textarea, #edit_container textarea {
	margin:0 -10px;
	padding:10px 6px 10px 10px;
	width:100%;
	min-height:100px;
	height:300px;
	font-family:Courier New, Courier;
	color:$col_black;
	font-size:$size_vbig;
}

#add_code_container .loggued {
	margin:0 12px;
}

#add_code_container input[type=text] {
	width:400px;
	padding:5px;
	color:$col_main_1;
}

#auth_company_container {
	display:none;
}

#add_code_container #add_code_btn {
	margin-top:10px;
	float:left;
}

#add_code_container input:hover, #add_code_container input[type=text]:focus {
	background-color:$col_hover_1;
}

#link_result, #available_phrase {
	display:none;
	margin-left:15px;
	padding:5px;
	font-size:$size_vbig;
}

#link_result {
	color:$col_main_1;
}

#available_phrase {
	display:none;
}

#available_phrase.available {
	color:$col_success;
	background:$col_success_2;
}
#available_phrase.unavailable {
	color:$col_error;
	background:$col_error_2;
}

/* read code */

#reader {
	margin:0;
	padding:0;
}

#reader #code_menu {
	padding:0;
	margin:0;
}

#code_container .code_reader {
	margin:10px 0 0 0;
	padding:0;
	background:#b5b5c6;
	background:$col_main_1;
}

#reader #code_container .code_reader {
	margin:0;
}

#code_container .code_reader ol li ::selection {
	background:#306897;
	color:$col_none;
}
#code_container .code_reader ol li ::-moz-selection {
	background:#306897;
	color:$col_none;
}

#code_container .code_reader .author_box {
	background:$col_main_1;
	border:none;
	color:$col_none;
}

#code_container .code_reader .author_box * {
	color:$col_none;
}

#code_container .code_reader .tab_left {
	/* margin: -13px 0; */
	margin:0;
	padding: 0 0 0 19px;
	background:#f7efde;
	border:none;
}

#code_container .code_reader ol {
	border-left: 1px solid #848484;
	background:$col_none;
	margin:0;
	/*list-style-type:decimal-leading-zero;*/
}

#code_container .code_reader ol li {
	/*margin:-1px 0 0 0;*/
	margin:0;
	padding:0;
	border-left:1px dotted #398c8c;
	background:$col_none;
	font-family:Courier New, Courier;
	font-size:$size_big;
	line-height:12px;
	text-indent:20px;
	color:#398c8c;
}

#code_container .code_reader ol li:first-child, #code_container .code_reader ol li:first-child span.expand_line {
	padding-top:5px;
}

#code_container .code_reader ol li.bigline, #code_container .code_reader ol li.bigline span.expand_line {
	padding-top:5px;
	padding-bottom:5px;
}

#code_container .code_reader ol li:hover, #code_container .code_reader ol li.code_hover {
	background-color:$col_main_3;
}

#code_container .code_reader .core {color:#0000ff; text-transform:uppercase;}
#code_container .code_reader .comment {color:#848484;}
#code_container .code_reader .number {color:#319cff;}
#code_container .code_reader .operator {color:#840084;}
#code_container .code_reader .string {color:#4aa518;text-transform:uppercase;}
#code_container .code_reader .string span {color:#4aa518;} /* override syntax coloring in strings */
#code_container .code_reader .string.curly {color:#000000;}
#code_container .code_reader .string .operator.pipe,
#code_container .code_reader .string .operator.curly {color:#840084;}
#code_container .code_reader .field-symbol {color:#848484;}
#code_container .code_reader .line {color:#848484;}
#code_container .code_reader .line-number, #code_container .code_reader .line-post-number  {color:#398c8c;}
#code_container .code_reader .global {color:$col_black;}
#code_container .code_reader .expand {font-weight:bold;}
#code_container .code_reader .comment span.code_part {
	color:$col_main_1;
	font-weight:bold;
	text-transform:capitalize;
}

#code_container .code_reader pre {
	white-space: pre-wrap; /* css-3 */
	white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
	white-space: -pre-wrap; /* Opera 4-6 */
	white-space: -o-pre-wrap; /* Opera 7 */
	word-wrap: break-word; /* Internet Explorer 5.5+ */
	margin:0;
	padding:0;
	border:none;
}

/* Default code line */
#code_container .code_reader ol li span {
	color:$col_black;
}
#code_container .code_reader ol li span.code, ol li span.comment {
	font-size:$size_vbig;
	margin-left:15px;
}
#code_container .code_reader ol li span.comment span, #code_container .code_reader ol li span.code span.comment {
	color:#848484;
	text-transform:none;
	font-weight:normal;
}

#code_container .code_reader ol li a.internal_link, #code_container .code_reader ol li a.external_link {
	color:$col_main_1;
	border:none;
	font-weight:normal;
	text-indent:0;
	text-decoration:underline;
}
#code_container .code_reader ol li a.internal_link span {
	color:$col_main_1;
	font-weight:normal;
}
#code_container .code_reader a.internal_link:hover, #code_container .code_reader a.internal_link:hover span {
	color:$col_hover_1;
}

#code_container .code_reader ol li span.hide span {
	color:#848484;
}

/* Expanding */
#code_container .code_reader ol li span.expand_line {
	border-left:1px solid #424242;
	color:#424242;
	text-align:center;
	width:5px;
	position:relative;
}

#reader #code_container .code_reader ol li span.expand_line span:before {
	content: '';
	position:absolute;
	margin-left:-21px;
}

#reader #code_container .code_reader ol li span.expand_line input {
	position:absolute;
	margin:3px 0 0 -4px;
	cursor:pointer;
	padding:0;
	z-index:1000;
	background: $col_none 0 0 no-repeat;
	width:9px;
	height:9px;
}

#reader #code_container .code_reader ol li span.expand_line input.minus {
	background-image:url('images/expand_minus.png');
}

#reader #code_container .code_reader ol li span.expand_line input.plus {
	background-image:url('images/expand_plus.png');
}

#reader #code_container .code_reader ol li span.expand_line input:hover {
	background-position: 0 -9px;
}

#edit_container {
	display:none;
	margin-bottom:10px;
}

#edit_container textarea {
	margin-top:10px;
	margin-bottom:20px;
	height:200px;
}

#edit_container #edit_btn {
	margin-left:-10px;
}

/* Search */

#search .summary {
	margin: 10px 0 0px 5px;
	font-size:$size_vbig;
	font-style: italic;
}

#search .code_reader:hover .tab_left,
#search .code_reader:hover ol,
#search .code_reader:hover li {
	background-color:$col_main_2;
	cursor:pointer;
}

#search .step_box {
	margin-bottom:10px;
}

#search #repeat_query {
	padding-bottom: 6px;
}

#search #sub_button_box {
	display:inline;
}

/* Profile */

#profile #avatar {
	width:96px;
	height:96px;
	background:url("images/avatar_96.png") 0 0 no-repeat;
	float:left;
}

#profile #profile_company_logo {
	width:24px;
	height:24px;
	vertical-align:middle;
	margin-right:5px;
}

#profile .user {
	margin-left:110px; /* 96 (picture) + 10 (margin) + 4 (borders) */
	padding:10px 16px;
	height:76px; /* 96 (picture height) - 20 (padding) */
	background:$col_main_3;
}

#profile .user .fa {
	margin-right:2px;
}

#profile .user p {
	font-size:16px;
	line-height:25px;
}

#profile .user p span {
	font-weight:bold;
}

#profile .user_history_title {
	margin:30px 0 0 0 ;
	padding:0 10px 0 25px;;
	font-size:25px;
	color:$col_main_1;
	border-bottom:2px solid $col_main_1;
	background:url(images/logo_25.png) 0 1px no-repeat;
}

#profile #history_subbox {
	margin-top:10px;
}

#profile #user_history p.history_line {
	padding:5px 10px;
	font-size:$size_vbig;
}
#profile #user_history p.history_line:nth-child(odd) {
	background:$col_none;
}
#profile #user_history p.history_line:nth-child(even) {
	background:$col_main_4;
}
#profile #user_history p.history_line:FIRST-CHILD  {
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 10px;
	-khtml-border-top-left-radius: 10px;
	-khtml-border-top-right-radius: 10px;
	-webkit-border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}
#profile #user_history p.history_line:LAST-CHILD  {
	-moz-border-radius-bottomright: 10px;
	-moz-border-radius-bottomleft: 10px;
	-khtml-border-bottom-left-radius: 10px;
	-khtml-border-bottom-right-radius: 10px;
	-webkit-border-bottom-right-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
}
#profile #user_history p.history_line .fa {
	margin-left:5px;
	margin-right:5px;
}

#profile #user_history a {
	text-decoration:underline;
}

/* Article */

#article .loading_box {
	font-size:16px;
}

/* Chat */

#chat #chat_room {
	margin-right:175px; /* 165px + 10px (margin-left) */
	background:$col_none;
	height:100%;
	padding:5px;
	position: relative;
}

.g_white_transparent {
	background: $col_black url("images/grad_white_transparent_50.png") repeat-x top;
	/*-o-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
	background: -moz-linear-gradient(
		top,
		$col_none,
		rgba(255,255,255,0)
	);
	background: -webkit-gradient(
		linear,
		left top, left bottom,
		from($col_none),
		to(rgba(255,255,255,0))
	);*/
}

#chat #chat_room #chat_shades {
	position:absolute;
	width:0;
	left:18px;
	margin-top:5px;
	height:50px;
	background: url("images/grad_white_transparent_50.png") repeat-x top;
}

#chat #chat_room #chat_container {
	clear:both;
	padding-bottom:5px;
}
#chat #chat_room #chat_container #chat_messages_box {
	position:relative;
	height:20px;
	overflow:hidden;
	background:$col_none url("images/sap_gold_332.jpg") 50% 50% no-repeat;
}

#chat #chat_room #chat_container #chat_messages {
	position:absolute;
	left:0;
	top:0;
	list-style:none;
	background:rgba(255,255,255,0.7);
	width:100%;
}

.noSelect {
	user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none;
}

#chat_messages p {
	color:$col_main_1;
	margin-bottom: 3px;
}
#chat_messages p.U {
	/*background-color:white;*/
}
#chat_messages p.A, #chat_messages p.PA, #chat_messages p.E, #chat_messages p.PE, #chat_messages p.N {
	background-color:$col_main_3;
	font-style:italic;
}
#chat_messages p.C {
	color:#CCC;
	text-decoration:none;
	font-style:normal;
}
#chat_messages p span.time {
	color:$col_hover_1;
	font-size:$size_small;
	font-style:normal;
	vertical-align: middle;
}
#chat_messages p a.user {
	font-weight:bold;
	color:$col_main_1;
	font-size:$size_big;
}
#chat_messages p span.console {
	font-size:$size_big;
	margin-right:5px;
}
#chat_messages p a.user {
	margin-left:5px;
}
#chat_messages p a.user:hover {
	text-decoration:underline;
}
#chat_messages p span.text {
	margin-left:5px;
	font-size:$size_big;

	&:focus {
		outline: none;
	}

	&.edit-btn {
		vertical-align: middle;
	}
}
#chat_messages p span.action {
	font-style:italic;
}
#chat_messages p span.text a {
	text-decoration:underline;
	font-style:normal;
}
#chat_messages p span.text a:visited {
	color:grey;
}
#chat_messages p span.highlight {
	color:$col_error;
}
#chat_messages p span.chan_link {
	font-weight:bold;
}
#chat_messages p span.news {
	font-weight:bold;
}

#chat_messages p img.proxy {
	vertical-align:middle;
	border:1px solid $col_main_1;
	padding:5px;
	background:$col_none;
}
#chat_messages p span.text a.img_box {
	position:relative;
}
#chat_messages p .banner {
	position: absolute;
	display:none;
	z-index: 1000;
	right: 0px;
	top:0;
	width:100%;
	margin:0;
	padding:0;
	background: rgba(4, 53, 123, 0.7);
}
#chat_messages p .banner a.button {
	margin:calc(0.33333em + 5px) 6px;
	float:right;
}
#chat_messages p span.text a.img_box:hover .banner, #chat_messages p span.text a.img_box.hidden .banner {
	display:inherit;
}

#chat_messages p .banner .banner_title {
	color:$col_none;
	font-size: $size_vbig;
	line-height:25px;
	margin:0 0 0 6px;
	padding:0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: inline-block;
}

#chat_messages p span.text a.img_box.hidden {
	position:inherit;
}
#chat_messages p span.text a.img_box.hidden img {
	display:none;
}
#chat_messages p span.text a.img_box.hidden .banner {
	top:0 !important;
	position:inherit;
	background:none;
}
#chat_messages p span.text a.img_box.hidden .banner_title {
	display:none;
}
#chat_messages p span.text a.img_box.hidden .banner .button {
	color:$col_main_1;
	margin:0;
	padding:0;
	float:none;
}
#chat_messages p span.text a.img_box.hidden .banner .button .fa {
	@extend .fa-20;
}

#chat_messages p span.status {
	&::before {
		content: "(";
	}

	font-size: $size_small;
	color: $col_main_2;
	vertical-align: middle;
	margin-left: 5px;
	display: none;

	&::after {
		content: ")";
	}
}

#chat_messages .help {
	border:1px dashed #666666;
	padding:0 0 5px 0;
	margin:5px 0;
	background:$col_none;
}
#chat_messages .help p {
	padding:0 5px;
	color:#666666;
	font-size:$size_medium;
}
#chat_messages .help p.title {
	font-size:$size_big;
	padding:3px 5px;
	border-bottom:1px dashed #666666;
	letter-spacing:0;
	display: inline-block;
	width:calc(50% - 10px);
	float:left;
}
#chat_messages .help p.subtitle {
	margin-top:5px;
	font-size:$size_medium;
}
#chat_messages .help p.item {
	margin-top:1px;
}
#chat_messages .help p.subtitle span {
	font-style:italic;
	border-bottom:1px dashed #666666;
}
#chat_messages .help p span.key {
	font-weight:bold;
	margin-right:5px;
}

/* Chat - Input */

#chat {

	#chat_input {
		background:$col_main_3;
		color:#94BDF9;
		overflow: hidden;
	}

	#c1_file {
		display: none;
	}

	.uploader_box {
		position:inherit;
		width:auto;
	}

	#upload_img {
		cursor:pointer;
		margin-top:2px;
	}
	i.fa#upload_img:hover {
		color:#EFAB00;
	}

	#chat_form .uploader_box > * {
		float:left;
		padding: 7px 0px;
	}

	.uploader_droparea {
		background:#D9E5F2;
		height:100%;
		top:0;
	}

	.uploader_droparea-active {
		background:#EFAB00;
		color:white;
	}

	#chat_input .fa {
		color:$col_main_1;
		margin-right:5px;
		margin-left:5px;
	}

	#chat_input input#message {
		background:$col_main_3;
		margin:0;
		border:none;
		min-width:200px;
		width:calc(100% - 72px); /* 32 icons width * 2 */
		font-size:$size_vbig;
	}

	#chat_input input#message:hover, #chat #chat_input input#message:focus {
		background-color:transparent;
	}
}

/* Chat - Sidebar */

#chat #sidebar {
	position:absolute;
	right:0;
	width:165px;
}

#chat #sidebar div {
	padding:5px;
}

#chat #sidebar .sidebar_box {
	position:relative;
	font-weight:bold;
	padding:0;
	margin-bottom:10px;
	overflow: hidden;
}

#chat #sidebar .sidebar_box_title {
	background-color:$col_main_3;
	text-align:center;
	font-size:$size_subtitle;
}

#chat #sidebar .sidebar_box_content {
	background:$col_none;
	font-size:$size_medium;
	font-weight:normal;
}

#chat #sidebar .help_paperclip {
	background: $col_none url('images/ms_paperclip_112.jpg') 50% 50% no-repeat;
	height:109px;
}

#chat #sidebar .sidebar_box_content p {
	padding:3px 0;
	overflow: hidden;
}

#chat #sidebar .sidebar_box_content p span.key {
	font-weight:bold;
	padding-right: 5px;
}

#chat #sidebar p.connected_user {
	font-size:$size_vbig;
}
#chat #sidebar a.connected_user_logo img {
	vertical-align:middle;
}
#chat #sidebar a.connected_user_name {
	display:inline-block;
	width:calc(100% - 24px - 5px); /* logo + right margin */
	font-style:italic;
	font-weight:normal;
	color:$col_main_1;
	text-decoration:underline;
	margin-left:5px;
}
#chat #sidebar a.connected_user:hover {
	color:$col_hover_1;
}

#chat .afk {
	position:absolute;
	font-size:20px;
	line-height:20px;
	text-shadow: 1px 1px 1px $col_main_2;
	margin-left:-20px;
	margin-top:2px; /* (24 - 20)/2 */
}

#chat #chat_chan {
}

#chat #chat_chan .tab_bar {
	font-weight:bold;
	margin:0 0 0 5px; /* 165px + the round corner */
}

#chat #chat_chan .tab_bar span.chan {
	display: inline-block;
	background-color:$col_main_3;
   	padding:2px 8px;
   	margin-left:5px;
	color:$col_main_1;
	font-size:$size_vvbig;
}

#chat #chat_chan .tab_bar span#join_chan {
	padding:2px;
	border-bottom:$col_main_1;
}
#chat #chat_chan .tab_bar span#join_chan:hover #join_chan_button {
	color:$col_hover_1;
}
#chat #chat_chan .tab_bar span.chan:hover, #chat #chat_chan .tab_bar span#join_chan.active {
	background-color:$col_main_1;
	color:$col_none;
}
#chat #chat_chan .tab_bar span.chan span.chan_title {
   	text-transform:capitalize;
}
#chat #chat_chan .tab_bar span.chan span.chan_unread {
   	font-weight:normal;
   	font-style:italic;
}
#chat #chat_chan .tab_bar a.quit_chan {
	margin-left:5px;
	color:$col_main_1;
}
#chat #chat_chan .tab_bar span.chan.active:hover a.quit_chan {
	color:$col_main_1;
}
#chat #chat_chan .tab_bar span.chan:hover a.quit_chan {
	color:$col_main_2;
}
#chat #chat_chan .tab_bar span.chan a.quit_chan:hover,
#chat #chat_chan .tab_bar .fa:hover {
	color:$col_hover_1;
}

#chat #chat_chan .tab_bar span#join_chan .hash {
	margin-left:5px;
}
#chat #chat_chan .tab_bar span#join_chan input, #chat #chat_chan .tab_bar span#join_chan input:hover {
	border:none;
	font-size:$size_vvbig;
	padding:0;
	margin:0;
	width:70px;
	background-color:$col_main_1;
	color:$col_none;
	font-weight:bold;
}
#chat #chat_chan .tab_bar span.active, #chat #chat_chan .tab_bar span.active:hover {
	border-bottom-color: $col_none;
	background-color: $col_none;
	color:$col_black;
}

#chat #chat_chan .tab_bar span.light_up {
	background-color:$col_hover_1;
}

#chat #sidebar #news, #chat #sidebar #news p {
	padding:0;
}
#chat #sidebar #news .new {
	padding:6px 5px;
}
#chat #news .new:nth-child(even)  {
	background:$col_none;
}
#chat #news .new:nth-child(odd)  {
	background:$col_main_4;
}
#chat #news .new:last-child  {
	-moz-border-radius:0 0 10px 10px;
	-webkit-border-radius:0 0 10px 10px;
	-khtml-border-radius:0 0 10px 10px;
	border-radius:0 0 10px 10px;
}
#chat #news .new .signature {
	font-size: 0.75em;
	text-align: right;
}
#chat #news .new .signature .news_time {
	font-style:italic;
}

/* Options */

#options .options_box {
	background:$col_main_3;
	width:calc(50% - 25px);
	float:left;
	margin:0 10px 10px 0;
	padding:10px;
}
#options .options_box:nth-child(even) {
	margin-right:0;
}
#options .options_box .loading {
	padding:10px;
}

#options .options_box h2 {
	color:$col_main_1;
	font-size:20px;
	margin:0 0 10px 0;
	border-bottom:2px solid $col_main_1;
}

#options .options_box .option_line {
	margin:5px 0;
	float:left;
	width:100%;
}

#options .options_box input[type=text],
#options .options_box input[type=color],
#options .options_box input[type=password],
#options .options_box select,
#options .options_box .checkbox {
	background:$col_main_4;
	border-width:1px;
	font-size:14px;
	padding:5px;
	float:right;
	width:calc(50% - 10px);
}

#options .options_box input[type=color] {
	width:50%;
	padding:3px 5px;
}

#options .options_box .option_line .clear {
	margin-left:10px;
	float:right;
	clear:inherit;
	color:$col_main_1;
}
#options .options_box .option_line .clear + input {
	width:calc(50% - 10px - 30px);
}

#options .options_box .button {
	float:left;
	clear:both;
}

#options .options_box select {
	color:$col_main_1;
}

#options .options_box .checkbox {
	text-align:center;
	padding-top:0;
	padding-bottom:0;
	background:none;
	font-size:1.7em;
}

#options .options_box .option_line p {
	float:left;
	width:50%;
	padding:5px 0;
	font-size:14px;
}

#options .options_box .button {
	margin-top:5px;
	float:none;
}

#options #admin {
	clear:both;
	width:calc(100% - 20px);
	padding-bottom:0;
}

#options #admin .magic_box {
	font-size:14px;
	padding:5px 10px 10px;
	background:$col_main_4;
	float:left;
	margin: 0 10px 10px 0;
}

#options #admin .magic_box form {
	text-align: center;
}

#options #admin .magic_box:last-child {
	margin-right:0;
}

#options #admin .magic_box h3 {
	margin:0;
	font-style: italic;
	text-align: center;
	padding:5px 0;
}

#options #admin .magic_box input, #options #admin .magic_box select {
	width:calc(100% - 10px);
	margin:5px 0;
	float:left;
	background:white;
}
#options #admin .magic_box select {
	width:100%;
}

/* Procedure */

#procedure #procedure_steps .button {
	background-color:$col_none;
}

#procedure #procedure_steps .button:hover {
	background-color:$col_hover_1
}

#procedure #procedure_steps .step_box:LAST-CHILD {
	margin-bottom:0;
}

#titles_read p.read_title {
	border-bottom:1px solid $col_main_1;
	font-weight:bold;
}

#titles_read p.read_details {
	font-size:$size_big;
	font-style:italic;
	margin:3px 0 15px 0;
}

#titles_read p.read_description {
	font-size:$size_vbig;
}

#titles_read p.read_description .fa {
	margin-right:5px;
}

#procedure table.step_box {
	width:100%;
}

#procedure table.step_box td {
	text-align:left;
	margin:0;
}

#procedure table.step_box td.step_margin {
	width:50%;
}

#procedure table.step_box td.step_buttons {
	padding-top:10px;
}

#procedure table.step_box td.image_box_container {
	vertical-align:top;
	padding-top:18px;
	padding-left:22px; /* 5*2 (padding) + 1*2 (border) + 10 (own padding) */
	min-width:350px;
}

#procedure table.step_box .image_box {
	margin:10px 0 15px;
	padding:0;
}

#procedure table.step_box input[type=file] {
	margin:0 10px;
	max-width:250px;
	border:1px solid $col_main_1;
	background:$col_none;
}

#procedure #procedure_title {
	margin-top:0;
}

#procedure #bottom_menu {
	margin:10px 0 0 0;
}

#procedure #top_menu {
	margin:0 0 10px 0;
}

#procedure #validation_button .button {
	margin-right:10px;
}

/* Procedure - Read */

#procedure .thumbnail_box {
	margin:10px 0;
	height: 100px;
}

#procedure .thumbnail_image {
	background:$col_none;
	border:1px solid $col_main_1;
	width:100px;
	height:100px;
	vertical-align:middle;
}
#procedure .thumbnail_image:hover {
	border-color:$col_hover_1;
}

#procedure .thumbnail_desc {
	font-size:$size_big;
}

/* Procedure - Uploader */

#procedure .error {
	margin:0 0 15px 0;
}

#procedure .uploader_box .error {
	font-size:$size_big;
	margin:10px 0;
}

/* Doc */

#doc_container, #doc {
	margin:0;
	padding:0;
}

#doc .step_box {
	margin-bottom:10px;
}

#doc .step_box:nth-child(odd) {
	background:$col_main_4;
}

#doc #attach_file {
	margin-top:10px;
}

#doc .uploader_droparea {
	height:150px;
}

#doc #doc_links {
	padding:20px 10px 10px 0px;
}

#doc #doc_links a.button {
	margin-top:5px;
}

/* Table */

#table #system {
	width:80px;
}

#table input#title {
	width:20%;
}
#table input#description {
	width:calc(80% - 92px);
}

#table .step_box_title a {
	color:$col_main_1;
}

#table #validation {
	margin-top:15px;
}

#table .table_info {
	margin-top:20px;
	font-size:0.8em;
}

#table #read_title {
	font-weight: bold;
}

#table #read_description {
	font-style: italic;
}

#table #read_formated_keywords {
	margin:10px 0 0 0;
	font-size: 0.9em;
}

#table #read_formatted_keywords a.internal_link {
	padding:0 0 0 2px;
}

#table input:disabled {
	color:$col_main_2;
	background-color:$col_main_1;
}

#table .form_success {
	display: none;
}

/* List */

#filters_container {
	margin-bottom:10px;
}

#list_container div:FIRST-CHILD {
	margin-top:0;
}

/* 404 */

#err_404 p {
	margin-top:20px;
	color:$col_main_1;
}

/* Footer */

#footer {
	padding-right:10px;
	text-align:right;
}

#footer p, #footer a {
	color:$col_none;
	margin:0;
	font-size:$size_small;
}

#footer a {
	font-weight:bold;
}

/* Note */

#note {
	height:100%;
}

#note_form {
	margin-bottom: 10px;
}

#note_form a.button {
	padding:5px 7px;
}

/* Debug*/

.line_h {
	position:fixed;
	top:0;
	height:1px;
	width:100%;
	border-bottom:1px solid $col_error;
	z-index: 1000;
}
.line_v {
	position:fixed;
	left:0;
	height:100%;
	width:1px;
	border-left:1px solid $col_error;
	z-index: 1000;
}