You are viewing a plain text version of this content. The canonical link for it is here.
Posted to svn@forrest.apache.org by cr...@apache.org on 2006/09/05 10:02:01 UTC

svn commit: r440288 - in /forrest/trunk/whiteboard/plugins/org.apache.forrest.themes.core/themes: common/css/branding-theme-profiler.ft pelt.fv pelt/css/pelt.screen.css

Author: crossley
Date: Tue Sep  5 01:02:00 2006
New Revision: 440288

URL: http://svn.apache.org/viewvc?view=rev&rev=440288
Log:
Synchronise colours to match the current pelt skin.
Fix a problem with colour of "header" and "container" that caused all pages
that had less content than the length of the left-hand menu to have a dark-blue
background.
Issue: FOR-811

Modified:
    forrest/trunk/whiteboard/plugins/org.apache.forrest.themes.core/themes/common/css/branding-theme-profiler.ft
    forrest/trunk/whiteboard/plugins/org.apache.forrest.themes.core/themes/pelt.fv
    forrest/trunk/whiteboard/plugins/org.apache.forrest.themes.core/themes/pelt/css/pelt.screen.css

Modified: forrest/trunk/whiteboard/plugins/org.apache.forrest.themes.core/themes/common/css/branding-theme-profiler.ft
URL: http://svn.apache.org/viewvc/forrest/trunk/whiteboard/plugins/org.apache.forrest.themes.core/themes/common/css/branding-theme-profiler.ft?view=diff&rev=440288&r1=440287&r2=440288
==============================================================================
--- forrest/trunk/whiteboard/plugins/org.apache.forrest.themes.core/themes/common/css/branding-theme-profiler.ft (original)
+++ forrest/trunk/whiteboard/plugins/org.apache.forrest.themes.core/themes/common/css/branding-theme-profiler.ft Tue Sep  5 01:02:00 2006
@@ -33,31 +33,31 @@
     <p> A "real" color-theme switcher should also provide a possibility to 
       change each color with a WEB-GUI. </p>
     <pre class="code"><![CDATA[ <!--Color group: Forrest: example colors similar to forrest.apache.org-->
- <color name="breadtrail" value="#cedfef" font="#0F3660" link="#0F3660" vlink="#0F3660" hlink="#000066"/>
+ <color name="breadtrail" value="#CFDCED" font="#0F3660" link="#0F3660" vlink="#0F3660" hlink="#000066"/>
  <color name="header" value="#294563"/>
- <color name="tab-selected" value="#4a6d8c" link="#0F3660" vlink="#0F3660" hlink="#000066"/>
- <color name="tab-unselected" value="#b5c7e7" link="#0F3660" vlink="#0F3660" hlink="#000066"/>
- <color name="subtab-selected" value="#4a6d8c" link="#0F3660" vlink="#0F3660" hlink="#000066"/>
- <color name="subtab-unselected" value="#4a6d8c" link="#0F3660" vlink="#0F3660" hlink="#000066"/>
+ <color name="tab-selected" value="#4A6D8C" link="#0F3660" vlink="#0F3660" hlink="#000066"/>
+ <color name="tab-unselected" value="#B5C7E7" link="#0F3660" vlink="#0F3660" hlink="#000066"/>
+ <color name="subtab-selected" value="#4A6D8C" link="#0F3660" vlink="#0F3660" hlink="#000066"/>
+ <color name="subtab-unselected" value="#4A6D8C" link="#0F3660" vlink="#0F3660" hlink="#000066"/>
  <color name="heading" value="#294563"/>
- <color name="subheading" value="#4a6d8c"/>
+ <color name="subheading" value="#4A6D8C"/>
  <color name="published" value="#4C6C8F" font="#FFFFFF"/>
  <color name="feedback" value="#4C6C8F" font="#FFFFFF" align="center"/>
- <color name="navstrip" value="#4a6d8c" font="#ffffff" link="#0F3660" vlink="#0F3660" hlink="#000066"/>
- <color name="menu" value="#4a6d8c" font="#cedfef" link="#ffffff" vlink="#ffffff" hlink="#ffcf00"/> 
- <color name="toolbox" value="#4a6d8c"/>
- <color name="border" value="#294563"/>
- <color name="dialog" value="#4a6d8c"/>
- <color name="searchbox" value="#4a6d8c" font="#000000"/>
- <color name="body" value="#ffffff" link="#0F3660" vlink="#009999" hlink="#000066"/>
+ <color name="navstrip" value="#4A6D8C" font="#FFFFFF" link="#0F3660" vlink="#0F3660" hlink="#000066"/>
+ <color name="menu" value="#4A6D8C" font="#CFDCED" link="#FFFFFF" vlink="#FFFFFF" hlink="#ffcf00"/> 
+ <color name="toolbox" value="#CFDCED"/>
+ <color name="border" value="#999999"/>
+ <color name="dialog" value="#4A6D8C"/>
+ <color name="searchbox" value="#4A6D8C" font="#000000"/>
+ <color name="body" value="#FFFFFF" link="#0F3660" vlink="#009999" hlink="#000066"/>
  <color name="table" value="#7099C5"/> 
- <color name="table-cell" value="#f0f0ff"/> 
- <color name="highlight" value="#ffff00"/>
- <color name="fixme" value="#cc6600"/>
+ <color name="table-cell" value="#F0F0FF"/> 
+ <color name="highlight" value="#FFFF00"/>
+ <color name="fixme" value="#CC6600"/>
  <color name="note" value="#006699"/>
  <color name="warning" value="#990000"/>
  <color name="code" value="#CFDCED"/>
- <color name="footer" value="#cedfef"/>]]>
+ <color name="footer" value="#CEDFEF"/>]]>
     </pre>
     <p>
       These values are used for the generated CSS files.
@@ -86,8 +86,8 @@
           pelt: navstrip: the strip under the tabs which contains the published date<br/>
           pelt: menu: the left-hand navigation panel<br/>
           pelt: toolbox: the selected menu item<br/>
-          pelt: searchbox: the background of the searchbox<br/>
           pelt: border: line border around selected menu item<br/>
+          pelt: searchbox: the background of the searchbox<br/>
           pelt: body: any remaining parts, e.g. the bottom of the page<br/>
           pelt: footer: the second from bottom strip containing credit logos and published date<br/>
           pelt: feedback: the optional bottom strip containing feedback link<br/>
@@ -121,7 +121,7 @@
       <xsl:variable name="body-input" 
         select="substring-after($branding-theme-profiler/color[@name='body']/@value, '#')"/>
       <xsl:variable name="body">
-        <xsl:if test="$body-input=''">ffffff</xsl:if>
+        <xsl:if test="$body-input=''">FFFFFF</xsl:if>
         <xsl:if test="not($body-input='')">
           <xsl:value-of select="$body-input"/>
         </xsl:if>
@@ -129,7 +129,7 @@
       <xsl:variable name="searchbox-input" 
         select="substring-after($branding-theme-profiler/color[@name='searchbox']/@value, '#')"/>
       <xsl:variable name="searchbox">
-        <xsl:if test="$searchbox-input=''">4a6d8c</xsl:if>
+        <xsl:if test="$searchbox-input=''">4A6D8C</xsl:if>
         <xsl:if test="not($searchbox-input='')">
           <xsl:value-of select="$searchbox-input"/>
         </xsl:if>
@@ -137,7 +137,7 @@
       <xsl:variable name="tab-selected-input" 
         select="substring-after($branding-theme-profiler/color[@name='tab-selected']/@value, '#')"/>
       <xsl:variable name="tab-selected">
-        <xsl:if test="$tab-selected-input=''">4a6d8c</xsl:if>
+        <xsl:if test="$tab-selected-input=''">4A6D8C</xsl:if>
         <xsl:if test="not($tab-selected-input='')">
           <xsl:value-of select="$tab-selected-input"/>
         </xsl:if>
@@ -145,7 +145,7 @@
       <xsl:variable name="tab-unselected-input" 
         select="substring-after($branding-theme-profiler/color[@name='tab-unselected']/@value, '#')"/>
       <xsl:variable name="tab-unselected">
-        <xsl:if test="$tab-unselected-input=''">CEDFEF</xsl:if>
+        <xsl:if test="$tab-unselected-input=''">B5C7E7</xsl:if>
         <xsl:if test="not($tab-unselected-input='')">
           <xsl:value-of select="$tab-unselected-input"/>
         </xsl:if>
@@ -153,7 +153,7 @@
       <xsl:variable name="menu-input" 
         select="substring-after($branding-theme-profiler/color[@name='menu']/@value, '#')"/>
       <xsl:variable name="menu">
-        <xsl:if test="$menu-input=''">4a6d8c</xsl:if>
+        <xsl:if test="$menu-input=''">4A6D8C</xsl:if>
         <xsl:if test="not($menu-input='')">
           <xsl:value-of select="$menu-input"/>
         </xsl:if>

Modified: forrest/trunk/whiteboard/plugins/org.apache.forrest.themes.core/themes/pelt.fv
URL: http://svn.apache.org/viewvc/forrest/trunk/whiteboard/plugins/org.apache.forrest.themes.core/themes/pelt.fv?view=diff&rev=440288&r1=440287&r2=440288
==============================================================================
--- forrest/trunk/whiteboard/plugins/org.apache.forrest.themes.core/themes/pelt.fv (original)
+++ forrest/trunk/whiteboard/plugins/org.apache.forrest.themes.core/themes/pelt.fv Tue Sep  5 01:02:00 2006
@@ -47,39 +47,40 @@
      pelt: navstrip: the strip under the tabs which contains the published date
      pelt: menu: the left-hand navigation panel
      pelt: toolbox: the selected menu item
-     pelt: searchbox: the background of the searchbox
      pelt: border: line border around selected menu item
+     pelt: searchbox: the background of the searchbox
      pelt: body: any remaining parts, e.g. the bottom of the page
      pelt: footer: the second from bottom strip containing credit logos and published date
      pelt: feedback: the optional bottom strip containing feedback link
-  
-
+-->
 
-    <color name="breadtrail" value="#cedfef" font="#0F3660" link="#0F3660" vlink="#0F3660" hlink="#000066"/>
+          <!-- Color group: pelt -->
+          <!--
+    <color name="breadtrail" value="#CFDCED" font="#0F3660" link="#0F3660" vlink="#0F3660" hlink="#000066"/>
     <color name="header" value="#294563"/>
-    <color name="tab-selected" value="#4c6c8f" link="#0F3660" vlink="#0F3660" hlink="#000066"/>
-    <color name="tab-unselected" value="#b5c7e7" link="#0F3660" vlink="#0F3660" hlink="#000066"/>
-    <color name="subtab-selected" value="#4a6d8c" link="#0F3660" vlink="#0F3660" hlink="#000066"/>
-    <color name="subtab-unselected" value="#4a6d8c" link="#0F3660" vlink="#0F3660" hlink="#000066"/>
+    <color name="tab-selected" value="#4A6D8C" link="#0F3660" vlink="#0F3660" hlink="#000066"/>
+    <color name="tab-unselected" value="#B5C7E7" link="#0F3660" vlink="#0F3660" hlink="#000066"/>
+    <color name="subtab-selected" value="#4A6D8C" link="#0F3660" vlink="#0F3660" hlink="#000066"/>
+    <color name="subtab-unselected" value="#4A6D8C" link="#0F3660" vlink="#0F3660" hlink="#000066"/>
     <color name="heading" value="#294563"/>
-    <color name="subheading" value="#4a6d8c"/>
-    <color name="published" value="#4C6C8F" font="#FFFFFF"/>
-    <color name="feedback" value="#4C6C8F" font="#FFFFFF" align="center"/>
-    <color name="navstrip" value="#4a6d8c" font="#ffffff" link="#0F3660" vlink="#0F3660" hlink="#000066"/>
-    <color name="menu" value="#4a6d8c" font="#cedfef" link="#ffffff" vlink="#ffffff" hlink="#ffcf00"/>    
-    <color name="toolbox" value="#4a6d8c"/>
-    <color name="border" value="#294563"/>
-    <color name="dialog" value="#4a6d8c"/>
-    <color name="searchbox" value="#000000" font="#000000"/>
-    <color name="body" value="#000000" link="#0F3660" vlink="#009999" hlink="#000066"/>
+    <color name="subheading" value="#4A6D8C"/>
+    <color name="published" value="#4A6D8C" font="#FFFFFF"/>
+    <color name="feedback" value="#4A6D8C" font="#FFFFFF" align="center"/>
+    <color name="navstrip" value="#4A6D8C" font="#FFFFFF" link="#0F3660" vlink="#0F3660" hlink="#000066"/>
+    <color name="menu" value="#4A6D8C" font="#CFDCED" link="#FFFFFF" vlink="#FFFFFF" hlink="#FFCF00"/>    
+    <color name="toolbox" value="#CFDCED"/>
+    <color name="border" value="#999999"/>
+    <color name="dialog" value="#4A6D8C"/>
+    <color name="searchbox" value="#4A6D8C" font="#000000"/>
+    <color name="body" value="#FFFFFF" link="#0F3660" vlink="#009999" hlink="#000066"/>
     <color name="table" value="#7099C5"/>    
-    <color name="table-cell" value="#f0f0ff"/>    
-    <color name="highlight" value="#ffff00"/>
-    <color name="fixme" value="#cc6600"/>
+    <color name="table-cell" value="#F0F0FF"/>    
+    <color name="highlight" value="#FFFF00"/>
+    <color name="fixme" value="#CC6600"/>
     <color name="note" value="#006699"/>
     <color name="warning" value="#990000"/>
     <color name="code" value="#CFDCED"/>
-    <color name="footer" value="#cedfef"/>
+    <color name="footer" value="#CEDFEF"/>
 -->
           <!-- Color group: Krysalis -->
           <!--

Modified: forrest/trunk/whiteboard/plugins/org.apache.forrest.themes.core/themes/pelt/css/pelt.screen.css
URL: http://svn.apache.org/viewvc/forrest/trunk/whiteboard/plugins/org.apache.forrest.themes.core/themes/pelt/css/pelt.screen.css?view=diff&rev=440288&r1=440287&r2=440288
==============================================================================
--- forrest/trunk/whiteboard/plugins/org.apache.forrest.themes.core/themes/pelt/css/pelt.screen.css (original)
+++ forrest/trunk/whiteboard/plugins/org.apache.forrest.themes.core/themes/pelt/css/pelt.screen.css Tue Sep  5 01:02:00 2006
@@ -113,7 +113,7 @@
     color: #000000;
     text-align: left;
     font-weight: bold;
-    background-color: #4C6C8F;
+    background-color: #4A6D8C;
 }
 .ForrestTable td {
     color: black;
@@ -129,15 +129,17 @@
     position: relative;
     float: left;
     width: 100%;
-    background-color: #294563; /* if you want a background in the header, put it here */
+    background-color: #FFFFFF;
 }
 
 #container #header {
     position: relative;
     float: left;
     width: 100%;
-/*    background: #294563;*/
-    background: url("../themes/images/header_white_line.gif") repeat-x bottom;
+    background-color: #294563;
+    background-image: url("../themes/images/header_white_line.gif");
+    background-position: bottom left;
+    background-repeat: repeat-x;
 }
 
 /* branding-logo Template */
@@ -155,7 +157,7 @@
     white-space: nowrap;
     text-align: right;
     color: #000000;
-    background-color: #4C6C8F;
+    background-color: #4A6D8C;
     z-index:0;
     bottom: 18px; /* compensate for IE rendering issue */
 }
@@ -167,32 +169,32 @@
 #header .round-top-left-small {
   background-repeat: no-repeat;
   background-position: top left;
-  background-image: url(../themes/images/roundcorner-t-l-5-bg294563-stroke4C6C8F-fg4C6C8F.png);
+  background-image: url(../themes/images/roundcorner-t-l-5-bg294563-stroke4A6D8C-fg4A6D8C.png);
   } 
 #header .round-top-right-small {
   background-repeat: no-repeat;
   background-position: top right;
-  background-image: url(../themes/images/roundcorner-t-r-5-bg294563-stroke4C6C8F-fg4C6C8F.png);
+  background-image: url(../themes/images/roundcorner-t-r-5-bg294563-stroke4A6D8C-fg4A6D8C.png);
   }
 .round-bottom-left-small {
   background-repeat: no-repeat;
   background-position: bottom left;
-  background-image: url(../themes/images/roundcorner-b-l-5-bg294563-stroke4C6C8F-fg4C6C8F.png);
+  background-image: url(../themes/images/roundcorner-b-l-5-bg294563-stroke4A6D8C-fg4A6D8C.png);
   } 
 .round-bottom-right-small {
   background-repeat: no-repeat;
   background-position: bottom right;
-  background-image: url(../themes/images/roundcorner-b-r-5-bg294563-stroke4C6C8F-fg4C6C8F.png);
+  background-image: url(../themes/images/roundcorner-b-r-5-bg294563-stroke4A6D8C-fg4A6D8C.png);
   }
 .round-bottom-left-big {
   background-repeat: no-repeat;
   background-position: bottom left;
-  background-image: url(../themes/images/roundcorner-b-l-15-bg294563-stroke4C6C8F-fg4C6C8F.png);
+  background-image: url(../themes/images/roundcorner-b-l-15-bg294563-stroke4A6D8C-fg4A6D8C.png);
   } 
 .round-bottom-right-big {
   background-repeat: no-repeat;
   background-position: bottom right;
-  background-image: url(../themes/images/roundcorner-b-r-15-bg294563-stroke4C6C8F-fg4C6C8F.png);
+  background-image: url(../themes/images/roundcorner-b-r-15-bg294563-stroke4A6D8C-fg4A6D8C.png);
   }
 
 #header .search-field {
@@ -211,10 +213,10 @@
 
 #nav-main li {
     float: left;
-    background-image: url(../themes/images/roundcorner-t-r-5-bg294563-strokeCEDFEF-fgCEDFEF.png);
+    background-image: url(../themes/images/roundcorner-t-r-5-bg294563-strokeB5C7E7-fgB5C7E7.png);
     background-repeat: no-repeat;
     background-position: top right;
-    background-color: #CEDFEF;
+    background-color: #B5C7E7;
     margin: 0 3px 0 0;
     padding: 0;
 }
@@ -226,7 +228,7 @@
     text-decoration: none;
     color: black;
     white-space: nowrap;
-    background-image: url(../themes/images/roundcorner-t-l-5-bg294563-strokeCEDFEF-fgCEDFEF.png);
+    background-image: url(../themes/images/roundcorner-t-l-5-bg294563-strokeB5C7E7-fgB5C7E7.png);
     background-repeat: no-repeat;
     background-position: top left;
     padding: 5px 15px 4px;
@@ -243,8 +245,8 @@
 /* End IE5-Mac hack */
 
 #nav-main .current {
-    background-color: #4C6C8F;
-    background-image: url(../themes/images/roundcorner-t-r-5-bg294563-stroke4C6C8F-fg4C6C8F.png);
+    background-color: #4A6D8C;
+    background-image: url(../themes/images/roundcorner-t-r-5-bg294563-stroke4A6D8C-fg4A6D8C.png);
     background-repeat: no-repeat;
     background-position: top right;
 }
@@ -252,7 +254,7 @@
     font-weight: bold;
     padding-bottom: 5px;
     color: #000000;
-    background-image: url(../themes/images/roundcorner-t-l-5-bg294563-stroke4C6C8F-fg4C6C8F.png);
+    background-image: url(../themes/images/roundcorner-t-l-5-bg294563-stroke4A6D8C-fg4A6D8C.png);
     background-repeat: no-repeat;
     background-position: top left;
 }
@@ -263,7 +265,7 @@
 
 #publishedStrip {
     position: relative;
-    background: #4C6C8F;
+    background: #4A6D8C;
     clear:both;
     padding-right: 10px;
     padding-left: 20px;
@@ -281,14 +283,14 @@
     margin: 0;
     float:left;
     position:relative;
-    background-color: #4C6C8F ;
+    background-color: #4A6D8C ;
 }
 #level2tabs a{padding-right: 5px;}
 #level2tabs a:link {  color: #000000; }
 #level2tabs a:visited {  color: #000000; }
 #level2tabs a:hover { color: #000066; }
 /*
-*    border-top: solid #4C6C8F 15px;
+*    border-top: solid #4A6D8C 15px;
 */
 #page {
     position: relative;
@@ -300,19 +302,19 @@
 * Round corner
 */
 #roundtop {
-    background-image: url(../themes/images/roundcorner-t-r-15-bgffffff-stroke4C6C8F-fg4C6C8F.png);
+    background-image: url(../themes/images/roundcorner-t-r-15-bgffffff-stroke4A6D8C-fg4A6D8C.png);
     background-repeat: no-repeat;
     background-position: top right;
 }
 
 #roundbottom {
-    background-image: url(../themes/images/roundcorner-b-r-15-bgffffff-stroke4C6C8F-fg4C6C8F.png);
+    background-image: url(../themes/images/roundcorner-b-r-15-bgffffff-stroke4A6D8C-fg4A6D8C.png);
     background-repeat: no-repeat;
     background-position: top right;
 }
 
 #roundbottomLeft {
-    background-image: url(../themes/images/roundcorner-b-l-15-bgffffff-stroke4C6C8F-fg4C6C8F.png);
+    background-image: url(../themes/images/roundcorner-b-l-15-bgffffff-stroke4A6D8C-fg4A6D8C.png);
     background-repeat: no-repeat;
     background-position: bottom left;
 }
@@ -325,13 +327,13 @@
 }
 
 .roundtopsmall {
-    background-image: url(../themes/images/roundcorner-t-r-5-bgffffff-stroke4C6C8F-fg4C6C8F.png);
+    background-image: url(../themes/images/roundcorner-t-r-5-bgffffff-stroke4A6D8C-fg4A6D8C.png);
     background-repeat: no-repeat;
     background-position: top right;
 }
 
 #roundbottomsmall {
-    background-image: url(../themes/images/roundcorner-b-r-5-bgffffff-stroke4C6C8F-fg4C6C8F.png);
+    background-image: url(../themes/images/roundcorner-b-r-5-bgffffff-stroke4A6D8C-fg4A6D8C.png);
     background-repeat: no-repeat;
     background-position: top right;
 }
@@ -368,7 +370,7 @@
     left:10px;
     z-index: 20;
     border-color: #000000; 
-    background-color: #4C6C8F;
+    background-color: #4A6D8C;
     font-size : 90%;
     color: #000000;
 }
@@ -448,7 +450,7 @@
         border-width: 1px;
         margin-right: 10px;
         border-color: #999999;
-        background-color: #CEDFEF;
+        background-color: #CFDCED;
 }
 
 #nav-section .menupageitemgroup {
@@ -459,7 +461,7 @@
         border-right: 1px solid ;
         margin-right: 10px;
         border-color: #999999;
-        background-color: #4C6C8F;
+        background-color: #CFDCED;
 }
 
 #nav-section .menupageitem {
@@ -472,7 +474,7 @@
 #nav-section .menupageitem a:link { color: #000000;}
 #nav-section .menupageitem a:visited { color: #000000;}
 #nav-section .menupageitem a:hover {
-        background-color: #4C6C8F;
+        background-color: #4A6D8C;
         color: #000000;
 }
 
@@ -510,8 +512,8 @@
     clear: both;
     position: relative; /* IE bugfix (http://www.dracos.co.uk/web/css/ie6floatbug/) */
     width: 100%;
-    background-color: #CFDCED;
-    border-top: solid 1px #CFDCED;
+    background-color: #CEDFEF;
+    border-top: solid 1px #4C6C8F;
     color: black;
 }
 #footer .copyright {
@@ -540,9 +542,9 @@
  */
 
 acronym { cursor: help; }
-.boxed          { background-color: #4C6C8F;}
-.underlined_5   { border-bottom: solid 5px #4C6C8F;}
-.underlined_10  { border-bottom: solid 10px #4C6C8F;}
+.boxed          { background-color: #4A6D8C;}
+.underlined_5   { border-bottom: solid 5px #4A6D8C;}
+.underlined_10  { border-bottom: solid 10px #4A6D8C;}
 .code           { border-color: #CFDCED;} 
 
 
@@ -560,8 +562,8 @@
     float: right;
     width: 35%;
     background-color: #f0f0ff;
-    border-top: solid 1px #4C6C8F;
-    border-bottom: solid 1px #4C6C8F;
+    border-top: solid 1px #4A6D8C;
+    border-bottom: solid 1px #4A6D8C;
     margin-bottom: 15px;
     margin-left: 15px;
     margin-right: 10%;
@@ -570,8 +572,8 @@
 }
 
 #content-minitoc-area {
-    border-top: solid 1px #4C6C8F;
-    border-bottom: solid 1px #4C6C8F;
+    border-top: solid 1px #4A6D8C;
+    border-bottom: solid 1px #4A6D8C;
     margin-bottom: 15px;
     margin-left: 15px;
     margin-right: 10%;
@@ -636,7 +638,7 @@
 } 
 
 .breadtrail {
-    background: #CEDFEF;
+    background: #CFDCED;
     color: #0F3660;
     border-bottom: solid 1px white;
     padding: 3px 10px;