@import url(http://fonts.googleapis.com/css?family=Ubuntu:400,700,400italic,700italic);

body {
	background-color: #333333;
	background-image: url('/images/bg.jpg');
	background-position: center top;
	background-size: 100%;
	background-repeat: repeat-y;
	font-family: Ubuntu, arial, sans-serif;
	margin: 0px;
	text-align: center;
	transition: background-position 0.5s linear;
	-webkit-transition: background-position 0.5s linear;
}

div#header {
	background-color: rgba(0, 0, 0, 0.6);
	box-shadow: 0px 0px 1ex 0px rgba(0,0,0,1);
	margin-bottom: 0.5ex;
	padding-bottom: 0.5ex;
}

div.box {
	background-color: rgba(0, 0, 0, 0.6);
	border-radius: 1ex;
	box-shadow: 0px 0px 1ex 0px rgba(0,0,0,1);
	margin: 0.5ex;
	padding: 1ex;
}

div.box>div, div#header>h1.nav {
	background-color: rgba(255, 255, 255, 0.75);
	border-radius: 0.5ex;
	box-shadow: 0px 0px 1ex 1px rgba(255,255,255,1);
	padding: 1ex;
	transition: background-color 0.25s;
	-webkit-transition: background-color 0.25s;
}

div.box:hover>div, div#header:hover>h1.nav {
	background-color: rgba(255, 255, 255, 0.9);
}

h1 {
	background: -moz-linear-gradient(top,  rgba(221,221,221,0.75) 0%, rgba(137,137,137,0.75) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(221,221,221,0.75)), color-stop(100%,rgba(137,137,137,0.75)));
	background: -webkit-linear-gradient(top,  rgba(221,221,221,0.75) 0%,rgba(137,137,137,0.75) 100%);
	background: -o-linear-gradient(top,  rgba(221,221,221,0.75) 0%,rgba(137,137,137,0.75) 100%);
	background: -ms-linear-gradient(top,  rgba(221,221,221,0.75) 0%,rgba(137,137,137,0.75) 100%);
	background: linear-gradient(to bottom,  rgba(221,221,221,0.75) 0%,rgba(137,137,137,0.75) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfdddddd', endColorstr='#bf898989',GradientType=0 );
	border: 0.2ex outset grey;
	border-radius: 0.5ex;
	font-size: 1.1em;
	font-weight: bold;
	margin: 0px;
	padding: 0.5ex;
	text-align: center;
}

h2 {
	border-bottom: 1px solid grey;
	font-size: 1.1em;
	font-weight: bold;
	margin: 0px 4ex;
	padding: 0.5ex;
	text-align: left;
}

div#header h1.nav {
	border-radius: 0px;
	box-shadow: none;
	padding: 0.5ex;
}

.nav a, .nav a:link, .nav a:visited, .nav a:active {
	background-color: rgba(200,200,200,0.4);
	border: 1px outset rgba(100,100,100,0.8);
	border-radius: 0.5ex;
	color: black;
	display: inline-block;
	font-weight: normal;
	font-size: 0.85em;
	margin-left: 1ex;
	margin-right: 1ex;
	padding: 0.2em 1ex;
	text-align: left;
	text-decoration: none;
	transition: background-color 0.2s, box-shadow 0.2s;
	-webkit-transition: background-color 0.2s, box-shadow 0.2s;
}

.nav a:hover {
	background-color: rgba(255,255,255,0.4);
	box-shadow: 0px 0px 0.2em 0px rgba(0,0,0,0.9) inset;
}

.nav a.selected {
	background-color: rgba(160,160,160,0.4);
	border: 1px inset rgba(100,100,100,0.8);
}

a:link, a:visited, a:active {
	color: #1111aa;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

a img {
	border: 0px;
}

p {
	margin: 1em 2ex;
	text-align: left;
	text-indent: 4ex;
}

ul li {
	margin: 0.6em 2ex 0.6em 0ex;
	text-align: left;
	text-indent: 1ex;
}

ul.compact {
	margin: 0.5em 0px;
}

ul.compact li {
	margin: 0px;
	text-indent: 0px;
}

input, select {
	background-color: rgba(255, 255, 255, 0.3);
	border: 1px inset grey;
}

table {
	margin: auto;
}

th {
	background-color: rgba(120,120,120,0.4);
	border: 1px outset grey;
	border-radius: 1ex;
	padding: 0.2ex 1ex;
}

td {
}

a.button {
	background-color: rgba(255,255,255,0.5);
	border: 1px outset grey;
	border-radius: 1ex;
	padding: 0.3em 1ex;
	display: inline-block;
	transition: background-color 0.15s, border 0.15s;
	-webkit-transition: background-color 0.15s, border 0.15s;
}

a.button:hover {
	background-color: rgba(160,160,160,0.5);
	border: 1px inset grey;
}

/**************************************
************* Special CSS *************
**************************************/

table.sortable th.sort {
	cursor: pointer;
	transition: background-color 0.2s, box-shadow 0.2s;
	-webkit-transition: background-color 0.2s, box-shadow 0.2s;
	-webkit-user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	-ms-user-select: none;
}

table.sortable th.sort:hover {
	background-color: rgba(200,200,200,0.4);
	box-shadow: 0px 0px 0.2em 0px rgba(0,0,0,0.9) inset;
}

table.sortable th.sortup:after {
	content: "\2191";
}

table.sortable th.sortdown:after {
	content: "\2193";
}

table.paged .page {
	padding: 0.2ex 5ex;
}

table.paged .paged-out {
	display: none;
}

table.paged .pageup,
table.paged .pagedown {
	cursor: pointer;
	font-weight: normal;
	padding: 0.2ex 1ex;
	transition: background-color 0.2s, box-shadow 0.2s;
	-webkit-transition: background-color 0.2s, box-shadow 0.2s;
	-webkit-user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	-ms-user-select: none;
	color: grey;
	opacity: 0.5;
}

table.paged .pageup.active,
table.paged .pagedown.active {
	color: black;
	opacity: 1;
}

table.paged .pageup.active:hover,
table.paged .pagedown.active:hover {
	background-color: rgba(200,200,200,0.4);
	box-shadow: 0px 0px 0.2em 0px rgba(0,0,0,0.9) inset;
}

table.paged .perpage {
	background: none;
	border: 1px inset grey;
	border-radius: 1ex 0ex 0ex 1ex;
	padding: 0px 1ex;
	width: 6ex;
}

/**************************************
************** News Feed **************
**************************************/

.smaller {
	font-size: 0.8em;
}

.smaller ul {
	margin: 0em;
	padding-left: 4ex;
}

.smaller li {
	margin: 0.1em 0ex 0em 0ex;
	text-indent: 0ex;
}

/**************************************
************** Game List **************
**************************************/

.gamelist {
	caption-side: top;
}

.gamelist caption {
	padding: 0.3ex 2ex;
}

.gamelist caption span {
	background-color: rgba(100,100,100,0.4);
	border: 1px outset grey;
	border-radius: 1ex;
	font-weight: bold;
	padding: 0.2ex 3ex;
}

.gamelist tbody tr {
	transition: background-color 0.15s;
	-webkit-transition: background-color 0.15s;
}

.gamelist tbody tr:hover {
	background-color: rgba(200,200,200,0.6);
}

.gamelist tbody tr td:first-of-type {
	text-align: left;
}

.gamelist td {
	position: relative;
}

.gamelist .weights td {
	border-top: 1px dotted grey;
	cursor: pointer;
	/*position: relative;*/
}

.swapcell {
	background: none;
	border: 0px;
	font-family: inherit;
	font-size: inherit;
	margin: 0px;
	outline: 0px;
	padding: 0px;
	/*position: absolute;
		top: 0px;
		right: 0px;
		bottom: 0px;
		left: 0px;*/
	text-align: inherit;
	width: 5ex;
}

/**************************************
************** Game Page **************
**************************************/

img.gamepic {
	width: 100%;
}

table.info {
	font-size: 0.8em;
}

table.info th {
	text-align: right;
	/*min-width: 12.5ex;*/
}

table.info td {
	padding: 0.2ex 1ex;
	text-align: left;
}

span.credit {
	display: block;
	font-size: 0.8em;
}
/*
.subreview, .subreview:link, .subreview:active, .subreview:visited {
	border: 1px outset rgba(100,100,100,0.5);
	border-radius: 1ex;
	color: inherit;
	cursor: pointer;
	display: inline-block;
	font-size: 0.9em;
	margin: 1ex 0.5%;
	padding-bottom: 0.5em;
	position: relative;
	width: 48%;
	transition: background-color 0.2s, box-shadow 0.2s;
	-webkit-transition: background-color 0.2s, box-shadow 0.2s;
}

.subreview:hover {
	background-color: rgba(160,160,160,0.4);
	box-shadow: 0px 0px 0.5em 0px rgba(0,0,0,0.9) inset;
	text-decoration: none;
}

.subreview .dots {
	display: inline-block;
	position: absolute;
	bottom: 1.3em;
	right: 1ex;
}

.sr_text {
	height: 11em;
	overflow: hidden;
}
*/
/* Steam */
#game_area_purchase {
	font-size: 0.8em;
}

#game_area_purchase h2 {
	margin: 0px;
}

.game_area_purchase_game {
	background-color: rgba(255,255,255,0.5);
	border: 1px outset grey;
	margin: 0.5em 0px;
	padding-bottom: 0.5em;
	transition: background-color 0.15s;
	-webkit-transition: background-color 0.15s;
}

.game_area_purchase_game:hover {
	background-color: rgba(200,200,200,0.6);
}

.game_area_purchase_platform {
	float: right;
}

.game_area_purchase_game p {
	font-size: 0.9em;
	font-style: italic;
	margin: 0px 1ex 0.4em 1ex;
	text-indent: 0px;
}

.game_purchase_discount_countdown {
	color: #000099;
	font-weight: bold;
}

.discount_pct, .discount_prices {
	display: inline-block;
	vertical-align: middle;
}

.discount_pct {
	color: #006600;
	font-size: 1.9em;
	font-weight: bold;
	margin-right: 2ex;
}

.discount_original_price {
	color: grey;
	text-decoration: line-through;
}

.discount_final_price, .game_purchase_price {
	font-size: 1.4em;
	font-weight: bold;
}

#purchase_note, .game_area_dlc_section {
	display: none;
}

/**************************************
************* Videos Page *************
**************************************/

table.videos {
	border-spacing: 0px 0.2em;
}

table.videos tr th:first-of-type {
	border-radius: 1ex 0ex 1ex 1ex;
}

table.videos tr th:last-of-type {
	border-left-width: 0px;
	border-radius: 0ex 1ex 1ex 0ex;
}

table.videos td p {
	text-indent: 0px;
}