/* Resets */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, blockquote, 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;
}

/* HTML */

body { font-family: Georgia, serif; background: #333; color: #ccc; text-align: center; margin: 0; line-height: 1.5; font-size: 14px; }
div { overflow: hidden; }
ul { list-style: none; }
a { color: #ff0da4; text-decoration: none; }
a:hover { color: #fff; text-decoration: underline; }

/* Hidden */

#header h1 a span, #controls span, #comic span, #header-shop span { position: absolute; left: 0; top: -500px; }
.hidden { display: none; }

/* Layout */

#header { width: 980px; text-align: left; margin: 0 auto; background: #000 url("/images/bg-01.png") 0 0 repeat; }
#header h1, #header h1 a { display: block; float: left; width: 410px; height: 102px; background: #ff0da4; }
#header h1 a { background: url("/images/logo-cs.png") 0 0 no-repeat; }

#controls { width: 570px; height: 38px; margin: 54px 0 10px 0; float: right; }
#controls li, #controls a { float: left; height: 38px; }
#controls a { display: block; background: url("/images/buttons.png") 0 0 no-repeat; }
#controls a:hover { background-position: 0 -33px; }

#bt-prev { width: 121px; }
#bt-prev.off { background: url("/images/buttons.png") 0 -66px no-repeat; }
#bt-prev a { width: 121px; background-position: 0 0; }
#bt-prev a:hover { background-position: 0 -33px; }
#bt-next { width: 83px; }
#bt-next.off { background: url("/images/buttons.png") -121px -66px no-repeat; }
#bt-next a { width: 83px; background-position: -121px 0; }
#bt-next a:hover { background-position: -121px -33px; }
#bt-rss { width: 131px; }
#bt-rss a { width: 131px; background-position: -204px 0; }
#bt-rss a:hover { background-position: -204px -33px; }
#bt-arch { width: 127px; }
#bt-arch a { width: 127px; background-position: -335px 0; }
#bt-arch a:hover { background-position: -335px -33px; }
#bt-stor { width: 108px; }
#bt-stor a { width: 108px; background-position: -462px 0; }
#bt-stor a:hover { background-position: -462px -33px; }

#middle { background: #fff; }

#comic { width: 980px; height: 390px; position: relative; margin: 0 auto; padding: 15px 0 0 0; overflow: visible; }
#comic #arrow-left { display: block; background: url("/images/arrow.png") 0 0 no-repeat; width: 49px; height: 141px; position: absolute; z-index: 100; left: -49px; top: 132px; }
#comic #arrow-left:hover { background-position: 0 -141px; }
#comic #arrow-right { display: block; background: url("/images/arrow.png") 0 -282px no-repeat; width: 49px; height: 141px; position: absolute; z-index: 100; left: 980px; top: 132px; }
#comic #arrow-right:hover { background-position: 0 -423px; }

#updates { color: #818181; width: 980px; text-align: left; margin: 0 auto; background: #000 url("/images/bg-01.png") 0 0 repeat; }
#updates ul { font-style: italic; }
#updates h3, #updates #feature .quote { font-size: 22px; line-height: 1.2; font-style: italic; color: #fff; }
#updates h3 a { font-size: 13px; }
#updates h4 { font-size: 13px; font-weight: 800; }
#updates #headlines, #updates #twitter { width: 210px; margin: 25px 15px 25px 0; padding: 0 10px; float: left; border-right: 1px dotted #666; }
#updates #headlines { margin-left: 15px; }
#updates #headlines li { line-height: 1.2; background: url("/images/arrow-small.png") 0 8px no-repeat; padding: 3px 0 3px 15px; }
#updates #twitter .date { display: block; clear: both; font-weight: 800; color: #0e77ff; }
#updates #feature { width: 438px; float: left; margin: 25px 0; padding: 0 10px; }
#updates .text { float: left; width: 215px; }
#updates .text strong { color: #0e77ff; font-weight: 800; }
#updates .image { float: right; width: 210px; }
#updates .image img { border: 5px solid #fff; }

#content { width: 980px; text-align: left; margin: 0 auto; background: #222; }

#mainbar { width: 605px; float: left; padding: 25px 0 15px 25px; }
#mainbar h2 { font-style: italic; font-size: 30px; font-weight: 700; }
#mainbar p, #mainbar ul, #mainbar ol { margin: 10px 0; }
#mainbar ul { list-style: square; line-height: normal; padding: 0 0 0 40px; }
#mainbar ul li { padding: 4px 0; }
#mainbar a { color: #ff6ec8; }

#mainbar .news { clear: both; }
#mainbar .news .date { width: 70px; float: left; color: #000; text-align: center; padding: 5px; line-height: 1; background: #ff0da4; font-family: Verdana, sans-serif; }
#mainbar .news .date p { margin: 0; }
#mainbar .news .date .month { display: block; font-size: 11px; }
#mainbar .news .date .day { display: block; font-size: 40px; font-weight: 800; }
#mainbar .news .article { width: 510px; float: right; margin: 0 0 10px 10px; }
#mainbar .news .article .title { width: 510px; }
#mainbar .news .article .title h2 { width: 410px; float: left; }
#mainbar .news .article .title p { width: 80px; float: right; background: url("/images/icon-comment.png") 0 50% no-repeat; padding: 5px 0 0 20px; font-size: 11px; line-height: 1; font-family: Verdana, sans-serif; }

#sidebar { width: 300px; float: left; padding: 25px; }

#header-shop { width: 344px; height: 63px; background: #ff0da4 url("/images/header-shop.png") 0 0 no-repeat; }

#footer { width: 940px; margin: 0 auto; background: #000 url("/images/bg-01.png") 0 0 repeat; padding: 20px; font-family: Verdana, sans-serif; font-size: 11px; line-height: 1; }
#footer a { color: #fff; text-decoration: underline; }
#footer a:hover { text-decoration: none; }

/* News */

#comments h3 { color: #0e77ff; font-size: 17px; font-weight: 700; margin: 0; width: 100px; float: left; }
#comments h4 { color: #0e77ff; 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: 605px; margin: 0 0 20px 0; }

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

#error { background: #ff0da4; color: #000; padding: 20px 20px 15px 20px; margin: 0 0 20px 0; border: 2px solid #fff; }
#error h5 { color: #000; 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: 605px; padding: 5px 0; }
.rowwrap .label { width: 100px; float: left; font-weight: 700; }
.rowwrap .input { width: 505px; float: left; }
.rowwrap input, .rowwrap textarea, .checkboxes { color: #fff; background: #000; border: 1px solid #fff; font-size: 13px; }
.rowwrap input { width: 220px; }
.rowwrap textarea { width: 503px; font-family: Verdana, sans-serif; }

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

.comments { width: 605px; clear: both; }
.comments li { width: 605px; overflow: hidden; margin: 0 0 10px 0; }
.comments .avatar { width: 100px; float: left; }
.comments .message { width: 505px; float: left; }
.comments .author { width: 505px; margin: 0 0 10px 0; }
.comments .name { float: left; padding-right: 10px; font-weight: 700; color: #0e77ff; }
.comments .time { text-align: right; font-size: 11px; font-family: Verdana, sans-serif; color: #fff; }

.paging { width: 505px; 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 */

#mainbar ul.archive { width: 605px; padding: 3px 0 0 0; overflow: hidden; list-style: none; background: #fff; }
#mainbar ul.archive li { float: left; padding: 0; margin: 0 2px 0 0; }
#mainbar ul.archive li.last { margin: 0; }
#mainbar ul.archive img { float: left; }