Use SASS for CSS + static asset reoganization

Had been planning to use a more powerful preprocessor for CSS for a
while, so that I can also reorganize and clean up the CSS a bit. The
cleanup will come later, this is the first step to reorganize the build
system a bit and remove skingen.pl.

I moved all generated static assets to static/g/ (for _g_enerated),
including icons.png and js files. This simplifies management of
static/f/ and static/s/, which are fully in git.

Skins are now defined as sass files in css/skins/ with their images in
static/s/ using plain directory structure.

1 files changed, 0 insertions, 1261 deletions

diff --git a/data/style.css b/data/style.css
deleted file mode 100644
index 8303a4ae..00000000
--- a/data/style.css
+++ /dev/null
@@ -1,1261 +0,0 @@
-*            { margin: 0; padding: 0; }
-body, td     { font: 13px "Tahoma", "Arial", sans-serif; }
-body         { $_bodybg$; color: $maintext$ }
-table        { border-collapse: collapse; }
-table td,
-table th     { vertical-align: top; padding: 3px; }
-img          { border: none; }
-
-a,
-.fake_link       { color: $link$; text-decoration: none; cursor:pointer; border-bottom: 1px solid transparent }
-
-a:hover,
-.fake_link:hover { border-bottom: 1px dotted $maintext$; }
-
-table tr.odd,
-table.stripe tbody tr:nth-child(odd):not(.nostripe),
-.docs table tbody tr:nth-child(odd) { background: $boxbg$; }
-
-#bgright { position: absolute; top: 0px; right: 0px; $_bgright$ }
-#header  { position: absolute; top: 80px; left: 400px; }
-#header h1, #header h1 a {
-  font-family: "Futura", "Century New Gothic", "Arial", Serif;
-  font-size: 24px;
-  font-style: italic;
-  border: none!important;
-  color: $maintitle$;
-}
-#footer   { margin: 15px auto 0 auto; text-align: center; color: $footer$; }
-#footer a { color: $footer$; text-decoration: underline; }
-
-/* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility */
-.visuallyhidden, .linkradio input {
-  position: absolute !important;
-  left: 0;
-  height: 1px; width: 1px;
-  border: 0; padding: 0;
-  overflow: hidden;
-  clip: rect(1px 1px 1px 1px);
-}
-
-/* Warning/Notice Box */
-div.warning, div.notice       { margin: 5px 10%; padding: 15px; background-color: $warnbg$; border: 1px solid $warnborder$; }
-div.notice                    { background-color: $noticebg$; border: 1px solid $noticeborder$; }
-div.warning ul, div.notice ul { margin-left: 0; }
-div.warning li, div.notice li { margin-left: 20px; }
-div.warning h2, div.notice h2 { font-size: 13px; font-weight: bold; margin: 0; }
-
-/* dropdown box */
-#dd_box            { position: absolute; left: 0px; border: 1px solid $border$; background-color: $secbg$; z-index: 2 }
-#dd_box ul         { list-style-type: none; margin: 0; padding: 0 }
-#dd_box li b       { display: block; font-weight: normal; padding-left: 5px; }
-#dd_box li i       { display: block; font-style: normal; padding-left: 10px; padding-right: 5px }
-#dd_box li a       { display: block; padding-left: 10px; border: 0; padding: 3px 5px 3px 3px }
-#dd_box li a:hover { background: $boxbg$ }
-
-/* dropdown search */
-#ds_box {
-  position: absolute;
-  top: 0;
-  border: 1px solid $border$;
-  border-top: none;
-  background-color: $secbg$;
-  cursor: pointer;
-  z-index: 2
-}
-#ds_box b           { padding: 2px 0 0 10px; }
-#ds_box tr.selected { background: $boxbg$; }
-#ds_box table       { width: 100%; }
-
-/* Elm dropdowns (also in perl: VNWeb::Releases::Lib) */
-.elm_dd > a { color: $maintext$; display: block; border: none; padding-right: 15px; position: relative }
-.elm_dd > a > span:last-child { position: absolute; right: 5px; top: 0; width: 16px; text-align: right; display: block }
-.elm_dd > a > span:last-child i { visibility: hidden; font-style: normal }
-.elm_dd > a .nowrap { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.elm_dd > a:hover > span:last-child > i,
-.elm_dd > a:focus > span:last-child > i { visibility: visible }
-.elm_dd > div { position: relative; float: right; width: 0; height: 0 }
-.elm_dd > div > div { position: absolute; right: -10px; top: 0; border: 1px solid $border$; background-color: $secbg$; z-index: 1000; margin: 0; padding: 0; max-width: 400px }
-.elm_dd.search > div { float: left }
-.elm_dd.search > div > div { right: auto; left: 0; top: 23px }
-.elm_dd ul { width: 100%; list-style-type: none; margin: 0; padding: 0 }
-.elm_dd ul li { white-space: nowrap }
-.elm_dd ul li a { display: block; border: 0; padding: 3px 5px 3px 3px }
-.elm_dd ul li a.active,
-.elm_dd ul li a:hover  { background: $boxbg$ }
-.elm_dd ul li p { white-space: normal; padding: 3px 5px 3px 3px }
-.elm_dd ul li.separator { margin-bottom: 22px }
-
-.maintabs .elm_dd > a { box-sizing: border-box; height: 21px; padding: 1px 15px 0 7px; border: 1px solid $border$; border-bottom: none; background-color: $tabbg$; color: $maintext$ }
-.elm_votedd .elm_dd ul li { text-align: left }
-.elm_dd_input  .elm_dd > a { background-color: $secbg$; color: $maintext$; border: 1px solid $secborder$; font: 14px "Tahoma", "Arial", sans-serif; padding: 1px 15px 1px 2px; margin: -1px }
-.elm_dd_button .elm_dd > a { background-color: $boxbg$; color: $maintext$; border: 1px solid $secborder$; font: 14px "Tahoma", "Arial", sans-serif; padding: 1px 15px 1px 5px; margin: -1px }
-.elm_dd_input.elm_dd_noarrow .elm_dd > a { padding-right: 2px }
-.elm_dd_noarrow .elm_dd > a { padding-right: 0 }
-.elm_dd_noarrow .elm_dd > a > span:last-child { display: none }
-.elm_dd_hover .elm_dd > div { display: none }
-.elm_dd_hover .elm_dd:hover > div { display: block }
-.elm_dd_left .elm_dd > div { float: left }
-.elm_dd_left .elm_dd > div > div { right: 0; top: -20px }
-.elm_dd_relextlink .elm_dd > a { padding-left: 4px; color: $link$ }
-.elm_dd_relextlink ul a { text-align: right }
-.elm_dd_relextlink ul span { color: $maintext$; padding-right: 10px }
-
-
-/* general text formatting */
-
-ul, ol        { margin-left: 35px; }
-p.itemmsg     { float: right; color: $standout$; font-style: italic; margin: 0!important }
-.grayedout    { color: $grayedout$ }
-b.grayedout   { font-weight: normal }
-i.grayedout   { font-style: normal }
-.underline    { text-decoration: underline }
-#maincontent h2 b { font: 13px "Tahoma", "Arial", sans-serif; font-weight: normal; }
-p.description { margin: 10px 100px!important; }
-b.done        { font-weight: normal; color: $statok$ }
-b.todo        { font-weight: normal; color: $statnok$ }
-b.neutral     { font-weight: normal }
-p.center      { text-align: center; }
-.standout     { color: $standout$!important }
-b.future,
-b.standout    { font-weight: normal; color: $standout$; }
-.clearfloat   { clear: both; height: 0; }
-.hidden       { display: none!important }
-.invisible    { visibility: hidden }
-.linethrough  { text-decoration: line-through }
-b.spoiler,         b.spoiler       a { color: #000!important;       background-color: #000;       font-weight: normal; }
-b.spoiler:hover,   b.spoiler:focus   { color: $maintext$!important; background-color: transparent }
-b.spoiler:hover a, b.spoiler:focus a { color: $link$!important;     background-color: transparent }
-
-#maincontent div.quote {
-  padding: 1px 5px;
-  margin: 0px 10px;
-  color: $grayedout$;
-  border: none;
-  border-left: 1px dotted $border$;
-  text-align: left;
-}
-pre {
-  padding:1px 5px;
-  margin: 5px 15px;
-  border: 1px dotted $border$;
-  border-right: none;
-  border-left: 1px solid $border$;
-  background: $boxbg$;
-  overflow-x: auto;
-}
-
-
-
-
-/***** general form markup *****/
-
-input.text, input.submit, select, textarea, button {
-  background-color: $secbg$;
-  color: $maintext$;
-  border: 1px solid $secborder$;
-  font: 14px "Tahoma", "Arial", sans-serif;
-  padding: 0 1px 1px 1px;
-  margin: 1px;
-}
-form, fieldset           { border: 0; display: block }
-legend                   { display: none; }
-optgroup option          { padding-left: 10px; font-style: normal; }
-input.submit, button     { background: $boxbg$; padding: 1px 5px; cursor: pointer }
-input.text, select       { width: 200px; }
-input[type=number]       { -moz-appearance:textfield }
-input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0 }
-fieldset.submit          { width: 100%; text-align: center; margin: 5px; }
-fieldset.submit input[type=submit] { width: 150px; }
-fieldset.submit input[type=checkbox] { margin: 0 5px 0 15px; }
-fieldset.submit h2       { font-size: 13px!important; }
-td.label, td.label label { width: 130px; }
-td.label label           { display: block; }
-td.field label           { margin: 0 5px 0 5px; }
-table.formtable          { margin: 0 20px 20px 20px; }
-table.formtable td       { padding: 0; }
-table.formtable tr.newfield > td { padding-top: 5px; }
-table.formtable tr.newpart td { padding-top: 20px; font-weight: bold; }
-table.formtable td table td { padding: 1px 15px 1px 0px }
-table.formtable td table    { margin-bottom: 5px }
-
-table.formimage > tr > td:nth-child(1) { width: 300px; height: 300px; text-align: center }
-table.formimage > tr > td:nth-child(1) img { max-width: 290px; max-height: 500px }
-table.formimage h2 { margin: 0 }
-
-/* Format checkboxes and radio buttons as if they were normal links with unicode icons.
- * Usage:
- *
- *   <container class="linkradio">
- *     <input type="checkbox|radio" id="xyz">
- *     <label for="xyz">Text</label>
- *     <em>(optional option separator)</em>
- *   </container>
- */
-p.linkradio { padding: 2px }
-.linkradio label { color: $link$; cursor: pointer }
-.linkradio label:before { content: '✗' }
-.linkradio input:checked + label { color: $maintext$ }
-.linkradio input:checked + label:before { content: '✓' }
-.linkradio input:focus + label { outline: 1px dotted $link$ }
-.linkradio input:focus:checked + label { outline: 1px dotted $maintext$ }
-.linkradio em { font-weight: normal; font-style: normal; color: $grayedout$ }
-
-/* Same styling, but for regular links.
- * Usage:
- *
- *   <a href="#" class="linkradio">Unchecked option</a>
- *   <a href="#" class="linkradio checked">Checked option</a>
- */
-a.linkradio:before { content: '✗' }
-a.linkradio.checked:before { content: '✓' }
-a.checked { color: $maintext$ }
-
-/* Spinner, <div class="spinner"></div> for a large one, <span> for a smaller inline-text version */
-.spinner { content: ''; box-sizing: border-box; border: 3px solid #9eaebd; border-bottom-color: transparent; border-radius: 100%; animation: spin 1s infinite linear; width: 16px; height: 16px; display: inline-block; margin: auto }
-span.spinner { width: 1em; height: 1em }
-@keyframes spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
-
-.textpreview > span { display: flex; justify-content: space-between; width: 100% }
-.textpreview > span > p { align-self: flex-end; text-align: left }
-.textpreview > span > p.right > * { margin-left: 10px; font-style: normal }
-.textpreview textarea { width: 100%; box-sizing: border-box }
-.textpreview .preview { width: 100%; box-sizing: border-box; border: 1px solid $secborder$; margin: 1px; padding: 5px; text-align: left }
-fieldset.submit .textpreview { margin: 0 auto }
-
-/* .compact input elements are smaller and can be embedded in tables/inline text
- * .stealth input elements pretend to be just regular text, but turn into visibile input elements on mouse-over */
-.compact input.text, .compact select, .compact textarea { margin: -2px -1px; padding: 1px 0 }
-.compact input.submit                { margin: -2px -1px; padding: 1px 3px }
-.stealth input, .stealth select { font: inherit; background: none; border: 1px solid transparent; -moz-appearance: none; -webkit-appearance: none; appearance: none }
-.stealth input:hover, .stealth input:focus,
-.stealth select:hover, .stealth select:focus { border: 1px solid $secborder$; background: $secbg$ }
-
-
-/***** menu *****/
-
-
-#menulist a                  { color: $maintext$; text-decoration: none; }
-#menulist a:hover            { border-bottom: 1px dotted $maintext$; }
-#menulist                    { position: absolute; left: 30px; top: 190px; width: 160px; }
-#menulist div.menubox        { margin: 0 0 10px 0; border: 1px solid $border$; background: $boxbg$; }
-#menulist div.menubox div    { padding: 2px 7px; }
-#menulist h2                 { border-bottom: 1px solid $border$; background: $boxbg$; padding: 1px 3px; }
-#menulist h2, #menulist h2 a { font-size: 13px; color: $maintext$; }
-#menulist h2 #lang_select    { float: right; padding-top: 1px; }
-#menulist dt                 { display: block; float: left; width: 97px; font-style: italic; }
-#menulist dd                 { width: 45px; float: left; text-align: right; }
-#menulist p                  { text-align: center; }
-#menulist #search input.text { width: 141px; margin: 0 0 3px 7px }
-#menulist #search input.submit { display: none; }
-#dd_box abbr                 { margin: 2px 5px 2px 0!important; }
-#menulist .notifyget         { display: inline-block; width: 135px; padding: 4px; background: $warnbg$; border: 1px solid $warnborder$; }
-#menulist .logout            { border: 0; background: none; color: $maintext$; cursor: pointer }
-#menulist .logout:hover      { text-decoration: underline }
-
-#support { line-height: 0; height: 41px }
-#support img { height: 19px; object-fit: none }
-#support a { opacity: 0.7; border-bottom: none!important; display: inline-block }
-#support a:hover { opacity: 1 }
-#support a:hover img { position: absolute; left: 0; top: 0; height: 38px; z-index: 99 }
-
-
-
-
-/***** main content *****/
-
-#maincontent {
-  position: absolute;
-  top: 169px;
-  left: 200px;
-  right: 30px;
-  margin: 0;
-  padding-bottom: 50px!important;
-}
-.mainbox h1, .mainbox h2 {
-  font-family: "Futura", "Century New Gothic", "Arial", Serif;
-  font-weight: normal;
-  font-size: 14px;
-}
-div.mainbox, div.threelayout > div {
-  border: 1px solid $border$;
-  margin: 21px 0 -10px 0;
-  padding: 5px;
-  background: $boxbg$;
-}
-div.mainbox-overflow-hack { overflow: hidden; width: 100%; box-sizing: border-box }
-.mainbox h1          { color: $boxtitle$; font-size: 24px; margin: -5px 0 15px 0; }
-.mainbox h2.alttitle { color: $alttitle$; margin: -17px 0 15px 15px; font-weight: normal; }
-.mainbox p           { margin: 3px 20px; }
-.mainbox div p,
-.mainbox table p     { margin: 0; }
-.mainbox h2          { font-weight: bold; font-size: 16px; margin: 10px 0 0 5px; }
-a.addnew, p.addnew   { float: right; margin: 0 }
-a.mainopts, p.mainopts { float: right; margin: 0 }
-p.mainopts a, p.mainopts label { margin: 0 5px }
-
-div.threelayout { display: flex }
-div.threelayout > div { flex: 1; padding: 0 2px 10px 2px; margin-left: 5px; margin-right: 5px }
-div.threelayout > div:first-child { margin-left: 0 }
-div.threelayout > div:last-child { margin-right: 0 }
-.threelayout h1 { margin: 0; font-size: 18px; font-weight: bold; color: $boxtitle$ }
-.threelayout h2 { font-size: 14px; margin-top: 3px; }
-.threelayout a.right { float: right; }
-.threelayout ul { list-style-type: none; margin-left: 10px; }
-.threelayout h1 a { color: $boxtitle$; }
-
-
-
-
-/***** main tabs *****/
-
-div.maintabs          { display: flex; justify-content: space-between; position: relative; width: 100%; height: 22px; margin: 20px 0 -22px 0; padding: 0 }
-#maincontent > div:nth-child(1).maintabs { margin-top: 0 }
-div.maintabs.right    { justify-content: flex-end }
-div.maintabs.left     { justify-content: flex-start }
-div.maintabs > ul       { margin: 0; padding: 0; list-style-type: none }
-div.maintabs > ul > li       { display: inline-block; margin: 0 0 0 10px }
-div.maintabs > ul > li:nth-child(1) { margin-left: 0!important }
-div.maintabs > ul > li > a,
-div.maintabs > ul > li > div > a { display: inline-block; box-sizing: border-box; height: 21px; padding: 1px 7px 0 7px; border: 1px solid $border$; border-bottom: none; background-color: $tabbg$; color: $grayedout$; }
-div.maintabs > ul > li.tabselected > a,
-div.maintabs > ul > li.tabselected > div > a,
-div.maintabs > ul > li > div > a:hover,
-div.maintabs > ul > li > a:hover        { background: $_blendbg$; color: $maintext$; height: 22px }
-div.maintabs.browsetabs > ul li a   { color: $maintext$ }
-div.maintabs.browsetabs > ul li     { margin-left: 5px }
-div.maintabs.bottom            { margin-top: 10px; /* WHY!? */ margin-bottom: -10px }
-div.maintabs.bottom > ul li a       { padding: 4px 7px 2px 7px; border-bottom: 1px solid $border$; border-top: none }
-div.maintabs.bottom > ul li.tabselected a,
-div.maintabs.bottom > ul li a:hover { padding-top: 5px; height: 22px; margin-top: -1px }
-
-h1.boxtitle, h1.boxtitle a, div.maintabs h1 {
-  font-family: "Futura", "Century New Gothic", "Arial", Serif;
-  font-weight: bold;
-  font-style: italic;
-  color: $grayedout$;
-  font-size: 17px;
-}
-h1.boxtitle, h1.boxtitle a { margin: 20px 0 -20px 0 }
-
-
-
-
-/***** Homepage ******/
-
-p.screenshots           { text-align: center; margin-top: 10px; padding: 0; height: 105px; overflow: hidden }
-p.screenshots img       { margin: 2px; }
-li.announcement         { margin-bottom: 3px; margin-top: 3px }
-li.announcement a       { font-weight: bold; font-size: 15px; color: $maintext$ }
-.homepage h1 { margin-bottom: 5px }
-.homepage > div { overflow: hidden }
-.homepage li { display: flex; line-height: 1.1 }
-.homepage li span { white-space: nowrap; padding-right: 4px; padding-bottom: 3px }
-.homepage li span:first-child { overflow: hidden; text-overflow: ellipsis }
-
-
-
-
-/***** Browsing ******/
-
-.browseopts a, .browseopts button {
-  padding: 1px 3px;
-  color: $maintext$;
-  border: 1px solid $border$;
-  margin: 0 2px;
-  white-space: nowrap;
-}
-p.browseopts                    { text-align: center; padding: 2px; }
-span.browseopts                 { text-align: center; padding: 10px; display: inline-block }
-.browseopts .optselected,
-.browseopts a:hover,
-.browseopts button:hover        { border: 0; padding: 2px 4px; }
-div.mainbox.browse              { padding: 0; }
-div.mainbox.browse table        { width: 100%; }
-div.mainbox.browse table td.tc1 { padding-left: 25px; }
-table thead td, table thead th  { font-weight: bold; background-color: $secbg$; }
-table thead th                  { text-align: left }
-fieldset.search                 { display: block; width: 100%; text-align: center; margin: 0 0 10px 0; }
-fieldset.search .submit         { padding: 0 1px; }
-p#searchtabs                    { height: 13px; padding-right: 70px; }
-p#searchtabs a                  { padding: 2px 6px 2px 6px; margin: 0 2px; color: $maintext$; }
-p#searchtabs a:hover, p#searchtabs a.sel {
-  border: 1px solid $secborder$;
-  border-bottom: none;
-  padding: 1px 5px 2px 5px;
-  background: $boxbg$;
-}
-#q { width: 600px }
-#bq { width: 300px }
-
-
-
-/* history browser */
-
-div.history td       { white-space: nowrap; padding-left: 15px }
-div.history td.tc1_1 { width: 70px; padding-right: 0; text-align: right }
-div.history td.tc1_2 { width: 30px; padding-left: 0 }
-div.history td.tc2   { width: 140px }
-div.history td.tc4   { width: 100% }
-div.history td.tc4 b { margin-left: 10px }
-
-
-
-
-/***** Discussions ******/
-
-/* threads page */
-#maincontent div.thread  { padding: 0; }
-div.thread table         { width: 100%; table-layout: fixed }
-div.thread tr:not(:last-child) td { border-bottom: 1px solid $border$; }
-div.thread td.tc1        { width: 170px; padding: 5px 10px; border-right: 1px solid $border$; }
-div.thread td.tc2        { padding: 10px 20px 10px 10px; }
-div.thread tr.deleted td { padding: 1px 10px; }
-div.thread tr:target, div.thread tr.target { outline: 1px dotted $standout$ }
-div.thread i.deleted     { font-style: normal; color: $grayedout$; }
-div.thread i.lastmod     { float: right; font-size: 11px; color: $grayedout$; margin: 0 -10px -5px 0; }
-div.thread i.edit        { float: right; color: $grayedout$; font-style: normal; margin: -10px -10px 0 0; visibility: hidden }
-div.thread td:hover i.edit,
-div.thread td:active i.edit { visibility: visible }
-
-/* threads browser */
-div.mainbox.discussions td.tc4     { text-align: right; }
-div.mainbox.discussions a.locked   { text-decoration: line-through; }
-div.mainbox.discussions b.boards   { padding-left: 10px; font-weight: normal; }
-div.mainbox.discussions b.boards a { color: $grayedout$; }
-div.discussions td.tc2             { width: 60px; text-align: right }
-div.discussions td.tc3             { width: 110px;  }
-div.discussions td.tc4             { width: 250px; }
-div.discussions .pollflag          { color: $grayedout$; padding-right: 6px; }
-div.postsearch td.tc1_1           { width: 60px; padding-left: 0; padding-right: 0; text-align: right }
-div.postsearch td.tc1_2           { width: 25px; padding-left: 0 }
-div.postsearch td.tc2             { width: 65px;  }
-div.postsearch td.tc3             { width: 90px; }
-
-
-/***** Release listings on VN & producer pages */
-
-.releases { width: 100%; }
-.releases tr.lang td,
-.releases tr.vn td     { background: $boxbg$; font-weight: bold; }
-.releases td.tc1       { padding-left: 30px; width: 80px; white-space: nowrap }
-.releases td.tc2       { text-align: center; width: 50px; white-space: nowrap }
-.releases td.tc3       { text-align: right; padding: 0; width: 120px; }
-.releases td.tc_icons  { padding: 0 4px }
-.releases td.tc_prod   { color: $grayedout$; white-space: nowrap; width: 50px }
-.releases td.tc5       { width: 70px; text-align: right }
-.releases td.tc6       { text-align: right; width: 25px; padding: 0; white-space: nowrap }
-
-
-/***** VN page *******/
-
-div.vndetails                 { margin: 0 auto; max-width: 820px; }
-div.vnimg                     { float: left; width: 250px; margin: 0 10px; }
-div.vnimg p                   { text-align: center; padding: 0px; margin: 0; }
-div.vndetails h2              { margin: 5px 0 0 0; }
-.vndesc p                     { padding: 0 0 0 5px; }
-div.vndetails table           { float: left; width: 500px; }
-div.vndetails table td.key    { width: 90px; }
-div.vndetails table dt        { float: left; font-style: italic; }
-div.vndetails table dd        { margin-left: 90px; }
-div.vndetails td.relations dt { float: none; font-style: normal; }
-div.vndetails td.relations dd { margin-left: 15px; }
-div.vndetails td.anime b      { font-size: 10px; font-weight: normal; padding-right: 4px; }
-.ulistvn     { padding: 5px 0 0 0 }
-.ulistvn > b { font-size: 14px }
-.ulistvn > span { float: right }
-.ulistvn textarea { width: 100% }
-
-div#vntags                    { margin: 0 30px 0 30px; border-top: 1px solid $border$; padding: 3px 5% 0 5%; text-align: center; }
-#vntags span                  { white-space: nowrap; margin-left: 15px; }
-#vntags b                     { color: $grayedout$; font-weight: normal; font-size: 10px }
-#tagops                       { text-align: right; width: auto; }
-
-#tagops label                 { margin: 0 0 0 10px;  border: 0; outline: none; color: $link$; cursor: pointer; }
-#tagops label.sec             { border-left: 1px solid $border$; padding-left: 10px }
-#tagops label.lst             { margin: 0 30px 0 10px; }
-#tagops input:checked + label { color: $maintext$; }
-
-/* tag filter machinery; the order of declarations is important */
-
-#tag_spoil_all:checked ~ #vntags .cut2 { display: none; }
-#tag_spoil_some:checked ~ #vntags .cut1 { display: none; }
-#tag_spoil_none:checked ~ #vntags .cut0 { display: none; }
-
-#tag_toggle_all:checked ~ #vntags .cut { display: inline }
-
-#cat_cont:not(:checked) ~ #vntags .cat_cont { display: none; }
-#cat_tech:not(:checked) ~ #vntags .cat_tech { display: none; }
-#cat_ero:not(:checked) ~ #vntags .cat_ero   { display: none; }
-
-#tag_spoil_none:checked ~ #vntags .tagspl1  { display: none; }
-#tag_spoil_none:checked ~ #vntags .tagspl2  { display: none; }
-#tag_spoil_some:checked ~ #vntags .tagspl2  { display: none; }
-
-/* end of tag filter machinery */
-
-#screenshots table     { width: 100%; }
-#screenshots tr.rel td { background: $boxbg$; font-weight: bold; }
-
-#screenshots p.rel {
-  background: $boxbg$;
-  margin: 0;
-  padding: 2px;
-  font-weight: bold;
-  text-align: center;
-}
-#screenshots a.scrlnk     { margin: 2px; border: none }
-#screenshots div.scr      { display: block; padding-left: 30px; text-align: center }
-#screenshots img          { border: 3px solid transparent; }
-#screenshots a.nsfw img   { border: 3px solid $statnok$; }
-#screenshots a:hover img  { border: 3px solid $border$; }
-
-#scrhide_s0:checked ~ #screenshots label[for=scrhide_s0],
-#scrhide_s1:checked ~ #screenshots label[for=scrhide_s1],
-#scrhide_s2:checked ~ #screenshots label[for=scrhide_s2],
-#scrhide_v0:checked ~ #screenshots label[for=scrhide_v0],
-#scrhide_v1:checked ~ #screenshots label[for=scrhide_v1],
-#scrhide_v2:checked ~ #screenshots label[for=scrhide_v2] { color: $maintext$ }
-
-#screenshots .scrlnk { display: none }
-#scrhide_s0:checked ~ #screenshots .scrlnk_s0 { display: inline }
-#scrhide_s1:checked ~ #screenshots .scrlnk_s1 { display: inline }
-#scrhide_s2:checked ~ #screenshots .scrlnk    { display: inline }
-#scrhide_v0:checked ~ #screenshots .scrlnk_v0 { display: none }
-#scrhide_v1:checked ~ #screenshots .scrlnk_v1 { display: none }
-
-.summarize_more {
-  margin-top: 9px; margin-bottom: -10px; padding: 0; height: 15px;
-  border: 1px solid $border$; border-top: none;
-  background: $boxbg$;
-  text-align: center
-}
-
-.reviews { display: flex; justify-content: center; flex-wrap: wrap }
-.reviewbox { margin: 10px 12px 30px 12px; flex: 1 1; flex-basis: 450px }
-.reviewbox > div:nth-child(2) > span:first-child  { float: right; color: $grayedout$; font-style: normal; margin: -5px 0 0 0; visibility: hidden }
-.reviewbox > div:nth-child(2):hover  > span:first-child,
-.reviewbox > div:nth-child(2):active > span:first-child { visibility: visible }
-.reviewbox .review_spoil input:checked       ~ span { display: none }
-.reviewbox .review_spoil input:not(:checked) ~ div  { display: none }
-.reviewbox > div:first-child { display: flex; justify-content: space-between; background: $secbg$; font-weight: bold }
-.reviewbox > div:first-child > span:first-child { font-weight: bold }
-.reviewbox > div:nth-child(2) { box-sizing: border-box; padding: 10px; background: $boxbg$ }
-.reviewbox > div:last-child { display: flex; justify-content: space-between; border-top: 1px solid $border$ }
-.reviewbox .myvote { font-weight: bold; text-decoration: underline }
-
-
-
-/***** VN tags tab (/v+/tags) *******/
-
-.vntaglist { list-style-type: none; column-width: 400px }
-.vntaglist li.tagvnlist-top:not(:first-child) { margin-top: 30px }
-.vntaglist li.tagvnlist-parent { margin: 5px 0 3px 0 }
-.vntaglist li.tagvnlist-parent a { color: $maintext$; font-weight: bold }
-.vntaglist li.tagvnlist-inherited a { color: $grayedout$ }
-.vntaglist li:not(.tagvnlist-inherited) b.grayedout { color: $link$ }
-.vntaglist h3 a { color: $maintext$ }
-.vntaglist li { list-style-type: none; padding-right: 30px }
-.vntaglist li .tagscore { margin-right: 10px }
-
-
-
-/***** Vote stats ****/
-
-.votestats           { width: 630px; margin: 0 auto; }
-.votegraph           { float: left; margin-right: 20px }
-.votegraph td        { padding: 0 2px }
-.votegraph td.number { text-align: right }
-.votegraph td div    { float: left; height: 16px; background-color: $border$; margin-right: 2px; padding: 0; }
-.votestats thead td  { background: transparent; text-align: center; padding: 2px; }
-.votestats tfoot td  { text-align: right }
-.votestats div       { text-align: center; padding-top: 5px; }
-
-.recentvotes               { width: 300px }
-.recentvotes thead tr td b { font-weight: normal; padding-left: 5px }
-
-
-
-/***** Polls ****/
-
-.votebooth thead td   { font-weight: normal; background: transparent; padding-bottom: 5px; }
-.votebooth tfoot td   { padding-top: 5px }
-.votebooth td         { vertical-align: middle; padding: 0 8px; }
-.votebooth            { margin: 0 30px }
-.votebooth td.tc1     { padding-right: 20px }
-.votebooth td.tc2     { min-width: 240px }
-.votebooth td.tc2 div { margin: 2px; }
-.votebooth td.tc2 div.graph { float: left; height: 14px; background-color: $border$; padding: 0; }
-.votebooth td.tc3     { text-align: right; padding-right: 16px; }
-.votebooth .submit    { width: 100px }
-.votebooth .option    { margin-left: 8px }
-.votebooth .option.own { font-weight: bold }
-
-
-
-/***** VN edit *****/
-
-.vnedit_scr { width: 95%; margin: auto }
-.vnedit_scr > tr:nth-child(odd) > td { background: $boxbg$ }
-.vnedit_scr > tr > td { border-bottom: 1px solid $border$ }
-.vnedit_scr > tr > td:nth-child(1) { padding: 10px; width: 136px }
-.vnedit_scr > tr > td:nth-child(2) { width: 10px; padding-top: 20px }
-
-
-/***** VN Release tab *****/
-
-.releases_compare table     { margin: 0 auto; }
-.releases_compare td        { margin: 0 auto; border: 1px solid $border$; }
-.releases_compare td.bg     { background: $boxbg$; }
-.releases_compare td.multi  { vertical-align:middle; }
-.releases_compare .key      { background: $boxbg$; }
-
-/****** VN browse ********/
-
-.vnbrowse .tc_s       { padding-left: 30px; width: 70px  }
-.vnbrowse .tc2        { text-align: right; padding: 0; }
-.vnbrowse .tc3        { padding: 0; }
-.vnbrowse .tc5        { text-align: right; padding-right: 10px }
-.vnbrowse .tc6        { width: 80px }
-.vnbrowse .tc7        { text-align: right; width: 8px; white-space: nowrap }
-.vnbrowse .tc7 abbr   { display: inline-block; width: 20px; }
-
-
-
-/***** Producer page *******/
-
-.prodvns { list-style-type: none }
-.prodvns li span:first-child { display: inline-block; width: 80px; text-align: right; padding-right: 15px }
-.prodvns li span:last-child { color: $grayedout$; padding-left: 15px }
-
-
-/***** Producer list ******/
-
-.producerbrowse ul    { -webkit-column-width: 250px; -moz-column-width: 250px; column-width: 250px; margin-bottom: 10px }
-.producerbrowse ul li { list-style-type: none; }
-.producerbrowse ul li abbr { margin-right: 5px; margin-top: 1px; }
-
-
-
-
-/***** Release page *****/
-
-.release table { width: 400px; margin: 0 auto; }
-.release .key  { width: 90px; }
-
-
-
-/***** Review page *****/
-
-.fullreview td { padding: 0 0 15px 10px }
-.fullreview tr > td:first-child { width: 140px; text-align: right; font-weight: bold }
-.fullreview tr > td:last-child { max-width: 700px }
-.fullreview .myvote { font-weight: bold; text-decoration: underline }
-
-#reviewspoil:not(:checked) ~ .fullreview .reviewspoil     { display: none }
-#reviewspoil:checked       ~ .fullreview .reviewnotspoil  { display: none }
-
-
-/***** Review browser *****/
-
-.reviewlist td.tc1 { width: 90px }
-.reviewlist td.tc2 { width: 110px; }
-.reviewlist td.tc3 { width: 50px; text-align: right }
-.reviewlist td.tc4 { width: 50px }
-.reviewlist td.tc6 { width: 140px }
-.reviewlist td.tc7 { width: 30px; text-align: right }
-.reviewlist td.tc8 { width: 250px; text-align: right }
-
-
-/***** Release browser *****/
-
-.relbrowse .tc1 { width: 80px }
-.relbrowse .tc2 { width: 60px; text-align: center; }
-.relbrowse .tc3 { width: 85px; text-align: right; padding: 0; }
-
-
-
-/***** Image hover thingy (VNWeb::Images::Lib::images_) ****/
-
-.imghover { margin: 0 auto; display: block; text-align: center }
-.imghover input:checked       ~ div.imghover--warning { display: none }
-.imghover input:not(:checked) ~ div.imghover--visible { display: none }
-.imghover div.imghover--visible { position: relative }
-.imghover div.imghover--visible a { border-bottom: 0 }
-.imghover div.imghover--visible .imghover--overlay { display: none; white-space: nowrap; font-size: 11px }
-.imghover:hover div.imghover--visible .imghover--overlay { display: block; position: absolute; right: 0; bottom: 0; padding: 5px 10px; background: $secbg$; border: 0 }
-.imghover div.imghover--warning { border: 1px solid $border$; background: $secbg$; box-sizing: border-box; padding: 10px 5px }
-
-
-
-/***** Char page (also used on VN page) *****/
-
-p.chardetailopts { margin: -10px auto 7px auto; width: 800px; text-align: right }
-p.chardetailopts a { margin: 0 5px }
-p.chardetailopts a:last-child { margin: 0 0 0 5px }
-div.chardetails { margin: 0 auto; width: 800px; }
-div.charimg     { float: left; width: 250px; margin: 0 10px; text-align: center }
-div.charimg p   { text-align: center; padding: 0px; margin: 0; }
-.chardesc h2    { margin: 0; }
-.chardesc p     { padding: 0 0 0 5px; }
-div.chardetails table        { float: left; width: 530px; }
-div.chardetails table td.key { width: 100px; }
-div.chardetails.charsep      { margin-top: 30px }
-
-
-
-/***** Char edit *****/
-
-
-table.chare_traits .buts      { padding: 0 20px }
-table.chare_traits .buts a    { box-sizing: border-box; display: block; width: 15px; height: 14px; border: 1px solid $border$; margin: 0; float: left }
-table.chare_traits .buts a.s0 { border: none; background-color: #0f0 }
-table.chare_traits .buts a.s1 { border: none; background-color: #f80 }
-table.chare_traits .buts a.s2 { border: none; background-color: #f40 }
-
-
-/***** Char browse *****/
-
-div.charb table    { table-layout: fixed }
-div.charb td       { white-space: nowrap }
-div.charb td.tc1   { text-align: right; width: 40px; padding-left: 0!important; padding-bottom: 0 }
-div.charb td.tc2   { overflow: hidden }
-div.charb td.tc2 b { margin-left: 10px }
-div.charb td.tc2 b a { color: $grayedout$!important }
-
-
-/***** Staff browse *****/
-
-div.staffbrowse	   { padding-bottom: 10px }
-.staffbrowse ul    { float: left; margin-top: -5px; margin-left: 3%; width: 28%; }
-.staffbrowse ul li { list-style-type: none; margin-bottom: 2px; }
-.staffbrowse ul li abbr { margin-right: 5px; margin-top: 1px; }
-.staffpage table.stripe { width: 450px; margin: 0 auto; }
-.staffpage .key  { width: 70px; }
-.staffroles td.tc2 { white-space: nowrap; width: 80px }
-.staffroles td.tc3 { white-space: nowrap; width: 100px }
-.staffroles td.tc4 { white-space: nowrap; padding-right: 10px }
-table.aliases td { padding: 0 5px; }
-table.aliases td.key { padding: 0 5px 0 0; width: auto }
-
-
-/***** Staff display on VN pages *****/
-
-.vnstaff { width: 97%; margin: -15px auto 5px auto; justify-content: space-between }
-.vnstaff ul { list-style: none; margin: 0 }
-.vnstaff-2 ul { width: 100% } .vnstaff-2 { flex-wrap: wrap }
-.vnstaff-3 ul { width: 32% }
-.vnstaff-4 ul { width: 24% }
-.vnstaff li { white-space: nowrap; overflow-x: hidden; text-overflow: ellipsis; padding-bottom: 1px }
-.vnstaff li.vnstaff_head { font-weight: bold; margin-top: 15px }
-.vnstaff li b.grayedout { margin-left: 10px }
-@media(min-width:   0px) { .vnstaff-2{display:flex} .vnstaff-3{display:none} .vnstaff-4{display:none} }
-@media(min-width: 850px) { .vnstaff-2{display:flex} .vnstaff-3{display:none} .vnstaff-4{display:none} .vnstaff-2 ul {width:49%} .vnstaff-2{flex-wrap:nowrap} }
-@media(min-width:1000px) { .vnstaff-2{display:none} .vnstaff-3{display:flex} .vnstaff-4{display:none} }
-@media(min-width:1250px) { .vnstaff-2{display:none} .vnstaff-3{display:none} .vnstaff-4{display:flex} }
-
-div.charsum_list { text-align: center }
-div.charsum_list .name { white-space: nowrap; display: flex; justify-content: space-between }
-div.charsum_list .name span { overflow: hidden; text-overflow: ellipsis; padding-bottom: 1px }
-div.charsum_list .name a { font-weight: bold }
-div.charsum_list .actor { border-top: 1px solid $border$; padding-top: 3px }
-div.charsum_list .actor b.grayedout { margin-left: 10px }
-div.charsum_list .charsum_bubble {
-  background: $boxbg$;
-  display: inline-block;
-  text-align: left;
-  vertical-align: top;
-  width: 320px;
-  margin: 3px;
-  padding: 3px 10px;
-}
-
-
-/***** Staff edit *****/
-
-.staffedit td.tc_name,
-.staffedit td.tc_original { width: 200px }
-.staffedit td.tc_name input,
-.staffedit td.tc_original input { width: 200px }
-.staffedit td.tc_add { width: 40px; text-align: left; white-space: nowrap }
-.staffedit table.names td { padding: 1px 2px; vertical-align: middle; }
-.staffedit table.names tr.alias_new td { padding-top: 8px }
-
-
-/***** Documentation pages *****/
-
-.docs               { padding: 0 15% 20px 15%; line-height: 1.4 }
-.docs h3            { margin: 30px 0 5px; font-size: 16px }
-.docs h4            { margin-top: 15px; font-size: 14px }
-.docs h3 a:target,
-.docs h4 a:target   { color: $standout$ }
-.docs dd            { margin: 5px 0 5px 120px }
-.docs dt            { float: left }
-.docs ul, .docs ol  { margin: 5px 0 5px 20px }
-.docs table         { margin: 10px; width: 95% }
-.docs td            { white-space: nowrap }
-.docs td            { white-space: nowrap }
-.docs td+td+td+td,
-.docs td[colspan],
-.docs td[colspan]+td,
-.docs td[colspan]+td+td { white-space: normal }
-.docs p + p         { padding-top: 10px }
-.docs ul.index      { display: block; float: right; width: 190px; padding: 2px; margin: 0 0 10px 5px; background: $boxbg$; border: 1px solid $border$; }
-.docs ul.index li   { list-style-type: none; }
-.docs ul.index li a { margin: 0 0 0 10px; }
-.docs img           { margin: 5px }
-
-
-
-/* vote lists */
-
-div.votelist td.tc1 { width: 100px; padding-top: 0; padding-bottom: 0 }
-div.votelist td.tc2 { width: 50px; text-align: right; padding-right: 10px }
-
-
-/***** Wishlist browser ******/
-
-.wishlist .tc1     { padding-top: 0; padding-bottom: 0; }
-.wishlist tfoot td { padding: 0 0 0 25px }
-
-
-/***** New User's VN list *****/
-
-.labelfilters { text-align: center }
-.labelfilters input.submit { margin-top: 5px }
-
-.managelabels > div { width: 600px; margin: 10px auto }
-.managelabels table { margin: 0 auto }
-.managelabels tbody td:nth-child(1) { text-align: right }
-.managelabels tbody td:nth-child(4) { padding-left: 10px; width: 300px}
-.managelabels select { width: 100% }
-.managelabels tfoot div { float: right; text-align: right }
-
-.savedefault { width: 600px; margin: 10px auto }
-.exportlist { width: 600px; margin: 10px auto }
-
-.ulist .tc1 { white-space: nowrap; width: 70px }
-.ulist .tc1 label { cursor: pointer }
-.ulist .tc1 input { display: none }
-.ulist .tc1 label:before { content: '▸ ' }
-.ulist .tc1 input:checked + label:before { content: '▾ ' }
-.ulist .tc_title b { margin-left: 10px }
-.ulist .tc_vote { white-space: nowrap; width: 60px; text-align: right; padding-right: 10px }
-.ulist .tc_vote input { width: 55px; text-align: right }
-.ulist .tc_voted,
-.ulist .tc_added,
-.ulist .tc_modified,
-.ulist .tc_started,
-.ulist .tc_finished,
-.ulist .tc_rdate  { white-space: nowrap; width: 100px }
-.ulist .tc_rating { white-space: nowrap; width: 80px }
-
-.ulist .tc_started div,                   .ulist .tc_finished div                   { height: 1em; padding-bottom: 4px }
-.ulist .tc_started div span,              .ulist .tc_finished div span              { position: absolute; z-index: 0 }
-.ulist .tc_started div       input,       .ulist .tc_finished div       input       { position: absolute; z-index: 900; width: 110px; visibility: hidden }
-.ulist .tc_started div:hover input,       .ulist .tc_finished div:hover input,
-.ulist .tc_started div       input:focus, .ulist .tc_finished div       input:focus { visibility: visible }
-
-.ulist .tc_opt { padding: 0 0 5px 70px }
-.ulist .tc_opt textarea { width: 500px; height: 18px; border: none }
-.ulist .tc_opt textarea:focus { height: 50px; border: 1px solid $secborder$ }
-.ulist .tc_opt textarea + div { display: inline-block; padding-left: 10px }
-.ulist .tc_opt .tco1 { white-space: nowrap; width: 100px }
-.ulist .tc_opt .tco2 { white-space: nowrap; width: 100px }
-.ulist .tc_opt .tco3 { white-space: nowrap; width: 60px; text-align: right; padding-bottom: 0 }
-
-
-/***** User VN list browser ******/
-
-#expandall, .collapse_but { cursor: pointer }
-.browse.rlist .tc1 { width: 16px; padding-bottom: 0 }
-.browse.rlist .tc2 { width: 16px; padding-bottom: 0 }
-.browse.rlist .tc3 { width: 60px }
-.browse.rlist .tc3_5 b { margin-left: 10px }
-.browse.rlist .tc4 { width: 60px; text-align: right; padding-top: 0; padding-bottom: 0 }
-.browse.rlist .tc6 { width: 100px }
-.browse.rlist .tc7 { width: 90px }
-.browse.rlist .tc8 { width: 70px }
-.browse.rlist tfoot select { width: 200px }
-.browse.rlist .relhid .tc6 { padding-left: 15px; width: auto }
-
-
-/***** User notifications *****/
-
-.browse.notifies td.tc1       { width: 14px }
-.browse.notifies td.tc3       { width: 100px }
-.browse.notifies td.tc4       { width: 75px }
-.browse.notifies tbody td.tc5 a { color: $grayedout$ }
-.browse.notifies td.tc5 i     { font-style: normal; color: $maintext$ }
-.browse.notifies .unread td   { font-weight: bold }
-.browse.notifies tfoot td     { padding: 0 0 0 25px }
-
-/***** Subscription tab thiny (HTML::_maintabs_subscribe_() + elm/Subscribe) ****/
-
-#subscribe .inactive { color: transparent; text-shadow: 0 0 $grayedout$ }
-#subscribe .active { color: transparent; text-shadow: 0 0 $maintext$ }
-
-#subscribe > div > a { height: 21px!important /* override :hover change */ }
-#subscribe > div > div { position: absolute; width: 1px }
-#subscribe > div > div > div { box-sizing: border-box; padding: 10px; width: 500px; border: 1px solid $border$; background: $secbg$; position: relative; bottom: 0; left: -470px; z-index: 100 }
-#subscribe p, #subscribe h4, #subscribe label { display: block; margin-bottom: 3px }
-
-
-/***** User list *****/
-.browse.userlist .tc3,
-.browse.userlist .tc4,
-.browse.userlist .tc5,
-.browse.userlist .tc6,
-.browse.userlist .tc7,
-.browse.userlist .tc8 { text-align: right; padding-right: 10px; padding-left: 0 }
-
-
-/***** Userpage *****/
-
-.userpage table { width: 600px; margin: 0 auto; }
-.userpage .key  { width: 100px; }
-
-
-/***** User posts browser ****/
-div.uposts table    { table-layout: fixed }
-div.uposts td       { white-space: nowrap }
-div.uposts td.tc1   { width: 60px; padding-left: 0!important; padding-right: 0; text-align: right }
-div.uposts td.tc2   { width: 40px; padding-left: 0 }
-div.uposts td.tc3   { width: 80px; }
-div.uposts td.tc4   { overflow: hidden }
-div.uposts td.tc4 b { margin-left: 10px }
-
-
-
-
-/***** Tag page *****/
-
-.tagtree        { margin-left: 20px; margin-top: -20px; list-style-type: none; }
-.tagtree li     { float: left; width: 230px; margin-top: 10px; }
-.tagtree li li  { float: none; width: auto; margin-top: 0; }
-.tagtree ul     { margin-left: 10px; list-style-type: none; }
-.tagvnlist .tc1 { width: 105px; }
-.tagvnlist .tc1 i { font-style: normal; font-size: 10px }
-.tagvnlist .tc3 { text-align: right; padding: 0; }
-.tagvnlist .tc4 { padding: 0; }
-.tagvnlist .tc6 { text-align: right; padding-right: 10px; }
-
-
-/***** Tag list (/g/list) *****/
-
-.browse.taglist .tc1 { width: 120px; white-space: nowrap }
-.browse.taglist .tc2 { width: 50px; white-space: nowrap }
-.browse.taglist tbody .tc3 a { margin-right: 10px }
-
-
-/***** Tag links *****/
-
-.browse.taglinks .tc1 { width: 70px }
-.browse.taglinks .tc3 { width: 80px }
-.browse.taglinks .setfil { font-size: 10px; padding-right: 3px }
-
-.tagscore { white-space: nowrap; display: inline-block; width: 58px; }
-.tagscore > span { display: inline-block; width: 25px; text-align: right; padding-right: 3px; font-size: 11px }
-.tagscore > div  { display: inline-block; height: 13px; background: linear-gradient(90deg, #cf0 0px, #0f0 30px) }
-.tagscore.negative > div  { background: #f00 }
-.tagscore.negative > span { color: $standout$ }
-.tagscore.ignored  > div  { background: #222 }
-.tagscore.ignored  > span { color: $grayedout$ }
-
-
-/***** VN tagmod *****/
-
-table.tgl                   { margin: 10px 0 0 20px }
-table.tgl td                { padding: 1px 5px }
-table.tgl tfoot td          { padding-top: 20px }
-table.tgl .tc_you           { border-right: 1px solid $border$; border-left: 1px solid $border$; text-align: center }
-table.tgl .tc_others        { border-left: 1px solid $border$; text-align: center }
-table.tgl .tc_tagname       { min-width: 200px; border-right: 1px solid $border$ }
-table.tgl tbody .tc_tagname { padding-left: 15px }
-table.tgl .tc_myvote        { padding: 0 0 0 30px; min-width: 100px }
-table.tgl .tc_mynote span   { cursor: pointer }
-table.tgl .noteview         { position: absolute; max-width: 400px; padding: 0 5px 5px 5px; background: $_blendbg$ }
-table.tgl .buts a           { box-sizing: border-box; display: block; width: 15px; height: 14px; border: 1px solid $border$; margin: 0; float: left }
-table.tgl .buts a.l0        { border: none; background-color: $border$ }
-table.tgl .buts a.l1        { border: none; background-color: #cf0 }
-table.tgl .buts a.l2        { border: none; background-color: #8f0 }
-table.tgl .buts a.l3        { border: none; background-color: #0f0 }
-table.tgl .buts a.ld        { border: none; background-color: #f00 }
-table.tgl tbody .tc_myover  { padding: 0 5px }
-table.tgl .tc_myspoil       { padding: 0 30px; min-width: 60px }
-table.tgl .buts a.sn        { border: none; background-color: $border$ }
-table.tgl .buts a.s0        { border: none; background-color: #0f0 }
-table.tgl .buts a.s1        { border: none; background-color: #f80 }
-table.tgl .buts a.s2        { border: none; background-color: #f40 }
-table.tgl .tc_allvote       { border-left: 1px solid $border$; padding: 1px 0 0 30px; }
-table.tgl .tc_allvote i     { font-style: normal; font-size: 10px }
-table.tgl .tc_allspoil      { text-align: right; padding-right: 15px }
-table.tgl .tagmod_cat td    { font-weight: bold; padding-top: 10px }
-
-
-
-
-/****** Revision information ******/
-
-div.revision div.rev, div.revision table {
-  border: 1px solid $border$;
-  margin: 0 auto;
-  width: 90%;
-  background-color: $secbg$;
-  clear: both;
-}
-div.revision          { padding-bottom: 10px; }
-div.revision table thead tr td { background-color: transparent!important; text-align: center; font-weight: normal; }
-div.revision table td { border-right: 1px solid $border$; padding: 5px; }
-div.revision td.tcval { width: 44%; }
-div.revision div.rev  { padding: 5px; text-align: center; }
-.diff_add             { font-weight: normal; background-color: $diffadd$; }
-.diff_del             { font-weight: normal; background-color: $diffdel$; }
-div.revision .next    { float: right; margin-right: 5%; }
-div.revision .prev    { float: left; margin-left: 5%; }
-div.revision .item    { text-align: center; }
-
-
-
-/****** Image Viewer *****/
-
-div#iv_view {
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  background: $boxbg$;
-  border: 1px solid $border$;
-  padding: 5px;
-  text-align: center;
-}
-#iv_view a   { border: 0; font-weight: bold; font-size: 14px }
-#iv_view img { cursor: pointer }
-#ivclose     { float: right; padding-left: 10px }
-#ivnext      { padding-left: 5px; }
-#ivprev      { padding-right: 5px; }
-#ivfull      { float: left; padding-right: 10px; }
-#ivimgload {
-  position: absolute;
-  display: block;
-  left: 0;
-  top: 0;
-  width: 100px;
-  padding: 3px;
-  background-color: #f5f5f5; /* no real need to skin this */
-  text-align: center;
-  border: 1px solid #ccc;
-  color: #000;
-}
-
-/* ivview childs:
- *   1  div -> loading
- *   2  div -> img
- *   3  div -> links
- *      1  a -> full
- *      2  a -> prev
- *      3  a -> next
- *      4  a -> flagging
- */
-.ivview     { position: fixed; background: $boxbg$; border: 2px solid $border$; padding: 5px; text-align: center }
-.ivview img { cursor: pointer }
-.ivview > div:nth-child(1) { position: absolute; left: 48%; top: 48%; width: 30px; height: 30px }
-.ivview > div:nth-child(2) { position: relative }
-.ivview > div:nth-child(2) .left-pane { 
-  position: absolute;
-  border: none;
-  height: 100%;
-  width: 25%;
-  top: 0;
-  transition: opacity 0.25s ease-in-out;
-  opacity: 0;
-  background: linear-gradient(90deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);
-}
-.ivview > div:nth-child(2) .left-pane:hover {
-  opacity: 1;
-}
-.ivview > div:nth-child(2) .right-pane { 
-  position: absolute;
-  border: none;
-  height: 100%;
-  width: 25%;
-  top: 0;
-  right: 0;
-  transition: opacity 0.25s ease-in-out;
-  opacity: 0;
-  background: linear-gradient(270deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);
-}
-.ivview > div:nth-child(2) .right-pane:hover {
-  opacity: 1;
-}
-.ivview > div:nth-child(3) { width: 100%; display: flex }
-.ivview > div:nth-child(3) > a { flex: 1; text-align: left; border: 0; font-weight: bold; font-size: 14px; white-space: nowrap }
-.ivview > div:nth-child(3) > a:nth-child(2) { text-align: right; padding-right: 5px }
-.ivview > div:nth-child(3) > a:nth-child(3) { padding-left: 5px }
-.ivview > div:nth-child(3) > a:nth-child(4) { text-align: right; font-size: 11px; font-weight: normal }
-
-
-/****** filter selector *****/
-
-.fil_div {
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  background: $tabbg$;
-  border: 1px solid $border$;
-  padding: 5px;
-  width: 600px;
-  text-align: center;
-}
-.fil_div a.close       { float: right; border: 0; font-weight: bold }
-.fil_div p.browseopts  { padding: 2px 20px; line-height: 23px }
-.fil_div .browseopts a { outline: none; color: $maintext$ }
-.fil_div .browseopts a.active { font-weight: bold }
-.fil_div b.ruler       { display: block; margin: auto; width: 93%; height: 1px; border-bottom: 1px solid $border$; margin-bottom: 5px }
-.fil_div h3            { width: 100%; text-align: center; font-size: 13px }
-.fil_div table         { width: 93%; text-align: left; margin: 0 auto 5px auto }
-.fil_div table td.label label { width: 120px }
-.fil_div table td.label b { display: block; font-weight: normal; padding: 10px 5px 0 0 }
-.fil_div table td.check { width: 15px }
-.fil_div label.active { font-weight: bold }
-.fil_div .opts a      { border: 0; outline: none }
-.fil_div .opts b      { margin: 0 7px; font-weight: normal }
-.fil_div .opts a.tsel { color: $maintext$; }
-.fil_div table ul   { margin: 0 0 0 15px }
-.fil_div .slider p    { margin: 1px; }
-.fil_div .slider div  { margin: 1px; border: 1px solid $secborder$; float: left; height: 12px; }
-.fil_div .slider div div { border-top: none; border-bottom: none; cursor: default; position: relative; height: 10px; margin: 1px; }
-.fil_div .slider span { margin-left: 5px }
-
-p.filselect {
-  text-align: center;
-  display: block;
-  margin: 10px auto 3px auto;
-  border: none;
-  outline: none;
-}
-p.filselect a { margin: 0 5px }
-p.filselect i { font-style: normal }
-
-
-
-
-/****** Advanced Search *******/
-
-.advsearch { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center }
-.advsearch .advrow > tr > td { padding: 0 2px 0 0 }
-.advsearch .advrow > tr > td:first-child { text-align: right; white-space: nowrap; }
-.advsearch .advrow > tr > td:first-child > div { width: auto }
-.advsearch .advnest > tr > td { padding: 0 2px 0 0 }
-.advsearch .advnest > tr > td:first-child { text-align: right; white-space: nowrap; }
-.advsearch .advnest > tr > td:first-child > div { width: auto }
-.advsearch .advnest > tr > td:first-child > b { display: block; margin: 6px 3px 0 0 }
-
-/* Line drawing. This is awful */
-.advsearch .advnest > tr > td:nth-child(2) { position: relative; width: 15px; padding: 0 }
-.advsearch .advnest > tr > td:nth-child(2) div { border-left: 1px solid $border$; width: 15px; position: absolute; left: 5px; top: 0; bottom: 0 }
-.advsearch .advnest > tr > td:nth-child(2).start { top: 13px }
-.advsearch .advnest > tr > td:nth-child(2).start div { border-top: 1px solid $border$ }
-.advsearch .advnest > tr > td:nth-child(2).start span { display: block; position: absolute; left: -5px; top: 0; width: 15px; border-top: 1px solid $border$; height: 1px }
-.advsearch .advnest > tr > td:nth-child(2).end div { bottom: 13px; border-bottom: 1px solid $border$ }
-.advsearch .advnest > tr > td:nth-child(2).mid span { display: block; position: absolute; left: 5px; top: 13px; width: 15px; border-top: 1px solid $border$; height: 1px }
-
-.advsearch .elm_dd_input { display: inline-block; margin: 5px 4px; width: 150px; vertical-align: middle }
-.advsearch .elm_dd_input.short { width: auto }
-.advsearch .advbut { width: 100%; background-color: $_blendbg$; text-align: right; white-space: nowrap }
-.advsearch .advbut > * { display: inline-block; box-sizing: border-box; height: 20px; padding: 3px 5px 0 2px; cursor: pointer; border-bottom: none; font-size: 16px }
-.advsearch .advbut > b { color: $grayedout$; font-style: normal }
-.advsearch .advheader { box-sizing: border-box; background-color: $_blendbg$; padding: 3px; width: 100%; margin-bottom: 2px }
-.advsearch .advheader > h3 { text-align: center; font-weight: bold; font-size: inherit; margin-bottom: 3px }
-.advsearch .advheader .opts { display: flex; justify-content: space-between; align-items: flex-end; min-width: 170px }
-.advsearch .advheader .opts > * { margin: 0; white-space: nowrap }
-.advsearch .advheader .opselect > * { display: inline-block; font-size: 18px; padding: 0 5px }
-
-.advsearch .optbuttons { margin-top: 5px }
-.advsearch .optbuttons > .elm_dd_button { margin-top: 5px; margin-right: 10px; width: 120px; display: inline-block; }
-
-
-
-/****** Image flagging *******/
-
-/* divs:
- *   1: header
- *   2: image
- *   3: metadata
- *   4: vote box
- *   6: other user's votes */
-.imageflag { margin: auto }
-.imageflag > ul:nth-child(1) { margin-left: 15px }
-.imageflag > div:nth-child(1) { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 2px }
-.imageflag > div:nth-child(1) span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0px 20px }
-.imageflag > div:nth-child(2) { border: 1px solid $border$; padding: 5px; display: flex; justify-content: center; align-items: center; background: #000 }
-.imageflag > div:nth-child(2) a { border: none; display: inline-block; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center }
-.imageflag > div:nth-child(3) { display: flex; justify-content: space-between; }
-.imageflag > div:nth-child(4) { display: flex; margin-bottom: 5px }
-.imageflag > div:nth-child(4) p { flex: 1 0; padding-top: 15px }
-.imageflag > div:nth-child(4) ul { list-style-type: none; margin: 0 5px 0 0 }
-.imageflag > div:nth-child(4) ul li:first-child { text-align: center }
-.imageflag > div:nth-child(4) ul li     label { display: inline-block; border: 1px solid $secborder$; padding: 7px; width: 100px; white-space: nowrap; margin: 2px 0; cursor: pointer }
-.imageflag > div:nth-child(4) ul li.sel label,
-.imageflag > div:nth-child(4) ul li     label:hover { background-color: $secbg$ }
-.imageflag > div:nth-child(4) ul li.overrule label { position: relative; left: 80px; border: none; padding: 0 }
-.imageflag > div:nth-child(6) { min-height: 200px; padding: 15px 0 }
-.imageflag > div:nth-child(6) table { margin: 0 auto }
-.imageflag > div:nth-child(6) table tr.ignored td:nth-child(2),
-.imageflag > div:nth-child(6) table tr.ignored td:nth-child(3) { text-decoration: line-through; color: $grayedout$ }
-.imageflag > div:nth-child(6) table td { min-width: 50px }
-.imageflag .fullscreen { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; background-size: contain; background-color: #000 }
-
-
-/****** Image browser (/img/browse) ******/
-
-div.imagebrowse { padding: 0; display: flex; flex-wrap: wrap }
-.imagebrowse .imagecard { padding: 2px; display: flex; flex: 1 }
-.imagebrowse .imagecard:hover { background-color: $secbg$ }
-.imagebrowse .imagecard > a { flex-shrink: 0; display: block; width: 150px; height: 120px; background-size: contain; background-repeat: no-repeat; background-position: top right; border: none }
-.imagebrowse .imagecard > div { padding: 0 0 0 4px }
-.imagebrowse .imagecard > div svg { font-size: 11px }
-.imagebrowse .imagecard > div svg .errorbar { stroke: $standout$; stroke-width: 2 }
-.imagebrowse .imagecard > div svg .ruler { stroke: $border$; stroke-width: 1; stroke-dasharray: 3 }
-.imagebrowse .imagecard > div svg rect { fill: $maintext$ }
-
-
-/****** Icons *******/
-
-.icons {
-  background: url(/f/icons.png?$icons_version$) no-repeat;
-  width: 16px;
-  height: 14px;
-  margin: 0 2px 0 0;
-  margin-top: 0px!important;
-  overflow: hidden;
-  display:-moz-inline-stack;
-  display: inline-block;
-  padding: 0;
-  border: 0;
-  text-decoration: none;
-}
-.icons.lang  { width: 13px; height: 11px }
-.icons.feed  { width: 12px; height: 12px }
-.icons.gen   { width: 14px; height: 14px }
-.icons.gen.b { width: 28px }
-.icons.rtcomplete, .icons.rtpartial, .icons.rttrial { width: 11px; }
-abbr.icons, abbr.uicons { cursor: default; }
-a .icons { cursor: pointer }
-.icons.oth { background: none; }
-$iconcss$
-
-
-.release_icons { width: 16px; height: 16px; float: right; margin-left: 4px; }
-.release_icon_voiced2, .release_icon_anim2 { filter: hue-rotate(30deg); }
-.release_icon_voiced3, .release_icon_anim3 { filter: invert(100%) hue-rotate(240deg); }
-.release_icon_voiced4, .release_icon_anim4 { filter: hue-rotate(80deg); }
-
-/* Relation graph colors */
-svg .border { fill: none; stroke: $border$ }
-svg .edge polygon.border { fill: $border$ }
-svg .nodebg { fill: $tabbg$; stroke: $tabbg$ }
-svg text { fill: $maintext$ }
-svg .edge text { font: 8px "Tahoma", "Arial", sans-serif }
-#graph_current .border { stroke: $warnborder$ }
-#graph_current .nodebg { stroke: $warnborder$; fill: $warnbg$ }
-