A DRY appreach to skins: there's only one main CSS file now

So, instead of using separate smaller CSS files to overwrite
directives in the main (/static/f/style.css) file, I decided
to generate one CSS file for each skin, which includes everything
needed to render the page. The template for this skin is now
/data/skingen/style.css.

I just don't feel like maintaining two separate files when
changing something to the CSS.

Also converted the old layout into a skin directory (angel),
since the default skin isn't in the CSS template anymore.

7 files changed, 97 insertions, 268 deletions

diff --git a/static/f/style.css b/data/skingen/style.css
index 3de5a486..fe4ec55f 100644
--- a/static/f/style.css
+++ b/data/skingen/style.css
@@ -9,15 +9,15 @@ body, td {
   font: 8pt "Tahoma";
 }
 body {
-  background: #000 url(/f/bg.jpg) no-repeat;
-  color: #ddd;
+  $_bodybg$;
+  color: $maintext$
 }
 a {
-  color: #fff;
+  color: $alttitle$;
   text-decoration: none;
 }
 a:hover {
-  border-bottom: 1px dotted #fff;
+  border-bottom: 1px dotted $alttitle$;
 }
 table {
   border-collapse: collapse;
@@ -27,7 +27,7 @@ table td {
   padding: 3px;
 }
 table tr.odd {
-  background: url(/f/boxbg.png) repeat;
+  background: url($_boxbg$) repeat;
 }
 img {
   border: none;
@@ -37,9 +37,7 @@ img {
   position: absolute;
   top: 0px;
   right: 0px;
-  width: 433px;
-  height: 140px;
-  background: url(/f/bgright.jpg) no-repeat;
+  $_bgright$
 }
 
 #header {
@@ -51,7 +49,7 @@ img {
   font-family: "Futura", "Century New Gothic", "Arial", Serif;
   font-size: 19pt;
   font-style: italic;
-  color: #135;
+  color: $maintitle$;
   border: none!important;
 }
 #header h1.debug a {
@@ -61,10 +59,10 @@ img {
 #footer {
   margin: 15px auto 0 auto;
   text-align: center;
-  color: #135;
+  color: $footer$;
 }
 #footer a {
-  color: #135;
+  color: $footer$;
   text-decoration: underline;
 }
 
@@ -73,7 +71,7 @@ ul, ol {
 }
 p.locked {
   float: right;
-  color: #e44;
+  color: $standout$;
   font-style: italic;
   margin: 0!important;
 }
@@ -84,8 +82,8 @@ p.locked {
 p.description {
   margin: 10px 100px!important;
 }
-b.done { font-weight: normal; color: #0c0 }
-b.todo { font-weight: normal; color: #c00 }
+b.done { font-weight: normal; color: $statok$ }
+b.todo { font-weight: normal; color: $statnok$ }
 
 .clearfloat {
   clear: both;
@@ -105,9 +103,9 @@ legend {
   display: none;
 }
 input.text, input.submit, select, textarea {
-  background-color: #135;
-  color: #ccc;
-  border: 1px solid #36A;
+  background-color: $secbg$;
+  color: $maintext$; /* this doesn't work very well in every case */
+  border: 1px solid $secborder$;
   font: 9pt "Tahoma";
   margin: 1px;
 }
@@ -116,7 +114,7 @@ optgroup option {
   font-style: normal;
 }
 input.submit {
-  background: url(/f/boxbg.png) repeat;
+  background: url($_boxbg$) repeat;
   padding: 1px;
 }
 input.text, select {
@@ -178,23 +176,23 @@ td.field label {
   font-size: 11pt;
 }
 #maincontent h1 {
-  color: #258;
+  color: $border$;
   font-size: 14pt;
   margin: -5px 0 15px 0;
 }
 #maincontent h2.alttitle {
-  color: #fff;
+  color: $alttitle$;
   margin: -17px 0 15px 15px;
   font-weight: normal;
 }
 #maincontent div.mainbox {
-  border: 1px solid #258;
+  border: 1px solid $border$;
   margin: 21px 0 -10px 0;
   padding: 5px;
-  background: url(/f/boxbg.png) repeat;
+  background: url($_boxbg$) repeat;
 }
 #maincontent div.mainbox a {
-  color: #7bd;
+  color: $link$;
 }
 #maincontent p {
   margin: 3px 20px;
@@ -212,7 +210,7 @@ p.center {
 }
 b.future {
   font-weight: normal;
-  color: #e44;
+  color: $standout$;
 }
 
 
@@ -228,20 +226,20 @@ b.future {
 }
 #menulist div.menubox {
   margin: 0 0 10px 0;
-  border: 1px solid #258;
-  background: url(/f/boxbg.png) repeat;
+  border: 1px solid $border$;
+  background: url($_boxbg$) repeat;
 }
 #menulist div.menubox div {
   padding: 2px 7px;
 }
 #menulist h2 {
-  border-bottom: 1px solid #258;
-  background: url(/f/boxbg.png) repeat;
+  border-bottom: 1px solid $border$;
+  background: url($_boxbg$) repeat;
   padding: 1px 3px;
 }
 #menulist h2, #menulist h2 a {
   font-size: 8pt;
-  color: #fff;
+  color: $alttitle$;
 }
 #menulist dt {
   display: block;
@@ -295,18 +293,18 @@ b.future {
   float: right;
   display: block;
   height: 14px;
-  border: 1px solid #258;
+  border: 1px solid $border$;
   border-bottom: none;
   padding: 1px 7px 5px 7px;
   margin: 0 0 0 10px;
-  background-color: #012;
+  background-color: $tabbg$;
 }
 #maincontent ul.maintabs.notfirst li a {
   margin-top: 20px;
 }
 #maincontent ul.maintabs.bottom li a {
   margin-top: 10px;
-  border-bottom: 1px solid #258;
+  border-bottom: 1px solid $border$;
   border-top: none;
   padding: 4px 7px 2px 7px;
 }
@@ -317,7 +315,7 @@ b.future {
 }
 #maincontent ul.maintabs li.tabselected a,
 #maincontent ul.maintabs li a:hover {
-  background-color: #0c1925;
+  background-color: $_blendbg$;
   padding-bottom: 6px;
 }
 #maincontent ul.maintabs.bottom li.tabselected a,
@@ -382,8 +380,8 @@ p.browseopts {
 }
 #maincontent p.browseopts a {
   padding: 1px 3px;
-  color: #fff;
-  border: 1px solid #258;
+  color: $alttitle$;
+  border: 1px solid $border$;
   margin: 0 2px;
 }
 #maincontent p.browseopts a.optselected,
@@ -402,7 +400,7 @@ div.mainbox.browse table td.tc1 {
 }
 table thead td {
   font-weight: bold;
-  background-color: #135;
+  background-color: $secbg$;
 }
 form.search {
   display: block;
@@ -429,7 +427,7 @@ div.mainbox.history td.tc1_2 {
 div.mainbox.history td.tc2 { width: 65px; }
 div.mainbox.history td.tc3 { width: 90px  }
 div.mainbox.history td.editsum {
-  color: #258;
+  color: $border$;
   padding-top: 0;
   text-align: right;
 }
@@ -449,12 +447,12 @@ div.thread table {
   width: 100%;
 }
 div.thread td {
-  border-bottom: 1px solid #258;
+  border-bottom: 1px solid $border$;
 }
 div.thread td.tc1 {
   width: 150px;
   padding: 5px 10px;
-  border-right: 1px solid #258;
+  border-right: 1px solid $border$;
 }
 div.thread td.tc2 {
   padding: 10px 20px 10px 10px;
@@ -464,17 +462,17 @@ div.thread tr.deleted td {
 }
 div.thread i.deleted {
   font-style: normal;
-  color: #258;
+  color: $border$;
 }
 div.thread i.lastmod {
   float: right;
   font-size: 7pt;
-  color: #258;
+  color: $border$;
   margin: 0 -10px -5px 0;
 }
 div.thread i.edit {
   float: right;
-  color: #258;
+  color: $border$;
   font-style: normal;
   margin: -10px -10px 0 0;
 }
@@ -491,7 +489,7 @@ div.mainbox.discussions td.tags {
   padding-left: 60px;
 }
 div.mainbox.discussions td.tags a {
-  color: #258!important
+  color: $border$!important
 }
 div.discussions td.tc2 { width: 50px;  }
 div.discussions td.tc3 { width: 90px;  }
@@ -500,7 +498,7 @@ div.discussions td.tc4 { width: 170px; }
   font-family: "Futura", "Century New Gothic", "Arial", Serif;
   font-weight: bold;
   font-style: italic;
-  color: #258;
+  color: $border$;
   font-size: 13pt;
   margin: 20px 0 -20px 0;
 }
@@ -550,7 +548,7 @@ div.vndetails table dd {
   margin-left: 90px;
 }
 .catlvl_0, .catlvl_1, .catlvl_2, .catlvl_3 { font-style: normal; }
-.catlvl_1 { color: #444 }
+.catlvl_1 { color: #444 } /* TO SKIN */
 .catlvl_2 { color: #777 }
 .catlvl_3 { color: #fff }
 div.vndetails td.relations dt {
@@ -571,7 +569,7 @@ div.vndescription {
 }
 div.vndescription h2 {
   margin: 0 30px!important;
-  border-top: 1px solid #258;
+  border-top: 1px solid $border$;
   padding: 3px 70px;
   font-weight: bold!important;
 }
@@ -583,7 +581,7 @@ div.vndescription p {
   width: 100%;
 }
 .releases tr.lang td, #screenshots tr.rel td {
-  background: url(/f/boxbg.png) repeat;
+  background: url($_boxbg$) repeat;
   font-weight: bold;
 }
 .releases td.tc1 {
@@ -603,7 +601,7 @@ div.vndescription p {
   text-align: right;
 }
 .releases td.tc5 a {
-  color: #ddd!important;
+  color: $maintext$!important;
   border: 0;
 }
 .releases td.tc6 {
@@ -626,8 +624,8 @@ a.addnew {
 }
 #screenshots td.scr div i        { font-size: 7pt; }
 #screenshots td.scr img          { border: 3px solid transparent; }
-#screenshots td.scr div.nsfw img { border: 3px solid #C00; }
-#screenshots td.scr a:hover img  { border: 3px solid #258; }
+#screenshots td.scr div.nsfw img { border: 3px solid $statnok$; }
+#screenshots td.scr a:hover img  { border: 3px solid $border$; }
 #screenshots td.scr a            { border: none; }
 #screenshots div.hidden          { display: none }
 #screenshots #nsfwshown          { font-style: normal }
@@ -694,7 +692,7 @@ a.help {
   width: 160px;
   border: none
 }
-.catsel_1 { color: #0c0!important }
+.catsel_1 { color: #0c0!important } /* TO SKIN */
 .catsel_2 { color: #cc0!important }
 .catsel_3 { color: #c00!important }
 
@@ -709,15 +707,15 @@ a.help {
 #jt_box_relations td.tc2 select { width: 130px; }
 
 #ds_box {
-  border: 1px solid #258;
+  border: 1px solid $border$;
   border-top: none;
-  background-color: #13273a;
+  background-color: #13273a; /* TO SKIN */
 }
 #ds_box b {
   padding: 2px 0 0 10px; 
 }
 #ds_box tr.selected {
-  background: url(/f/boxbg.png) repeat;
+  background: url($_boxbg$) repeat;
 }
 #ds_box table {
   width: 100%;
@@ -757,7 +755,7 @@ a.help {
   width: 90%;
   padding: 0 30px 5px 30px;
   margin: 0 auto;
-  border-top: 1px solid #258;
+  border-top: 1px solid $border$;
 }
 #advoptions.hidden { display: none }
 #advoptions h2 {
@@ -800,8 +798,8 @@ ul#catselect li li {
   list-style-type: none;
   background: url(/f/select.png) no-repeat;
 }
-ul#catselect li li.inc { background-position: 0px -16px; color: #0c0; }
-ul#catselect li li.exc { background-position: 0px -33px; color: #c00; }
+ul#catselect li li.inc { background-position: 0px -16px; color: $statok$; }
+ul#catselect li li.exc { background-position: 0px -33px; color: $statnok$; }
 
 
 
@@ -869,7 +867,7 @@ ul#catselect li li.exc { background-position: 0px -33px; color: #c00; }
 #jt_box_visual_novels div,      #jt_box_producers div { padding-left: 20px }
 #jt_box_visual_novels input,    #jt_box_producers input { margin-right: 10px; width: 300px }
 #jt_box_visual_novels span,     #jt_box_producers span { clear: left; display: block; padding: 2px; }
-#jt_box_visual_novels span.odd, #jt_box_producers span.odd { background: url(/f/boxbg.png) repeat; }
+#jt_box_visual_novels span.odd, #jt_box_producers span.odd { background: url($_boxbg$) repeat; }
 #jt_box_visual_novels i,        #jt_box_producers i { font-style: normal; display: block; float: left; width: 310px }
 #jt_box_visual_novels b,        #jt_box_producers b { font-weight: normal; }
 
@@ -882,11 +880,11 @@ ul#catselect li li.exc { background-position: 0px -33px; color: #c00; }
 .docs h3 { margin-top: 25px;  }
 .docs dd { padding-bottom: 5px; margin-left: 120px; }
 .docs dt { float: left }
-.docs ul.index { display: block; float: right; width: 150px; padding: 2px; margin: 0 0 10px 5px; background: url(/f/boxbg.png) repeat; border: 1px solid #258; }
+.docs ul.index { display: block; float: right; width: 150px; padding: 2px; margin: 0 0 10px 5px; background: url($_boxbg$) repeat; border: 1px solid $border$; }
 .docs ul.index li { list-style-type: none; }
 .docs ul.index li a { margin: 0 0 0 10px; }
 .docs .retired { text-decoration: line-through; }
-.docs dt b { color: #258; font-weight: normal; font-style: normal; font-size: 12px; }
+.docs dt b { color: $border$; font-weight: normal; font-style: normal; font-size: 12px; }
 
 
 
@@ -933,11 +931,11 @@ ul#catselect li li.exc { background-position: 0px -33px; color: #c00; }
 div.warning, div.notice {
   margin: 5px 10%;
   padding: 15px;
-  background-color: #534;
+  background-color: #534; /* TO SKIN */
   border: 1px solid #C00;
 }
 div.notice {
-  background-color: #354;
+  background-color: #354; /* TO SKIN */
   border: 1px solid #0C0;
 }
 div.warning ul, div.notice ul {
@@ -961,10 +959,10 @@ div.revision {
   padding-bottom: 10px!important;
 }
 div.revision div, div.revision table {
-  border: 1px solid #258;
+  border: 1px solid $border$;
   margin: 0 auto;
   width: 90%;
-  background-color: #13273a;
+  background-color: #13273a; /* TO SKIN */
   clear: both;
 }
 div.revision table thead tr td {
@@ -973,7 +971,7 @@ div.revision table thead tr td {
   font-weight: normal;
 }
 div.revision table td {
-  border-right: 1px solid #258;
+  border-right: 1px solid $border$;
   padding: 5px;
 }
 div.revision td.tcval {
@@ -985,11 +983,11 @@ div.revision div {
 }
 .diff_add {
   font-weight: normal;
-  background-color: #354;
+  background-color: #354; /* TO SKIN */
 }
 .diff_del {
   font-weight: normal;
-  background-color: #534;
+  background-color: #534; /* TO SKIN */
 }
 div.revision .next {
   float: right;
@@ -1012,8 +1010,8 @@ div#iv_view {
   display: none;
   top: -5000px;
   left: -5000px;
-  background: url(/f/boxbg.png) repeat;
-  border: 1px solid #258;
+  background: url($_boxbg$) repeat;
+  border: 1px solid $border$;
   padding: 5px;
   text-align: center;
 }
@@ -1030,7 +1028,7 @@ div#iv_view {
   top: -50px;
   width: 100px;
   padding: 3px;
-  background-color: #f5f5f5;
+  background-color: #f5f5f5; /* no real need to skin this */
   text-align: center;
   border: 1px solid #ccc;
   color: #000;
diff --git a/lib/VNDB/Util/LayoutHTML.pm b/lib/VNDB/Util/LayoutHTML.pm
index 0c125b35..eb71b819 100644
--- a/lib/VNDB/Util/LayoutHTML.pm
+++ b/lib/VNDB/Util/LayoutHTML.pm
@@ -18,7 +18,6 @@ sub htmlHeader { # %options->{ title, js, noindex, search }
    head;
     title $o{title};
     Link rel => 'shortcut icon', href => '/favicon.ico', type => 'image/x-icon';
-    Link rel => 'stylesheet', href => $self->{url_static}.'/f/style.css', type => 'text/css', media => 'all';
     Link rel => 'stylesheet', href => $self->{url_static}.'/s/test/style.css', type => 'text/css', media => 'all';
     if($o{js}) {
       script type => 'text/javascript', src => $self->{url_static}.'/f/forms.js'; end;
diff --git a/static/f/boxbg.png b/static/f/boxbg.png
deleted file mode 100644
index 43b546b5..00000000
--- a/static/f/boxbg.png
+++ /dev/null
diff --git a/static/f/bg.jpg b/static/s/angel/bg.jpg
index f91e414e..f91e414e 100644
--- a/static/f/bg.jpg
+++ b/static/s/angel/bg.jpg
diff --git a/static/f/bgright.jpg b/static/s/angel/bgright.jpg
index e1dff0cd..e1dff0cd 100644
--- a/static/f/bgright.jpg
+++ b/static/s/angel/bgright.jpg
diff --git a/static/s/angel/conf b/static/s/angel/conf
new file mode 100644
index 00000000..cc73db2f
--- /dev/null
+++ b/static/s/angel/conf
@@ -0,0 +1,18 @@
+name        angel
+fullname    Angelic Serenade
+bodybg      #000  // main background color
+maintext    #ddd  // primary text color
+alttitle    #fff  // alternative title + menu link color
+link        #7bd  // primary link color
+tabbg       #012  // background color of inactive tabs
+maintitle   #123  // text color of the site title
+footer      #123  // text color of the footer
+border      #258  // primary border color
+standout    #e44  // color of 'stand-out' text
+secbg       #135  // secondary background color (used on input fields and table headers)
+secborder   #35A  // secondary border color (used on input fields)
+statok      #0c0  // generic 'ok' text color (used for vnlist statuses & category browser)
+statnok     #c00  // generoc 'not ok' text color (used for above, and as border for NSFW screenshots)
+boxbg       #112233BC   // RGBA, background color of the boxes.
+imglefttop  bg.jpg
+imgrighttop bgright.jpg
diff --git a/util/skingen.pl b/util/skingen.pl
index 1029e253..4a1db17f 100755
--- a/util/skingen.pl
+++ b/util/skingen.pl
@@ -35,7 +35,6 @@ sub readskin { # skin name
 
 sub writeskin { # $obj
   my $o = shift;
-  open my $F, '>', $ROOT.'/static/s/'.$o->{name}.'/style.css' or die $!;
 
   # fix image locations
   $o->{$_} && ($o->{$_} = '/s/'.$o->{name}.'/'.$o->{$_}) for (qw|imglefttop imgrighttop|);
@@ -52,11 +51,12 @@ sub writeskin { # $obj
 
   # body background
   if(!$o->{imglefttop}) {
-    $o->{_bodybg} = "background-image: none; background-color: $o->{bodybg}";
+    $o->{_bodybg} = "background-color: $o->{bodybg}";
   } else {
     $o->{_bodybg} = "background: $o->{bodybg} url($o->{imglefttop}) no-repeat";
   }
 
+
   # create boxbg.png
   my $img = Image::Magick->new(size => '1x1');
   $img->Read('xc:'.$o->{boxbg});
@@ -69,201 +69,15 @@ sub writeskin { # $obj
   $img = $img->Flatten();
   $o->{_blendbg} = '#'.join '', map sprintf('%02x', $_*255), $img->GetPixel(x=>1,y=>1);
 
-  my $d = join '', (<DATA>);
-  $d =~ s/\$$_\$/$o->{$_}/g for (keys %$o);
-  print $F $d;
-  close $F;
-}
-
-
-1;
-
-
-__DATA__
-/* main background image and color */
-body {
-  $_bodybg$
-}
-
-
-/* main text color */
-body,
-#maincontent .releases td.tc5 a,
-#maincontent #jt_box_categories li li a {
-  color: $maintext$; /* maintext */
-}
-
-
-/* menu link and secondary title color  */
-a,
-#maincontent p.browseopts a,
-#maincontent h2.alttitle,
-#menulist h2,
-#menulist h2 a,
-#maincontent p.browseopts a {
-  color: $alttitle$; /* alttitle */
-}
-a:hover {
-  border-bottom: 1px dotted $alttitle$; /* alttitle */
-}
-
-
-/* main link color */
-#maincontent div.mainbox a {
-  color: $link$; /* link */
-}
-
-
-/* transparent image (used in multiple layers, so has to be transparent) */
-div#iv_view,
-#jt_box_visual_novels span.odd,
-#jt_box_producers span.odd,
-#ds_box tr.selected,
-.releases tr.lang td,
-#screenshots tr.rel td,
-#menulist div.menubox,
-#maincontent div.mainbox,
-table tr.odd,
-.docs ul.index,
-input.submit,
-#menulist h2 {
-  background: url($_boxbg$) repeat; /* Box BG */
-}
-
-
-/* bg color of the tabs */
-#maincontent ul.maintabs li a {
-  background-color: $tabbg$; /* tabbg */
-}
-
-/* the color you get when blending the transparent image on the body bg */
-#maincontent ul.maintabs li.tabselected a,
-#maincontent ul.maintabs li a:hover {
-  background-color: $_blendbg$; /* blendbg */
-}
-
-
-/* the small image on the top-right (make sure to update the image size) */
-#bgright {
-  $_bgright$
-}
-
-
-/* site title */
-#header h1, #header h1 a {
-  color: $maintitle$; /* maintitle */
-}
-
-
-/* footer text color */
-#footer, #footer a {
-  color: $footer$; /* footer */
-}
-
-
-/* darkened/grayed-out text color */
-#maincontent h1.boxtitle,
-#maincontent h1.boxtitle a,
-div.mainbox.discussions td.tags a,
-div.thread i.edit,
-div.thread i.lastmod,
-div.thread i.deleted,
-div.mainbox.history td.editsum,
-#maincontent h1,
-.docs dt b {
-  color: $border$!important; /* border */
-}
-
-
-/* stand-out text color */
-b.future, p.locked {
-  color: $standout$; /* standout */
-}
-
-
-/* primary border color (usually the same as above) */
-#maincontent div.mainbox,
-#menulist div.menubox,
-#menulist h2,
-#maincontent ul.maintabs li a,
-#maincontent ul.maintabs.bottom li a,
-#maincontent p.browseopts a,
-div.thread td,
-div.thread td.tc1,
-div.vndescription h2,
-#screenshots td.scr a:hover img,
-#ds_box,
-#scr_table td,
-#advoptions,
-.docs ul.index,
-div.revision div,
-div.revision table,
-div.revision table td,
-div#iv_view {
-  border-color: $border$; /* border */
-}
-
-/* same color is also used for the vote graph */
-.votegraph td div {
-  background-color: $border$; /* border */
-}
-
-
-
-/* secondary bg color */
-table thead td, input.text, input.submit, select, textarea {
-  background-color: $secbg$; /* secbg */
-}
-
-/* secondary border color */
-input.text, input.submit, select, textarea {
-  border: 1px solid $secborder$; /* secborder */
-}
-
-
-/* status colors */
-b.done, ul#catselect li li.inc { color: $statok$ }  /* statok */
-b.todo, ul#catselect li li.exc { color: $statnok$ }  /* statnok */
-#screenshots td.scr div.nsfw img { border-color: $statnok$ } /* statnok */
-
-
-
-
-
-/****** Not too sure what to do with these *******/
-
-
-
-/* category levels - calculate from maintext? */
-.catlvl_1 { color: #444 }
-.catlvl_2 { color: #777 }
-.catlvl_3 { color: #fff }
-
-
-/* bg color of the dropdown search and revision tables (use an other already existing color?) */
-#ds_box, div.revision div, div.revision table {
-  background-color: #13273a;
-}
-
-
-/* warning and notice boxes - the maintext color must be readable on these... */
-div.warning {
-  background-color: #534;
-  border: 1px solid #C00;
-}
-div.notice {
-  background-color: #354;
-  border: 1px solid #0C0;
+  # write the CSS
+  open my $CSS, '<', "$ROOT/data/skingen/style.css" or die $!;
+  open my $SKIN, '>', "$ROOT/static/s/$o->{name}/style.css" or die $!;
+  while((my $d = <$CSS>)) {
+    $d =~ s/\$$_\$/$o->{$_}/g for (keys %$o);
+    print $SKIN $d;
+  }
+  close $SKIN;
+  close $CSS;
 }
 
 
-/* diff colors - calculate from maintext? */
-.diff_add { background-color: #354; }
-.diff_del { background-color: #534; }
-
-
-/* category colors on vn edit */
-.catsel_1 { color: #0c0!important }
-.catsel_2 { color: #cc0!important }
-.catsel_3 { color: #c00!important }
-