.w1 {
	background: $tabularColorHeaderBg;
	padding-top: $tabularHeaderH;
	position: relative;
}
.w2 {
	background: $tabularColorBodyBg;
	overflow-y: auto;

}
.tabular {
	@include box-sizing(border-box);
	border-spacing: 0;
	border-collapse: collapse;
	display: table;
	font-size: 0.8em;
	width: 100%;
	.tr {
		display: table-row;
		&:first-child .td {
			border-top: none;
		}
		&:hover {
			background: rgba(white, 0.1);
		}
		&.header {
			display: table-header-group;
			.th {
				border: none;
				color: transparent;
				height: 0px;
				line-height: 0;
				padding: 0 $tabularTdPadLR;
				white-space: nowrap;
				vertical-align: middle; // This is crucial to hiding f**king 4px height injected by browser by default
				&:first-child em {
					border-left: none;
				}
				&.sort {
					em:after {
						display: inline-block;
						font-family: symbolsfont;
						margin-left: 5px;
					}
					&.asc em:after { content: '0'; }
					&.desc em:after { content: '1'; }
				}
				em {
//					background: rgba(green, 0.2);
					border-left: 1px solid $tabularColorBorder;
					color: $tabularColorHeaderFg;
					cursor: pointer;
					display: block;
					font-style: normal;
					font-weight: bold;
					height: $tabularHeaderH;
					line-height: $tabularHeaderH;
					margin-left: - $tabularTdPadLR;
					padding: 0 $tabularTdPadLR;
					position: absolute;
					top: 0;
					vertical-align: middle;
					&:hover {
						color: lighten($tabularColorHeaderFg, 20%);
					}
				}
			}
		}
		.th, .td {
			display: table-cell;
		}
		.td {
			border-top: 1px solid $tabularColorBorder;
			padding: $tabularTdPadTB $tabularTdPadLR;
			&.numeric {
				text-align: right;
			}
		}
	}
}