contentdb/app/scss/components.scss

h1 {
	margin: 0;
}

h2, h3 {
	margin: 5px 0;
}

a {
	color: #0be;
	font-weight: bold;
	text-decoration: none;
}

a:hover {
	color: #0df;
	text-decoration: underline;
}

/* Containers */

.box {
	border-radius: 5px;
	margin: 15px 0;
	padding: 0;
}

.box > h2, .box > h3 {
	margin: 0;
	padding: 0.5em 0.5em 0.5em 15px;
	border-bottom: 1px solid #444;
}

.box .box-body {
	padding: 1em !important;
}

// .box form {
// 	padding: 1em;
// }

.box_grey {
	background: #333;
	border: 1px solid #444;
}

.ul_boxes {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ul_boxes > li {
	padding: 0;
	list-style: none;
}

.box_link {
	display: block;
	color: #ddd;
	text-decoration: none;
}

.box_link:hover{
	background: #3a3a3a;
}


/*
	buttonset
*/

.buttonset, .buttonset li {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}

.buttonset {
	margin: 15px 0;
}

.button, .buttonset li a, input[type=submit] {
	cursor: pointer;
}

.button, .buttonset li a, input[type=submit], input[type=text],
		input[type=password], textarea, select, .bulletselector {
	text-align: center;
	display: inline-block;
	padding: 0.4em 1em;
	background: rgba(255,255,255,0.07);
	border: 1px solid rgba(255,255,255,0.1);
	color: #ddd;
	border-radius: 5px;
	text-decoration: none;
	font-size: 100%;
}

input[type=text], input[type=password], textarea, select, .bulletselector {
	text-align: left;
}

.ui-autocomplete, ui-front {
	position:absolute;
	cursor:default;
	z-index:1001 !important
}

.ui-autocomplete {
	background: #333 !important;
	border: 1px solid #444 !important;
	overflow-x: hidden;
	overflow-y: auto;
	max-height: 400px;

	li {
		display: block !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	a {
		display: block;
		padding: 0.3em 0.5em !important;
		margin: 0 !important;
	}
}

select {
	min-width: 200px;
}

select:not([multiple]) {
	background: linear-gradient(#444, #333);
}

.form-group {
	padding: 8px 0;
}

.form-group label {
	display: block;
	vertical-align: top;
	padding: 0 8px 8px 0;
}

.form-group input, .form-group textarea, .form-group .bulletselector {
	display: block;
	min-width: 100%;
	max-width: 100%;
}

.box .form-group input, .box .form-group textarea, .form-group .bulletselector {
	min-width: 95%;
	max-width: 95%;
}

.form-group textarea {
	min-height: 200px;
}

.button:hover, .buttonset li a:hover, input[type=submit]:hover {
	background: rgba(255,255,255,0.13);
	border: 1px solid rgba(255,255,255,0.17);
	text-decoration: none;
	color: #ddd;
}

.btn_green {
	background: #363 !important;
	border: 1px solid #473;
}

.btn_green:hover {
	background: #474 !important;
}

.linedbuttonset a {
	border: 1px solid #eee;
	border-radius: 3px;
	padding: 4px 10px;
	margin: 0;
	display: block;
}

.linedbuttonset {
	display: block;
	margin: 0;
}

.linedbuttonset li {
	display: inline-block;
	margin: 10px 10px 0 0;
}


.bulletselector input {
	border: none;
	border-radius: 0;
    -moz-border-radius: 0;
	box-shadow: none;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	width: auto;
	min-width: 50px;
	float: left;
    padding: 4px 0;
	white-space: nowrap;
	background: transparent;
}
.bulletselector .tag {
	background: #375D81;
	border-radius: 3px;
    -moz-border-radius: 3px;
	color: #FFF;
	float: left;
	height: 15px;
	padding: 0.1em 0.4em 0.5em;
	margin-right: 0.3em;
	margin-bottom: 0.3em;
    vertical-align: baseline;
}
.bulletselector .tag a {
	color: #FFF;
	cursor: pointer;
}
.bulletselector .tag a:hover {
	color: #0099CC;
	text-decoration: none;
}


/* Alerts */


.alert .alert_right, .alert > form {
	display: inline-block;
	margin: 0;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
}

.alert {
	padding: 10px;
	position: relative;

	.alert_right:not(.button) {
		padding: 0;
	}

	.alert_right form {
		height: 100%;
	}

	form {
		display: inline-block;
		margin: 0;
		padding: 0;
	}

	input {
		height: 100%;
	}

	input, .button {
		margin: 0;
		background: 0;
		border: 0;
		border-left: 1px solid rgba(255,255,255,0.12);
		border-radius: 0;
		vertical-align: middle;
	}

	input:hover, .button:hover {
		border: 0;
		border-left: 1px solid rgba(255,255,255,0.2);
	}
}

#alerts {
	list-style: none;
	position: fixed;
	bottom: 15px;
	left: 0;
	right: 0;
	z-index: 1000;
}

#alerts .alert {
	margin: 5px 0;
	vertical-align: middle;
}

#alerts .close {
	float: right;
	color: white;
}

#alerts .close:hover {
	color: #fff;
}

.alert-error, .button-danger {
	background: #933 !important;
	border: 1px solid #c44 !important;
}

.alert-warning {
	background: #963;
	border: 1px solid #c96;
}

.alert-success {
	background: #161;
	border: 1px solid #393;
}

table.fancyTable {
	font-family: "Arial Black", Gadget, sans-serif;
	border: 2px solid #000000;
	background-color: #4A4A4A;
	width: 100%;
	text-align: center;
	border-collapse: collapse;
}
table.fancyTable td, table.fancyTable th {
	border: 1px solid #4A4A4A;
	padding: 3px 2px;
}
table.fancyTable tbody td {
	font-size: 13px;
	color: #E6E6E6;
}
table.fancyTable tr:nth-child(even) {
	background: #888888;
}
table.fancyTable thead {
	background: #000000;
	border-bottom: 3px solid #000000;
}
table.fancyTable thead th {
	font-size: 15px;
	font-weight: bold;
	color: #E6E6E6;
	text-align: center;
	border-left: 2px solid #4A4A4A;
}
table.fancyTable thead th:first-child {
	border-left: none;
}

table.fancyTable tfoot {
	font-size: 12px;
	font-weight: bold;
	color: #E6E6E6;
	background: #000000;
	background: -moz-linear-gradient(top, #404040 0%, #191919 66%, #000000 100%);
	background: -webkit-linear-gradient(top, #404040 0%, #191919 66%, #000000 100%);
	background: linear-gradient(to bottom, #404040 0%, #191919 66%, #000000 100%);
	border-top: 1px solid #4A4A4A;
}
table.fancyTable tfoot td {
	font-size: 12px;
}

.t-mll tr td:not(:first-child) {
	text-align: left;
}

.userlist li.NOT_JOINED {
	color: #aaa;
}

.NOT_JOINED a, a.NOT_JOINED {
	color: #7ac;
}

.ADMIN a, a.ADMIN{
	color: #e30;
}

.MODERATOR a, a.MODERATOR {
	color: #e90;
}

.EDITOR a, a.EDITOR {
	color: #b6f;
}

.TRUSTED_MEMBER a, a.TRUSTED_MEMBER {
	color: #2c2;
}

/*
	Aside
*/

.asideright {
	float: right;
	margin: 0 0 0 15px;
	max-width: 300px;
}

.outsidecontainer {
	position: absolute;
	right: 102%;
	top: 0;
	width: intrinsic;           /* Safari/WebKit uses a non-standard name */
	width: -moz-max-content;    /* Firefox/Gecko */
	width: -webkit-max-content; /* Chrome */
}

@media (max-width: 1490px) {
	.outsidecontainer {
		display: none;
	}
}

.flatlist, .flatlist li {
	list-style: none;
	padding: 0;
	margin: 0;
}

.flatlist li {
	display: block;
}

.flatlist a {
	display: block;
	padding: 0.5em 20px;
	color: #ddd;
	font-weight: normal;
}

.flatlist a:hover {
	background: #444;
	text-decoration: none;
}

.table-topalign td {
	vertical-align: top;
}