/* ################################################# */
/* ##############    GLOBAL LAYOUT    ############## */
/* ################################################# */

body {
	margin: 0px;
	margin-bottom: 30px;
	padding: 0px;
	background-color: rgb(23,23,23);
	background-image: url("../resources/images/background.png");
	background-repeat: repeat;
	font-family: "Helvetica", "Helvetica Neue", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Lucida";
	font-size: 11pt;
	font-weight: regular;
	color: rgb(160,160,160);
	line-height: 20px;
}

span.note {
	color: rgb(100, 100, 100);
}

div.main {
	width: 700px;
	margin: 0 auto;
}

div.header {
	height: 80px;
	width: 700px;
	
	padding-top: 4px;
	
	background-color: rgb(50,50,50);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(50,50,50,1)), to(rgba(30,30,30,1)));
	background: -moz-linear-gradient(100% 100% 90deg, rgb(30,30,30), rgb(50,50,50));
	color: black;
	
	text-align: center;
	
	/* Shadow */
	-o-box-shadow: 0px 10px 14px black;
	-icab-box-shadow: 0px 10px 14px black;
	-khtml-box-shadow: 0px 10px 14px black;
	-moz-box-shadow: 0px 10px 14px black;
	-webkit-box-shadow: 0px 10px 14px black;
	
	/* Bottom corners rounded */
	-webkit-border-bottom-left-radius: 4px;
	-webkit-border-bottom-right-radius: 4px;
	-moz-border-radius-bottomleft: 4px;
	-moz-border-radius-bottomright: 4px;
}

/* Footer content */
div.footer {
	color: rgb(120,120,120);
	font-size: 8pt;
	overflow: hidden;
}
div.footer-left {
	width: 320px;
	float: left;
	text-align: right;
	overflow: hidden;
}
div.footer-splitter {
	width: 1px;
	height: 42px;
	float: left;
	margin-left: 6px;
	margin-right: 6px;
	background-color: rgb(120,120,120);
}
div.footer-right {
	width: 320px;
	float: left;
	text-align: left;
	overflow: hidden;
}

/* Addon styles */
div.centered-content {
	text-align: center;
}

/* ################################################# */
/* #############    LISTS & TABLES    ############## */
/* ################################################# */

ul {
	list-style-image: url("../resources/images/bullet.png");
}
ul,ol li {
	margin-bottom: 10px;
}

/* A table such as those used to list features in the apps pages. */
table.icon-list td.description {
	padding-left: 10px;
	padding-bottom: 10px;
	text-align: justify;
}

/* App feature grid */
div.gridbox {
	background-repeat : no-repeat;
	background-color: red;
	padding-left : 40px;
	overflow: hidden;
	font-size: 13px;
	margin-bottom: 16px;
	text-align: justify;
}
div.app-left-column {
	width: 430px;
	float: left;
}
div.app-right-column {
	width: 166px;
	float: right;
	text-align: center;
}

/* A list of topics, such as the one used in the hobby page. */
table.topic-list {
	width: 100%;
	background-color: rgb(240,240,240);
	-webkit-border-top-left-radius: 4px;
	-webkit-border-top-right-radius: 4px;
	-moz-border-radius-topleft: 4px;
	-moz-border-radius-topright: 4px;
	-webkit-border-bottom-left-radius: 4px;
	-webkit-border-bottom-right-radius: 4px;
	-moz-border-radius-bottomleft: 4px;
	-moz-border-radius-bottomright: 4px;
}
table.topic-list td {
	padding: 16px;
	border-bottom: 1px solid rgb(224,224,224);
}
table.topic-list span.description {
	font-size: 11px;
}
table.topic-list td.date {
	color: rgb(140,140,140);
	width: 90px;
	text-align: right;
	vertical-align: top;
}

/* A simple bordered table with optional header. */
table.simple {
	background-color: rgb(210, 210, 210);
}

table.simple td {
	padding: 6px;
	border: 1px solid rgb(200, 200, 200);
	background-color: rgb(230, 230, 230);
}

table.simple tr.header td {
	font-weight: bold;
	background-color: rgb(216, 216, 216);
}

/* A standard invisible table with a reasonable amount of spacing. */
table.spaced td {
	padding: 6px;
	text-align: justify;
}

/* The apps menu on the Apps page. */
table.apps-menu {
	margin: 0 auto;
	/* Shadow */
	-o-box-shadow: 0px 10px 14px black;
	-icab-box-shadow: 0px 10px 14px black;
	-khtml-box-shadow: 0px 10px 14px black;
	-moz-box-shadow: 0px 10px 14px black;
	-webkit-box-shadow: 0px 10px 14px black;
}
table.apps-menu td {
	background-color: rgb(40,40,40);
	
	padding: 10px;
	width: 214px;
	vertical-align: top;
}
table.app-box {
	cursor: pointer;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
}
table.app-box td.title {
	border: 0px;
	font-size: 18px;
}
table.app-box td.description {
	border: 0px;
	font-size: 13px;
}

/* A table for forms */

div.form {
	border: 1px solid rgb(210,210,210);
	background-color: rgb(230, 230, 230);
	padding: 20px;
	margin-bottom: 20px;
}
table.form {
	margin: 0 auto;
}
table.form input[type="text"],textarea {
	border: 1px solid rgb(120, 120, 120);
	font-size: 14px;
	padding: 4px;
}
table.form td {
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 6px;
	padding-bottom: 6px;
}
table.form td.label {
	font-weight: bold;
	text-align: right;
	padding-right: 0px;
}

/* ################################################# */
/* #################    BLOCKS    ################## */
/* ################################################# */

/* A frameless, floating block of content in the main frame. */
div.frameless-block {
	margin-top: 40px;
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: 40px;
	color: rgb(160,160,160);
}
div.frameless-block a {
	color: rgb(204,137,20);
	text-decoration: none;
	-webkit-transition: all 0.20s linear;
}
div.frameless-block a:hover {
	color: white;
	text-shadow: rgb(121,93,44) 0 0 5px;
}

/* An invisible container containing the different block parts. */
div.block {;
	margin-top: 40px;
}
div.block a {
	color: rgb(185,47,0);
	text-decoration: none;
	-webkit-transition: all 0.20s linear;
}
div.block a:hover {
	color: rgb(215,77,30);
}

/* The block header with warning stripes. */
div.block-header-warning {
	background-color: rgb(244,161,21);
	background-image: url("../resources/images/block-header.png");
	height: 50px;
	padding-top: 10px;
	text-align: center;
	margin: 0 auto;
	
	/* Top corners rounded */
	-webkit-border-top-left-radius: 4px;
	-webkit-border-top-right-radius: 4px;
	-moz-border-radius-topleft: 4px;
	-moz-border-radius-topright: 4px;
	
	/* Shadow */
	-o-box-shadow: 0px 10px 14px black;
	-icab-box-shadow: 0px 10px 14px black;
	-khtml-box-shadow: 0px 10px 14px black;
	-moz-box-shadow: 0px 10px 14px black;
	-webkit-box-shadow: 0px 10px 14px black;
}
div.block-header-outer {
	margin: 0 auto;
	text-align: center;
	height: 40px;
	padding-left: 40px;
	background: transparent url('../resources/images/block-header-title-box-background.png') no-repeat left top;
}
span.block-header-inner {
	display:block;
	background: transparent url('../resources/images/block-header-title-box-right.png') no-repeat right top;
	padding-top: 10px;
	padding-right: 20px;
	float: right;
	width: 100%;
	height: 40px;
	font-size: 26px;
	color: rgb(230,230,230);
}

/* A grey block header without warning stripes. */
div.block-header {
	background-color: rgb(244,161,21);
	height: 40px;
	
	border-bottom: none;
	
	/* Top corners rounded */
	-webkit-border-top-left-radius: 4px;
	-webkit-border-top-right-radius: 4px;
	-moz-border-radius-topleft: 4px;
	-moz-border-radius-topright: 4px;
}

/* Grey block content without rounded corners. */
div.block-content {
	padding-top: 40px;
	padding-left: 40px;
	padding-right: 40px;
	padding-bottom: 20px;
	background-color: rgb(190,190,190);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(200,200,200,1)), to(rgba(180,180,180,1)));
	background: -moz-linear-gradient(100% 100% 90deg, rgb(180,180,180), rgb(200,200,200));
	color: black;
	
	/* Shadow */
	-o-box-shadow: 0px 10px 14px black;
	-icab-box-shadow: 0px 10px 14px black;
	-khtml-box-shadow: 0px 10px 14px black;
	-moz-box-shadow: 0px 10px 14px black;
	-webkit-box-shadow: 0px 10px 14px black;
}

div.bottom-rounded {
	/* Bottom corners rounded */
	-webkit-border-bottom-left-radius: 4px;
	-webkit-border-bottom-right-radius: 4px;
	-moz-border-radius-bottomleft: 4px;
	-moz-border-radius-bottomright: 4px;
}

div.minheight {
	min-height: 200px;
}

/* A semi-dark middle bar inside a block. */
div.block-midbar {
	background-color: rgb(130,130,130);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(140,140,140,1)), to(rgba(100,100,100,1)));
	background: -moz-linear-gradient(100% 100% 90deg, rgb(100,100,100), rgb(140,140,140));
	color: black;
	padding-left: 56px;
	padding-top: 10px;
	padding-bottom: 10px;
	
	/* Shadow */
	-o-box-shadow: 0px 10px 14px black;
	-icab-box-shadow: 0px 10px 14px black;
	-khtml-box-shadow: 0px 10px 14px black;
	-moz-box-shadow: 0px 10px 14px black;
	-webkit-box-shadow: 0px 10px 14px black;
}
div.block-midbar img {
	border: 0px;
}
div.block-midbar a {
	color: rgb(120,0,0);
	-webkit-transition: all 0.20s linear;
}
div.block-midbar a:hover {
	color: rgb(255,255,255);
}

/* A lighter footer bar. */
div.block-footer-light {
	background-color: rgb(205,205,205);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(200,200,200,1)), to(rgba(180,180,180,1)));
	background: -moz-linear-gradient(100% 100% 90deg, rgb(180,180,180), rgb(200,200,200));
	color: black;
	padding-left: 56px;
	padding-top: 10px;
	padding-bottom: 10px;
	
	/* Shadow */
	-o-box-shadow: 0px 10px 14px black;
	-icab-box-shadow: 0px 10px 14px black;
	-khtml-box-shadow: 0px 10px 14px black;
	-moz-box-shadow: 0px 10px 14px black;
	-webkit-box-shadow: 0px 10px 14px black;
	
	/* Bottom rounded corners */
	-webkit-border-bottom-left-radius: 6px;
	-webkit-border-bottom-right-radius: 6px;
	-moz-border-radius-bottomleft: 6px;
	-moz-border-radius-bottomright: 6px;
}

/* A standard block footer. */
div.block-footer {
	height: 20px;
	background-color: rgb(180,180,180);
	
	/* Bottom corners rounded */
	-webkit-border-bottom-left-radius: 16px;
	-webkit-border-bottom-right-radius: 16px;
	-moz-border-radius-bottomleft: 16px;
	-moz-border-radius-bottomright: 16px;
	
	/* Shadow */
	-o-box-shadow: 0px 10px 14px black;
	-icab-box-shadow: 0px 10px 14px black;
	-khtml-box-shadow: 0px 10px 14px black;
	-moz-box-shadow: 0px 10px 14px black;
	-webkit-box-shadow: 0px 10px 14px black;
}

/* A dark block part for displaying images such as screenshots. */
div.block-images {
	padding: 40px;
	background-color: rgb(60,60,60);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(40,40,40,1)), to(rgba(100,100,100,1)));
	background: -moz-linear-gradient(100% 100% 90deg, rgb(100,100,100), rgb(40,40,40));
	color: black;
	
	/* Shadow */
	-o-box-shadow: 0px 10px 14px black;
	-icab-box-shadow: 0px 10px 14px black;
	-khtml-box-shadow: 0px 10px 14px black;
	-moz-box-shadow: 0px 10px 14px black;
	-webkit-box-shadow: 0px 10px 14px black;
}
div.block-images img {
	border: 1px solid rgb(50,50,50);
	margin-left: 14px;
	
	/* Shadow */
	-o-box-shadow: 0px 6px 8px rgb(50,50,50);
	-icab-box-shadow: 0px 6px 8px rgb(50,50,50);
	-khtml-box-shadow: 0px 6px 8px rgb(50,50,50);
	-moz-box-shadow: 0px 6px 8px rgb(50,50,50);
	-webkit-box-shadow: 0px 6px 8px rgb(50,50,50);
}

/* A simple standalone block with slightly rounded corners. */
div.block-simple {
	padding-bottom: 20px;
	padding-right: 40px;
	padding-left: 40px;
	padding-top: 10px;
	background-color: rgb(190,190,190);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(200,200,200,1)), to(rgba(180,180,180,1)));
	background: -moz-linear-gradient(100% 100% 90deg, rgb(180,180,180), rgb(200,200,200));
	color: black;

	/* Top rounded corners */
	-webkit-border-top-left-radius: 6px;
	-webkit-border-top-right-radius: 6px;
	-moz-border-radius-topleft: 6px;
	-moz-border-radius-topright: 6px;
	
	/* Bottom rounded corners */
	-webkit-border-bottom-left-radius: 6px;
	-webkit-border-bottom-right-radius: 6px;
	-moz-border-radius-bottomleft: 6px;
	-moz-border-radius-bottomright: 6px;
	
	/* Shadow */
	-o-box-shadow: 0px 10px 14px black;
	-icab-box-shadow: 0px 10px 14px black;
	-khtml-box-shadow: 0px 10px 14px black;
	-moz-box-shadow: 0px 10px 14px black;
	-webkit-box-shadow: 0px 10px 14px black;
}

div.rounded-bottom {
	/* Bottom rounded corners */
	-webkit-border-bottom-left-radius: 6px;
	-webkit-border-bottom-right-radius: 6px;
	-moz-border-radius-bottomleft: 6px;
	-moz-border-radius-bottomright: 6px;
}