/* default.css */

html, body, form {
	margin: 0;
	padding: 0;
	font-family: arial;
}

p, div, span, h1, h2, h3, h4 {
	margin:  0;
	padding: 0;
}

.clear { clear: both; }
.left  { float: left; }
.right { float:right; }

a {	color: #0099FF;	text-decoration: none;}
a:hover { text-decoration: underline;}
p {	padding-top: 1px; }

/* Sticky Footer by Ryan Fait http://ryanfait.com/ */

html, body {
	height: 100%;
}
.wrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -70px;
}
.footer, .push {
	height: 70px;
}

/* Base css classes */

.so-site-select {
	color: gray;
	font-size: 14pt;
	font-weight: bold;
}

.header {
	border-bottom: 6px solid #FF9932;
	padding-left: 36px;
	padding-bottom: 8px;
	padding-top: 40px;
	margin-bottom: 6px;
	margin-right: 60px;
	text-align: right;
}

.header .title {
	color: #ccc;
	font-size: 34pt;
}

.header .title > a {
	color: inherit;
	text-decoration: none;
}

.sub-title, .footer {
	font-size: 9pt;
	color: gray;
}

.footer {
	margin-right: 60px;
}

.footer > div {
	border-right: 1px solid #ccc;
	text-align: right;
	padding-right: 8px;
	padding-top: 0px;
	padding-bottom: 4px;
}

a {
	color: #777;
	text-decoration: underline;
}

a:hover {
	color: #555;
}

.so-body {
	margin-right: 60px;
}

.so-body > div.block {
	float: right;
	margin-top: 8px;
	padding-top: 8px;
}

.so-body > div.block.last {
	margin-bottom: 16px;
}

div.block h2 {
	color: #bbb;
	font-size: 12pt;
}

div.block table {

}

div.block table thead td {
	border-bottom: 1px solid #ccc;
	text-align: center;
}

div.block table td {
	font-size: 12pt;
	font-weight: bold;
	color: #999;
	padding: 2px;
	width: 80px;
	text-align: right;
}

.so-counter-list {
	float: right;
	display: inline-block;
	text-align: right;
	margin-bottom: 16px;
}

.so-counter {
	font-size: 42pt;
}

a.so-counter {
	color: black;
}

.so-label {
	color: #999;
	font-size: 18pt;
	font-weight: bold;
}

.so-rate {
	font-size: 12pt;
	color: #bbb;

}

.so-counter-block {
	padding: 4px;
	margin-left: 32px;
	float: right;
}

.so-counter-block.last {
	margin-left: 0;
}

#weekly-chart {
	float: right;
}

/* comment view */
.block.comments {
	width: 600px;
}

.block.comments h2 {
	margin-top: 8px;
	margin-bottom: 4px;
}

.comment {
	margin-bottom: 8px;
}

.comment .head {
	margin-bottom: 6px;
}

.comment .title {
	color: gray;
	font-weight: bold;
	font-size: 9pt;
	margin-bottom: 2px;
}

.comment .subreddit {
	font-size: 8pt;
}

.comment .body {
	color: #222;
	font-size: 10pt;
}

.comment .body a.more {
	font-style: italic;
}

.subreddit-title {
	color: #bbb;
	font-size: 36pt;
	text-align: right;	
}

/* in order to render properly on mobile */
@media only screen and (max-width:600px) {
	.so-body, .header, .footer {
		margin-right: 0;
		padding-right: 8px;
	}

	.header {
		padding-left: 16px;
		padding-top: 10px;
	}

	.header .title {
		font-size: 28pt;
		text-align: left;
	}

	.footer > div {
		border-right: none;
	}

	#weekly-chart {
		display: none;
	}

	.block.comments {
		border-top: 2px solid #FF9932;
		margin-right: -8px;
		padding-left: 8px;
		width: 100%;
	}

	.block.comments h2 {
		padding: 0 8px;
		font-size: 18pt;
	}

	.comment {
		padding: 0 8px;
	}

	/* this could probably be done better id I used em font sizes further up... */
	.comment .title { font-size: 14pt; }
	.comment .subreddit { font-size: 12pt; }
	.comment .body { font-size: 12pt; }

}