/* =general */

div.comment, #respond { margin: 0 auto; }
div.count, img.old-image { float: left; }
div.info { float: right; }
#comments { width: 100%; }
#conversation, #respond { clear: both; float: none; }
#down, #up { display: block; }
div.comment, div.count, div.info, #conversation, #respond p.topic { position: relative }
#down, #up { position: absolute }
code, pre { font: 14px/22px Consolas, Lucida Console, Courier New, monospace; }
code, pre, dl.code, dl.code dd, dl.code dt { margin: 0; padding: 0; }
pre { overflow: auto; margin-bottom: 22px; }
div.hint { float: right; margin-right: -150px; width: 125px; padding-left: 25px; font: 11px/22px Trebuchet MS, Helvetica, Arial, sans-serif; color: #777; }

/* =layout */

#respond h1, #commenthead { margin-bottom: 22px; }
#main { width: 500px; padding-left: 100px; margin: 0 0 75px 0; }
div#main ul li:before { content: "\00B7\00A0\00A0" }
div#main ul { margin: 0 0 22px 22px; }
blockquote { margin: 22px 0; padding: 22px 25px 0 25px; }
#conversation, #commenthead { margin-left: 100px; }
#comments { margin-bottom: 50px; }
#comments li { min-height: 85px; padding: 18px 0 0 0; }
div.comment { width: 500px;	padding: 0 300px 22px 100px; }
div.comment p {	margin: 0 0 18px 0; }
div.comment blockquote { margin: 18px; padding: 9px 22px; }
#respond { width: 500px; padding: 0 300px 0 100px; margin-bottom: 50px; }
#respond textarea { width: 500px; }
div.count { width: 75px; margin-left: -120px; }
div.info { width: 250px; margin-right: -310px; }
img.old-image { margin: 4px 8px 0 0; padding: 4px; }
p.description img { float: none; }
a.next, a.prev { padding-left: 25px; }
#down, #up { top: 3px; left: 558px; width: 16px; height: 16px; line-height: 16px; }
dl { font-size: 12px; padding: 0 50px; }
dt { font-size: 12px; font-weight: bold; color: #111; }
ol { margin-left: 22px; }

div#respond { position: relative; }
div#respond label { padding: 0; text-transform: uppercase; color: #444; font: 10px Trebuchet MS, Arial, Verdana, Helvetica, sans-serif; }
div#respond input, div#respond textarea { font-size: 14px; margin-bottom: 15px; }
div#hints { width: 250px; font-size: 12px; position: absolute; right: 293px; top: 73px; color: #999; }
div#smallprint { margin: 0; position: absolute; right: 0px; bottom: 32px; width: 240px; }

p.sidenote { text-align: left; float: right; width: 160px; margin-right: -220px; font-size: 12px; }
p.sidenote img { margin-bottom: 11px; }
p.sidenote a img { border: 1px solid #fff; }
p.sidenote a:hover img { border: 1px solid #dd7000; }

p.footnote { margin: 0; color: #666; }
p.footnote sup { vertical-align: top; }
sup.footnote { margin-left: 1px; vertical-align: top; }
sup.footnote a { color: #666; vertical-align: top; font: normal 11px/11px Helvetica, Arial, "Trebuchet MS", sans-serif; }
sup.footnote a:hover { color: #dd7000; }

/* =typo */

blockquote { font-style: italic; }
p.description, p.footnote { font-size: 12px; }
#comments p code, div.info p { text-align: left; }
#comments {	line-height: 18px; font-size: 12px; }
div.count { font-weight: bold; font-size: 42px; line-height: 42px; letter-spacing: -2px; text-align: right; }
p.description { text-align: center; }
input[type="text"], textarea { color: #999; }
textarea { font-size: 12px; }

/* =colours */

blockquote { background-color: #f9f9f9; }
li.odd { background-color: #f5f5f5; }
li.odd div.comment blockquote { background-color: #e9e9e9; }
li.odd div.count { color: #e7e7e7; }
div.info p, label { color: #999999; }
div.count { color: #ededed; }
img.old-image { background-color: #f9f9f9; }

/* =design */

#main p ul { list-style: disc; }
blockquote { border-top: 1px solid #e5e5e5;	border-bottom: 1px solid #e5e5e5; }
li.odd { border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; }
li.odd div.comment blockquote { border-top: 1px solid #d5d5d5; border-bottom: 1px solid #d5d5d5; }
img.old-image { border: 1px solid #d9d9d9; }

/* =images */

a.next { background: #fff url(../i/symbols-next.png) 0 0 no-repeat; }
a.next:hover { background-position: 0 -16px; }
a.prev { background: #fff url(../i/symbols-prev.png) 0 0 no-repeat; }
a.prev:hover { background-position: 0 -16px; }
#down { background: #fff url(../i/symbols.png) -48px 0 no-repeat; }
#down:hover { background-position: -48px -16px; }
#up { background: #fff url(../i/symbols.png) -32px 0 no-repeat; }
#up:hover { background-position: -32px -16px; }

/* compatibility with old styles */

div#main img.oldimage { margin: 5px 10px 0 0; float: left; padding: 9px; background-color: #f5f5f5; border: 1px solid #cccccc; }
div#main p.description { text-align: left; padding: 0 40px; }
div#main p.description img { float: none; }