]> git.decadent.org.uk Git - maypole.git/commitdiff
Zero search fix and sweet new templates, wheee...
authorSebastian Riedel <sri@labs.kraih.com>
Wed, 13 Oct 2004 11:07:28 +0000 (11:07 +0000)
committerSebastian Riedel <sri@labs.kraih.com>
Wed, 13 Oct 2004 11:07:28 +0000 (11:07 +0000)
git-svn-id: http://svn.maypole.perl.org/Maypole/trunk@223 48953598-375a-da11-a14b-00016c27c3ee

16 files changed:
Changes
lib/Maypole.pm
lib/Maypole/Application.pm
lib/Maypole/Model/CDBI.pm
templates/beer/addnew
templates/factory/addnew
templates/factory/footer
templates/factory/frontpage
templates/factory/header
templates/factory/list
templates/factory/macros
templates/factory/maypole [new file with mode: 0644]
templates/factory/search_form
templates/factory/title [new file with mode: 0644]
templates/factory/view
templates/maypole.css

diff --git a/Changes b/Changes
index dd3db0e0ecd0387a2a55365709b9cebb7eff1a85..4ce18b84a724e42b0520c30d1a55486d9acc5f5c 100644 (file)
--- a/Changes
+++ b/Changes
@@ -27,6 +27,8 @@ Revision history for Perl extension Maypole
       compability.
     - fixed search ordering in Maypole::Model::CDBI and parameter
       handling in CGI::Maypole (Dave Slack)
       compability.
     - fixed search ordering in Maypole::Model::CDBI and parameter
       handling in CGI::Maypole (Dave Slack)
+    - sweet new factory templates (Danijel Milicevic)
+    - zero search fix (Dave Slack)
 
 1.7   Sat Jul 17 20:15:26 BST 2004
     - Emergency release - we lost the "use Maypole::Constants" from
 
 1.7   Sat Jul 17 20:15:26 BST 2004
     - Emergency release - we lost the "use Maypole::Constants" from
index 6b4fe3f0a56d250f7261e2cfc4e53cb98449cbb2..4c66a6729246c8baf84d420f461a5dd3bac42f4c 100644 (file)
@@ -396,15 +396,15 @@ http://maypole.perl.org/
 
 L<Maypole::Application>,L<Apache::MVC>, L<CGI::Maypole>.
 
 
 L<Maypole::Application>,L<Apache::MVC>, L<CGI::Maypole>.
 
-=head1 MAINTAINER
+=head1 AUTHOR
 
 Sebastian Riedel, c<sri@oook.de>
 
 
 Sebastian Riedel, c<sri@oook.de>
 
-=head1 AUTHOR
+=head1 AUTHOR EMERITUS
 
 Simon Cozens, C<simon@cpan.org>
 
 
 Simon Cozens, C<simon@cpan.org>
 
-=head1 THANK YOU
+=head1 THANKS TO
 
 Danijel Milicevic, Dave Slack, Jesse Sheidlower, Jody Belka, Marcus Ramberg,
 Mickael Joanne, Simon Flack, Veljko Vidovic and all the others who've
 
 Danijel Milicevic, Dave Slack, Jesse Sheidlower, Jody Belka, Marcus Ramberg,
 Mickael Joanne, Simon Flack, Veljko Vidovic and all the others who've
index b6789a835c229cf3db7f501ff5626570532d3bf9..4e8b624bf180303ada4ef2c7c2938c2473344f79 100644 (file)
@@ -7,35 +7,40 @@ our @ISA;
 
 sub import {
     my ( $self, @plugins ) = @_;
 
 sub import {
     my ( $self, @plugins ) = @_;
-     return unless $plugins[0];
-     my $caller=caller(0);
-     no strict 'refs';
-     push @{"${caller}::ISA"}, $self;    
-     "Maypole::$_"->require && unshift @ISA, "Maypole::$_" foreach (@plugins);
+    return unless $plugins[0];
+    my $caller = caller(0);
+    no strict 'refs';
+    push @{"${caller}::ISA"}, $self;
+    "Maypole::$_"->require && unshift @ISA, "Maypole::$_" foreach (@plugins);
 }
 
 if ( $ENV{MOD_PERL} ) {
     require Apache::MVC;
 }
 
 if ( $ENV{MOD_PERL} ) {
     require Apache::MVC;
-    push @ISA , qw(Apache::MVC);
+    push @ISA, qw(Apache::MVC);
 }
 else {
     require CGI::Maypole;
 }
 else {
     require CGI::Maypole;
-    push @ISA , qw(CGI::Maypole);
+    push @ISA, qw(CGI::Maypole);
 }
 
 1;
 
 =head1 NAME
 
 }
 
 1;
 
 =head1 NAME
 
-Maypole::Application - all in wonder front-end
+Maypole::Application - Maypole Universal Frontend
 
 =head1 SYNOPSIS
 
 
 =head1 SYNOPSIS
 
-    use base 'Maypole::Application';
+    use Maypole::Application;
 
 =head1 DESCRIPTION
 
 
 =head1 DESCRIPTION
 
-The all in wonder front-end.
+This is a universal frontend for mod_perl1, mod_perl2 and CGI.
+
+You can omit the Maypole:: prefix from plugins.
+So Maypole::Config::YAML becomes Config::YAML.
+
+    use Maypole::Application qw(Config::YAML);
 
 =head1 AUTHOR
 
 
 =head1 AUTHOR
 
index 54325616f90cac9dfcfaa5d3ff3474639a3cf0b1..bba1c5c587868e9a4be99e8423faa1c5a2554b79 100644 (file)
@@ -66,15 +66,17 @@ sub related {
     return keys %{ $self->meta_info('has_many') || {} };
 }
 
     return keys %{ $self->meta_info('has_many') || {} };
 }
 
-#sub related_class {
-#    my ( $self, $r, $accessor ) = @_;
-#    my $related=$self->related->{$accessor};
-#    if ( my $mapping=$related->{args}->{mapping} ) {
-#      return  $related->{foreign_class}->meta_info('has_a')->{$$mapping[0]}->{foreign_class};
-#    } else { 
-#      return $related->{foreign_class};
-#    }
-#}
+sub related_class {
+    my ( $self, $r, $accessor ) = @_;
+    my $related = $self->related->{$accessor};
+    if ( my $mapping = $related->{args}->{mapping} ) {
+        return $related->{foreign_class}->meta_info('has_a')->{ $$mapping[0] }
+          ->{foreign_class};
+    }
+    else {
+        return $related->{foreign_class};
+    }
+}
 
 sub do_edit : Exported {
     my ( $self, $r ) = @_;
 
 sub do_edit : Exported {
     my ( $self, $r ) = @_;
@@ -144,7 +146,7 @@ sub search : Exported {
     my $oper   = "like";                                # For now
     my %params = %{ $r->{params} };
     my %values = map { $_ => { $oper, $params{$_} } }
     my $oper   = "like";                                # For now
     my %params = %{ $r->{params} };
     my %values = map { $_ => { $oper, $params{$_} } }
-      grep { $params{$_} and $fields{$_} } keys %params;
+      grep { defined $params{$_} and $fields{$_} } keys %params;
 
     $r->template("list");
     if ( !%values ) { return $self->list($r) }
 
     $r->template("list");
     if ( !%values ) { return $self->list($r) }
index 32b97db0e89b17da97fb13a43c7006ebb1cead71..ad51f01a8cfe93c49be59a825fedf6a7990a6c54 100644 (file)
@@ -1,4 +1,5 @@
 [% USE element_maker = Class("HTML::Element") %]
 [% USE element_maker = Class("HTML::Element") %]
+<div id="addnew">
 <form method="post" action="[% base %]/[% classmetadata.moniker %]/do_edit/">
 <fieldset>
 <legend>Add a new [%classmetadata.moniker%]</legend>
 <form method="post" action="[% base %]/[% classmetadata.moniker %]/do_edit/">
 <fieldset>
 <legend>Add a new [%classmetadata.moniker%]</legend>
@@ -17,3 +18,4 @@
     <input type="submit" name="create" value="create"/>
     </fieldset>
 </form>
     <input type="submit" name="create" value="create"/>
     </fieldset>
 </form>
+</div>
index 18d63d46b7e40886cf294b13a2cdd78204764873..a6027ce2de4ddbd71731f0886526cfa6bd1ac7ca 100644 (file)
@@ -10,7 +10,9 @@ table.
 =cut
 
 #%]
 =cut
 
 #%]
-<form id="createform" method="post" action="[% base %]/[% classmetadata.table %]/do_edit/">
+
+<div id="addnew">
+<form method="post" action="[% base %]/[% classmetadata.table %]/do_edit/">
     <fieldset>
 <legend>Add a new [% classmetadata.moniker %]</legend>
     [% FOR col = classmetadata.columns %]
     <fieldset>
 <legend>Add a new [% classmetadata.moniker %]</legend>
     [% FOR col = classmetadata.columns %]
@@ -22,3 +24,4 @@ table.
     <input type="submit" name="create" value="create"/>
 </fieldset>
 </form>
     <input type="submit" name="create" value="create"/>
 </fieldset>
 </form>
+</div>
index 64584ee0784da163ff120db797dc771514e35c16..1b8ae556e7e0d4c62cff88071404de8fff17dbc0 100644 (file)
@@ -1,3 +1,3 @@
-        </div>
+       </div>
     </body>
 </html>
     </body>
 </html>
index 407fc6e6d502d2753266d1def2d3dbd6a3e5bed5..2677c26afaaf0c07dbb0f15a66e70a2b79df8e02 100644 (file)
@@ -9,17 +9,19 @@ It shows a list of all tables it is allowed to display.
 
 #%]
 [% INCLUDE header %]
 
 #%]
 [% INCLUDE header %]
-<h2>
+<div id="title">
     [% config.application_name || "A poorly configured Maypole application" %]
     [% config.application_name || "A poorly configured Maypole application" %]
-</h2>
-<table border="0" width="70%">
+</div>
+<div id="frontpage_list">
+<ul>
 [% FOR table = config.display_tables %]
 [% FOR table = config.display_tables %]
-    <tr>
-        <td>
-            <a href="[%table%]/list">List by [%table %]</a>
-        </td>
-    </tr>
+    <li>
+        <a href="[%table%]/list">List by [%table %]</a>
+    </li>      
 [% END %]
 [% END %]
-</table>
-<br/>
+</ul>
+</div>
+
+[% INCLUDE maypole %]
+
 [% INCLUDE footer %]
 [% INCLUDE footer %]
index 148cc942e0ac2d913b46e681d76de933210ad40c..a7bc34818eeadf38878b6d459ceaf608b9054855 100644 (file)
@@ -4,7 +4,7 @@
     <head>
         <title>
             [%
     <head>
         <title>
             [%
-                config.application_name ||
+              title || config.application_name ||
                 "A poorly configured Maypole application"
             %]
         </title>
                 "A poorly configured Maypole application"
             %]
         </title>
index a8fd016b95d9fadb7be113804b21a24a83b52d25..beade40e3a5184f998c71096b375d78ba537ab68 100644 (file)
@@ -1,12 +1,7 @@
 [% PROCESS macros %]
 [% INCLUDE header %]
 [% PROCESS macros %]
 [% INCLUDE header %]
-[% IF search %]
-    <h2>Search results</h2>
-[% ELSE %]
-    <h2>Listing of all [% classmetadata.plural %]</h2>
-[% END %]
+[% INCLUDE title %]
 [% INCLUDE navbar %]
 [% INCLUDE navbar %]
-[% INCLUDE search_form %]
 <div class="list">
     <table id="matrix" width="100%" >
         <tr>
 <div class="list">
     <table id="matrix" width="100%" >
         <tr>
@@ -29,7 +24,7 @@
                 END;
                 "</th>";
             END %]
                 END;
                 "</th>";
             END %]
-           <th>Actions</th>
+           <th id="actionth">Actions</th>
         </tr>
         [%  SET count = 0;
         FOR item = objects;
         </tr>
         [%  SET count = 0;
         FOR item = objects;
@@ -41,7 +36,9 @@
             "</tr>";
         END %]
     </table>
             "</tr>";
         END %]
     </table>
+
 [% INCLUDE pager %]
 [% INCLUDE addnew %]
 [% INCLUDE pager %]
 [% INCLUDE addnew %]
+[% INCLUDE search_form %]
 </div>
 [% INCLUDE footer %]
 </div>
 [% INCLUDE footer %]
index 234b8f92e512f686ec11fab6e674dedad21781b3..d4c0e5d777979f324647358e2f934e3ee04a1761 100644 (file)
@@ -66,7 +66,7 @@ for some.
         END;
         "</td>";
     END;
         END;
         "</td>";
     END;
-    "<td>";
+    "<td nowrap>";
     button(item, "edit");
     button(item, "delete");
     "</td>";
     button(item, "edit");
     button(item, "delete");
     "</td>";
@@ -99,7 +99,7 @@ brewery) calls the accesor, and displays a list of the results.
 [% 
 MACRO view_related(object) BLOCK;
     FOR accessor = classmetadata.related_accessors.list;
 [% 
 MACRO view_related(object) BLOCK;
     FOR accessor = classmetadata.related_accessors.list;
-        "<h3>"; accessor | ucfirst; "</h3>\n";
+        "<div id=\"subtitle\">"; accessor | ucfirst; "</div>\n";
         "<ul id=\"vlist\">";
         FOR thing = object.$accessor;
             "<li>"; maybe_link_view(thing); "</li>\n";
         "<ul id=\"vlist\">";
         FOR thing = object.$accessor;
             "<li>"; maybe_link_view(thing); "</li>\n";
diff --git a/templates/factory/maypole b/templates/factory/maypole
new file mode 100644 (file)
index 0000000..7ab2744
--- /dev/null
@@ -0,0 +1,7 @@
+<!-- boxes -->
+<div style='position:absolute;top:220px;left:130px;border-bottom-width:260px;border-right-width:370px;' class='deco1'>&nbsp;</div>
+<div style='position:absolute;top:260px;left:190px;border-bottom-width:170px;border-right-width:530px;' class='deco2'>&nbsp;</div>
+<div style='position:absolute;top:240px;left:220px;border-bottom-width:340px;border-right-width:440px;' class='deco4'>&nbsp;</div>
+<div style='position:absolute;top:160px;left:330px;border-bottom-width:160px;border-right-width:280px;' class='deco1'>&nbsp;</div>
+<div style='position:absolute;top:190px;left:290px;border-bottom-width:430px;border-right-width:130px;' class='deco2'>&nbsp;</div>
+<!-- end of boxes -->
index 1e90dbf75b369ae9b1a8b9e423c16b8fa0df0fb0..1f071949f3d42f762bcfeab31852b8cd72136449 100644 (file)
@@ -1,5 +1,6 @@
+<div id="search">
 <form method="get" action="[% base %]/[% classmetadata.moniker %]/search/">
 <form method="get" action="[% base %]/[% classmetadata.moniker %]/search/">
-<fieldset class="search">
+<fieldset>
 <legend>Search</legend>
         [% FOR col = classmetadata.columns;
             NEXT IF col == "id";
 <legend>Search</legend>
         [% FOR col = classmetadata.columns;
             NEXT IF col == "id";
@@ -18,3 +19,4 @@
     <input type="submit" name="search" value="search"/>
     </fieldset>
 </form>
     <input type="submit" name="search" value="search"/>
     </fieldset>
 </form>
+</div>
diff --git a/templates/factory/title b/templates/factory/title
new file mode 100644 (file)
index 0000000..052ecf5
--- /dev/null
@@ -0,0 +1,7 @@
+    <a href="[% base %]/frontpage">[% config.application_name %]</a>
+[% IF search %]
+    <div id="title">Search results</div>
+[% ELSE %]
+    <div id="title">Listing of all [% classmetadata.plural %]</div>
+[% END %]
+       
index cf7822e5498298cdb27516bb58b57218340331b7..19117b5e060836a5884b4e2977af5d4f72cdf653 100644 (file)
@@ -12,7 +12,7 @@ C<objects> and displays the object's properties in a table.
 [% INCLUDE header %]
 [% FOR item = objects %]
     [% SET string = item.stringify_column %]
 [% INCLUDE header %]
 [% FOR item = objects %]
     [% SET string = item.stringify_column %]
-    <h2> [% item.$string %]</h2>
+    <div id="title"> [% item.$string %]</div>
     [% INCLUDE navbar %]
     <table class="view">
         <tr>
     [% INCLUDE navbar %]
     <table class="view">
         <tr>
@@ -65,6 +65,7 @@ a list of has-many accessors. Next it calls each of those accessors, and
 displays the results in a table.
 
 #%]
 displays the results in a table.
 
 #%]
+    <br /><a href="[%base%]/[%item.table%]/list">Back to listing</a>
 [% view_related(item); %]
     
 [%
 [% view_related(item); %]
     
 [%
index c6dba91d87dc89149304ac3a903803f153784122..124130f0d77ae49ebefdcb8eccb5c4fd79589dc2 100644 (file)
@@ -6,12 +6,31 @@ html {
     padding-top: 0px
 }
 body {
     padding-top: 0px
 }
 body {
+    font-family: sans-serif;
     padding-right: 0px; 
     padding-left: 0px; 
     padding-bottom: 0px;
     margin: 0px; padding-top: 0px;
     padding-right: 0px; 
     padding-left: 0px; 
     padding-bottom: 0px;
     margin: 0px; padding-top: 0px;
-    background-color: #ffffea;
+    background-color: #fff;
 }
 }
+#frontpage_list {
+    position: absolute;
+    z-index: 5;
+    padding: 0px 100px 0px 0px;
+    margin:0 0.5%;     
+    margin-bottom:1em; 
+    margin-top: 1em;
+    background-color: #fff;
+}
+
+#frontpage_list a:hover {
+    background-color: #d0d8e4;
+}
+
+#frontpage_list ul {
+    list-style-type: square;
+}
+
 .content {
     padding: 12px;
     margin-top: 1px;  
 .content {
     padding: 12px;
     margin-top: 1px;  
@@ -24,23 +43,6 @@ body {
     border-left: 1px;
     border-right: 1px;
 }
     border-left: 1px;
     border-right: 1px;
 }
-h1 {
-    font-size: 30pt; 
-    margin: 0px;
-    font-family: Optima, "Lucida Grande",Sans-serif;
-    text-align: center;
-    padding-bottom: 1em;
-}
-h2 {
-    padding-right: 0.25em; 
-    padding-left: 0.25em; 
-    font-size: 16pt;
-    padding-bottom: 0.5em; 
-    margin: 0px; 
-    padding-top: 0.1em;
-    font-family: Optima, "Lucida Grande",Sans-serif;
-    text-align: center;
-}
 
 A { 
     text-decoration: none; 
 
 A { 
     text-decoration: none; 
@@ -51,23 +53,121 @@ A:hover {
     color:#222 
 }
 
     color:#222 
 }
 
+#title {
+    z-index: 6;
+    width: 100%;
+    height: 18px;
+    margin-top: 10px;
+    font-size: 90%;
+    border-bottom: 1px solid #ddf;
+    text-align: left;
+}
+
+#subtitle {
+    postion: absolute;
+    z-index: 6;
+    padding: 10px;
+    margin-top: 2em;
+    height: 18px;
+    text-align: left;
+    background-color: #fff;
+}
+
+input[type=text] {
+    height: 16px;
+    width: 136px;
+    font-family: sans-serif;
+    font-size: 11px;
+    color: #2E415A;
+    padding: 0px;
+    margin-bottom: 5px;
+}
+
+input[type=submit] {
+    height: 18px;
+    width: 60px;
+    font-family: sans-serif;
+    font-size: 11px;
+    border: 1px outset;
+    background-color: #fff;
+    color: #2E415A;
+    padding: 0px 0px 2px 0px;
+    margin-bottom: 5px;
+}
+
+textarea {
+    width: 136px;
+    font-family: sans-serif;
+    font-size: 11px;
+    color: #2E415A;
+    padding: 0px;
+    margin-bottom: 5px;
+}
+
+select {
+    height: 16px;
+    width: 140px;
+    font-family: sans-serif;
+    font-size: 12px;
+    color: #202020;
+    padding: 0px;
+    margin-bottom: 5px;
+}
+
+.deco1 {
+    font-size: 0px;
+    z-index:1;
+    border:0px;
+    border-style:solid;
+    border-color:#4d6d99;
+    background-color:#4d6d99;
+}
+
+.deco2 {
+    z-index:2;
+    border:0px;
+    border-style:solid;
+    border-color:#627ea5;
+    background-color:#627ea5;
+}
+
+
+.deco3 {
+    z-index:3;
+    border:0px;
+    border-style:solid;
+    border-color:#7d95b5;
+    background-color:#7d95b5;
+}
+                   
+.deco4 {
+    z-index:4;
+    border:0px;
+    border-style:solid;
+    border-color:#d0d8e4;
+    background-color:#d0d8e4;
+}
+                   
+
 table { 
     border: 0px solid; 
     background-color: #ffffff;
 }
 
 #matrix th {
 table { 
     border: 0px solid; 
     background-color: #ffffff;
 }
 
 #matrix th {
-    background-color: #DDE;
-    border: 1px solid;
+    background-color: #b5cadc;
+    border: 1px solid #778;
     font: bold 12px Verdana, sans-serif;
 }
 
     font: bold 12px Verdana, sans-serif;
 }
 
-#matrix tr.alternate { background-color:#EEF; }
+#matrix tr.alternate { background-color:#e3eaf0; }
+#matrix tr:hover { background-color: #b5cadc; }
 #matrix td { font: 12px Verdana, sans-serif; }
 
 #navlist {
     padding: 3px 0;
     margin-left: 0;
 #matrix td { font: 12px Verdana, sans-serif; }
 
 #navlist {
     padding: 3px 0;
     margin-left: 0;
+    margin-top:3em;
     border-bottom: 1px solid #778;
     font: bold 12px Verdana, sans-serif;
 }
     border-bottom: 1px solid #778;
     font: bold 12px Verdana, sans-serif;
 }
@@ -83,7 +183,7 @@ table {
     margin-left: 3px;
     border: 1px solid #778;
     border-bottom: none;
     margin-left: 3px;
     border: 1px solid #778;
     border-bottom: none;
-    background: #DDE;
+    background: #b5cadc;
     text-decoration: none;
 }
 
     text-decoration: none;
 }
 
@@ -92,26 +192,31 @@ table {
 
 #navlist li a:hover {
     color: #000;
 
 #navlist li a:hover {
     color: #000;
-    background: #AAE;
+    background: #eef;
+    border-top: 4px solid #7d95b5;
     border-color: #227;
 }
 
 #navlist #active a {
     background: white;
     border-bottom: 1px solid white;
     border-color: #227;
 }
 
 #navlist #active a {
     background: white;
     border-bottom: 1px solid white;
+    border-top: 4px solid;
 }
 
 td { font: 12px Verdana, sans-serif; }
 
 
 fieldset {
 }
 
 td { font: 12px Verdana, sans-serif; }
 
 
 fieldset {
+    margin-top: 1em;
     padding: 1em;
     padding: 1em;
+    background-color: #f3f6f8;
     font:80%/1 sans-serif;
     border:1px solid #8484ce;
 }
 
 legend {
     padding: 0.2em 0.5em;
     font:80%/1 sans-serif;
     border:1px solid #8484ce;
 }
 
 legend {
     padding: 0.2em 0.5em;
+    background-color: #fff;
     border:1px solid #8484ce;
     font-size:90%;
     text-align:right;
     border:1px solid #8484ce;
     font-size:90%;
     text-align:right;
@@ -148,20 +253,49 @@ label .field {
 #vlist li a {
     display: block;
     padding: 0.25em 0.5em 0.25em 0.75em;
 #vlist li a {
     display: block;
     padding: 0.25em 0.5em 0.25em 0.75em;
-    border-left: 1em solid #AAB;
-    background: #CCD;
+    border-left: 1em solid #7d95b5;
+    background: #d0d8e4;
     text-decoration: none;
 }
     text-decoration: none;
 }
+
 #vlist li a:hover { 
     border-color: #227;
 }
 #vlist li a:hover { 
     border-color: #227;
 }
-.search {width: 25%;border:1px outset #000;float:right; background: #eef;}
-.search legend {border:none;}
+
+.view .field {
+    background-color: #f3f6f8;
+    border-left: 1px solid #7695b5;
+    border-top: 1px solid #7695b5;
+    padding: 1px 10px 0px 2px;
+}
+
+#addnew {
+    width: 50%;
+    float: left;
+}
+
+#search {
+    width: 50%;
+    float:right;
+}
 
 .error { color: #d00; }
 
 
 .error { color: #d00; }
 
-.list { width: 70%; }
 .action { 
 .action { 
+    border: 1px outset #7d95b5;
     style:block;
 }
     style:block;
 }
-.pager { text-align:center;}
+
+.action:hover {
+    text-decoration: none;
+    background-color: #7d95b5;
+}
+
+.pager {
+    font:80%/1 sans-serif;
+    background-color: #f3f6f8;
+    padding: 2px;
+    border: 1px solid #8484ce;
+    text-align:center;
+}
+