/* Resets */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, font, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, button {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
	list-style: none;
}

/* HTML */

body { font-family: Verdana, sans-serif; background: #333016; margin: 0 0 20px 0; text-align: center; font-size: 14px; line-height: 1.3; color: #e2dca8; }
h1, h2, h3, h4, h5, h6 { font-family: Arial, sans-serif; font-weight: 400; line-height: 1.2; }
div { overflow: hidden; }
a { color: #fffc89; }
a:hover { color: #fff; }

/* Hidden */

#header h1 span, #controls span { position: absolute; left: 0; top: -500px; }

.hidden { display: none; }

/* Layout */

#container { width: 960px; text-align: left; margin: 0 auto; }

#header { width: 960px; background: #e2dca8; }
#header h1, #header h1 a { display: block; width: 357px; height: 61px; overflow: hidden; }
#header h1 { background: url("/images/logo-cs.gif") 0 0 no-repeat; margin: 20px; float: left; }
#header .ad { width: 468px; height: 60px; margin: 20px; float: right; }

#content { background: #67612d; }
#content h2 { color: #fffc89; font-size: 30px; padding: 20px 0; }

#mainbar { width: 680px; float: left; padding: 0 20px 20px 20px; }
#mainbar .title { width: 680px; clear: both; }
#mainbar .title h2 { float: left; }
#mainbar .title p { float: right; padding: 25px 0 0 10px; margin: 0; }
#mainbar .title p a { display: block; padding: 5px 5px 5px 21px; font-size: 12px; text-decoration: none; background: url("/images/icon-comments.gif") 0 50% no-repeat; }
#mainbar .date { width: 80px; height: 70px; float: left; margin: 0 20px 20px 0; text-align: center; background: #e16d16 url("/images/bg-date.gif") 0 0 no-repeat; line-height: 1; }
#mainbar .date p { margin: 5px; color: #fff; }
#mainbar .date span { display: block; clear: both; }
#mainbar .date .month { font-size: 11px; margin: 10px 0; }
#mainbar .date .day { font-size: 35px; font-weight: 700; line-height: 0.7; }
#mainbar .text { width: 580px; float: left; }
#mainbar .text ul, #mainbar .text ol { line-height: normal; padding: 0 0 0 40px; }
#mainbar .text li { list-style: square; }
#mainbar p, #mainbar ul, #mainbar ol, #mainbar label { margin: 0 0 20px 0; }

#sidebar { width: 220px; float: left; padding: 20px 20px 20px 0; }
#sidebar .ad { width: 220px; margin: 0 0 20px 0; }
#sidebar .group { background: #333016 url("/images/bg-sidebar.gif") 100% 100% no-repeat; padding: 0 0 15px 0; margin: 0 0 20px 0; }
#sidebar .group h3 { background: url("/images/bg-sidebar.gif") 0 0 no-repeat; font-size: 18px; margin: 0; padding: 20px 20px 5px 20px; }
#sidebar .group h3 a { color: #e16d16; }
#sidebar .group h3 a:hover { color: #fff; }
#sidebar .group li { width: 180px; overflow: hidden; clear: both; }
#sidebar .group li, #sidebar .group p { margin: 0 20px; padding: 5px 0; }
#sidebar #tags li { width: 160px; padding-left: 20px; background: url("/images/icon-tag.gif") 0 50% no-repeat; }
#sidebar #tweets { margin: 0; font-size: 11px; }
#sidebar #tweets a { text-decoration: none; }
#sidebar #tweets .date { display: block; color: #67612d; margin: 5px 0 0 0; }

#comic { width: 960px; height: 390px; background: #fff; }

#controls { width: 960px; background: #e16d16; }
#controls ul { margin: 0; padding: 0; list-style: none; }
#controls li { float: left; }
#controls a { color: #fff; }

#button-previous-article, #button-previous-article a { background: url("/images/button-previous-article.gif") 0 0 no-repeat; display: block; width: 210px; height: 50px; }
#button-previous-article.off { background-position: -210px; }
#button-next-article, #button-next-article a { background: url("/images/button-next-article.gif") 0 0 no-repeat; display: block; width: 173px; height: 50px; }
#button-next-article.off { background-position: -173px; }
#button-previous-comic, #button-previous-comic a { background: url("/images/button-previous-comic.gif") 0 0 no-repeat; display: block; width: 198px; height: 50px; }
#button-previous-comic.off { background-position: -198px; }
#button-next-comic, #button-next-comic a { background: url("/images/button-next-comic.gif") 0 0 no-repeat; display: block; width: 160px; height: 50px; }
#button-next-comic.off { background-position: -160px; }
#button-rss a { background: url("/images/button-rss.gif") 0 0 no-repeat; display: block; width: 140px; height: 50px; }
#button-comic a { background: url("/images/button-comic.gif") 0 0 no-repeat; display: block; width: 119px; height: 50px; }

#footer { width: 960px; background: #333016; padding: 20px; }
#footer p { font-size: 14px; line-height: 18px; color: #e2dca8; margin: 0; }
#footer a { color: #e2dca8; }

/* News */

#comments h3 { color: #fffc89; font-size: 17px; font-weight: 700; margin: 0; width: 100px; float: left; }
#comments h4 { color: #fffc89; font-size: 17px; font-weight: 700; margin: 0 0 20px 0; }
#comments ul { padding: 0; margin: 0; list-style: none; }
#comments span { display: block; }
#comments .title { width: 680px; margin: 0 0 20px 0; }

#leave-comment { width: 680px; padding: 10px 0 0 0; }
#leave-comment p { margin: 0 0 10px 0; }

#error { background: #e16d16; padding: 20px 20px 15px 20px; margin: 0 0 20px 0; border: 2px solid #fff; }
#error h5 { color: #fff; font-size: 17px; font-weight: 700; margin: 0 0 5px 0; }
#error ul { padding: 0; margin: 0; list-style: none; }
#error li { padding: 5px 0; }

.rowwrap { width: 680px; padding: 5px 0; }
.rowwrap .label { width: 100px; float: left; font-weight: 700; }
.rowwrap .input { width: 580px; float: left; }
.rowwrap input, .rowwrap textarea, .checkboxes { color: #fff; background: #333016; border: 1px solid #e2dca8; font-size: 13px; }
.rowwrap input { width: 220px; }
.rowwrap textarea { width: 578px; font-family: Verdana, sans-serif; }

.submit input { margin: 10px 0 0 100px; padding: 5px 10px; border: 0; background: #fffc89; color: #000; font-weight: 700; }

.comments { width: 680px; clear: both; }
.comments li { width: 680px; overflow: hidden; margin: 0 0 10px 0; }
.comments .avatar { width: 100px; float: left; }
.comments .message { width: 580px; float: left; }
.comments .author { width: 580px; margin: 0 0 10px 0; }
.comments .name { float: left; padding-right: 10px; font-weight: 700; color: #fffc89; }
.comments .time { text-align: right; font-size: 12px; color: #fff; }

.paging { width: 580px; overflow: hidden; padding: 0; margin: 0; list-style: none; }
.paging li { float: left; }
.paging li a { display: block; float: left; padding: 5px; margin: 0 5px 0 0; border: 1px solid #e2dca8; text-decoration: none; line-height: 13px; }
.paging .active a { border-color: #fff; background: #fff; color: #67612d; }

/* Archive */

ul.archive { width: 600px; overflow: hidden; list-style: none; padding: 30px; margin: 0; background: #fff; border: 10px solid #e2dca8; }
ul.archive li { float: left; padding: 0; margin: 0; }
ul.archive img { float: left; }