stable.css

:root {
	--border-color-dark: #333;
	--border-color-light: #181818;
	--background-dark: #2a2a2a;
	--background-darker: #222;
	--background-light: #343434;
	--text-color: #ccc;
	--text-color-light: #999;
	--highlight-color: #009ddd;
	--font-family: 'Open Sans', sans-serif;
	--text-shadow-color: #000;
	--meter-bg-color: #1e824c;
	--selected-text-shadow: 0 0 4px var(--text-shadow-color);
	--selected-background: #343434;
	--selected-text-color: var(--highlight-color);
}

/* Stable Table Styling */
.stable {
	border: 1px solid;
	border-color: var(--border-color-dark) var(--border-color-light) var(--border-color-light) var(--border-color-dark);
	--header-bg-color: transparent;
    --header-bg-image: linear-gradient(0deg, #3a3a3a 0%, #2a2a2a 100%);
    --header-border-color: #3a3a3a;
	--col-resize-sep-bg-color: #222;
    --row-border-color: #333;
    --row-odd-bg-color: #3a3a3a;
    --row-even-bg-color: #2a2a2a;
	--row-active-bg-color: #3a3a3a;
}

.stable td {
	padding: 2px;
}

/* Table Head Styling */
.stable thead {
	background: var(--background-dark);
	border: none;
	color: var(--text-color-light);
	font-family: inherit;
	text-shadow: none;
}

.stable thead td div {
	padding: 4px 16px 4px 6px !important;
}

div#tdcont .stable thead,
div#tdcont .stable {
	border: none;
}

.stable thead table tr {
	background: none;
	border: none;
}

.stable thead table tr td {
	border-color: #222;
	border-style: none solid solid none;
	border-width: 0 1px 1px 0;
	font-family: var(--font-family);
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	text-transform: uppercase;
	white-space: nowrap;
}

.stable thead div.resz {
	border: 1px solid red;
	background: transparent url(images/s.gif) no-repeat scroll left center;
}

/* Table Body Styling */
.stable-body {
	background: var(--background-darker);
	text-shadow: none;
	color: var(--text-color);
}

.stable tbody {
	background: var(--background-darker);
	text-shadow: none;
	color: var(--text-color);
}

.stable tbody tr {
    cursor: pointer;
    border-top: 1px solid #3a3a3a;
    border-bottom: 1px solid #3a3a3a;
}

.stable tbody tr td {
	border-bottom: 1px solid var(--background-darker);
	background: var(--background-dark);
	vertical-align: middle;
}

.stable tbody tr td div {
	font-family: var(--font-family) !important;
	font-size: 11px;
	height: 18px !important;
}

.stable-body td {
	border-bottom: 1px solid var(--background-darker);
	vertical-align: middle;
}

.stable-body td div {
	font-family: var(--font-family) !important;
	font-size: 11px;
	height: 21px !important;
	line-height: 11px;
}

.stable-body tr {
	height: 22px;
}

.stable tbody tr.selected td {
    background: #3a3a3a !important;
}

.stable tbody tr.odd td {
	background: var(--background-darker);
}

.stable tbody tr.even td {
	background: var(--background-dark);
}

.stable-body tr.odd td {
	background: var(--background-darker);
}

.stable-body tr.odd:hover td,
.stable-body tr.even:hover td {
	background: #333;
}

.stable-body tr.even td {
	background: var(--background-dark);
}

.stable-body tr.selected td {
	background: var(--selected-background);
	color: var(--selected-text-color);
	text-shadow: var(--selected-text-shadow);
}

/* Table Body Rows with nth-child */
div.stable-body table tbody tr.even td,
div.stable-body table tbody tr.even:nth-child(2n+1) td {
	background: var(--background-dark);
}

div.stable-body table tbody tr.even:hover td,
div.stable-body table tbody tr.even:hover:nth-child(2n+1) td {
	background: #333;
}

div.stable-body table tbody tr.even td:nth-child(2n+1) {
	color: #aaa;
}

/* Header Move Styling */
.stable-move-header {
	background: transparent url(images/header_move.gif) repeat-x scroll center top rgba(128, 128, 128, 0.7);
	border: 1px solid #09f;
	opacity: 0.7;
}

/* Gecko, IE, WebKit-Specific Styling */
.gecko .stable-move-header,
.ie .stable-move-header,
.webkit .stable-move-header {
	background: rgba(128, 128, 128, 0.7);
}

.stable-active-header {
	border-color: threedface !important;
}

.stable-separator-header {
	background: var(--border-color-light);
}

/* Scroll Position Styling */
.stable-scrollpos {
	background: var(--border-color-light) url(images/headers.png) repeat-x 0 -37px;
	height: 17px;
	line-height: 17px;
	border-bottom: 1px solid var(--border-color-dark);
}

.stable-scrollpos:nth-child(2n+1) {
	background: var(--border-color-light) url(images/headers.png) repeat-x 0 -64px;
}

/* Meter Value and Text Styling */
.meter-value {
	float: left;
	border: 0 inset #1b1b1b;
	background: var(--meter-bg-color);
	border-radius: 12px;
	height: 14px;
}

.stable-body tr.selected span.meter-value {
	color: var(--text-color);
}

.meter-text {
	color: var(--text-color);
	float: left;
	font-family: var(--font-family);
	font-size: 11px;
	font-weight: 400;
	left: 40%;
	line-height: 21px;
	overflow: visible;
	position: relative;
	text-align: left;
	text-shadow: var(--selected-text-shadow);
	z-index: 1;
}

/* Icon Styling */
.stable-icon {
	float: left;
	height: 16px;
	margin: 3px 5px 0 5px;
	padding: 0 !important;
	width: 18px;
}

/* Column Styling */
.stable-List-col-3 div {
	height: 18px !important;
	text-align: left;
}

.stable-List-col-6 div {
	font-weight: 400;
	text-align: center;
	text-shadow: var(--selected-text-shadow);
}