contentdb/app/static/style.css

html, body {
	font-family: "Arial", sans-serif;
	background: #222;
	color: #ddd;
	padding: 0;
	margin: 0;
}

h1 {
	text-align: center;
}

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

.screenshot_list li {
	display: inline-block;
	margin: 5px;
	padding: 0;
}

.screenshot_list li a {
	display: block;
}

.screenshot_list img {
	width: 164px;
	height: 164px;
	object-fit: cover;
}


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;
}

.box_grey {
	padding: 10px;
	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;
}

.buttonset li a {
	text-align: center;
	color: #ddd;
	text-decoration: none;
}

.buttonset li a:hover {
	background: #444;
}

.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;
}

/* Alerts */

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

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

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

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

.alert-error {
	background: #933;
	border: 1px solid #c44;
}

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

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

/* Nav */

nav, main, #alerts {
	width: 90%;
	max-width: 960px;
	margin: auto;
	padding: 0;
}

nav {
	margin: 15px auto 5px auto;
	list-style: none;
	background: #333;
	border-radius: 5px;
	border: 1px solid #444;
}

nav .navbar-nav {
	float: left;
}

nav .navbar-right {
	float: right;
}

nav ul {
	margin: 0 auto 0 auto;
	padding: 0;
	list-style: none;
}

nav li {
	margin: 0;
	padding: 0;
	list-style: none;
	display: inline-block;
}

nav li a {
	color: #ddd;
	margin: 0;
	padding: 10px 20px;
	display: block;
	border-left: 1px solid #444;
}

nav a:hover {
	color: #eee;
	background: #444;
	text-decoration: none;
}


/* Footer */

footer {
	width: 80%;
	max-width: 860px;
	margin: auto;
	padding: 50px 0 20px 0;
}

footer a {
	color: #666;
}

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


/* Mod */

.box_img {
	position: relative;
	background-position: center;
	background-size: cover;
	background-image: url("screenshot.png");
	min-height: 220px;
	border-radius: 5px;
	padding: 0;
}

.box_img > h2 {
	display: inline-block;
	position: absolute;
	bottom: 15px;
	left: 15px;
}

.sidebar_container {
	display: block;
	position: relative;
	padding: 0;
	margin: 0;
}

.sidebar_container .right, .sidebar_container .left{
	position: absolute;
	display: block;
	top: 10px;
	margin-top: 0;
}

.sidebar_container .right {
	right: 0;
	width: 280px;
}

.sidebar_container .left {
	right: 295px;
	left: 0;
}

.sidebar_container .right > *:first-child, .sidebar_container .left > *:first-child {
	margin-top: 0;
}

.package-short-large {
	font-size: 120%;
}