/* define HTML5 block level elements */
header, nav, footer, article, section { display: block; }


/* layout */
/* !!!
html { margin: 0; padding: 0; }
body { width: 58em; margin: 1em auto; padding: 0 1em 1px 1em; }
*/

/* !!!:BGN */
ul#breadcrumbs { overflow: hidden; margin: 0; padding: 0; list-style: none; }
ul#breadcrumbs > li { float: left; margin: 0 1em 0 0; padding: 0; }
ul#breadcrumbs > li:before { content: '→'; margin-right: 1em; }
ul#breadcrumbs > li:first-child:before { content: none; }
/* !!!:END */


/* colors and typography */
/* !!!
html { background: #f2f2f2; }
body { font-family: sans-serif; font-size: medium; color: #333; background: white; box-shadow: 0 0 10px black; }

body { -moz-box-shadow: 0 0 10px black; -webkit-box-shadow: 0 0 10px black; }

body > header { margin: 0 -1em; padding: 0; color: white; background: #db0031; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); }
body > header h1 { margin: 0; padding: 0.5em 0.5em; font-size: 1.5em; font-weight: normal; }
body > header a { text-decoration: none; color: inherit; }

body > header > nav { font-size: 0.77em; margin: 0; padding: 0.75em 1.2em; background: #28698f; border-top: 1px solid white; }
body > header > nav a:hover { text-decoration: underline; }
body > header > nav > ul#utilities { float: right; margin: 0; padding: 0; list-style: none; }
body > header > nav > ul#utilities > li { display: inline; margin-left: 0.5em; }
body > header > nav > ul#utilities > li > a.newsfeed { padding: 1px 0 1px 20px; background: url(./feed.png) left center no-repeat; }
body > header > nav > ul#breadcrumbs { overflow: hidden; margin: 0; padding: 0; list-style: none; }
body > header > nav > ul#breadcrumbs > li { float: left; margin: 0 1em 0 0; padding: 0; }
body > header > nav > ul#breadcrumbs > li:before { content: '→'; margin-right: 1em; }
body > header > nav > ul#breadcrumbs > li:first-child:before { content: none; }

body > header {
	background: -moz-linear-gradient(top, #EA002E 0%, #AF0023 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#EA002E), color-stop(100%,#AF0023));
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#EA002E', endColorstr='#AF0023',GradientType=0 ); }

body > header > nav {
	background: -moz-linear-gradient(top, #3285B5 0%, #28698F 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3285B5), color-stop(100%,#28698F));
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3285B5', endColorstr='#28698F',GradientType=0 ); }

body > footer { font-size: 0.77em; margin: 1em 0; padding: 0; text-align: center; color: gray; }
body > footer a { color: inherit; text-decoration: none; }
body > footer a:hover { text-decoration: underline; }
body > footer a.help { padding-left: 20px; background: url(./help.png) no-repeat left center; }
*/

/* general content styles */
/* !!!
body > h2 { font-size: 1.5em; margin: 1em 0 0 0; padding: 0; font-family: serif; border-bottom: 1px solid #ccc; }
body a { color: hsl(202, 56%, 36%); text-decoration: none; }
body a:hover { text-decoration: underline; }
code { font-family: 'DejaVu Sans Mono', monospace; }
*/

/* general form styles */

form { }

form > .notice, form > .error { font-size: 0.77em; margin: 0.5em 0; padding: 0.5em 0.5em 0.5em 40px; background: no-repeat 10px 0.5em; border-width: 1px; border-style: solid; border-radius: 5px; }
form > .notice { background-image: url(./information.png); background-color: hsl(240, 100%, 95%); border-color: hsl(240, 100%, 90%); }
form > .error { background-image: url(./exclamation.png); background-color: hsl(0, 100%, 95%); border-color: hsl(0, 100%, 90%); }
form > .notice > h3, form > .error > h3 { margin: 0 0 0.5em 0; }
form > .notice > p, form > .error > p { margin: 0.5em 0 0 0; }

form > ul.error {  list-style: none;  }
form > ul.error > li { margin: 0.25em 0 0 0; padding: 0; }
form > ul.error > li:first-child { margin-top: 0; }

form p { margin: 0.5em 0; padding: 0; }
form p > label { float: left; margin: 0 1em 0 0; padding: 0.3em 0; }
form p > input { }
form p > textarea { display: block; width: 100%; height: 30em; box-sizing: border-box; margin: 0; padding: 0.25em; }
form p > button { }

input, textarea { font-size: 1em; font-family: sans-serif; padding: 0.25em; border: 1px solid #ccc; border-radius: 5px; box-shadow: inset 0 0 5px #ccc; }
input:focus, textarea:focus { border-color: #db0031; box-shadow: inset 0 0 5px #aaa; }
button { font-size: 0.77em; padding: 0.25em 0.75em; color: inherit; text-shadow: 0 1px white; background: #eee; border: 1px solid #ccc; border-radius: 5px; box-shadow: 0 0 1px #aaa, inset 0 0.75em 2px white; }
button:focus { border-color: #aaa; }
button:active { border-color: #aaa; box-shadow: 0 0 1px #aaa, inset 0 -1em 2px white; }

button.recommended { font-weight: bold; }

form > .notice, form > .error {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px; }
form p > textarea {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box; }
input, textarea {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-o-box-shadow: inset 0 0 5px #ccc;
	-moz-box-shadow: inset 0 0 5px #ccc;
	-webkit-box-shadow: inset 0 0 5px #ccc; }
input:focus, textarea:focus {
	-o-box-shadow: inset 0 0 5px #aaa;
	-moz-box-shadow: inset 0 0 5px #aaa;
	-webkit-box-shadow: inset 0 0 5px #aaa; }
button {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-o-box-shadow: 0 0 1px #aaa, inset 0 0.75em 2px white;
	-moz-box-shadow: 0 0 1px #aaa, inset 0 0.75em 2px white;
	-webkit-box-shadow: 0 0 1px #aaa, inset 0 0.75em 2px white; }
button:active {
	-o-box-shadow: 0 0 1px #aaa, inset 0 -1em 2px white;
	-moz-box-shadow: 0 0 1px #aaa, inset 0 -1em 2px white;
	-webkit-box-shadow: 0 0 1px #aaa, inset 0 -1em 2px white; }


/* message form styles */
form.message { overflow: hidden; }

form.message > .error, form.message > .notice { margin-right: 20.75em; }

form.message > section.help { float: right; margin: 2em 0 0 0; padding: 0; width: 14.9em; }
form.message > section.help > h3 { font-size: 1em; }
form.message > section.help > dl { margin: 0; padding: 0; font-size: 0.7em; }
form.message > section.help > dl > dt { font-weight: bold; }
form.message > section.help > dl > dd { margin: 0; padding: 0 0 0 1em; }
form.message > section.help > dl > dd > pre { margin: 0.5em 0 0.75em 0; padding: 0; font-size: 1em; font-family: sans-serif; }

form.message > section.fields { margin-right: 15.5em; }
form.message > section.fields > p { }
form.message > section.fields > p > label[for='message_subject'] { margin-right: 1em; }
form.message > section.fields > p > input#message_subject { width: 30em;  }
form.message > section.fields > p > textarea { font-size: 1em; font-family: sans-serif; }

form.message > section.fields > dl > dt, form.message > section.fields > dl > dd { font-size: 0.77em; margin: 0.5em 0; padding: 0; }
form.message > section.fields > dl > dt { padding-left: 20px; background: url(./attach.png) no-repeat left center; }
form.message > section.fields > dl > dd:last-child > a { display: none; }

form.message > article#post-preview { background: white; margin: 0.5em 0; }

/* hide stuff that is shown later by JavaScript */
form.message > ul.error, form.message > #message-post-error, form.message > #message-accepted, form.message > article#post-preview { display: none; }



/* action link list for main content */
div#forumbody ul.actions { overflow: hidden; margin: 0; padding: 2px 0; }
div#forumbody ul.actions > li.new.topic { float: left; }
div#forumbody ul.actions > li.all.read { float: right; font-size: 0.77em; }
div#forumbody ul.actions.above { }
div#forumbody ul.actions.below { border-top: 1px solid #ccc; }


div#forumbody ul.actions { list-style: none; }
div#forumbody ul.actions > li > a { padding-left: 20px; background-position: left center; background-repeat: no-repeat; }
div#forumbody a.new.topic.icon,
div#forumbody ul.actions > li.new.topic > a { background-image: url(./comments_add.png); }
div#forumbody a.new.message.icon,
div#forumbody ul.actions > li.new.message > a { background-image: url(./comment_add.png); }
div#forumbody ul.actions > li.destroy.message > a { background-image: url(./comment_delete.png); }
div#forumbody ul.actions > li.all.read > a { padding-top: 1px; padding-bottom: 1px; background-image: url(./newspaper_delete.png); }

div#forumbody ul.actions > li > a.noicon { padding-left: 0px !important; }

/**
 * Page specific styles
 */

/* styles shared by newsgroup and topic list */
div#forumbody  table.idx { width: 100%; margin: 0; padding: 0; border-spacing: 0; }
div#forumbody  table.idx > thead { font-size: 0.77em; color: gray; }
div#forumbody  table.idx > thead > tr > th { font-weight: normal; text-align:left; }
div#forumbody  table.idx > tbody > tr:nth-child(odd) > td { background: hsla(0, 0%, 50%, 0.05); }
div#forumbody.newsgroups table.idx > tbody > tr > td { padding: 0.5em; margin: 0; }
div#forumbody  table.idx > tbody > tr > td.empty { padding: 2em; text-align: center; color: gray; }


/* newsgroup list */
div#forumbody.newsgroups table.idx > tbody > tr > td:nth-child(1) > small { display: block; font-size: 0.77em; color: gray; padding-left:2em; }
div#forumbody.newsgroups table.idx > tbody > tr > td:nth-child(2) { font-size: 0.77em; width: 5em; text-align: center; }
div#forumbody.newsgroups table.idx > tbody > tr > td:nth-child(3) { font-size: 0.77em; width: 35em; }
div#forumbody.newsgroups table.idx > tbody > tr > td:nth-child(3) > small { display: block; font-size: 1em; color: gray; }
div#forumbody.newsgroups table.idx > tbody > tr.unread > td:nth-child(1) a { padding-left: 20px; background: url(./newspaper.png) no-repeat left center; color: hsl(202, 56%, 25%); }


/* topic list */
div#forumbody.topics table.idx > tbody > tr > td { padding: 0.25em 0.5em; margin: 0; }

div#forumbody.topics table.idx > tbody > tr > td:nth-child(2) { font-size: 0.77em; width: 5em; text-align: center; }
div#forumbody.topics table.idx > tbody > tr > td:nth-child(3) { font-size: 0.77em; width: 17.5em; }
div#forumbody.topics table.idx > tbody > tr > td:nth-child(3) > abbr::after { content: '\a'; white-space: pre; }


/* the ":link" removes the unread highlight when the user uses the back button to get back to the topic overview */
div#forumbody.topics table.idx > tbody > tr.unread > td:nth-child(1) > a:link { padding-left: 20px; background: url(./newspaper.png) no-repeat left center; color: hsl(202, 56%, 25%); }
/* chrome has trouble with the :link class… do some extra reseting for chrome */
div#forumbody.topics table.idx > tbody > tr.unread > td:nth-child(1) > a:visited { padding-left: 0; background: none; }

div#forumbody.topics form.message { margin: 1em 0; padding: 1px 0.5em; border: 1px solid rgba(0, 0, 0, 0.5); border-radius: 1em; background: hsla(0, 0%, 50%, 0.1); }

div#forumbody.topics form.message {
	-moz-border-radius: 1em;
	-webkit-border-radius: 1em; }


/* Hide stuff that is shown by JavaScript later on */
div#forumbody.topics ul.actions > li > a.new.topic, div#forumbody.topics form.message { display: none; }


/* post styles */
div#forumbody article { margin: 0; padding: 0.5em; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius: 5px; }
div#forumbody article > header { margin: -0.5em -0.5em 0 -0.5em; padding: 0.25em 0.5em; color: white; background: #28698f; border-radius: 5px 5px 0 0; }
div#forumbody article > header p { overflow: hidden; font-size: 0.77em; margin: 0; padding: 0; }
div#forumbody article > header p a { color: inherit; }
div#forumbody article > header p a.permalink { float: right; }
div#forumbody article > *:nth-child(2) { margin-top: 0.5em; }
div#forumbody article > *:last-child { margin-bottom: 0; }

div#forumbody article.unread > header { background: hsl(347, 100%, 40%); }
div#forumbody article.unread > header p { padding-left: 20px; background: url(./newspaper.png) no-repeat left center; }

div#forumbody article > p.empty { margin: 1em; text-align: center; color: gray; }

div#forumbody article > ul.attachments { margin: 0 -0.5em 0 -0.5em; padding: 0.5em 0.5em 0.5em 30px; border-bottom: 1px solid #ddd; list-style: none; background: hsl(0, 0%, 95%) url(./attach.png) no-repeat 8px 50%; }
div#forumbody article > ul.attachments > li { display: inline; margin: 0 0.5em 0 0; padding: 0; }

div#forumbody article > ul.attachments > li.thumbnail { display: inline-block; min-height: 100px; background-repeat: no-repeat; background-position: left center; padding-left: 105px; }
div#forumbody article > ul.attachments > li.thumbnail > a { display: block; padding-top: 30px; }

div#forumbody article > ul.actions { overflow: hidden; margin: 0 -0.5em -0.5em -0.5em; padding: 0.5em; list-style: none; background: hsl(0, 0%, 90%); }
div#forumbody article > ul.actions > li { display: inline; margin-right: 1em; }
div#forumbody article > ul.actions > li.destroy.message { float: right; font-size: 0.77em; margin-right: 0; }
div#forumbody article > ul.actions > li.destroy.message  > a { padding-top: 2px; padding-bottom: 2px; }

div#forumbody article hr { margin: 0.5em 0; padding: 1px 0 0 0; border: none; background: hsl(0, 0%, 70%); }

div#forumbody article blockquote { margin: 1em 0; padding: 0 0.5em; color: hsl(120, 100%, 25%); border-left: 2px solid hsl(120, 100%, 25%); }
div#forumbody article blockquote blockquote { color: hsl(190, 100%, 25%); border-color: hsl(190, 100%, 25%); }
div#forumbody article blockquote blockquote blockquote { color: hsl(260, 100%, 25%); border-color: hsl(260, 100%, 25%); }
div#forumbody article blockquote blockquote blockquote blockquote { color: hsl(330, 100%, 25%); border-color: hsl(330, 100%, 25%); }

div#forumbody article > p.quote-guardian { cursor: pointer; padding-left: 16px; font-size: 0.77em; background: url(./bullet_toggle_minus.png) no-repeat left center; }
div#forumbody article > p.quote-guardian:hover { color: hsl(202, 56%, 36%); text-decoration: underline; }
div#forumbody article > p.quote-guardian.collapsed { background-image: url(./bullet_toggle_plus.png); }
div#forumbody article > p.quote-guardian.collapsed:after { content: ' …'; }
div#forumbody article > p.quote-guardian.collapsed + blockquote{ display: none; }

div#forumbody article { -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
	-moz-border-radius: 5px; -webkit-border-radius: 5px; }
div#forumbody article > header { -moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0; }

/* reply form styles */
div#forumbody.messages form.message { margin: 0 -0.5em -0.5em -0.5em; padding: 0 0.5em 0 0.5em; background: hsl(0, 0%, 90%); }
div#forumbody.messages form.message > section.help { margin-top: 0; }

/* hide the reply form, it's shown by a script */
div#forumbody.messages form.message { display: none; }

/* delete confirmation dialog */
div#forumbody article { position: relative; }
div#forumbody article > div.confirmation { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.85); border-radius: 5px; }
div#forumbody article > div.confirmation > form { position: absolute; width: 15em; margin: 0 auto; padding: 0.5em; text-align: center; color: #333; background: hsl(0, 0%, 90%); border-radius: 5px; }
div#forumbody article > div.confirmation > form > p { margin: 0; padding: 0; }
div#forumbody article > div.confirmation > form > p + p { margin: 0.5em 0 0 0; padding: 0; }
div#forumbody article > div.confirmation > form button { margin: 0 2em; }
div#forumbody article > div.confirmation > form button + button { font-weight: bold; }

div#forumbody article > div.confirmation, div#forumbody article > div.confirmation > form { -moz-border-radius: 5px; -webkit-border-radius: 5px; }


/* message list styles */
div#forumbody.messages ul { margin: 0; padding: 0; list-style: none; }
div#forumbody.messages ul > li { margin: 1em 0; padding: 0; }

div#forumbody.messages ul > li article + ul { margin: 0.5em 0; padding: 0.5em 0 0 0.5em; list-style: none; border-left: 1px dashed gray; }
div#forumbody.messages ul > li article + ul > li { margin: 1em 0 0 0; padding: 0; }
div#forumbody.messages ul > li article + ul > li:nth-child(2) { margin-top: 0; }  /* first child is the reply guardian */

div#forumbody.messages ul > li > ul { border-color: hsl(120, 100%, 25%); }
div#forumbody.messages ul > li > ul > li > ul { border-color: hsl(190, 100%, 25%); }
div#forumbody.messages ul > li > ul > li > ul > li > ul { border-color: hsl(260, 100%, 25%); }
div#forumbody.messages ul > li > ul > li > ul > li > ul > li > ul { border-color: hsl(330, 100%, 25%); }
div#forumbody.messages ul > li > ul > li > ul > li > ul > li > ul > li > ul { border-color: hsl(40, 100%, 25%); }
div#forumbody.messages ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul { border-color: hsl(110, 100%, 25%); }
div#forumbody.messages ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul { border-color: hsl(180, 100%, 25%); }

div#forumbody.messages article + ul { position: relative; }
div#forumbody.messages article + ul > li.reply-guardian { text-indent: -10000px; position: absolute; top: -0.5em; left: -8px; margin: 0; padding: 0 0 0 16px; background: url(./bullet_toggle_minus.png) no-repeat left center; cursor: pointer; font-size: 0.77em; }

div#forumbody.messages article + ul.collapsed { margin: 0.5em 0; padding: 0; }
div#forumbody.messages article + ul.collapsed > li.reply-guardian { text-indent: 0; position: static; margin: 0.5em 0 0.5em -8px; background-image: url(./bullet_toggle_plus.png); }
div#forumbody.messages article + ul.collapsed > li.reply-guardian:hover { color: hsl(202, 56%, 36%); text-decoration: underline; }
div#forumbody.messages ul.collapsed > li:not(.reply-guardian) { display: none; }



div#forumbody .forumcategory { background-color:#fbfbfb !important; }
div#forumbody .forumcategory td { background-color:#fbfbfb !important; }
div#forumbody .forumcategory td { border-bottom:1px solid #ddd; }
div#forumbody .forumcategory td h3 { margin:0 !important;padding:0 !important; }




div#forumbody .forumadinlist, div#forumbody .forumadinlist td { background-color:#fbfbfb !important; }

div#forumbody .ad728 { border:none solid #ddd; margin-top:3em;margin-bottom:3em; text-align:right; }

div#forumbody .ad728 .adlabel { float:left; }

/* QuickReference links */
div#forumbody a.qr { color:inherit !important; border-bottom:1px dotted red; }

div#forumbody .smallinfo { font-size:80%;text-transform: uppercase;font-size: 9.75px;color:#aaa !important; }
div#forumbody .smallinfo a { color:#aaa !important; }
div#forumbody .smallinfo a:hover { color:red !important; }

div#forumbody .forumcategory h3 {display:inline;}