advanced filtering

19 files changed, 977 insertions, 329 deletions

diff --git a/Changelog b/Changelog
index 5cc3802..8947959 100755
--- a/Changelog
+++ b/Changelog
@@ -1,9 +1,14 @@
 Changelog:
+
+26-08-2022: advanced filtering
+    * new advanced filter box and functionality
+    * updated additional styles to accommodate advanced filter
+    * remove debug top bar override
+    * remove debug style override
     
 19-08-2022: untighten parameter checks
     * serverinfo search can also happen without ip/port check
 
-
 07-08-2022: fixes in Json API
     * update manual to reflect use of JSON instead of JSON::XS
     * fix a few specific ubrowser functions
diff --git a/lib/MasterWebInterface/Database/AdvancedSearch.pm b/lib/MasterWebInterface/Database/AdvancedSearch.pm
new file mode 100755
index 0000000..a21a3c3
--- /dev/null
+++ b/lib/MasterWebInterface/Database/AdvancedSearch.pm
@@ -0,0 +1,51 @@
+package MasterWebInterface::Database::AdvancedSearch;
+use strict;
+use warnings;
+use Exporter 'import';
+our @EXPORT = qw| dbGetGameTypes dbGetCountries |;
+
+sub dbGetGameTypes 
+{
+  my $s = shift;
+  my %o = ( @_ );
+    
+  my %where = (
+    # gamename and char are "all" or value
+    $o{gamename}          ? ('serverlist.gamename = ?'       => $o{gamename})       : (),
+    ('gametype IS NOT NULL' => ""),
+
+    # do not filter by country. the gametype can still exist for that game while there are no online servers for it.    
+    #$o{country}           ? ('country         LIKE UPPER(?)' => $o{country})         : (),
+  );
+  
+  return $s->dbAll( q|
+    SELECT DISTINCT gametype FROM serverlist
+      LEFT JOIN serverinfo ON serverlist.id = serverinfo.sid
+      !W ORDER BY lower(gametype) ASC|,
+    \%where,
+  );
+}
+
+sub dbGetCountries 
+{
+  my $s = shift;
+  my %o = ( @_ );
+    
+  my %where = (
+    $o{gamename}          ? ('serverlist.gamename = ?'       => $o{gamename})       : (),
+    $o{hostname}          ? ('LOWER(hostname) LIKE LOWER(?)' => "%$o{hostname}%")     : (),
+    $o{mapname}           ? ('(LOWER(mapname) LIKE LOWER(?) OR LOWER(maptitle) LIKE LOWER(?))' => ["%$o{mapname}%", "%$o{mapname}%"]) : (),
+    $o{gametype}          ? ('LOWER(gametype) LIKE LOWER(?)' => $o{gametype})         : (),
+
+    ("COUNTRY IS NOT NULL" => ""),
+  );
+  
+  return $s->dbAll( q|
+    SELECT DISTINCT country FROM serverlist
+      LEFT JOIN serverinfo ON serverlist.id = serverinfo.sid
+      !W ORDER BY lower(country) ASC|,
+    \%where,
+  );
+}
+
+1;
diff --git a/lib/MasterWebInterface/Database/Servers.pm b/lib/MasterWebInterface/Database/Servers.pm
index 6c51494..99b4f1e 100755
--- a/lib/MasterWebInterface/Database/Servers.pm
+++ b/lib/MasterWebInterface/Database/Servers.pm
@@ -11,19 +11,23 @@ sub dbServerListGet {
   my $s = shift;
   my %o = ( page => 1, 
             results => 50, 
-            gamename => "all", 
             @_ 
   );
     
   my %where = (
     # gamename and char are "all" or value
-    $o{updated}           ? ('dt_updated > ?'                => (time-$o{updated})) : (),
-    $o{gamename} !~ /all/ ? ('serverlist.gamename = ?'       => $o{gamename})       : (),
-    $o{nolist}            ? ('serverlist.gamename <> ?'      => $o{nolist})         : (),
-    $o{search}            ? ('LOWER(hostname) LIKE LOWER(?)' => "%$o{search}%")     : (),
-    $o{gametype}          ? ('LOWER(gametype) LIKE LOWER(?)' => lc $o{gametype})    : (),
-    $o{popserv}           ? ('numplayers > ?'                => 0)                  : (),
-    $o{utdemo}            ? ('gamever = ?'                   => '348')              : (),
+    $o{updated}  ? ('dt_updated > ?'                => (time-$o{updated})) : (),
+    $o{gamename} ? ('serverlist.gamename = ?'       => $o{gamename})       : (),
+    $o{nolist}   ? ('serverlist.gamename <> ?'      => $o{nolist})         : (),
+    $o{search}   ? ('LOWER(hostname) LIKE LOWER(?)' => "%$o{search}%")     : (),
+    $o{popserv}  ? ('numplayers > ?'                => 0)                  : (),
+    $o{utdemo}   ? ('gamever = ?'                   => '348')              : (),
+    
+    #advanced search
+    $o{hostname} ? ('LOWER(hostname) LIKE LOWER(?)' => "%$o{hostname}%")     : (),
+    $o{gametype} ? ('LOWER(gametype) LIKE LOWER(?)' => $o{gametype})         : (),
+    $o{mapname}  ? ('(LOWER(mapname) LIKE LOWER(?) OR LOWER(maptitle) LIKE LOWER(?))' => ["%$o{mapname}%", "%$o{mapname}%"]) : (),
+    $o{country}  ? ('country         LIKE UPPER(?)' => $o{country})        : (),
     
     # sanity check for unresponsive servers or faulty queries tools, except ST:Bcommander which /is/ faulty by default
     $o{gamename} !~ /bcommander/ ? ('hostport > ?' => 0) : (),
diff --git a/lib/MasterWebInterface/Handler/ErrorPages.pm b/lib/MasterWebInterface/Handler/ErrorPages.pm
index ccf5555..1678acc 100755
--- a/lib/MasterWebInterface/Handler/ErrorPages.pm
+++ b/lib/MasterWebInterface/Handler/ErrorPages.pm
@@ -9,7 +9,7 @@ TUWF::set(
 );
 
 TUWF::register(
-    qr{500} => sub {die "Process died on purpose, but with a lot of text to test if the whole error is correctly displayed on the screen when debug information is enabled in the website configuration, "},
+    qr{500} => sub {die "Process died on purpose, but with a lot of text to test if the whole error is correctly displayed on the screen when debug information is enabled in the website configuration. "},
 );
 
 #
@@ -32,7 +32,7 @@ sub handle404
     
     $self->resStatus(404);
     $self->htmlHeader(title => '404 - Not Found');
-    $self->htmlSearchBox(title => "Servers", action => "/s", sel => 's', fq => '');
+    $self->htmlFilterBox(title => "Servers", action => "/s", sel => 's', fq => '');
     
     div class => "mainbox warning";
         div class => "header";
@@ -72,7 +72,7 @@ sub handle500
     
     $self->resStatus(500);
     $self->htmlHeader(title => '500 - Internal Server Error');
-    $self->htmlSearchBox(title => "Servers", action => "/s", sel => 's', fq => '');
+    $self->htmlFilterBox(title => "Servers", action => "/s", sel => 's', fq => '');
     
     div class => "mainbox warning";
         div class => "header";
diff --git a/lib/MasterWebInterface/Handler/Games.pm b/lib/MasterWebInterface/Handler/Games.pm
index affebf6..cec7ab1 100755
--- a/lib/MasterWebInterface/Handler/Games.pm
+++ b/lib/MasterWebInterface/Handler/Games.pm
@@ -6,8 +6,8 @@ use TUWF ':html';
 use Exporter 'import';
 
 TUWF::register(
-    qr{g}        => \&gamelist,
-    qr{g(|/all)} => \&gamelist,
+    qr{g}       => \&gamelist,
+    qr{g/all}   => \&gamelist,
 );
 
 #
@@ -35,11 +35,10 @@ sub gamelist
         search  => $f->{q},
         results => $f->{r},
         all     => $all,
-        
     );
 
     $self->htmlHeader(title => "Browse Games");
-    $self->htmlSearchBox(title => "Games", action => "/g/all", sel => 'g', fq => $f->{q});
+    $self->htmlFilterBox(title => "Games", action => "/g/all", sel => 'g', fq => $f->{q});
     
     #
     # game list
@@ -100,7 +99,7 @@ sub gamelist
                 
                 # number of beacons / servers
                 td title => ($l->{num_direct} // 0) . " / " . ($l->{num_total} // 0), 
-                $l->{num_direct} // 0;
+                $l->{num_total} // 0;
             end;
         },
     );
diff --git a/lib/MasterWebInterface/Handler/ServInfo.pm b/lib/MasterWebInterface/Handler/ServInfo.pm
index fbe5d35..8b3d7d8 100755
--- a/lib/MasterWebInterface/Handler/ServInfo.pm
+++ b/lib/MasterWebInterface/Handler/ServInfo.pm
@@ -45,8 +45,12 @@ sub show_server
         
         # otherwise not found in database, soft error page (no 404 status)
         $self->htmlHeader(title => 'Server not found');
-        $self->htmlSearchBox(title => "Servers", action => "/s", sel => 's', fq => '');
-        
+        $self->htmlFilterBox(
+            sel => 's', 
+            fq => '', 
+            ($gamename ? (gamename => $gamename) : () ),
+        );
+
         div class => "mainbox warning";
             div class => "header";
                 h1 'Server not found';
@@ -83,11 +87,10 @@ sub show_server
     #
     # generate info page
     $self->htmlHeader(title => $info->{hostname} // "Server");
-    $self->htmlSearchBox(
-        title => "$gamedescription Servers", 
-        action => "/s/$gamename", 
+    $self->htmlFilterBox(
+        gamename => $gamename,
         sel => 's', 
-        fq => ''
+        fq => '',
     );
     
     # serverinfo box
diff --git a/lib/MasterWebInterface/Handler/Servers.pm b/lib/MasterWebInterface/Handler/Servers.pm
index 98d27df..34c0182 100755
--- a/lib/MasterWebInterface/Handler/Servers.pm
+++ b/lib/MasterWebInterface/Handler/Servers.pm
@@ -5,9 +5,9 @@ use TUWF ':html';
 use Exporter 'import';
 
 TUWF::register(
-    qr{}                => \&serverlist,
-    qr{s}               => \&serverlist,
-    qr{s/([\w]{1,20})}  => \&serverlist,
+    qr{}                     => \&serverlist,
+    qr{(s|adv)}              => \&serverlist,
+    qr{(s|adv)/([\w]{0,20})} => \&serverlist,
 );
 
 #
@@ -15,60 +15,91 @@ TUWF::register(
 #
 sub serverlist 
 {
-    my($self, $gamename) = @_;
-    $gamename = "all" unless $gamename;
+    my($self, $adv, $gamename) = @_;
     
     # sorting, page
     my $f = $self->formValidate(
         {   get => 's', required => 0, default => 'gamename',enum => [ qw| hostname gamename country dt_added gametype numplayers mapname | ] },
         {   get => 'o', required => 0, default => 'a',enum      => [ 'a','d' ] },
         {   get => 'p', required => 0, default => 1,  template  => 'page',},
-        {   get => 'r', required => 0, default => 50, template  => 'page' },
         {   get => 'q', required => 0, default => '', maxlength => 90 },
-        {   get => 'g', required => 0, default => '', maxlength => 90 },
+        
+        # advanced search
+        {   get => 'gamename', required => 0, default => '',  maxlength => 90 }, # gamename in advanced search
+        {   get => 'gametype', required => 0, default => '',  maxlength => 90 }, # gametype
+        {   get => 'hostname', required => 0, default => '',  maxlength => 90 }, # hostname (replaces q in advanced search)
+        {   get => 'mapname',  required => 0, default => '',  maxlength => 90 }, # mapname
+        {   get => 'country',  required => 0, default => '',  maxlength => 90 }, # country (code)
     );
     return $self->resNotFound if $f->{_err};
     
-    # load server list from database
+    # set correct gamename (form always overwrites url)
+    $gamename = ( $f->{gamename} ? $f->{gamename} : $gamename);
+    
+    # load server list from database FIXME order of list, duplicates
     my ( $list, $np, $p ) = $self->dbServerListGet(
         sort => $f->{s}, 
         reverse  => $f->{o} eq 'd',
-        gamename => $gamename,
         search   => $f->{q},
         page     => $f->{p},
+        results  => 50,
         updated  => $self->{window_time},
-        results  => $f->{r},
-        gametype => $f->{g},
-        # don't show 333networks in default list
-        $gamename ne "333networks" ? ( nolist => "333networks") : (), 
+        gamename => $gamename,
+        gametype => $f->{gametype},
+        hostname => $f->{hostname},
+        mapname  => $f->{mapname},
+        country  => $f->{country},
+
+        # don't show 333networks in default list, but show in advanced search by default
+        !($gamename eq "333networks" or $f->{gamename} eq "333networks") ? ( nolist => "333networks") : (), 
     );
     
-    # game name description in title
-    my $gn_desc = $self->dbGetGameDesc($gamename) // $gamename;
-    
     # Write page  
-    $self->htmlHeader(title => "Browse $gn_desc game servers");
-    $self->htmlSearchBox(
-        title => "$gn_desc Servers", 
-        action => "/s/$gamename", 
-        sel => 's', 
-        fq => $f->{q}
-    );
-
+    $self->htmlHeader(title => "Servers");
+    
+    # search box type: simple or advanced
+    if ($adv eq 'adv')
+    {
+        # advanced filter box with additional search fields
+        $self->htmlAdvancedFilterBox(
+            sel => 's', 
+            %{$f}, # previous parameters
+            gamename => $gamename,
+        );
+    }
+    else # $adv eq "adv"
+    {
+        # simple search box
+        $self->htmlFilterBox(
+            sel => 's', 
+            ($gamename ? (gamename => $gamename) : () ),
+            action => "/s/$gamename", 
+            fq => $f->{q},
+        );
+    }
+    
+    # construct page URLs
+    my $pageurl = "/$adv/$gamename?"
+                . ( $adv eq "adv" ? "gamename=$f->{gamename}&gametype=$f->{gametype}&hostname=$f->{hostname}&mapname=$f->{mapname}&country=$f->{country}&o=$f->{o};s=$f->{s}" : "")
+                . ( $adv eq "s"   ? "o=$f->{o};s=$f->{s};q=$f->{q}" : "");
+    my $sorturl = "/$adv/$gamename?"
+                . ( $adv eq "adv" ? "gamename=$f->{gamename}&gametype=$f->{gametype}&hostname=$f->{hostname}&mapname=$f->{mapname}&country=$f->{country}" : "")
+                . ( $adv eq "s"   ? "q=$f->{q}" : "");
+    
     #
     # server list
     $self->htmlBrowse(
         items    => $list,
         options  => $f,
         total    => $p,
-        nextpage => [$p,$f->{r}],
-        pageurl  => "/s/$gamename?o=$f->{o};s=$f->{s};q=$f->{q}",
-        sorturl  => "/s/$gamename?q=$f->{q}",
+        nextpage => [$p,50],
+        pageurl  => $pageurl, #"/$adv/$gamename?o=$f->{o};s=$f->{s};q=$f->{q}",
+        sorturl  => $sorturl, #"/$adv/$gamename?q=$f->{q}",
         class    => "serverlist",
         ($p <= 0) ? (footer => sub 
             {
                 Tr;
-                    td colspan => 6, class => 'tc2', 'No online servers found';
+                    td colspan => 6, class => 'tc2', 'No online servers found.';
                 end 'tr';
             }) : (),
         header   => [
@@ -86,6 +117,7 @@ sub serverlist
             Tr $n % 2 ? (class => 's odd') : (class => 's');
             
                 # country flag
+                # TODO: advanced filter by country only
                 my ($flag, $country) = $self->countryflag($l->{country});
                 td class => "tc1", 
                    style => "background-image: url(/flag/$flag.svg);", 
@@ -108,7 +140,7 @@ sub serverlist
                     td class => "tc3 icon",
                        style => "background-image: url(/icon32/$gn.png);", 
                        title => $l->{label};
-                        a href => "/s/$gn", "";
+                        a href => "/$adv/$gn", "";
                     end;
                 }
                 else
@@ -117,6 +149,7 @@ sub serverlist
                 }
                 
                 # game type (hover: raw, display: parsed)
+                # TODO: advanced filter by gametype only
                 td class => "tc4",
                     title => $l->{gametype}, 
                     $self->better_gametype($l->{gametype});
diff --git a/lib/MasterWebInterface/Util/AdvancedFilterBox.pm b/lib/MasterWebInterface/Util/AdvancedFilterBox.pm
new file mode 100755
index 0000000..a496a04
--- /dev/null
+++ b/lib/MasterWebInterface/Util/AdvancedFilterBox.pm
@@ -0,0 +1,207 @@
+package MasterWebInterface::Util::AdvancedFilterBox;
+use strict;
+use warnings;
+use utf8;
+use TUWF ':html', 'xml_escape';
+use Geography::Countries;
+use Exporter 'import';
+our @EXPORT = qw| htmlAdvancedFilterBox |;
+use Data::Dumper 'Dumper';
+
+# display an advanced filter box with dropdown/search fields
+# options:
+#   sel: select [g]ames or [s]ervers link (filter only works for servers anyway)
+#   dropdown selects: gamename, gametype, country
+#   text fields: hostname, mapname/maptitle
+# user must first select a gamename before other options become available. 
+# gametype and country options are selected from database on available criteria.
+# TODO: also list servers that expired or timed out (checkbox?)
+# TODO: allow searching by IP, in combination with expired servers (and sanity check in javascript?)
+sub htmlAdvancedFilterBox 
+{
+    my($self, %opt) = @_;
+    
+    div class => 'mainbox';
+        div class => "header";
+            h1 "Advanced Filter";
+            p class => "alttitle";
+                txt "Filter for servers in all titles that are currently online. ";
+                txt "Advanced Filter is in Beta. Please report bugs on our ";
+                a href => "https://333networks.com/contact", "discord";
+                txt ".";
+            end;
+        end;
+
+        # advanced filter form        
+        form action => "/adv", 'accept-charset' => 'UTF-8', method => 'get', class => "advancedfilter";
+            fieldset class => 'advanced';
+                a href => '/g',    $opt{sel} eq 'g' ? (class => 'sel') : (), 'Games';
+                a href => '/s',    $opt{sel} eq 's' ? (class => 'sel') : (), 'Servers';
+                
+                # parameters for error fields;
+                my $gameselect = "this game";
+                
+                # table with all filter options
+                table;
+                
+                    Tr; # gamename
+                        td class => "desc", "Game: ";
+                        td class => "param";
+                            Select onchange => "this.form.submit()", name => "gamename", id => "gamename";
+                                option class => "selection", value => "", "Select...";
+                                option value => $_->{gamename}, ($_->{gamename} eq $opt{gamename} ? (selected => ($gameselect = $_->{label})) : () ), 
+                                    $_->{label} for $self->dbGameListGet(sort => "gamename" )->@*;
+                            end; #select
+                        end;
+                    end;
+                    
+                    Tr; # gametype
+                        td class => "desc", "Gametype: ";
+                        td class => "param";
+                            # don't list gametypes until a gamename has been selected
+                            if ( ! $opt{gamename} )
+                            {
+                                Select onchange => "this.form.submit()", name => "gametype", id => "gametype", disabled => "true";
+                                
+                                    # if a gametype is still provided
+                                    if ( $opt{gametype} )
+                                    {
+                                        option value => $opt{gametype}, disabled => 1, selected => 1, $opt{gametype};
+                                    }
+                                    else
+                                    {
+                                        option class => "selection", value => "", "Select a game title first";
+                                    }
+                                end; # select
+                            }
+                            else
+                            {
+                                Select onchange => "this.form.submit()", name => "gametype", id => "gametype";
+                                    option value => "", "All game types";
+                                    my $valid_gt = 0;
+                                    my %seen = ();                                    
+                                    for ($self->dbGetGameTypes(%opt)->@*)
+                                    {
+                                        # if not yet seen, add option and mark "seen"
+                                        if (! $seen{lc $_->{gametype}} )
+                                        {
+                                            option value => $_->{gametype}, (lc $_->{gametype} eq lc $opt{gametype} ? (selected => ($valid_gt = 1)) : () ), $_->{gametype} ;
+                                            $seen{lc $_->{gametype}} = 1;
+                                        }
+                                    }
+                                    
+                                    # display incorrect values with grayed-out option
+                                    if (not $valid_gt and $opt{gametype})
+                                    {
+                                        option value => $opt{gametype}, disabled => 1, selected => 1, $opt{gametype};
+                                    }
+                                    
+                                end; # select
+                                
+                                # notify user of incorrect option
+                                if (not $valid_gt and $opt{gametype})
+                                {
+                                    br;
+                                    span class => "errorsel", "The gametype \"$opt{gametype}\" does not exist for $gameselect. Please select a valid gametype.";
+                                }
+                            }
+                        end;
+                    end;
+
+                    Tr; # hostname
+                        td class => "desc", "Servername: ";
+                        td class => "param";
+                            input type => 'text', name => 'hostname', id => 'hostname', class => 'text', value => $opt{hostname} // "";
+                        end;
+                    end;
+
+                    
+                    Tr; # mapname
+                        td class => "desc", "Active map: ";
+                        td class => "param";
+                            input type => 'text', name => 'mapname', id => 'mapname', class => 'text', value => $opt{mapname} // "";
+                        end;
+                    end;
+                    
+                    Tr; # location / country
+                        td class => "desc", "Country: ";
+                        td class => "param";
+                           # don't list gametypes until a gamename has been selected
+                            if ( ! $opt{gamename} )
+                            {
+                                Select onchange => "this.form.submit()", name => "country", id => "country", disabled => "true";
+                                
+                                # if a country is still provided
+                                if ( $opt{country} )
+                                {
+                                    option value => $opt{country}, disabled => 1, selected => 1, "($opt{country}) ".(my $c = country $opt{country});
+                                }
+                                else
+                                {
+                                    option class => "selection", value => "", "Select a game title first";
+                                }
+                                end; # select
+                            }
+                            else
+                            {
+                                Select onchange => "this.form.submit()", name => "country", id => "country";
+                                    option class => "selection", value => "", "Everywhere";
+                                    my $valid_c = 0;
+                                    option value => $_, ($_ eq $opt{country} ? (selected => ($valid_c = 1)) : () ), 
+                                        "($_) ".(my $c = country $_) for map $_->{country}, $self->dbGetCountries(%opt)->@*;
+                                    
+                                    # display incorrect values with grayed-out option
+                                    if (not $valid_c and $opt{country})
+                                    {
+                                        option value => $opt{country}, disabled => 1, selected => 1, "($opt{country}) ".(my $c = country $opt{country});
+                                    };
+                                end; # select
+                                
+                                # notify user of incorrect option
+                                if (not $valid_c and $opt{country})
+                                {
+                                    br;
+                                    span class => "errorsel";
+                                        txt "No servers in ";
+                                        txt (my $c = country $opt{country});
+                                        txt " found that meet the search criteria.";
+                                    end;
+                                }
+                            }
+                        end;
+                    end;
+                    
+                    Tr; # submit
+                        td "";
+                        td;
+                            input type => 'submit', class => 'submit', value => 'Filter';
+                        end;
+                    end;
+                end; # table
+                
+            end 'fieldset';
+        end; # form
+        
+        # debugging box
+        if ( 0 )
+        {
+            h2 "Debug information";        
+            div class => "codeblock";
+                pre;
+                    txt Dumper \%opt;
+                end;
+            end;
+        }
+        
+        # return to simple filter/layout
+        div class => "simpleadvanced";
+            a href => $opt{gamename} ? "/s/$opt{gamename}" : "/s";
+                txt "simple filter ";
+                lit "\x{25B4}";
+            end;
+        end;
+    
+    end 'div';
+}
+
+1;
diff --git a/lib/MasterWebInterface/Util/BrowseHTML.pm b/lib/MasterWebInterface/Util/BrowseHTML.pm
index 0be45dd..d1c8030 100755
--- a/lib/MasterWebInterface/Util/BrowseHTML.pm
+++ b/lib/MasterWebInterface/Util/BrowseHTML.pm
@@ -5,49 +5,7 @@ use utf8;
 use TUWF ':html', 'xml_escape';
 use Exporter 'import';
 use POSIX 'ceil';
-our @EXPORT = qw| htmlSearchBox htmlBrowse htmlBrowseNavigate |;
-
-# generates a search box, arguments:
-# title  => games/ (game) servers
-# action => form action
-# sel    => g or s selected
-# fq     => form query string
-sub htmlSearchBox
-{
-    my($self, %opt) = @_;
-    
-    div class => 'mainbox';
-        div class => "header";
-            h1 "Browse $opt{title}";
-            p class => "alttitle", "An overview of games titles and servers that are currently online.";
-        end;
-        
-        # search box
-        form action => $opt{action}, 'accept-charset' => 'UTF-8', method => 'get';
-            fieldset class => 'search';
-                a href => '/g',    $opt{sel} eq 'g' ? (class => 'sel') : (), 'Games';
-                a href => '/s',    $opt{sel} eq 's' ? (class => 'sel') : (), 'Servers';
-                input type => 'text', name => 'q', id => 'q', class => 'text', 
-                    value => $opt{fq} || 'search...';
-                input type => 'submit', class => 'submit', value => 'submit';
-            end 'fieldset';
-            
-            div class => "dropdown";
-                a href => "#", onclick => "toggleAdvanced()";
-                    txt "advanced search ";
-                    lit "\x{25BE}";
-                end;
-            end;
-            
-            fieldset id => 'advancedsearch';
-                #input type => 'text', name => 'aq', class => 'text', value => '';
-                #input type => 'submit', class => 'submit', value => 'submit';
-                txt "Patience, young one. With time, advanced search options will become available to you.";
-            end;
-        end;
-        
-    end 'div'; # mainbox
-}
+our @EXPORT = qw| htmlBrowse htmlBrowseNavigate |;
 
 # generates a browse box, arguments:
 #  items    => arrayref with the list items
diff --git a/lib/MasterWebInterface/Util/FilterBox.pm b/lib/MasterWebInterface/Util/FilterBox.pm
new file mode 100755
index 0000000..8db7a60
--- /dev/null
+++ b/lib/MasterWebInterface/Util/FilterBox.pm
@@ -0,0 +1,43 @@
+package MasterWebInterface::Util::FilterBox;
+use strict;
+use warnings;
+use utf8;
+use TUWF ':html', 'xml_escape';
+use Exporter 'import';
+our @EXPORT = qw| htmlFilterBox |;
+
+# generates a filter box, arguments:
+# title  => games/ (game) servers
+# action => form action
+# sel    => g or s selected
+# fq     => form query string
+sub htmlFilterBox
+{
+    my($self, %opt) = @_;
+    
+    div class => 'mainbox';
+        div class => "header";
+            h1 "Browse Servers";
+            p class => "alttitle", "An overview of games titles and servers that are currently online.";
+        end;
+        
+        # filter box
+        form action => $opt{gamename} ? "/s/$opt{gamename}" : "/s", 'accept-charset' => 'UTF-8', method => 'get';
+            fieldset class => 'simple';
+                a href => '/g',    $opt{sel} eq 'g' ? (class => 'sel') : (), 'Games';
+                a href => '/s',    $opt{sel} eq 's' ? (class => 'sel') : (), 'Servers';
+                input type => 'text', name => 'q', id => 'q', class => 'text', value => $opt{fq} || 'filter...';
+                input type => 'submit', class => 'submit', value => 'submit';
+            end 'fieldset';
+        end; # form
+
+        div class => "simpleadvanced";
+            a href => $opt{gamename} ? "/adv/$opt{gamename}" : "/adv";
+                txt "advanced server filter ";
+                lit "\x{25BE}";
+            end;
+        end;
+    end 'div'; # mainbox
+}
+
+1;
diff --git a/lib/MasterWebInterface/Util/Layout.pm b/lib/MasterWebInterface/Util/Layout.pm
index d9f5516..fe7b5c5 100755
--- a/lib/MasterWebInterface/Util/Layout.pm
+++ b/lib/MasterWebInterface/Util/Layout.pm
@@ -13,34 +13,11 @@ sub htmlHeader
 {
     my($self, %o) = @_;
     
-    # CSS override: allow passing of style from GET --> ?style=classic
-    my $style = $self->{style};
-    
-    if ( $self->{rotate_styles} )
-    {
-        # rotate styles for different occasions.
-        my @dt = localtime(time);
-        # specify dates [m/d] = styles
-        if ($dt[4] == 2  && $dt[3] == 31) {$style = "april";} # 31 mar and 1 apr
-        if ($dt[4] == 3  && $dt[3] ==  1) {$style = "april";}
-        if ($dt[4] == 9  && $dt[3] >=  1) {$style = "halloween";}
-        if ($dt[4] == 11 && $dt[3] >=  7) {$style = "xmas";}    
-    }
-    
-    if (my $overrideStyle = $self->reqParam("style") ) 
-    {
-        # default to custom style if specified option doesn't exist
-        $style = $overrideStyle;
-    }
-    
-    # default to default style if specified option does not exist
-    $style = ( -e "$self->{root}/s/style/$style" ) ? $style : $self->{style};
-    
     html lang => "en";
         head;
             title "$o{title} :: $self->{site_name} masterserver";
             Link type => 'image/x-icon', rel => 'shortcut icon', href => "/favicon.ico";
-            Link type => "text/css", rel => 'stylesheet', href => "/style/$style/style.css", media => "all";
+            Link type => "text/css", rel => 'stylesheet', href => "/style/$self->{style}/style.css", media => "all";
             if ( $o{noindex} )
             {
                 meta name => 'robots', content => 'noindex,nofollow,nosnippet,noodp,noarchive,noimageindex';end;
@@ -48,57 +25,11 @@ sub htmlHeader
         end 'head';
         
         body;
-        
-        my $topbar = $self->reqParam("topbar");
-        if ($topbar && lc $topbar eq "true" ) 
-        {
-            # games, servers, search bar
-            div class => 'nav';
-                # search box
-                form action => "/g", 'accept-charset' => 'UTF-8', method => 'get';
-                    fieldset class => 'search';
-                        p id => 'searchtabs';
-                            a href => '/g', class => 'sel', 'Games';
-                            a href => '/s', 'Servers';
-                            input type => 'text', name => 'q', id => 'q', class => 'text', value => '';
-                            input type => 'submit', class => 'submit', value => '', style => "display:none";
-                        end;
-                        a style => "font-size:x-small", href => "#", "advanced search";
-                    end 'fieldset';
-                end;
-            end;
-        }
-        
             div id => "body";
             
                 # start the page content with a header logo box
                 div class => "titlebox";
                 end;
-                
-                my $overrideStyle = $self->reqParam("style");
-                if ($overrideStyle or $self->{style_box}) {
-                # debug feature: force list of styles on floaty-box
-                div class => "mainbox",
-                    style => "position:absolute; left: 20px; top: 20px; width:200px";
-                    
-                    div class => "header";
-                    h1 "Development";
-                        p "This box allows for testing of multiple styles. Disable it from config.";
-                    end;
-                
-                    ul style => "margin: 3px 20px 10pt 40px";
-                        opendir(DIR, "$self->{root}/s/style") or die $!;
-                        while (my $file = readdir(DIR)) 
-                        {
-                            next if ($file =~ m/^\./);
-                            li;
-                                a href => "?style=$file", $file;
-                            end;
-                        }
-                        closedir(DIR);
-                    end;
-                end;
-                }
 }
 
 ################################################################################
@@ -107,13 +38,15 @@ sub htmlHeader
 ################################################################################
 sub htmlFooter 
 {
-    my $self = shift;
+    my ($self, %o) = @_;
     
                 br style => "clear:both";
                 
                 div id => 'footer';
                     txt "$self->{site_name} | Powered by ";
-                    a href => "https://333networks.com", "333networks";
+                    a href => "http://333networks.com", "333networks";
+                    txt " | ";
+                    txt $o{last_edited} || "2022";
                 end;
             end 'div'; # body
             script type => 'text/javascript', src => "/masterscript.js", '';
diff --git a/s/masterscript.js b/s/masterscript.js
index ce849bc..56234b6 100755
--- a/s/masterscript.js
+++ b/s/masterscript.js
@@ -6,20 +6,12 @@
 // 333networks.com for license and copyright.
 //
 //==============================================================================
-
-// advanced search box
-function toggleAdvanced ()
-{
-    var box = document.getElementById("advancedsearch");
-    box.style.display = (box.style.display == "block" ? "none" : "block" );
-}
-
 // search box
 {
     var qbox = document.getElementById('q');
     qbox.onclick = function ()
     {
-        if ( this.value == 'search...' ) 
+        if ( this.value == 'filter...' ) 
         {
             this.value = '';
             this.style.fontStyle = 'normal'
@@ -30,7 +22,7 @@ function toggleAdvanced ()
     {
         if ( this.value.length < 1 ) 
         {
-            this.value = 'search...';
+            this.value = 'filter...';
             this.style.fontStyle = 'italic';
         }
     };
diff --git a/s/style/333networks/style.css b/s/style/333networks/style.css
index 0bfe28d..de09721 100644
--- a/s/style/333networks/style.css
+++ b/s/style/333networks/style.css
@@ -13,6 +13,7 @@
     padding: 0;
     border: 0;
     outline:0;
+    
     }
     
 body { 
@@ -113,64 +114,123 @@ div.mainbox div.header {
     background: #111;
     }
 
-/* navigation / search box "fieldset.search" */
+/* navigation / filter box */
 
-form input {
+form input,
+form select {
     border: 1px solid #0af;
     background: #222;
     color: #ccc;
 }
 
-form fieldset.search,
-form fieldset#advancedsearch {
+form input:disabled,
+form select:disabled {
+    border: 1px solid #0af;
+    background: #111;
+    color: #666;
+}
+
+form fieldset {
     display: block; 
     margin:12px 0 12px 0;
     width: 100%; 
     text-align:center;
+    }
+form fieldset.simple {
     height:22px;
     }
 
-form fieldset.search input.text,
-form fieldset#advancedsearch input.text {
+form fieldset input.text {
     width: 300px;
     margin-left:20px;
     padding:1px 1px 1px 5px;
     font-style: italic;
     }
     
-form fieldset.search input.submit {
+form fieldset.simple input.submit {
     display:none;
     }
 
-form fieldset.search a {
+form fieldset a {
     padding: 1px 5px;
     border:  1px solid #0af;
     margin: 0 6px;
     }
-form fieldset.search a.sel,
-form fieldset.search a:hover {
+form fieldset a.sel,
+form fieldset a:hover {
     border: 1px solid #ff0;
     color: #ff0;
     }
 
-form div.dropdown a {
+form.advancedfilter table {
+    /*width:70%; */
+    table-layout:fixed;
+    border-collapse:collapse;
+    margin: 12pt auto;
+    text-align: right;
+}
+
+
+form.advancedfilter table tr {
+}
+
+
+form.advancedfilter table tr td {
+    margin: 3pt;
+    text-align: right;
+    padding: 7px;
+}
+
+form.advancedfilter table tr td.desc {
+    width: 100px;
+    text-align: left;
+}
+form.advancedfilter table tr td.param {
+    width: 400px;
+    text-align: right;
+}
+
+form.advancedfilter input.submit,
+form.advancedfilter input.text,
+form.advancedfilter select {
+    padding: 2px;
+    margin: auto 5px;
+    width: 400px    
+}
+form.advancedfilter input.text {
+    width: 394px
+}
+form.advancedfilter input.submit {
+    font-weight: bold;
+}
+
+form.advancedfilter span.errorsel {
+    font-size: x-small;
+    color: #f55;
+    padding-left:5px;
+}
+
+div.simpleadvanced a {
     display:block;
     width:100%;
     text-align:center;
     font-size: x-small;
 }
 
-form fieldset#advancedsearch {
-    display:none;
-}
-form fieldset#advancedsearch input.submit {
-    padding: 1px;
-    margin: auto 5px;
+/* DEBUG code block */
+div.mainbox .codeblock {
+    font-family:"Lucida Console";
+    font-size: 9pt;
+    text-align:left;
+    background: #222;
+    border:1px solid #666;
+    display:block; 
+    margin:12pt auto; 
+    width:90%; 
+    padding: 7px;
+    overflow-x:auto; 
+    box-shadow: 3px 3px 2px #222;
 }
-    
-/* TODO: advanced search function styling */
-
-    
 
 /* browse table tabs */
 ul.maintabs {
diff --git a/s/style/errorist/style.css b/s/style/errorist/style.css
index 833d2ed..dacb8aa 100644
--- a/s/style/errorist/style.css
+++ b/s/style/errorist/style.css
@@ -13,6 +13,7 @@
     padding: 0;
     border: 0;
     outline:0;
+    
     }
     
 body { 
@@ -113,64 +114,123 @@ div.mainbox div.header {
     background: #111;
     }
 
-/* navigation / search box "fieldset.search" */
+/* navigation / filter box */
 
-form input {
+form input,
+form select {
     border: 1px solid #88f;
     background: #1c1c1c;
     color: #ccc;
 }
 
-form fieldset.search,
-form fieldset#advancedsearch {
+form input:disabled,
+form select:disabled {
+    border: 1px solid #88f;
+    background: #111;
+    color: #666;
+}
+
+form fieldset {
     display: block; 
     margin:12px 0 12px 0;
     width: 100%; 
     text-align:center;
+    }
+form fieldset.simple {
     height:22px;
     }
 
-form fieldset.search input.text,
-form fieldset#advancedsearch input.text {
+form fieldset input.text {
     width: 300px;
     margin-left:20px;
     padding:1px 1px 1px 5px;
     font-style: italic;
     }
     
-form fieldset.search input.submit {
+form fieldset.simple input.submit {
     display:none;
     }
 
-form fieldset.search a {
+form fieldset a {
     padding: 1px 5px;
     border:  1px solid #88f;
     margin: 0 6px;
     }
-form fieldset.search a.sel,
-form fieldset.search a:hover {
+form fieldset a.sel,
+form fieldset a:hover {
     border: 1px solid #f88;
     color: #f88;
     }
 
-form div.dropdown a {
+form.advancedfilter table {
+    /*width:70%; */
+    table-layout:fixed;
+    border-collapse:collapse;
+    margin: 12pt auto;
+    text-align: right;
+}
+
+
+form.advancedfilter table tr {
+}
+
+
+form.advancedfilter table tr td {
+    margin: 3pt;
+    text-align: right;
+    padding: 7px;
+}
+
+form.advancedfilter table tr td.desc {
+    width: 100px;
+    text-align: left;
+}
+form.advancedfilter table tr td.param {
+    width: 400px;
+    text-align: right;
+}
+
+form.advancedfilter input.submit,
+form.advancedfilter input.text,
+form.advancedfilter select {
+    padding: 2px;
+    margin: auto 5px;
+    width: 400px    
+}
+form.advancedfilter input.text {
+    width: 394px
+}
+form.advancedfilter input.submit {
+    font-weight: bold;
+}
+
+form.advancedfilter span.errorsel {
+    font-size: x-small;
+    color: #f55;
+    padding-left:5px;
+}
+
+div.simpleadvanced a {
     display:block;
     width:100%;
     text-align:center;
     font-size: x-small;
 }
 
-form fieldset#advancedsearch {
-    display:none;
-}
-form fieldset#advancedsearch input.submit {
-    padding: 1px;
-    margin: auto 5px;
+/* DEBUG code block */
+div.mainbox .codeblock {
+    font-family:"Lucida Console";
+    font-size: 9pt;
+    text-align:left;
+    background: #1c1c1c;
+    border:1px solid #666;
+    display:block; 
+    margin:12pt auto; 
+    width:90%; 
+    padding: 7px;
+    overflow-x:auto; 
+    box-shadow: 3px 3px 2px #1c1c1c;
 }
-    
-/* TODO: advanced search function styling */
-
-    
 
 /* browse table tabs */
 ul.maintabs {
diff --git a/s/style/gonespy/style.css b/s/style/gonespy/style.css
index dbc8074..973ed92 100644
--- a/s/style/gonespy/style.css
+++ b/s/style/gonespy/style.css
@@ -13,6 +13,7 @@
     padding: 0;
     border: 0;
     outline:0;
+    
     }
     
 body { 
@@ -113,64 +114,123 @@ div.mainbox div.header {
     background: #222;
     }
 
-/* navigation / search box "fieldset.search" */
+/* navigation / filter box */
 
-form input {
+form input,
+form select {
     border: 1px solid #0e0;
     background: #1c1c1c;
     color: #eee;
 }
 
-form fieldset.search,
-form fieldset#advancedsearch {
+form input:disabled,
+form select:disabled {
+    border: 1px solid #0e0;
+    background: #222;
+    color: #777;
+}
+
+form fieldset {
     display: block; 
     margin:12px 0 12px 0;
     width: 100%; 
     text-align:center;
+    }
+form fieldset.simple {
     height:22px;
     }
 
-form fieldset.search input.text,
-form fieldset#advancedsearch input.text {
+form fieldset input.text {
     width: 300px;
     margin-left:20px;
     padding:1px 1px 1px 5px;
     font-style: italic;
     }
     
-form fieldset.search input.submit {
+form fieldset.simple input.submit {
     display:none;
     }
 
-form fieldset.search a {
+form fieldset a {
     padding: 1px 5px;
     border:  1px solid #0e0;
     margin: 0 6px;
     }
-form fieldset.search a.sel,
-form fieldset.search a:hover {
+form fieldset a.sel,
+form fieldset a:hover {
     border: 1px solid #0ee;
     color: #0ee;
     }
 
-form div.dropdown a {
+form.advancedfilter table {
+    /*width:70%; */
+    table-layout:fixed;
+    border-collapse:collapse;
+    margin: 12pt auto;
+    text-align: right;
+}
+
+
+form.advancedfilter table tr {
+}
+
+
+form.advancedfilter table tr td {
+    margin: 3pt;
+    text-align: right;
+    padding: 7px;
+}
+
+form.advancedfilter table tr td.desc {
+    width: 100px;
+    text-align: left;
+}
+form.advancedfilter table tr td.param {
+    width: 400px;
+    text-align: right;
+}
+
+form.advancedfilter input.submit,
+form.advancedfilter input.text,
+form.advancedfilter select {
+    padding: 2px;
+    margin: auto 5px;
+    width: 400px    
+}
+form.advancedfilter input.text {
+    width: 394px
+}
+form.advancedfilter input.submit {
+    font-weight: bold;
+}
+
+form.advancedfilter span.errorsel {
+    font-size: x-small;
+    color: #f55;
+    padding-left:5px;
+}
+
+div.simpleadvanced a {
     display:block;
     width:100%;
     text-align:center;
     font-size: x-small;
 }
 
-form fieldset#advancedsearch {
-    display:none;
-}
-form fieldset#advancedsearch input.submit {
-    padding: 1px;
-    margin: auto 5px;
+/* DEBUG code block */
+div.mainbox .codeblock {
+    font-family:"Lucida Console";
+    font-size: 9pt;
+    text-align:left;
+    background: #1c1c1c;
+    border:1px solid #777;
+    display:block; 
+    margin:12pt auto; 
+    width:90%; 
+    padding: 7px;
+    overflow-x:auto; 
+    box-shadow: 3px 3px 2px #1c1c1c;
 }
-    
-/* TODO: advanced search function styling */
-
-    
 
 /* browse table tabs */
 ul.maintabs {
diff --git a/s/style/halloween/style.css b/s/style/halloween/style.css
index 18290b4..c58d52e 100644
--- a/s/style/halloween/style.css
+++ b/s/style/halloween/style.css
@@ -13,6 +13,7 @@
     padding: 0;
     border: 0;
     outline:0;
+    
     }
     
 body { 
@@ -43,9 +44,9 @@ a:hover {
     width: 900px; 
     margin: 0 auto; 
     min-height: 100%; 
-    background: url(/style/halloween/333hw1.png) no-repeat center 0 fixed;
-    padding-top: 200px;
-    background-size: 900px;
+    background: url(/style/halloween/333hw1.png) no-repeat center 10px fixed;
+    padding-top: 120px;
+    background-size: 500px;
     }
     
 #footer {
@@ -113,64 +114,123 @@ div.mainbox div.header {
     background: url(/style/halloween/g50.png) repeat center top;
     }
 
-/* navigation / search box "fieldset.search" */
+/* navigation / filter box */
 
-form input {
+form input,
+form select {
     border: 1px solid #fa0;
     background: url(/style/halloween/prim.png) repeat center top;
     color: #ccc;
 }
 
-form fieldset.search,
-form fieldset#advancedsearch {
+form input:disabled,
+form select:disabled {
+    border: 1px solid #fa0;
+    background: url(/style/halloween/g50.png) repeat center top;
+    color: #552500;
+}
+
+form fieldset {
     display: block; 
     margin:12px 0 12px 0;
     width: 100%; 
     text-align:center;
+    }
+form fieldset.simple {
     height:22px;
     }
 
-form fieldset.search input.text,
-form fieldset#advancedsearch input.text {
+form fieldset input.text {
     width: 300px;
     margin-left:20px;
     padding:1px 1px 1px 5px;
     font-style: italic;
     }
     
-form fieldset.search input.submit {
+form fieldset.simple input.submit {
     display:none;
     }
 
-form fieldset.search a {
+form fieldset a {
     padding: 1px 5px;
     border:  1px solid #fa0;
     margin: 0 6px;
     }
-form fieldset.search a.sel,
-form fieldset.search a:hover {
+form fieldset a.sel,
+form fieldset a:hover {
     border: 1px solid #ff0;
     color: #ff0;
     }
 
-form div.dropdown a {
+form.advancedfilter table {
+    /*width:70%; */
+    table-layout:fixed;
+    border-collapse:collapse;
+    margin: 12pt auto;
+    text-align: right;
+}
+
+
+form.advancedfilter table tr {
+}
+
+
+form.advancedfilter table tr td {
+    margin: 3pt;
+    text-align: right;
+    padding: 7px;
+}
+
+form.advancedfilter table tr td.desc {
+    width: 100px;
+    text-align: left;
+}
+form.advancedfilter table tr td.param {
+    width: 400px;
+    text-align: right;
+}
+
+form.advancedfilter input.submit,
+form.advancedfilter input.text,
+form.advancedfilter select {
+    padding: 2px;
+    margin: auto 5px;
+    width: 400px    
+}
+form.advancedfilter input.text {
+    width: 394px
+}
+form.advancedfilter input.submit {
+    font-weight: bold;
+}
+
+form.advancedfilter span.errorsel {
+    font-size: x-small;
+    color: #f55;
+    padding-left:5px;
+}
+
+div.simpleadvanced a {
     display:block;
     width:100%;
     text-align:center;
     font-size: x-small;
 }
 
-form fieldset#advancedsearch {
-    display:none;
-}
-form fieldset#advancedsearch input.submit {
-    padding: 1px;
-    margin: auto 5px;
+/* DEBUG code block */
+div.mainbox .codeblock {
+    font-family:"Lucida Console";
+    font-size: 9pt;
+    text-align:left;
+    background: prim.png;
+    border:1px solid #552500;
+    display:block; 
+    margin:12pt auto; 
+    width:90%; 
+    padding: 7px;
+    overflow-x:auto; 
+    box-shadow: 3px 3px 2px prim.png;
 }
-    
-/* TODO: advanced search function styling */
-
-    
 
 /* browse table tabs */
 ul.maintabs {
diff --git a/s/style/newbies/style.css b/s/style/newbies/style.css
index 3630f15..318365b 100644
--- a/s/style/newbies/style.css
+++ b/s/style/newbies/style.css
@@ -13,6 +13,7 @@
     padding: 0;
     border: 0;
     outline:0;
+    
     }
     
 body { 
@@ -44,8 +45,8 @@ a:hover {
     margin: 0 auto; 
     min-height: 100%; 
     background: url(/style/newbies/newbs2.png) no-repeat center 10px fixed;
-    padding-top: 120px;
-    background-size: 800px;
+    padding-top: 76px;
+    background-size: 500px;
     }
     
 #footer {
@@ -113,64 +114,123 @@ div.mainbox div.header {
     background: #111;
     }
 
-/* navigation / search box "fieldset.search" */
+/* navigation / filter box */
 
-form input {
+form input,
+form select {
     border: 1px solid #2d851f;
     background: #222;
     color: #ccc;
 }
 
-form fieldset.search,
-form fieldset#advancedsearch {
+form input:disabled,
+form select:disabled {
+    border: 1px solid #2d851f;
+    background: #111;
+    color: #666;
+}
+
+form fieldset {
     display: block; 
     margin:12px 0 12px 0;
     width: 100%; 
     text-align:center;
+    }
+form fieldset.simple {
     height:22px;
     }
 
-form fieldset.search input.text,
-form fieldset#advancedsearch input.text {
+form fieldset input.text {
     width: 300px;
     margin-left:20px;
     padding:1px 1px 1px 5px;
     font-style: italic;
     }
     
-form fieldset.search input.submit {
+form fieldset.simple input.submit {
     display:none;
     }
 
-form fieldset.search a {
+form fieldset a {
     padding: 1px 5px;
     border:  1px solid #2d851f;
     margin: 0 6px;
     }
-form fieldset.search a.sel,
-form fieldset.search a:hover {
+form fieldset a.sel,
+form fieldset a:hover {
     border: 1px solid #3abe25;
     color: #3abe25;
     }
 
-form div.dropdown a {
+form.advancedfilter table {
+    /*width:70%; */
+    table-layout:fixed;
+    border-collapse:collapse;
+    margin: 12pt auto;
+    text-align: right;
+}
+
+
+form.advancedfilter table tr {
+}
+
+
+form.advancedfilter table tr td {
+    margin: 3pt;
+    text-align: right;
+    padding: 7px;
+}
+
+form.advancedfilter table tr td.desc {
+    width: 100px;
+    text-align: left;
+}
+form.advancedfilter table tr td.param {
+    width: 400px;
+    text-align: right;
+}
+
+form.advancedfilter input.submit,
+form.advancedfilter input.text,
+form.advancedfilter select {
+    padding: 2px;
+    margin: auto 5px;
+    width: 400px    
+}
+form.advancedfilter input.text {
+    width: 394px
+}
+form.advancedfilter input.submit {
+    font-weight: bold;
+}
+
+form.advancedfilter span.errorsel {
+    font-size: x-small;
+    color: #f55;
+    padding-left:5px;
+}
+
+div.simpleadvanced a {
     display:block;
     width:100%;
     text-align:center;
     font-size: x-small;
 }
 
-form fieldset#advancedsearch {
-    display:none;
-}
-form fieldset#advancedsearch input.submit {
-    padding: 1px;
-    margin: auto 5px;
+/* DEBUG code block */
+div.mainbox .codeblock {
+    font-family:"Lucida Console";
+    font-size: 9pt;
+    text-align:left;
+    background: #222;
+    border:1px solid #666;
+    display:block; 
+    margin:12pt auto; 
+    width:90%; 
+    padding: 7px;
+    overflow-x:auto; 
+    box-shadow: 3px 3px 2px #222;
 }
-    
-/* TODO: advanced search function styling */
-
-    
 
 /* browse table tabs */
 ul.maintabs {
diff --git a/s/style/oldunreal/style.css b/s/style/oldunreal/style.css
index 6aa36c1..f8af7f9 100644
--- a/s/style/oldunreal/style.css
+++ b/s/style/oldunreal/style.css
@@ -13,6 +13,7 @@
     padding: 0;
     border: 0;
     outline:0;
+    
     }
     
 body { 
@@ -113,64 +114,123 @@ div.mainbox div.header {
     background: #111;
     }
 
-/* navigation / search box "fieldset.search" */
+/* navigation / filter box */
 
-form input {
+form input,
+form select {
     border: 1px solid #0f0;
     background: #1c1c1c;
     color: #eee;
 }
 
-form fieldset.search,
-form fieldset#advancedsearch {
+form input:disabled,
+form select:disabled {
+    border: 1px solid #0f0;
+    background: #111;
+    color: #777;
+}
+
+form fieldset {
     display: block; 
     margin:12px 0 12px 0;
     width: 100%; 
     text-align:center;
+    }
+form fieldset.simple {
     height:22px;
     }
 
-form fieldset.search input.text,
-form fieldset#advancedsearch input.text {
+form fieldset input.text {
     width: 300px;
     margin-left:20px;
     padding:1px 1px 1px 5px;
     font-style: italic;
     }
     
-form fieldset.search input.submit {
+form fieldset.simple input.submit {
     display:none;
     }
 
-form fieldset.search a {
+form fieldset a {
     padding: 1px 5px;
     border:  1px solid #0f0;
     margin: 0 6px;
     }
-form fieldset.search a.sel,
-form fieldset.search a:hover {
+form fieldset a.sel,
+form fieldset a:hover {
     border: 1px solid #090;
     color: #090;
     }
 
-form div.dropdown a {
+form.advancedfilter table {
+    /*width:70%; */
+    table-layout:fixed;
+    border-collapse:collapse;
+    margin: 12pt auto;
+    text-align: right;
+}
+
+
+form.advancedfilter table tr {
+}
+
+
+form.advancedfilter table tr td {
+    margin: 3pt;
+    text-align: right;
+    padding: 7px;
+}
+
+form.advancedfilter table tr td.desc {
+    width: 100px;
+    text-align: left;
+}
+form.advancedfilter table tr td.param {
+    width: 400px;
+    text-align: right;
+}
+
+form.advancedfilter input.submit,
+form.advancedfilter input.text,
+form.advancedfilter select {
+    padding: 2px;
+    margin: auto 5px;
+    width: 400px    
+}
+form.advancedfilter input.text {
+    width: 394px
+}
+form.advancedfilter input.submit {
+    font-weight: bold;
+}
+
+form.advancedfilter span.errorsel {
+    font-size: x-small;
+    color: #f55;
+    padding-left:5px;
+}
+
+div.simpleadvanced a {
     display:block;
     width:100%;
     text-align:center;
     font-size: x-small;
 }
 
-form fieldset#advancedsearch {
-    display:none;
-}
-form fieldset#advancedsearch input.submit {
-    padding: 1px;
-    margin: auto 5px;
+/* DEBUG code block */
+div.mainbox .codeblock {
+    font-family:"Lucida Console";
+    font-size: 9pt;
+    text-align:left;
+    background: #1c1c1c;
+    border:1px solid #777;
+    display:block; 
+    margin:12pt auto; 
+    width:90%; 
+    padding: 7px;
+    overflow-x:auto; 
+    box-shadow: 3px 3px 2px #1c1c1c;
 }
-    
-/* TODO: advanced search function styling */
-
-    
 
 /* browse table tabs */
 ul.maintabs {
diff --git a/s/style/rune/style.css b/s/style/rune/style.css
index 01e3e88..60b2e97 100644
--- a/s/style/rune/style.css
+++ b/s/style/rune/style.css
@@ -13,6 +13,7 @@
     padding: 0;
     border: 0;
     outline:0;
+    
     }
     
 body { 
@@ -113,64 +114,123 @@ div.mainbox div.header {
     background: url(/style/rune/g50.png) repeat center top;
     }
 
-/* navigation / search box "fieldset.search" */
+/* navigation / filter box */
 
-form input {
+form input,
+form select {
     border: 1px solid #fa0;
     background: #210;
     color: #ccc;
 }
 
-form fieldset.search,
-form fieldset#advancedsearch {
+form input:disabled,
+form select:disabled {
+    border: 1px solid #fa0;
+    background: url(/style/rune/g50.png) repeat center top;
+    color: #552500;
+}
+
+form fieldset {
     display: block; 
     margin:12px 0 12px 0;
     width: 100%; 
     text-align:center;
+    }
+form fieldset.simple {
     height:22px;
     }
 
-form fieldset.search input.text,
-form fieldset#advancedsearch input.text {
+form fieldset input.text {
     width: 300px;
     margin-left:20px;
     padding:1px 1px 1px 5px;
     font-style: italic;
     }
     
-form fieldset.search input.submit {
+form fieldset.simple input.submit {
     display:none;
     }
 
-form fieldset.search a {
+form fieldset a {
     padding: 1px 5px;
     border:  1px solid #fa0;
     margin: 0 6px;
     }
-form fieldset.search a.sel,
-form fieldset.search a:hover {
+form fieldset a.sel,
+form fieldset a:hover {
     border: 1px solid #ff0;
     color: #ff0;
     }
 
-form div.dropdown a {
+form.advancedfilter table {
+    /*width:70%; */
+    table-layout:fixed;
+    border-collapse:collapse;
+    margin: 12pt auto;
+    text-align: right;
+}
+
+
+form.advancedfilter table tr {
+}
+
+
+form.advancedfilter table tr td {
+    margin: 3pt;
+    text-align: right;
+    padding: 7px;
+}
+
+form.advancedfilter table tr td.desc {
+    width: 100px;
+    text-align: left;
+}
+form.advancedfilter table tr td.param {
+    width: 400px;
+    text-align: right;
+}
+
+form.advancedfilter input.submit,
+form.advancedfilter input.text,
+form.advancedfilter select {
+    padding: 2px;
+    margin: auto 5px;
+    width: 400px    
+}
+form.advancedfilter input.text {
+    width: 394px
+}
+form.advancedfilter input.submit {
+    font-weight: bold;
+}
+
+form.advancedfilter span.errorsel {
+    font-size: x-small;
+    color: #f55;
+    padding-left:5px;
+}
+
+div.simpleadvanced a {
     display:block;
     width:100%;
     text-align:center;
     font-size: x-small;
 }
 
-form fieldset#advancedsearch {
-    display:none;
-}
-form fieldset#advancedsearch input.submit {
-    padding: 1px;
-    margin: auto 5px;
+/* DEBUG code block */
+div.mainbox .codeblock {
+    font-family:"Lucida Console";
+    font-size: 9pt;
+    text-align:left;
+    background: #210;
+    border:1px solid #552500;
+    display:block; 
+    margin:12pt auto; 
+    width:90%; 
+    padding: 7px;
+    overflow-x:auto; 
+    box-shadow: 3px 3px 2px #210;
 }
-    
-/* TODO: advanced search function styling */
-
-    
 
 /* browse table tabs */
 ul.maintabs {