www-commits
[Top][All Lists]
Advanced

[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]

www/server/staging body-include-1.html body-inc...


From: Therese Godefroy
Subject: www/server/staging body-include-1.html body-inc...
Date: Wed, 15 Jan 2020 14:25:47 -0500 (EST)

CVSROOT:        /webcvs/www
Module name:    www
Changes by:     Therese Godefroy <th_g> 20/01/15 14:25:47

Modified files:
        server/staging : body-include-1.html body-include-2.html 
                         layout.css education.css edu-software.html 
                         home.html 
        server/staging/layout: banner.html body-include-1.html 
                               body-include-2.html layout.css 
        server/staging/nav-bar/test9: edu-software-tuxpaint.html 
        server/staging/readability: free-sw.html 
Added files:
        server/staging/nav-bar/test9: footer-text.html 

Log message:
        Move general defs from education.css to layout.css.
        New translation icon.
        home.html & edu-software.html: translation button links to language div.
        free-sw.html: translation button is a checkbox label.
        edu-software-tuxpaint.html: no translation -> language div is 
suppressed.
        edu-software.html: modified translist. 

CVSWeb URLs:
http://web.cvs.savannah.gnu.org/viewcvs/www/server/staging/body-include-1.html?cvsroot=www&r1=1.18&r2=1.19
http://web.cvs.savannah.gnu.org/viewcvs/www/server/staging/body-include-2.html?cvsroot=www&r1=1.12&r2=1.13
http://web.cvs.savannah.gnu.org/viewcvs/www/server/staging/layout.css?cvsroot=www&r1=1.4&r2=1.5
http://web.cvs.savannah.gnu.org/viewcvs/www/server/staging/education.css?cvsroot=www&r1=1.21&r2=1.22
http://web.cvs.savannah.gnu.org/viewcvs/www/server/staging/edu-software.html?cvsroot=www&r1=1.13&r2=1.14
http://web.cvs.savannah.gnu.org/viewcvs/www/server/staging/home.html?cvsroot=www&r1=1.20&r2=1.21
http://web.cvs.savannah.gnu.org/viewcvs/www/server/staging/layout/banner.html?cvsroot=www&r1=1.3&r2=1.4
http://web.cvs.savannah.gnu.org/viewcvs/www/server/staging/layout/body-include-1.html?cvsroot=www&r1=1.3&r2=1.4
http://web.cvs.savannah.gnu.org/viewcvs/www/server/staging/layout/body-include-2.html?cvsroot=www&r1=1.10&r2=1.11
http://web.cvs.savannah.gnu.org/viewcvs/www/server/staging/layout/layout.css?cvsroot=www&r1=1.9&r2=1.10
http://web.cvs.savannah.gnu.org/viewcvs/www/server/staging/nav-bar/test9/edu-software-tuxpaint.html?cvsroot=www&r1=1.31&r2=1.32
http://web.cvs.savannah.gnu.org/viewcvs/www/server/staging/nav-bar/test9/footer-text.html?cvsroot=www&rev=1.21
http://web.cvs.savannah.gnu.org/viewcvs/www/server/staging/readability/free-sw.html?cvsroot=www&r1=1.26&r2=1.27

Patches:
Index: body-include-1.html
===================================================================
RCS file: /webcvs/www/www/server/staging/body-include-1.html,v
retrieving revision 1.18
retrieving revision 1.19
diff -u -b -r1.18 -r1.19
--- body-include-1.html 1 Jan 2020 17:05:08 -0000       1.18
+++ body-include-1.html 15 Jan 2020 19:25:46 -0000      1.19
@@ -5,34 +5,36 @@
  --><!--#set var="cb" value="$1"
  --><!--#endif -->
 <!--#set var="language_selector"
- value='<a title="Set your preferred language for this session"
- href="/server/select-language.html?callback=$cb" rel="nofollow">' -->
+ value='<a href="/server/select-language.html?callback=$cb" rel="nofollow">' 
-->
 <!--#set var="closing_anchor" value='</a>' -->
 <!--#set var="MARK_START" value=" <span class='no-display'>=</span> " -->
 <!--#set var="MARK_END" value=" <span class='no-display'>=</span> " -->
-<div id="toplinks">
 
-<span id="skip"><b><a title="Skip to main text"
-href="#content">Skip to main text</a></b></span>
+<div id="toplinks">
+<a href="#content"><b>Skip to main text</b></a>
 
 <p id="join-fsf" class="button">
-<a href="https://www.fsf.org/associate/support_freedom?referrer=4052";>¡Únase 
a la FSF!</a></p>
+<a 
href="https://www.fsf.org/associate/support_freedom?referrer=4052";>JOIN&nbsp;THE&nbsp;FSF</a></p>
 
 <div id="fssbox">
-<span id="fss-link">Boletín «<a href="//www.fsf.org/fss"><cite>Free Software
-Supporter</cite></a>» (también en español):</span>
-<form id="fss-sign-up" 
action="https://my.fsf.org/civicrm/profile/create?reset=1&amp;gid=31";
- method="post" class="header"><span>
+<p><a href="//www.fsf.org/fss">Free Software Supporter</a>:</p>
+<form action="https://my.fsf.org/civicrm/profile/create?reset=1&amp;gid=31";
+ method="post" class="header">
+ <div>
   <input name="postURL" type="hidden" value="" />
   <input type="hidden" name="group[25]" value="1" />
   <input name="cancelURL" type="hidden" 
value="https://crm.fsf.org/civicrm/profile?reset=1&amp;gid=31"; />
   <input name="_qf_default" type="hidden" value="Edit:cancel" />
-  <input type="text" id="frmEmail" name="email-Primary"
-         value="dirección de correo" onfocus="this.value=''"/>
-  <input type="submit" name="_qf_Edit_next" value="Suscribirse" /></span>
+ </div>
+ <div>
+  <input type="text" id="frmEmail" name="email-Primary" size="18" 
maxlength="80"
+         value="email address" onfocus="this.value=''"/>
+  <input type="submit" name="_qf_Edit_next" value="Sign up" />
+ </div>
 </form>
 </div>
 <div style="clear: both"></div>
+
 </div>
 
 <!-- end of server/body-include-1.html -->

Index: body-include-2.html
===================================================================
RCS file: /webcvs/www/www/server/staging/body-include-2.html,v
retrieving revision 1.12
retrieving revision 1.13
diff -u -b -r1.12 -r1.13
--- body-include-2.html 1 Jan 2020 17:05:08 -0000       1.12
+++ body-include-2.html 15 Jan 2020 19:25:46 -0000      1.13
@@ -7,15 +7,17 @@
   <img id="search-icon"
        src="/server/staging/layout/search.png"
        alt="&nbsp;[Search www.gnu.org]&nbsp;"
-       title="Search www.gnu.org" /></a>&nbsp;
+       title="Search www.gnu.org" /></a>
 </span>
 
-<label for="language-input"  id="language-button" class="switch">
+<!--#if expr="$TRANSLATION_LIST = /<span dir=\"ltr\">/" --><span
+id="language-button" class="switch">
+ <a href="#languages">
  <img id="language-icon"
-      src="/server/staging/layout/translation-opt.1.png"
-      alt="&nbsp;[Languages - Toggle translation list]&nbsp;"
-      title="Languages - Toggle translation list" />
-</label>
+       src="/server/staging/layout/flags.1.png"
+       alt="&nbsp;[Languages - Translation list]&nbsp;"
+       title="Languages - Translation list" /></a>
+</span><!--#endif -->
 
 <label for="navbar-input"  id="navbar-button" class="switch">
  <img id="navbar-icon" src="/server/staging/layout/menu.png"
@@ -24,69 +26,25 @@
 </label>
 </span>
 
-<input type="checkbox" id="language-input" />
 <input type="checkbox" id="navbar-input" />
 
 <!-- For text-based browsers -->
-<span style="display: none">&nbsp;(The last 2 buttons and the checkboxes
-are inactive without CSS.)</span>
+<span class="no-display">&nbsp;(The checkbox is inactive
+without CSS.)</span>
 
 <p id="gnu-banner">
 <a href="/">
 <img src="/graphics/heckert_gnu.transp.small.png"
-     alt=" [A GNU head] " /><span id="os" class="hide">El
-sistema operativo</span> <strong>GNU</strong></a><br />
-<span id="fsf-support" class="hide">Patrocinado por la <a
-href="#mission-statement">Free Software Foundation</a></span>
+     alt=" [A GNU head] " /><strong>GNU</strong><span
+     class="hide"> Operating System</span></a><br />
+<span id="fsf-support" class="hide">Sponsored by the <a
+      href="#mission-statement">Free Software Foundation</a></span>
 </p><!-- /gnu-banner -->
 
-<!--
-<div id="searcher">
- <form method="get" action="//www.gnu.org/cgi-bin/estseek.cgi" class="header">
-  <div>
-  <input name="phrase" id="phrase" type="text" size="18" accesskey="s"
-         value="Why GNU/Linux?" onfocus="this.value=''" />
-  <input type="submit" value="Search" />
-  </div>
- </form>
-</div>
--->
-<div style="clear: both"></div>
-
-<div id="languages">
-<p id="set-language">
- <span class="gnun-split"></span><!--#echo
- encoding="none" var="language_selector" -->Set
- language<span class="gnun-split"></span><!--#echo
- encoding="none" var="closing_anchor" --></p>
-
-<div id="translations" title="Available for this page">
-<p>
-<span dir="ltr" class="original"><span class='lang-abbr'>[en]</span><a 
lang="en" hreflang="en" 
href="/education/edu-software.en.html">English</a></span>
-<span dir="ltr"><span class='lang-abbr'>[ar]</span><a lang="ar" hreflang="ar" 
href="/education/edu-software.ar.html">العربية</a></span>
-<span dir="ltr"><span class='lang-abbr'>[de]</span><a lang="de" hreflang="de" 
href="/education/edu-software.de.html">Deutsch</a></span>
-<span dir="ltr"><span class='lang-abbr'>[es]</span><a lang="es" hreflang="es" 
href="/education/edu-software.es.html">español</a></span>
-<span dir="ltr"><span class='lang-abbr'>[fr]</span><a lang="fr" hreflang="fr" 
href="/education/edu-software.fr.html">français</a></span>
-<span dir="ltr"><span class='lang-abbr'>[hr]</span><a lang="hr" hreflang="hr" 
href="/education/edu-software.hr.html">hrvatski</a></span>
-<span dir="ltr"><span class='lang-abbr'>[it]</span><a lang="it" hreflang="it" 
href="/education/edu-software.it.html">italiano</a></span>
-<span dir="ltr"><span class='lang-abbr'>[ja]</span><a lang="ja" hreflang="ja" 
href="/education/edu-software.ja.html">日本語</a></span>
-<span dir="ltr"><span class='lang-abbr'>[lt]</span><a lang="lt" hreflang="lt" 
href="/education/edu-software.lt.html">lietuvių</a></span>
-<span dir="ltr"><span class='lang-abbr'>[nl]</span><a lang="nl" hreflang="nl" 
href="/education/edu-software.nl.html">Nederlands</a></span>
-<span dir="ltr"><span class='lang-abbr'>[pl]</span><a lang="pl" hreflang="pl" 
href="/education/edu-software.pl.html">polski</a></span>
-<span dir="ltr"><span class='lang-abbr'>[pt-br]</span><a lang="pt-br" 
hreflang="pt-br" href="/education/edu-software.pt-br.html">português do 
Brasil</a></span>
-<span dir="ltr"><span class='lang-abbr'>[ru]</span><a lang="ru" hreflang="ru" 
href="/education/edu-software.ru.html">русский</a></span>
-<span dir="ltr"><span class='lang-abbr'>[uk]</span><a lang="uk" hreflang="uk" 
href="/education/edu-software.uk.html">українська</a></span>
-<span dir="ltr"><span class='lang-abbr'>[zh-cn]</span><a lang="zh-cn" 
hreflang="zh-cn" 
href="/education/edu-software.zh-cn.html">简体中文</a></span>
-</p>
-</div>
-</div>
-
 <div style="clear: both"></div>
 
 <div id="navigation">
  <ul>
-<!--#set var="MARK_START" value=" <span class='no-display'>=</span> " -->
-<!--#set var="MARK_END" value=" <span class='no-display'>=</span> " -->
 <!--#if expr="$REQUEST_URI = /^\/gnu\//" -->
   <li id="tabAboutGNU" class="active">
     <!--#echo encoding="none" var="MARK_START" -->
@@ -147,17 +105,6 @@
 <!--#else -->
   <li id="tabDoc"><a href="/doc/doc.html">DOCS</a></li>
 <!--#endif -->
-<!--#if expr="$REQUEST_URI = /^\/proprietary\//" -->
-  <li id="tabMalware" class="active">
-    <!--#echo encoding="none" var="MARK_START" -->
-    <a href="/proprietary/proprietary.html">MALWARE</a>
-    <span class="gnun-split"></span>
-    <!--#echo encoding="none" var="MARK_END" -->
-  </li>
-<!--#else -->
-  <li id="tabMalware"><a href="/proprietary/proprietary.html">MALWARE</a>
-</li>
-<!--#endif -->
 <!--#if expr="$REQUEST_URI = /^\/help\//" -->
   <li id="tabHelp" class="active">
     <!--#echo encoding="none" var="MARK_START" -->

Index: layout.css
===================================================================
RCS file: /webcvs/www/www/server/staging/layout.css,v
retrieving revision 1.4
retrieving revision 1.5
diff -u -b -r1.4 -r1.5
--- layout.css  1 Jan 2020 16:06:05 -0000       1.4
+++ layout.css  15 Jan 2020 19:25:46 -0000      1.5
@@ -37,10 +37,9 @@
 /* PAGE STRUCTURE
 
 From top to bottom:
-   #searcher + #toplinks             [body-include-1.html]
-   #translations                     [body-include-1.html]
-   #header (#gnu-banner, #fsf-frame) [body-include-2.html]
-   #navigation                       [body-include-2.html]
+   #toplinks (skiplink, #fssbox, #join-fsf)     [body-include-1.html]
+   #header (#switches, #gnu-banner,
+     #languages, #navigation)                   [body-include-2.html]
    (#edu-navigation in a few pages)  [<page>.html]
    #content                          [<page>.html]
      #fsf-links          [footer-text.html]
@@ -51,19 +50,25 @@
 
 /* TABLE OF CONTENTS
 
-   * Invariant
-   * Layout of building blocks (basic HTML elements & special features)
-   * Layout of main divs & constant features, except navigation
-   * Layout of navigation elements (breadcrumbs & navbars)
+   * Invariant (html, body, .inner, basic styles)
+   * Layout of building blocks (paragraphs, headers, lists, tables, separators,
+     forms, buttons & links, emphasized text, images)
+   * Layout of main divs
+     - Header & navigation for CSS3-unaware browsers
+     - CSS3 media queries for header & navigation (#navigation, 
#edu-navigation,
+       #fsf-links, #back-to-top)
+     - #content
+     - #mission-statement
+     - #footer
    * Font family
    * Color, background, border
 */
 
 
 
-/******************************************************************************/
+/*============================================================================*/
 /*                                   INVARIANT                                
*/
-/******************************************************************************/
+/*============================================================================*/
 
 
 html, body {
@@ -101,7 +106,7 @@
 .underline { text-decoration: underline; }
 .nounderline { text-decoration: none; }
 .small { font-size: .9em; }
-.big, .article { font-size: 1.1em; }
+.big { font-size: 1.1em; }
 .inline-list li { display: inline }
 .no-bullet li { list-style: none; }
 .no-display { display: none; }
@@ -114,9 +119,9 @@
 
 
 
-/******************************************************************************/
-/*                                 BUILDING BLOCKS                            
*/
-/******************************************************************************/
+/*============================================================================*/
+/*                           LAYOUT OF BUILDING BLOCKS                        
*/
+/*============================================================================*/
 
 
 /*** PARAGRAPHS ***/
@@ -131,10 +136,9 @@
 pre { padding-bottom: .3em; overflow: auto; }
 
 
-/*** HEADERS ***/
+/*** <h*> HEADERS ***/
 
 h1, h2, h3, h4, h5, h6 { font-weight: bold; }
-th, td { border: 1px solid #bbb; padding: .5em; }
 
 h1 { font-size: 2.4em; margin: 1em   0 1.1em; }
 h2 { font-size: 2.0em; margin: 1em   0 1.1em; }
@@ -230,6 +234,10 @@
 
 /*** TABLES ***/
 
+th, td {
+   border: 1px solid #bbb; /* default */
+   padding: .5em;
+}
 th { font-weight: bold; text-align: center; }
 table { margin: 1em 0; }
 
@@ -240,19 +248,17 @@
    border-collapse: collapse;
    margin: 1em 0;
 }
-
 .listing th,
 .stx table th {
    font-weight: normal;
    padding: .7em;
 }
- /* This doesn't work if the a element is within normal text. */
+/* This doesn't work if the a element is within normal text. */
 .listing td a { display: block; }
 .listing .top {
    text-align: right;
    padding: 0 0 1em 0;
 }
-
 .listing .listingCheckbox {
    text-align: center;
 }
@@ -322,7 +328,7 @@
 }
 
 
-/*** BUTTONS ***/
+/*** BUTTONS & LINKS ***/
 
 .button a, #join-fsf a {
    display: block;
@@ -330,8 +336,22 @@
    text-align: center;
    font-weight: bold;
    padding: .3em .5em;
+   border: .1em solid #999; /* default */
+}
+
+/* Return link */
+.back {
+   line-height: 1.5em;
+   text-align: right;
+   font-weight: bold;
+   margin: 2em 2%;
 }
 
+/* Anchor - This is used in pages of lists, such as gnu-linux.faq.html,
+   to give readers a hint that they can link directly to a given item.
+   We make it less obtrusive than the item heading it follows.  */
+.anchor-reference-id { font-weight: normal; font-size: .8em; }
+
 
 /*** ROUNDED CORNERS ***/
 
@@ -347,32 +367,12 @@
 
 /*** SPECIAL TEXT WITH NO BACKGROUND OR LEFT BORDER ***/
 
-/* Return link */
-.back {
-   text-align: right;
-   line-height: 1.5em;
-   font-weight: bold;
-   margin: 2em 2%;
-}
-
-/* Anchor - This is used in pages of lists, such as gnu-linux.faq.html,
-   to give readers a hint that they can link directly to a given item.
-   We make it less obtrusive than the item heading it follows.  */
-.anchor-reference-id { font-weight: normal; font-size: 80%; }
-
-p.byline {
-   font-size: 1.1em;
-   margin-bottom: 1.5em;
-}
-
 /* For comments within or at the beginning of an article. Can be used
    with .important or .big. */
 .comment { margin: 1.5em 6%; }
 
 @media (max-width: 30em) {
-    .comment {
-        margin: 1.5em 3%;
-    }
+   .comment { margin: 1.5em 3%; }
 }
 
 /* Note about Free Software Free Society */
@@ -380,6 +380,7 @@
 
 /* For the note saying the page is a translation. */
 .trans-disclaimer {
+   font-size: .9em;
    text-align: center;
    font-weight: bold;
    font-style: italic;
@@ -396,47 +397,15 @@
 }
 #outdated p { margin: 0; }
 
-/* For translators notes */
-.translators-notes {
-   clear: left;
-   line-height: 1.5em;
-   margin-top: 2em;
-}
-.translators-notes hr {
-   height: 1px;
-   margin: 1.7em 0 1.2em;
-   border: none;
-}
-.translators-notes ol li { margin: .5em 1.1em; }
 
-div.translators-notes h3 { font-size: 1.2em; }
-
-/* When the article is in larger font */
-.article .trans-disclaimer,
- .article #outdated { font-size: .9em; }
-
-/* Subsections of /education "Case Studies" */
-.edu-cases {
-   width: 52em; max-width: 100%;
-   padding: 0 0 .8em;
-   margin: 2em auto;
-}
-.edu-cases ul, .edu-cases ol {
-   margin: 1em 4%;
-}
-.edu-cases h3 {
-   font-size: 1.3em;
-}
-
-
-/*** SPECIAL TEXT WITH BACKGROUND ***/
+/*** TEXT WITH BACKGROUND ***/
 
 /* NetSurf collapses the bottom border of the last element with that of its
    parent div, even when the div has a padding or border.
    To fix this, strip the bottom margin of <p> and <pre>. If another element
    comes last, it may need a special clause. */
 div.highlight-para p, div.highlight-para pre, div.highlight-para ul,
- div.emph-box p, div.emph-box  pre, div.emph-box  ul,
+div.emph-box p, div.emph-box  pre, div.emph-box  ul,
  .lyrics p { margin-bottom: 0; }
 
 /* .highlight doesn't have a border. It can be applied to in-line elements.
@@ -447,7 +416,7 @@
 div.highlight-para, div.emph-box { padding: .2em 1.2em 1.2em; }
 
 .highlight-para, p.highlight,
- p.emph-box, pre.emph-box { padding: .6em 1.2em; }
+p.emph-box, pre.emph-box { padding: .6em 1.2em; }
 
 .lyrics {
    max-width: 25em;
@@ -457,7 +426,7 @@
 }
 
 
-/*** SPECIAL TEXT WITH LEFT BORDER ***/
+/*** TEXT WITH LEFT BORDER ***/
 
 .announcement, .important {
     font-size: inherit;
@@ -474,6 +443,7 @@
     margin: .4em 0;
 }
 
+
 /*** NOTES ***/
 
 .note, .edu-note {
@@ -533,6 +503,7 @@
    .summary, .toc { max-width: 94%; }
 }
 
+
 /*** NOTE AND SUMMARY ON WIDE SCREENS (FLOAT) ***/
 
 @media (min-width: 48em) {
@@ -595,174 +566,339 @@
 
 
 
-/******************************************************************************/
-/*        LAYOUT OF MAIN DIVS & CONSTANT FEATURES (except navigation)         
*/
-/******************************************************************************/
+/*============================================================================*/
+/*                   LAYOUT OF MAIN DIVS & CONSTANT FEATURES                  
*/
+/*============================================================================*/
 
 
-/*** SEARCHER & TOP LINKS ***/
+/***************************************************/
+/*  HEADER & NAVIGATION FOR CSS3-UNAWARE BROWSERS  */
+/***************************************************/
 
-#searcher {
-   display: block;
-   text-align: right;
-   font-size: .9em;
-   padding: .3em 3%;
+
+/*** FSF STUFF ***/
+
+#toplinks { display: none; }
+
+
+/*** GNU BANNER ***/
+
+#header {
+   text-align: center;
+   padding: 0;
+}
+#gnu-banner {
+   display: inline-block;
+   font-size: 2em;
+   text-align: center;
+   line-height: 1em;
+   margin: .1em 3%;
+}
+#gnu-banner strong {
+   font-weight: normal;
+}
+#gnu-banner img {
+   height: 1.7em;
+   vertical-align: bottom;
+   position: relative; top: .15em;
+   margin-right: .15em;
 }
 
-#toplinks {
-   float: left;
-   /* For NetSurf 1.2, and maybe a few other browsers. */
+#fsf-support {
+   font-size: .45em;
+   font-style: italic;
+}
+#fsf-support a {
    font-weight: bold;
-   padding: .5em 2em .3em;
 }
-/* For standard browsers. */
-@media (min-width: 0) {
-   #toplinks { padding: .5em 3% .3em; }
+
+
+/*** LANGUAGES ***/
+
+#languages { font-size: .9em; padding: 0 3%; }
+#set-language {
+   float: right;
+   font-weight: bold;
+   padding: .2em 0;
+   margin: .3em 0 0 1em;
 }
-#toplinks a, #toplinks a:visited {
-   white-space: nowrap;
-   /* the next line is a workaround for Midori 0.5.8 */
+#languages h3 {
    display: inline-block;
-   font-size: .9em;
-   margin-right: 1em;
+   font-size: 1em;
+   margin: .6em 0 0;
 }
 
-
-/*** TRANSLATIONS ***/
-
+/* Could apply to div#translations or p#translations. */
 #translations {
-   clear: both;
-   font-size: .9em;
-   text-align: left;
-   padding: 0 3%;
+   padding: .4em 0;
+   margin: 0;
 }
 #translations p {
-   line-height: 1.2em;
-   padding: .3em 0;
    margin: 0;
 }
 #translations span {
-   white-space: nowrap;
-   font-size: .9em;
-   margin-right: .5em;
+   display:  inline-block;
+   vertical-align: middle;
+   width: 9.5em;
+   padding: 0;
+   margin: .1em 0;
+}
+#translations span a {
+   line-height: 1.1em;
+   padding: .1em .3em;
 }
-/* Highlight the link to the original page */
 #translations span.original {
-   font-size: 1em;
    font-weight: bold;
 }
 
 
-/*** HEADER ***/
+/*** TOGGLE SWITCHES to display navbar and languages,
+   & SEARCHER BUTTON. ***/
+#switches {
+   display: inline-block;
+   clear: right;
+   float: right;
+   max-width: 7em;
+   margin: .3em 1em .3em 0;
+}
+.switch {
+   display: inline-block;
+   vertical-align: middle;
+   height: 2em;
+   margin: 0 .3em;
+}
+.switch img {
+   display: inline-block;
+   vertical-align: middle;
+   height: 100%;
+}
 
-#header {
-   padding: 0 3%;
+#navbar-input,  #outdated-input,
+#navbar-button, #outdated-button {
+   display: none;
 }
-#fssbox, #join-fsf { display: none; }
 
-#fsf-frame {
-   float: right;
-   font-size: .9em;
-   text-align: center;
-   margin: .8em 0;
+
+/*** NAVIGATION BARS ***/
+
+#navigation ul, #fsf-links ul { margin: 0; }
+ul#edu-navigation { margin: 0 -3.2%; }
+
+/* line-height is defined here for NetSurf 1.2.
+   No effect in NetSurf 2.9 or Firefox. */
+#navigation ul, #fsf-links ul, ul#edu-navigation {
+   font-size: 0.9em;
+   line-height: 2em;
+   text-align: left;
+   font-weight: bold;
+   padding: 0 2.5%;
 }
-#fsf-frame p {
-   line-height: 1.3em;
+#navigation li, ul#edu-navigation li, #fsf-links li {
+   white-space: nowrap;
+   display: inline;
+   display: inline-block;
+   line-height: 2em;
+   padding: 1px;
    margin: 0;
 }
+li#more-links {
+   float: right;
+   margin-left: 1.7em;
+}
 
-#join-fsf a, #join-fsf a:visited {
+ /* For Firefox (can't set line-height when "a" is displayed inline) */
+#navigation a, ul#edu-navigation a, #fsf-links a {
    display: inline-block;
-   padding: .4em .5em .3em;
+   line-height: 2em;
+   padding: 0 .4em;
+   margin: 0;
 }
 
-#fssbox {
-   padding: 0;
-   margin-top: 1em;
-}
-#fssbox a { font-weight: bold; }
-#fssbox form p { margin-top: .2em; }
 
-#gnu-banner {
-   font-size: 2em;
+/*** BACK-TO-TOP ***/
+
+#back-to-top {
+   float: right;
+/* For NetSurf 1.2, and maybe a few other browsers. */
+   margin: .25em 1em 0;
+}
+/* For standard browsers. */
+@media (min-width: 0) {
+   #back-to-top { margin-right: 3%; }
+}
+#back-to-top a {
+   display: inline-block;
    line-height: 1.2em;
-   text-align: center;
-   padding: .3em 0 .7em;
+   padding: 0 .5em .2em;
 }
-#gnu-banner strong { font-weight: normal; }
+#back-to-top a span { display: none; }
 
-#gnu-banner img {
-   height: 1.7em;
-   vertical-align: bottom;
-   position: relative; top: .15em;
-   margin-right: .15em;
+
+/*******************************************/
+/*  MEDIA QUERIES FOR HEADER & NAVIGATION  */
+/*******************************************/
+
+@media (min-width: 0) {
+/* Reduce font size below 40em */
+   html { font-size: .9em; }
+
+   .hide { display: none; }
+   #gnu-banner { margin: .1em 3% .4em; }
+
+   #navbar-button {
+      display: inline-block;
+      height: 1.8em;
+      padding: .1em 0;
+   }
+   #navigation { height: 3px; }
+   #navigation ul { display: none; }
+   #navbar-input:checked ~ #navigation { height: auto; }
+   #navbar-input:checked ~ #navigation ul { display: block; }
+
+   ul#edu-navigation { display: none; }
+
+   #outdated-button {
+      display: inline-block;
+      float: right;
+   }
+
+   #outdated { display: none; }
+   #outdated-input:checked ~ #outdated { display: block; }
 }
 
-/* FSF support */
-#fsf-support { display: none; }
+@media (min-width: 28em) {
+   #navbar-button { display: none; }
+   #navigation { height: auto; }
+   #navigation ul, ul#edu-navigation {
+      display: block;
+      text-align: left;
+   }
 
-#fsf-support {
+   #gnu-banner { margin: .2em 3% .5em; }
+}
+
+@media (min-width: 40em) {
+   html { font-size: 1em; }
+
+   .hide { display: inline; }
+   #gnu-banner { margin: .1em 3%; }
+   #gnu-banner img { top: .3em; }
+   #fsf-support {
    font-size: .45em;
-   font-style: italic;
-   margin: .7em 0 0;
+      margin: .3em 0 0;
+   }
+
+   #switches { margin-right: 3%; }
+   #outdated-button { display: none; }
+   #outdated { display: block; }
 }
-#fsf-support a {
-   font-weight: bold;
+
+@media (min-width: 55em) {
+   #toplinks {
+      display: block;
+      width: 94%;
+      font-size: .9em;
+      padding: .2em 3%;
+   }
+   #toplinks > a { display: none; }
+
+   #fssbox {
+      display: inline;
+      margin: 0 1.5em .5em 0;
+   }
+   #fssbox > p {
+      display: inline-block;
+      vertical-align: middle;
+      line-height: 1.1em;
+      margin: 0;
+   }
+   #fssbox a { font-weight: bold; }
+   #fssbox form {
+      display: inline-block;
+      margin: .1em 0;
+   }
+
+   #join-fsf {
+      float: right;
+      margin: .1em 0 .1em 2em;
+   }
+   #join-fsf a {
+      padding: .25em .4em;
+   }
+
+   #gnu-banner { padding-left: 3.7em; }
 }
 
-@media (min-width: 40em) {
-   #fsf-support { display: block; }
-   #gnu-banner { padding-bottom: .5em; }
+@media (min-width: 77.5em) {
+   body { margin-left: .5em; }
+   .inner { overflow: visible; }
+   #navigation ul, ul#edu-navigation, #fsf-links ul { text-align: center; }
+   li#more-links { float: none; }
 }
-@media (min-width: 60em) {
-   #gnu-banner { float: left; }
-   #fssbox, #join-fsf { display: block; }
+
+@media (min-width: 86em) {
+   body { position: relative; }
+
+   #gnu-banner { padding-left: 2.35em; }
+
+   #language-button { display: none; }
+   #languages {
+      display: block;
+      width: 11em;
+      position: absolute;
+      top: -3px; left: 100%;
+   }
+   #translations span { padding: .2em 0; }
+   #translations span a { padding: .2em .3em; }
+   #set-language {
+      float: none;
+      text-align: left;
+      margin: 0;
+   }
 }
 
 
-/*** CONTENT ***/
+/*************/
+/*  CONTENT  */
+/*************/
 
 #content {
    padding: 0 3%;
    margin-bottom: 3em;
 }
+
 #main-text, #main-text ~ .translators-notes {
     max-width: 50rem;
     margin: auto;
 }
 
-.infobox {
+#breadcrumb, .edu-breadcrumb {
+   line-height: 1.7em;
     font-size: .9em;
-    line-height: 1.3em;
-    margin: 2.5em 0 0;  
-}
-.infobox h3 {
-    font-size: 1.2em;
-    margin-top: 0;
-}
-.infobox p {
-    margin: .3em 0 0;
+   padding: .6em 0 0;
+   margin: 0;
 }
-.infobox hr {
-    display: block;
-    width: 15em; max-width: 100%;
-    height: 1px;
-    background: #999;
-    border: none;
-    margin: 0 0 1em 0;
+
+/* Author line after the main heading */
+p.byline {
+   font-size: 1.1em; /* assumes #content > p.byline */
+   margin-bottom: 1.5em;
 }
 
+.article { font-size: 1.1em; }
+
 .reduced-width {
    width: 45em;
    max-width: 100%;
    margin: 1.5em auto;
 }
+
 .columns p.inline-block {
    display: inline-block;
    margin: 0;
 }
 
-@media (min-width: 53em) {
+@media (min-width: 55em) {
    .columns {
       -webkit-column-count: 2;
       -webkit-column-gap: 1.5em;
@@ -775,8 +911,47 @@
    .columns > *:last-child { margin-bottom: 0; }
 }
 
+/* For metadata or footnotes at the end of articles. */
+.infobox {
+    font-size: .9em;
+    line-height: 1.3em;
+    margin: 2.5em 0 0;  
+}
+.infobox h3 {
+    font-size: 1.2em;
+    margin-top: 0;
+}
+.infobox p {
+    margin: .3em 0 0;
+}
+.infobox hr {
+    display: block;
+    width: 15em; max-width: 100%;
+    height: 1px;
+    background: #999;
+    border: none;
+    margin: 0 0 1em 0;
+}
+
+/* For translators notes */
+.translators-notes {
+   clear: left;
+   line-height: 1.5em;
+   margin-top: 2em;
+}
+.translators-notes hr {
+   height: 1px;
+   margin: 1.7em 0 1.2em;
+   border: none;
+}
+.translators-notes ol li { margin: .5em 1.1em; }
+
+div.translators-notes h3 { font-size: 1.2em; }
+
 
-/*** MISSION STATEMENT ***/
+/*******************************/
+/*  MISSION STATEMENT & FOOTER */
+/*******************************/
 
 #mission-statement {
    clear: both;
@@ -807,9 +982,6 @@
    margin: 1em 1.5em 0; 
 }
 
-
-/*** FOOTER ***/
-
 #footer {
    font-size: .9em;
    padding: 1.5em 3%;
@@ -827,99 +999,14 @@
 
 
 
/******************************************************************************/
-/*                               NAVIGATION LAYOUT                            
*/
-/******************************************************************************/
-
-
-/*** BREADCRUMB ***/
-
-.edu-breadcrumb {
-   font-size: .9em;
-   font-weight: bold;
-   padding-top: .8em;
-   margin-top: 0;
-}
-.article .edu-breadcrumb { font-size: .8em; }
-
-
-/*** NAVIGATION BARS ***/
-
-#navigation ul, #fsf-links ul {
-   margin: 0;
-}
-ul#edu-navigation {
-   margin: 0 -3.2%;
-}
-
-/* line-height is defined here for NetSurf 1.2.
-   No effect in NetSurf 2.9 or Firefox. */
-#navigation ul, #fsf-links ul, ul#edu-navigation {
-   font-size: 0.9em;
-   line-height: 2em;
-   font-weight: bold;
-   padding: 0 2.5%;
-}
-#navigation li, ul#edu-navigation li, #fsf-links li {
-   white-space: nowrap;
-   display: inline;
-   display: inline-block;
-   line-height: 2em;
-   padding: 2px;
-   margin: 0;
-}
-li#more-links {
-   float: right;
-   margin-left: 1.7em;
-}
-
- /* For Firefox (can't set line-height when "a" is displayed inline) */
-#navigation a, ul#edu-navigation a, #fsf-links a {
-   display: inline-block;
-   line-height: 2em;
-   padding: 0 .4em;
-   margin: 0;
-}
-
-@media (min-width: 60em) {
-   #navigation, ul#edu-navigation, #fsf-links {
-      text-align: center;
-   }
-   li#more-links {
-      float: none;
-   }
-}
-
-
-/*** BACK-TO-TOP ***/
-
-#back-to-top {
-   float: right;
-/* For NetSurf 1.2, and maybe a few other browsers. */
-   margin: .25em 1em 0;
-}
-/* For standard browsers. */
-@media (min-width: 0) {
-   #back-to-top { margin-right: 3%; }
-}
-#back-to-top a {
-   display: inline-block;
-   line-height: 1.2em;
-   padding: 0 .5em .2em;
-}  
-#back-to-top a span { display: none; }
-
-
-
-/******************************************************************************/
 /*                                   FONT FAMILY                              
*/
 
/******************************************************************************/
 
 
-a[href] { font-family: sans-serif }
+a[href] { font-family: sans-serif; }
 
-#toplinks, #toplinks a, form.header input[type="submit"],
- #translations, #translations a, #header, #header a,
- #navigation a, #edu-navigation a, #fsf-links a {
+#toplinks, #toplinks a, #header, #header a,
+#edu-navigation a, #fsf-links a {
     font-family: "FreeSans", sans-serif;
 }
 
@@ -980,25 +1067,36 @@
    box-shadow: 0 0 5px 5px #bbb;
 }
 
-#searcher {
-   background: #f5f5f5;
+#header { background: white; /* #f5f5f5; */ }
+
+#toplinks {
+   background: #eee;
 }
-#translations {
-   color: #a42e2b;
-   background: #f5f5f5;
+#languages {
+   background: #f5f5f5; /* white; */
+   border-top: .1em solid #bbb;
+}
+@media (min-width: 87em) {
+   #languages {
+      border: .1em solid #999;
+      border-top: 3px solid #a42e2b;
+      padding: 1em;
+   }
 }
 
+#languages h3, #translations { color: #a42e2b; }
+
 #mission-statement {
    background: white;
 }
 #footer {
    color: #333;
-   background: #f7f6f4;
-   border-top: .1em solid #d9d8d3;
+   background: #f7f7f7;
+   border-top: .1em solid #ddd;
 }
 
 
-/*** HEADERS ***/
+/*** <h2> & <h3> HEADERS ***/
 
 /* The default color is too dark for large text in bold font. */
 h3, h4 { color: #333; }
@@ -1059,7 +1157,7 @@
 }
 
 
-/*** SPECIAL TEXT ***/
+/*** EMPHASIZED TEXT, NOTES, etc. ***/
 
 .highlight-para, .highlight { background: #fff5d4; }
 span.highlight { background: #fff1c0; }
@@ -1084,25 +1182,9 @@
     border: .2em solid #fc7;
 }
 
-/* Subsections of /education "Case Studies" */
-.edu-cases {
-   border-top: 3px ridge #3465a4;
-   border-bottom: 3px ridge #3465a4;
-}
-
-
-/* NOTES */
-
-.note, .edu-note p {
-   border: .15em solid #5c5;
-}
+.note, .edu-note p { border: .15em solid #5c5; }
 
-
-/*** TABLES OF CONTENTS ***/
-
-.summary, .toc {
-   background: #f5f5f5;
-}
+.summary, .toc { background: #f5f5f5; }
 
 
 /*** LINKS ***/
@@ -1113,7 +1195,7 @@
 }
 a[href]:visited {
    color: #004caa;
-   text-decoration: underline #bbb solid;
+   text-decoration: underline #ccc solid;
 }
 a[href]:link:hover, a[href]:visited:hover {
    color: #006400;
@@ -1123,30 +1205,31 @@
 
 /* Variants */
 
-#toplinks     a[href]:link, #toplinks     a[href]:visited,
-#translations a[href]:link, #translations a[href]:visited,
 #gnu-banner   a[href]:link, #gnu-banner   a[href]:visited {
    color: #333;
    text-decoration: none;
 }
+/*
 #gnu-banner a[href]:link strong, #gnu-banner a[href]:visited strong {
    color: #a42e2b;
 }
-
+*/
 #fsf-support { color: #555; }
 #fsf-support      a[href]:link, #fsf-support      a[href]:visited,
 .trans-disclaimer a[href]:link, .trans-disclaimer a[href]:visited {
    color: #555;
-   text-decoration: underline #bbb solid;
+   text-decoration: underline #ccc solid;
 }
 #fssbox              a[href]:link, #fssbox              a[href]:visited,
 .back                a[href]:link, .back                a[href]:visited,
-.anchor-reference-id a[href]:link, .anchor-reference-id a[href]:visited {
+.anchor-reference-id a[href]:link, .anchor-reference-id a[href]:visited,
+#set-language        a[href]:link, #set-language        a[href]:visited,
+#translations        a[href]:link, #translations        a[href]:visited {
    color: #333;
-   text-decoration: underline #bbb solid;
+   text-decoration: underline #ccc solid;
 }
 
-#toplinks            a[href]:link:hover, #toplinks            
a[href]:visited:hover,
+#set-language        a[href]:link:hover, #set-language        
a[href]:visited:hover,
 #translations        a[href]:link:hover, #translations        
a[href]:visited:hover,
 #fsf-support         a[href]:link:hover, #fsf-support         
a[href]:visited:hover,
 .trans-disclaimer    a[href]:link:hover, .trans-disclaimer    
a[href]:visited:hover,
@@ -1157,10 +1240,10 @@
    text-decoration: underline #006400 dotted;
 }
 
-.edu-breadcrumb a[href]:link,        .edu-breadcrumb a[href]:visited {
+#breadcrumb a[href]:link, .breadcrumb a[href]:visited {
    text-decoration: none;
 }
-.edu-breadcrumb a[href]:link:hover,  .edu-breadcrumb a[href]:visited:hover {
+#breadcrumb a[href]:link:hover, .breadcrumb a[href]:visited:hover {
    text-decoration: underline #006400 dotted;
 }
 
@@ -1173,9 +1256,6 @@
 #join-fsf a[href]:link:hover, #join-fsf a[href]:visited:hover {
    text-decoration: none;
 }
-.button a {
-   border: .1em solid #999; /* default */
-}
 
 #join-fsf             a[href]:link, #join-fsf             a[href]:visited,
 #support-the-fsf a.join[href]:link, #support-the-fsf a.join[href]:visited {
@@ -1211,6 +1291,12 @@
    background: #e7f2e2;
 }
 
+.switch img:hover {
+   opacity: 0.5;
+   filter: alpha(opacity=50); /* For IE8 and earlier */
+   cursor: pointer;
+}
+
 
 /*** FORM INPUTS ***/
 
@@ -1256,8 +1342,8 @@
    text-decoration: none;
 }
 #navigation       { background: #a42e2b; }
-ul#edu-navigation { background: #eeedeb; }
-#fsf-links        { background: #d9d8d3; }
+ul#edu-navigation { background: #eee; }
+#fsf-links        { background: #d4d4d4; }
 
 #navigation a          { color: white; }
 ul#edu-navigation a,

Index: education.css
===================================================================
RCS file: /webcvs/www/www/server/staging/education.css,v
retrieving revision 1.21
retrieving revision 1.22
diff -u -b -r1.21 -r1.22
--- education.css       1 Jan 2020 16:04:55 -0000       1.21
+++ education.css       15 Jan 2020 19:25:46 -0000      1.22
@@ -2,74 +2,6 @@
 created November 27, 2019.
 This file is in the public domain. */
 
-#fundraiser { display: none; }
-
-/***********/
-/*  Style  */
-/***********/
-
-#header {
-    border-bottom: 3px solid transparent;
-}
-@media (max-width: 28em) {
-    #header { border-color: #a42e2b; }
-}
-#toplinks {
-    background: #eee;
-}
-
-#languages, #translations p, #set-language {
-    background: #f3f3f3;
-}
-#toplinks #join-fsf a:hover {
-    text-decoration: none;
-}
-#toplinks #fssbox {
-    font-weight: normal;
-}
-.switch img:hover {
-    opacity: 0.5;
-    filter: alpha(opacity=50); /* For IE8 and earlier */
-    cursor: pointer;
-}
-span.lang-abbr {
-    color: #a42e2b;
-}
-
-#languages a[href]:link, #languages a[href]:visited {
-   color: #333;
-   text-decoration: none;
-}
-#languages a[href]:link:hover, #languages a[href]:visited:hover {
-   color: #006400;
-   text-decoration: underline #006400 dotted;
-}
-
-#navlinks {
-    background: #f7f7f7;
-    border-right: .1em solid #ddd;
-}
-
-.menu a, #TOC a, #navlinks a {
-    background: #f3f3f3;
-}
-.menu a[href], .menu a[href],:hover,
-#TOC a[href], #TOC a[href]:hover,
-#navlinks a[href], #navlinks a[href]:hover {
-    text-decoration: none;
-}
-#navlinks li.current > a {
-    background: #e6e6e6;
-    font-style: italic;
-}
-#breadcrumb a[href]:link, .breadcrumb a[href]:visited {
-   text-decoration: none;
-}
-#breadcrumb a[href]:link:hover, .breadcrumb a[href]:visited:hover {
-   text-decoration: underline #006400 dotted;
-}
-
-
 /***********************************************/
 /*  Page navigation for CSS3-unaware browsers  */
 /***********************************************/
@@ -112,15 +44,6 @@
     border: 1px solid #d9d8d3;
 }
 
-/* Breadcrumb */
-
-#breadcrumb {
-    line-height: 1.7em;
-    font-size: 1.0rem;
-    padding: .6em 0 0;
-    margin: 0;
-}
-
 /* Section menu */
 
 #navlinks {
@@ -163,21 +86,15 @@
 /*  Media queries for page navigation  */
 /***************************************/
 
-@media (min-width: 0) {
-    #main-text, #main-text ~ .translators-notes {
-        max-width: 50rem;
-        margin: auto;
-    }
-}
+@media (min-width: 55em) {
+    #content { position: relative }
 
-@media (min-width: 60em) {
     #navlinks {
         display: inline-block;
         width: 14rem;
         height: 100%;
         position: absolute;
-        padding-top: 3px;
-        top: -3px;
+        top: 0;
         left: 0;
         overflow: auto;
         padding-bottom: 3em;
@@ -188,6 +105,29 @@
 }
 
 
+/***************************/
+/*  Page navigation style  */
+/***************************/
+
+#navlinks {
+    background: white; /* #f7f7f7; */
+    border-right: .1em solid #ddd;
+}
+
+.menu a, #TOC a, #navlinks a {
+    background: #f3f3f3;
+}
+.menu a[href], .menu a[href],:hover,
+#TOC a[href], #TOC a[href]:hover,
+#navlinks a[href], #navlinks a[href]:hover {
+    text-decoration: none;
+}
+#navlinks li.current > a {
+    background: #e6e6e6;
+    font-style: italic;
+}
+
+
 /*****************************/
 /*  For the Malware section  */
 /*****************************/
@@ -204,325 +144,34 @@
 }
 
 
-/**********************************************/
-/*  Header layout for CSS3-unaware browsers.  */
-/**********************************************/
-
-body {
-    position: relative;
-}
-#content {
-    position: relative;
-}
-#toplinks {
-    width: 94%;
-    padding: 0 3%;
-}
-#skip {
-    display: none;
-}
-
-/* FSF stuff */
-
-#toplinks {
-    font-size: .9em;
-    margin: 0;
-    padding: 0;
-}
-
-#fssbox {
-    display: none;
-    float: none;
-    font-size: 1em;
-    margin: 0 1.5em .5em 0;
-}
-#fss-link {
-    display: inline-block;
-    vertical-align: middle;
-    font-size: 1em;
-    line-height: 1.1em;
-    padding: 0;
-    margin: 0;
-}
-#fss-link a {
-    font-size: 1em;
-    margin: 0;
-}
-#fssbox form {
-    display: inline-block;
-    margin: .1em 0;
-}
-#join-fsf {
-    float: right;
-    margin: .1em 0 .1em 2em;
-}
-#join-fsf a {
-    font-size: 1em;
-    padding: .25em .4em;
-    margin: 0;
-}
-
-/* GNU stuff */
-
-#header {
-    text-align: center;
-    padding: 0;
-}
-p#gnu-banner {
-    display: inline-block;
-    text-align: center;
-    line-height: 1em;
-    margin: .1em 3% .4em;
-    padding: 0;
-}
-
-/* Languages */
+/*******************************/
+/*  For the Education section  */
+/*******************************/
 
-#languages {
-    display: block;
-    text-align: left;
-    margin: 0 auto;
+.edu-breadcrumb {
+   line-height: 1.7em;
     font-size: .9em;
-    padding: 0 3%;
-}
-#languages p#set-language {
-    float: right;
-    font-weight: bold;
-    padding: 0 0 0 1em;
-    margin: .3em 0 0;
-}
-#languages p {
-    display: inline-block;
-    margin: .4em 0;
-}
-#translations {
-    display:  inline-block;
-    font-size: 1em;
-    padding: 0;
-    border: none;
-}
-#translations p {
-    display: inline-block;
-    font-size: 1em;
-    padding: .3em 0;
-    margin: 0;
-}
-#translations p > span {
-    display:  inline-block;
-    vertical-align: middle;
-    font-size: 1em;
-    line-height: 1.1em;
-    width: 9.5em;
-    white-space: nowrap;
-    padding: 0;
-    margin: .1em 0;
-}
-#translations p span a {
-    white-space: normal;
-    font-size: 1em;
-    line-height: 1.1em;
-    padding: 0;
+   padding: .6em 0 0;
     margin: 0;
 }
-#translations span.original a {
-    font-size: 1em;
-    font-weight: bold;
-}
-#translations span.lang-abbr {
-    font-size: 1em;
-}
-
-/* Main navbar */
-
-#navigation {
-    clear: both;
-    position: relative;
-}
-#navigation ul {
-    text-align: left;
-}
-
-/* Toggle switches to display navbar and languages,
-   and searcher button. */
-
-#switches {
-    display: inline-block;
-    clear: right;
-    float: right;
-    max-width: 6em;
-    padding: .3em 1em .3em 0;
-}
-.switch {
-    vertical-align: middle;
-    height: 2em;
-    padding: 0;
-    margin: 0 .3em;
-}
-.switch img {
-    display: inline-block;
-    vertical-align: middle;
-    height: 100%;
-}
-#navbar-button {
-    height: 1.4em;
-    padding: .3em 0;
-}
-#searcher-button {
-    display: inline-block;
-    height: 1.8em;
-    padding: .1em 0;
-}
-
-#searcher, #navbar-input, #language-input, #outdated-input,
- #navbar-button, #language-button, #outdated-button {
-    display: none;
+.edu-breadcrumb a[href]:link, .edu-breadcrumb a[href]:visited {
+   text-decoration: none;
 }
-
-
-/******************************/
-/*  Media queries for header  */
-/******************************/
-
-@media (min-width: 0) {
-    /* Reduce font size below 40em. */
-    html {
-        font-size: .9em;
-    }
-    #header {
-        border-color: ;
-    }
-    #gnu-banner .hide {
-        display: none;
-    }
-    #language-button {
-        display: inline-block;
-    }
-    #navbar-button {
-        display: none;
-    }
-    #languages {
-        display: none;
-    }
-    #language-input:checked ~ #languages {
-        display: block;
-    }
-    #translations p span, #translations p span.original {
-        padding: .1em 0;
-    }
-    #translations p span a {
-        padding: .1em .3em;
-    }
-    #navigation {
-        display: none;
-    }
-    #navbar-button {
-        display: inline-block;
-    }
-    #navbar-input:checked ~ #navigation {
-        display: block;
-    }
-    #edu-navigation {
-        display: none;
-    }
-    #outdated-button {
-        display: inline-block;
-        float: right;
-    }
-    #outdated {
-        display: none;
-    }
-    #outdated-input:checked ~ #outdated {
-        display: block;
-    }
+.edu-breadcrumb a[href]:link:hover, .edu-breadcrumb a[href]:visited:hover {
+   text-decoration: underline #006400 dotted;
 }
 
-@media (min-width: 28em) {
-    #navigation, #edu-navigation {
-        display: block;
-    }
-    #navbar-button {
-        display: none;
-    }
-    p#gnu-banner {
-        margin: .2em 3% .5em;
-    }
+/* Subsections of /education "Case Studies" */
+.edu-cases {
+   width: 52em; max-width: 100%;
+   padding: 0 0 .8em;
+   margin: 2em auto;
+   border-top: 3px ridge #3465a4;
+   border-bottom: 3px ridge #3465a4;
 }
-@media (min-width: 45em) {
-    html {
-        font-size: 1em;
-    }
-    #fsf-support {
-        display: inline;
-        font-size: .44em;
-        margin: .3em 0 0;
-    }
-    #gnu-banner .hide {
-        display: inline;
-    }
-    #gnu-banner img {
-        top: .3em;
-    }
-    p#gnu-banner {
-        float: none;
-        margin: .1em 3%;
-    }
-    #navigation {
-        display: block;
-    }
-    #outdated-button {
-        display: none;
-    }
-    #outdated {
-        display: block;
-    }
+.edu-cases ul, .edu-cases ol {
+   margin: 1em 4%;
 }
-
-@media (min-width: 55em) {
-    #toplinks {
-       padding: .2em 3%;
-    }
-    #join-fsf {
-        display: block;
-    }
-    #fssbox {
-        display: inline;
-    }
-    #switches {
-        padding: .3em 3% .3em 0;
-    }
-    #navigation ul, ul#edu-navigation {
-        text-align: center;
-    }
-
-@media (min-width: 77.5em) {
-    body {
-        margin-left: .5em;
-    }
-    .inner {
-        overflow: visible;
-    }
-@media (min-width: 86em) {
-    #languages {
-        display: block;
-        width: 11em;
-        position: absolute;
-        top: -3px; left: 100%;
-        border: .1em solid #999;
-        border-top: 3px solid #a42e2b;
-        padding: 1em;
-    }
-    #language-button {
-        display: none;
-    }
-    #translations p span, #translations p span.original {
-        padding: .2em 0;
-    }
-    #translations p span a {
-        padding: .2em .3em;
-    }
-    #languages p#set-language {
-        float: none;
-        text-align: left;
-        padding: 0;
-    }
+.edu-cases h3 {
+   font-size: 1.3em;
 }

Index: edu-software.html
===================================================================
RCS file: /webcvs/www/www/server/staging/edu-software.html,v
retrieving revision 1.13
retrieving revision 1.14
diff -u -b -r1.13 -r1.14
--- edu-software.html   1 Jan 2020 16:25:54 -0000       1.13
+++ edu-software.html   15 Jan 2020 19:25:46 -0000      1.14
@@ -18,18 +18,20 @@
 <!--
 -->
 </style>
+<!--#include virtual="/server/staging/edu-software.translist" -->
 <!--#include virtual="/server/staging/banner.html" -->
 <!--#include virtual="/server/staging/education-menu.html" -->
 <div id="main-text" class="article">
 <p id="breadcrumb">
 <a href="/education/education.html">Education</a> &rarr; 
-<a href="/education/edu-resources.html">Educational Resources</a> &rarr;
+<a href="/education/edu-contents.html">Contents</a> &rarr;
+<a href="/education/edu-resources.html">Resources</a> &rarr;
 Educational Free Software
 </p>
 
 <label for="outdated-input"  id="outdated-button" class="switch">
  <img id="outdated-icon"
-      src="/server/staging/layout/translation-warn.png"
+      src="/server/staging/layout/flags-warn.png"
       alt="&nbsp;[Outdated translation]&nbsp;"
       title="Outdated translation" />
 </label>
@@ -38,7 +40,7 @@
 <div id="outdated">
 <p>
 This translation may not reflect the changes made since
-2020-13-32 in the <a href="/education/edu-software.html.en">
+2020-13-32 in the <a href="/education/edu-software.en.html">
 English original</a>. Please see the <a
 href="/server/standards/README.translations.html">Translations README</a>
 for information on maintaining translations of this article.</p>
@@ -123,7 +125,7 @@
 
 </div>
 </div><!-- for id="content", starts in the include above -->
-<!--#include virtual="/server/staging/layout/footer-text.html" -->
+<!--#include virtual="/server/staging/nav-bar/test9/footer-text.html" -->
 <div id="footer">
 <div class="unprintable">
 
@@ -162,7 +164,7 @@
 
 <p class="unprintable">Updated:
 <!-- timestamp start -->
-$Date: 2020/01/01 16:25:54 $
+$Date: 2020/01/15 19:25:46 $
 <!-- timestamp end -->
 </p>
 </div>

Index: home.html
===================================================================
RCS file: /webcvs/www/www/server/staging/home.html,v
retrieving revision 1.20
retrieving revision 1.21
diff -u -b -r1.20 -r1.21
--- home.html   1 Jan 2020 05:32:45 -0000       1.20
+++ home.html   15 Jan 2020 19:25:46 -0000      1.21
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en">
+<html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="ja" lang="ja">
 <head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <link rev="made" href="mailto:address@hidden"; />
@@ -502,7 +502,7 @@
 
 <div style="clear:both"></div>
 </div><!-- for id="content", starts in the include above -->
-<!--#include virtual="/server/footer.html" -->
+<!--#include virtual="/server/staging/nav-bar/test9/footer-text.html" -->
 
 <p id="sisters">The <a href="http://www.fsf.org/";>FSF</a> also has sister
 organizations in <a href="http://www.fsfe.org";>Europe</a>, <a
@@ -568,7 +568,7 @@
 
 <p class="unprintable">Updated:
 <!-- timestamp start -->
-$Date: 2020/01/01 05:32:45 $
+$Date: 2020/01/15 19:25:46 $
 <!-- timestamp end -->
 </p>
 </div>

Index: layout/banner.html
===================================================================
RCS file: /webcvs/www/www/server/staging/layout/banner.html,v
retrieving revision 1.3
retrieving revision 1.4
diff -u -b -r1.3 -r1.4
--- layout/banner.html  25 Dec 2019 18:09:10 -0000      1.3
+++ layout/banner.html  15 Jan 2020 19:25:46 -0000      1.4
@@ -3,7 +3,7 @@
 </head>
 <body>
 <div class="inner">
-<!--#include virtual="/server/staging/body-include-1.html" -->
+<!--#include virtual="/server/staging/layout/body-include-1.html" -->
 <!--#include virtual="/server/staging/layout/body-include-2.html" -->
 <div id="content">
 <!-- end of server/banner.html -->

Index: layout/body-include-1.html
===================================================================
RCS file: /webcvs/www/www/server/staging/layout/body-include-1.html,v
retrieving revision 1.3
retrieving revision 1.4
diff -u -b -r1.3 -r1.4
--- layout/body-include-1.html  31 Dec 2019 11:58:03 -0000      1.3
+++ layout/body-include-1.html  15 Jan 2020 19:25:46 -0000      1.4
@@ -5,14 +5,35 @@
  --><!--#set var="cb" value="$1"
  --><!--#endif -->
 <!--#set var="language_selector"
- value='<a title="Set your preferred language for this session"
- href="/server/select-language.html?callback=$cb" rel="nofollow">' -->
+ value='<a href="/server/select-language.html?callback=$cb" rel="nofollow">' 
-->
 <!--#set var="closing_anchor" value='</a>' -->
 <!--#set var="MARK_START" value=" <span class='no-display'>=</span> " -->
 <!--#set var="MARK_END" value=" <span class='no-display'>=</span> " -->
 
 <div id="toplinks">
- <span id="skip"><a title="Skip to main text"
- href="#content">Skip to main text</a>&nbsp; </span>
+<a href="#content"><b>Skip to main text</b></a>
+
+<p id="join-fsf" class="button">
+<a href="https://www.fsf.org/associate/support_freedom?referrer=4052";>¡Únase 
a la FSF!</a></p>
+
+<div id="fssbox">
+<p>Boletín «<cite><a href=\"//www.fsf.org/fss\">Free Software 
Supporter</a></"
+"cite>» (también en español):</p>
+<form action="https://my.fsf.org/civicrm/profile/create?reset=1&amp;gid=31";
+ method="post" class="header">
+ <div>
+  <input name="postURL" type="hidden" value="" />
+  <input type="hidden" name="group[25]" value="1" />
+  <input name="cancelURL" type="hidden" 
value="https://crm.fsf.org/civicrm/profile?reset=1&amp;gid=31"; />
+  <input name="_qf_default" type="hidden" value="Edit:cancel" />
+ </div>
+ <p>
+  <input type="text" id="frmEmail" name="email-Primary" size="18" 
maxlength="80"
+         value="email address" onfocus="this.value=''"/>
+  <input type="submit" name="_qf_Edit_next" value="Suscribirse" />
+ </p>
+</form>
+</div>
+<div stylr="clear: both"></div>
 </div>
 <!-- end of server/body-include-1.html -->

Index: layout/body-include-2.html
===================================================================
RCS file: /webcvs/www/www/server/staging/layout/body-include-2.html,v
retrieving revision 1.10
retrieving revision 1.11
diff -u -b -r1.10 -r1.11
--- layout/body-include-2.html  31 Dec 2019 11:58:03 -0000      1.10
+++ layout/body-include-2.html  15 Jan 2020 19:25:46 -0000      1.11
@@ -1,8 +1,14 @@
 <!-- start of server/body-include-2 -->
 <div id="header">
 
-<span id="switches">
-<span id="searcher-button" class="switch">
+<div id="switches">
+<label for="navbar-input"  id="navbar-button" class="switch">
+ <img id="navbar-icon" src="/server/staging/layout/menu.png"
+      alt="[Toggle main navigation bar]&nbsp;"
+      title="Toggle main navigation bar" />
+</label>
+
+<span id="search-button" class="switch">
  <a href="//www.gnu.org/cgi-bin/estseek.cgi">
   <img id="search-icon"
        src="/server/staging/layout/search.png"
@@ -10,156 +16,117 @@
        title="Search www.gnu.org" /></a>&nbsp;
 </span>
 
-<label for="language-input"  id="language-button" class="switch">
+<!--#if expr="$TRANSLATION_LIST = /<span dir=\"ltr\">/" --><label
+ for="language-input"  id="language-button" class="switch">
  <img id="language-icon"
-      src="/server/staging/layout/translation-opt.1.png"
+      src="/server/staging/layout/flags.1.png"
       alt="&nbsp;[Languages - Toggle translation list]&nbsp;"
       title="Languages - Toggle translation list" />
-</label>
-
-<label for="navbar-input"  id="navbar-button" class="switch">
- <img id="navbar-icon" src="/server/staging/layout/menu.png"
-      alt="[Toggle main navigation bar]&nbsp;"
-      title="Toggle main navigation bar" />
-</label>
-</span>
-
-<input type="checkbox" id="language-input" />
-<input type="checkbox" id="navbar-input" />
-
-<!-- For text-based browsers -->
-<span style="display: none">&nbsp;(The last 2 buttons and the checkboxes
-are inactive without CSS.)</span>
+</label><!--#endif -->
+</div>
 
 <p id="gnu-banner">
 <a href="/">
 <img src="/graphics/heckert_gnu.transp.small.png"
-     alt=" [A GNU head] " /><span id="os" class="hide">El
-sistema operativo</span> <strong>GNU</strong></a><br />
+     alt=" [A GNU head] " /><span class="hide">El sistema
+operativo </span><strong>GNU</strong></a><br />
 <span id="fsf-support" class="hide">Patrocinado por la <a
-href=\"#mission-statement\">Free Software Foundation</a></span>
+href="#mission-statement">Free Software Foundation</a></span>
 </p><!-- /gnu-banner -->
 
-<!--
-<div id="searcher">
- <form method="get" action="//www.gnu.org/cgi-bin/estseek.cgi" class="header">
-  <div>
-  <input name="phrase" id="phrase" type="text" size="18" accesskey="s"
-         value="Why GNU/Linux?" onfocus="this.value=''" />
-  <input type="submit" value="Search" />
-  </div>
- </form>
 </div>
--->
-<div style="clear: both"></div>
 
+</div><!-- /#header -->
+
+<!--#if expr="$TRANSLATION_LIST = /<span dir=\"ltr\">/" -->
+<input  type="checkbox" id="language-input" />
 <div id="languages">
-<p id="set-language">
+<p id="set-language" title="Set your preferred language on gnu.org">
  <span class="gnun-split"></span><!--#echo
  encoding="none" var="language_selector" -->Set
  language<span class="gnun-split"></span><!--#echo
- encoding="none" var="closing_anchor" --></p>
+ encoding="none" var="closing_anchor" -->
+</p>
 
-<!--#if expr="$TRANSLATION_LIST" -->
 <!--#echo encoding="none" var="TRANSLATION_LIST" -->
-<!--#elif expr="$INITIAL_TRANSLATIONS_LIST = included" -->
-<!-- if initial translation list isn't included before banner.html,
-     then the file may use an old boilerplate that contains
-     div#translations in its body, and we mustn't duplicate it here. -->
-<!--#include virtual="/server/gnun/initial-translations-list.html" -->
-<!--#endif -->
 </div>
+</div><!--#endif -->
 
-<div style="clear: both"></div>
-
+<input type="checkbox" id="navbar-input" />
 <div id="navigation">
  <ul>
-<!--#set var="MARK_START" value=" <span class='no-display'>=</span> " -->
-<!--#set var="MARK_END" value=" <span class='no-display'>=</span> " -->
 <!--#if expr="$REQUEST_URI = /^\/gnu\//" -->
   <li id="tabAboutGNU" class="active">
     <!--#echo encoding="none" var="MARK_START" -->
-    <a href="/gnu/gnu.html">À&nbsp;PROPOS</a>
+    <a href="/gnu/gnu.html">ABOUT&nbsp;GNU</a>
     <span class="gnun-split"></span>
     <!--#echo encoding="none" var="MARK_END" -->
   </li>
 <!--#else -->
-   <li id="tabAboutGNU"><a href="/gnu/gnu.html">À&nbsp;PROPOS</a></li>
+   <li id="tabAboutGNU"><a href="/gnu/gnu.html">ABOUT&nbsp;GNU</a></li>
 <!--#endif -->
 <!--#if expr="$REQUEST_URI = /^\/philosophy\//" -->
   <li id="tabPhilosophy" class="active">
     <!--#echo encoding="none" var="MARK_START" -->
-    <a href="/philosophy/philosophy.html">PHILOSOPHIE</a>
+    <a href="/philosophy/philosophy.html">PHILOSOPHY</a>
     <span class="gnun-split"></span>
     <!--#echo encoding="none" var="MARK_END" -->
   </li>
 <!--#else -->
-  <li id="tabPhilosophy"><a 
href="/philosophy/philosophy.html">PHILOSOPHIE</a></li>
+  <li id="tabPhilosophy"><a 
href="/philosophy/philosophy.html">PHILOSOPHY</a></li>
 <!--#endif -->
 <!--#if expr="$REQUEST_URI = /^\/licenses\//" -->
   <li id="tabLicenses" class="active">
     <!--#echo encoding="none" var="MARK_START" -->
-    <a href="/licenses/licenses.html">LICENCES</a>
+    <a href="/licenses/licenses.html">LICENSES</a>
     <span class="gnun-split"></span>
     <!--#echo encoding="none" var="MARK_END" -->
   </li>
 <!--#else -->
-  <li id="tabLicenses"><a href="/licenses/licenses.html">LICENCES</a></li>
+  <li id="tabLicenses"><a href="/licenses/licenses.html">LICENSES</a></li>
 <!--#endif -->
 <!--#if expr="$REQUEST_URI = /edu-/" -->
   <li id="tabEducation" class="active">
     <!--#echo encoding="none" var="MARK_START" -->
-    <a href="/education/education.html">ÉDUCATION</a>
+    <a href="/education/education.html">EDUCATION</a>
     <span class="gnun-split"></span>
     <!--#echo encoding="none" var="MARK_END" -->
   </li>
 <!--#else -->
-  <li id="tabEducation"><a href="/education/education.html">ÉDUCATION</a></li>
+  <li id="tabEducation"><a href="/education/education.html">EDUCATION</a></li>
 <!--#endif -->
 <!--#if expr="$REQUEST_URI = /^\/software\//" -->
   <li id="tabSoftware" class="active">
     <!--#echo encoding="none" var="MARK_START" -->
-    <a href="/software/software.html">LOGICIELS</a>
+    <a href="/software/software.html">SOFTWARE</a>
     <span class="gnun-split"></span>
     <!--#echo encoding="none" var="MARK_END" -->
   </li>
 <!--#else -->
-  <li id="tabSoftware"><a href="/software/software.html">LOGICIELS</a></li>
+  <li id="tabSoftware"><a href="/software/software.html">SOFTWARE</a></li>
 <!--#endif -->
 <!--#if expr="$REQUEST_URI = /^\/(doc|manual)\//" -->
   <li id="tabDoc" class="active">
     <!--#echo encoding="none" var="MARK_START" -->
-    <a href="/doc/doc.html">DOC</a>
-    <span class="gnun-split"></span>
-    <!--#echo encoding="none" var="MARK_END" -->
-  </li>
-<!--#else -->
-  <li id="tabDoc"><a href="/doc/doc.html">DOC</a></li>
-<!--#endif -->
-<!--#if expr="$REQUEST_URI = /^\/proprietary\//" -->
-  <li id="tabMalware" class="active">
-    <!--#echo encoding="none" var="MARK_START" -->
-    <a href="/proprietary/proprietary.html">MALICIELS</a>
+    <a href="/doc/doc.html">DOCS</a>
     <span class="gnun-split"></span>
     <!--#echo encoding="none" var="MARK_END" -->
   </li>
 <!--#else -->
-  <li id="tabMalware"><a href="/proprietary/proprietary.html">MALICIELS</a>
-</li>
+  <li id="tabDoc"><a href="/doc/doc.html">DOCS</a></li>
 <!--#endif -->
 <!--#if expr="$REQUEST_URI = /^\/help\//" -->
   <li id="tabHelp" class="active">
     <!--#echo encoding="none" var="MARK_START" -->
-    <a href="/help/help.html">AIDEZ&nbsp;GNU</a>
+    <a href="/help/help.html">HELP&nbsp;GNU</a>
     <span class="gnun-split"></span>
     <!--#echo encoding="none" var="MARK_END" -->
   </li>
 <!--#else -->
-  <li id="tabHelp"><a href="/help/help.html">AIDEZ&nbsp;GNU</a></li>
+  <li id="tabHelp"><a href="/help/help.html">HELP&nbsp;GNU</a></li>
 <!--#endif -->
-  <li id="more-links"><a href="#fsf-links">Suite &#9660;</a></li>
+  <li id="more-links"><a href="#fsf-links">More &#9660;</a></li>
  </ul>
 <div style="clear: both"></div>
 </div>
-</div><!-- /header -->
 <!-- end of server/body-include-2 -->

Index: layout/layout.css
===================================================================
RCS file: /webcvs/www/www/server/staging/layout/layout.css,v
retrieving revision 1.9
retrieving revision 1.10
diff -u -b -r1.9 -r1.10
--- layout/layout.css   10 Jan 2019 21:29:44 -0000      1.9
+++ layout/layout.css   15 Jan 2020 19:25:46 -0000      1.10
@@ -34,176 +34,111 @@
 */
 
 
-/*** COLORS ***/
+/* PAGE STRUCTURE
 
-/*
-Text
-   black    hover on #555
-   #222     normal text
-   #333, #404040, #444: special items
-   #777     medium gray: hover special links, buttons & submit
-   white    #navigation
-
-   #004caa  blue: normal links, #fssbox submit
-   #100070  purplish blue: normal visited links, normal hover
-   blue     #urgent links
-
-   #b02500  #join-fsf
-   #a42e2b  red: GNU banner, #outdated
-   #850803  red: GNU links in bottom navbar  
-
-Backgrounds
-   #999     hr
-   #bbb     .column-limit
-   #d4d4d4  #fsf-links, #searcher
-   #e4e4e4  html
-   #eee     #edu-navigation, submit
-   #f3f3f3  .announcement gradient
-   #f5f5f5  #translations, #footer, .emph-box, .summary, .toc, .lyrics,
-            .listing, .announcement, code
-   white    body, .note, edu-note, submit, #backtotop
-
-   #a42e2b  red: #navigation
-
-   #ff3     yellow: #urgent
-
-   #fff1c0  light orange: span.highlight, table headers
-   #fff5d4  very light orange: .highlight-para, .highlight
-
-Borders
-   black, #111, #333, #666: tables
-   #777     hover buttons & submit
-   #999     #outdated 
-   #bbb     body, .subheader, #backtotop
-   #ccc     unfocused inputs, footer
-   #d4d4d4  #translations
-   #ddd     emph-box, lyrics
-
-   #3aa     .important
-   #3465a4  .edu-cases
-   #004caa  focused inputs, #fssbox submit
-   #6092d0  .note, edu-note
-
-   #a42e2b  active link in edu-navbar
-   #b02500  #join-fsf
-   #e74c3c  .big-section h3
-   #fc7     .announcement, .highlight-para
+From top to bottom:
+   #toplinks (skiplink, #fssbox, #join-fsf)     [body-include-1.html]
+   #header (#switches, #gnu-banner,
+     #languages, #navigation)                   [body-include-2.html]
+   (#edu-navigation in a few pages)             [<page>.html]
+   #content                                     [<page>.html]
+   #fsf-links                                   [footer-text.html]
+   #mission-statement                           [footer-text.html]
+   #footer                                      [<page>.html]
 */
 
-/*** Luminosity contrast ratio and color difference ***
-   source: http://juicystudio.com/services/luminositycontrastratio.php
-
-   Color1       Color 2       contrast       Color
-                               ratio      difference
-Black-gray
-   #000         white          21.3           765
-   #000         #ff3           19.6           561
-   #222         white          15.91          663
-   #333         white          12.63          612
-   #333         #eee           10.89          561
-   #404040      #d4d4d4         6.99          444
-   #555         white           7.46          510
-
-Red
-   #a42e2b      white           6.99          630
 
-Blue (urgent)
-   #00f         #ff3            8.02          714
-
-Blue links
-   #004caa     white            8.03          443
-   #004caa     #e4ffcc          7.45          365
-   #004caa     #fff1c0          7.11          366
-   #004caa     #f3f3f3          7.24          407
-   #004caa     #ccffcc          7.17          341
-   #004caa     #777             1.79          137
-   #004caa     #333             1.57          169
-   #004caa     black            2.61          322
+/* TABLE OF CONTENTS
 
-Purple links
-   #100070      white          16.72          653
-   #100070      #fff1c0        14.81          576
-   #100070      #ccffcc        14.92          551
-   #100070      #777            3.73          245
-   #100070      #333            1.32          163
-   #100070      black           1.26          112
-   #100070      #004caa         2.08          134
+   * Invariant (html, body, .inner, basic styles)
+   * Layout of building blocks (paragraphs, headers, lists, tables, separators,
+     forms, buttons & links, emphasized text, images)
+   * Layout of main divs
+     - Header & navigation for CSS3-unaware browsers
+     - CSS3 media queries for header & navigation (#navigation, 
#edu-navigation,
+       #fsf-links, #back-to-top)
+     - #content
+     - #mission-statement
+     - #footer
+   * Font family
+   * Color, background, border
 */
 
 
-/*** MAIN DIVS ***/
 
-/*
-From top to bottom:
-   #searcher + #toplinks             [body-include-1.html]
-   #translations                     [body-include-1.html]
-   #header (#gnu-banner, #fsf-frame) [body-include-2.html]
-   #navigation                       [body-include-2.html]
-   (#edu-navigation in a few pages)  [<page>.html]
-   #content                          [<page>.html]
-   #fsf-links                        [footer-text.html]
-   #mission-statement + #backtotop   [footer-text.html]
-   #footer                           [<page>.html]
-*/
+/*============================================================================*/
+/*                                   INVARIANT                                
*/
+/*============================================================================*/
+
 
 html, body {
    font-size: 1em;
    text-align: left;
    text-decoration: none;
-   color: #222;
 }
-html { background: #e4e4e4; }
 
 /* This specifies the basic width of our web pages.  Don't change it
    without discussion on www-discuss.  The magic 74.92 is for
    consistency with fsf.org.  */
 body {
-   max-width: 74.92em;
+   max-width: 74.92em;   /* About 1200px */
    margin: auto;
-   background-color: white;
-   border: .1em solid #bbb;
-   border-top: 1px solid transparent;
-   -moz-box-shadow: 0 0 5px 5px #bbb;
-   -webkit-box-shadow: 0 0 5px 5px #bbb;
-   -icab-box-shadow: 0 0 5px 5px #bbb;
-   -o-box-shadow: 0 0 5px 5px #bbb;
-   box-shadow: 0 0 5px 5px #bbb;
 }
 .inner { overflow: hidden; }
 
-#searcher {
-   font-family: "sans-serif", "FreeSans", sans-serif;
-   padding: .3em 3%;
-   background-color: #d4d4d4;
-}
-#translations {
-   font-family: "FreeSans", sans-serif;
-   padding: 0 3%;
-   background-color: #f5f5f5;
-}  
-#header {
-   font-family: "sans-serif", "FreeSans", sans-serif;
-   padding: 0 3%;
-}
-#content {
-   padding: 0 3%;
-   margin-bottom: 2.5em;
-}
-#mission-statement {
-   padding: 0 3%;
-}
-#footer {
-   padding: 1.5em 3%;
-   background-color: #f5f5f5;
+
+/*** BASIC STYLES ***/
+
+small { font-size: .9em; }
+strong { font-weight: bold; }
+em, cite { font-style: italic; }
+em i, em cite, cite i, cite em { font-style: normal; }
+acronym, abbr {
+   text-decoration: none;
+   border-bottom: 1px dotted #000;
+   cursor: help;
 }
 
+.italic { font-style: italic; }
+.italic em, .italic cite, .italic i { font-style: normal; }
+.center, .c { text-align: center; }
+.nocenter{ text-align: left; }
+.underline { text-decoration: underline; }
+.nounderline { text-decoration: none; }
+.small { font-size: .9em; }
+.big { font-size: 1.1em; }
+.inline-list li { display: inline }
+.no-bullet li { list-style: none; }
+.no-display { display: none; }
+
+/* Rarely used */
+del { text-decoration: line-through; }
+caption { margin-bottom: .5em; text-align: center; }
+sup { vertical-align: super; }
+sub { vertical-align: sub; }
+
+
 
-/*** BASIC ELEMENTS ***/
+/*============================================================================*/
+/*                           LAYOUT OF BUILDING BLOCKS                        
*/
+/*============================================================================*/
 
-/** Size and positioning **/
 
-p, pre, li, dt, dd { line-height: 1.5em; }
+/*** PARAGRAPHS ***/
+
+p, pre { line-height: 1.5em; }
 address { line-height: 1.3em; }
+blockquote {  margin: 1em 3%; }
+
+/* The top margin should be sufficient. The bottom margin is only useful
+   if the element that follows is an anonymous box. */
+p, pre, address { margin: 1em 0; }
+pre { padding-bottom: .3em; overflow: auto; }
+
+
+/*** <h*> HEADERS ***/
+
+h1, h2, h3, h4, h5, h6 { font-weight: bold; }
 
 h1 { font-size: 2.4em; margin: 1em   0 1.1em; }
 h2 { font-size: 2.0em; margin: 1em   0 1.1em; }
@@ -212,14 +147,58 @@
 h5 { font-size: 1.1em; margin: 1em   0  .91em; }
 h6 { margin: 1em 0; }
 
-/* The top margin should be sufficient. The bottom margin is only useful
-   if the following element is an anonymous box. */
-p, pre, table, address { margin: 1em 0; }
-pre { padding-bottom: .3em; overflow: auto; }
+/** Big section headers **/
+
+/* For browsers that don't support inline-block */
+.big-section {
+   clear: left;
+   float: left;
+}
+.big-section h3 {
+   display: inline-block;
+   font-size: 1.7em;
+   padding: .2em 0;
+   margin: 1em .3em .5em 0;
+}
+.big-subsection {
+   margin: 1.5em 0;
+}
+.big-subsection h4 {
+   display: inline;
+   font-size: 1.5em;
+   margin-right: .3em;
+}
+/* The next two statements adjust line spacing in Netsurf 1.2 */
+.big-subsection {
+   line-height: 2.0em;
+}
+.big-subsection h4 {
+   line-height: 1.2em;
+}
 
-ul, ol, blockquote {
-   margin: 1em 1.5%;
+/** Article headers **/
+
+.article h2 {
+    font-size: 1.7em;
+    margin: .8em 0;
+    padding: .2em .3em;
+    border-left: .7em solid #eee;
 }
+.article h3 { font-size: 1.4em; }
+.article h4 { font-size: 1.15em; }
+.article .big-section h3 { font-size: 1.6em; }
+.article .big-subsection h4 { font-size: 1.4em; }
+
+
+/*** LISTS ***/
+
+ol li { list-style: decimal outside; }
+ul li { list-style: square outside; }
+ul ul li, ol ul li { list-style: circle; }
+
+li, dt, dd { line-height: 1.5em; }
+ul, ol { margin: 1em 1.5%; }
+
 /* Lists of underlined links are difficult to read. The top margin
    gives a little more spacing between entries. */
 ol li { margin: 1em 0 0 1em; }
@@ -229,92 +208,85 @@
 }
 ul ul, ol ul, table ul { margin: 0 1.5%; }
 
+ul.blurbs li { margin-top: 1em; }
+ul.blurbs ul li, ul.blurbs ol li, ul.blurbs dl li {
+   margin-top: .5em;
+}
+
 /* Separate description lists from preceding text */
 dl { margin: 1.5em 0 0 0; }
 /* separate the "term" from subsequent "description" */
-dt { margin: 1em 0; }
+dt { font-weight: bold; margin: 1em 0; }
 /* separate the "description" from subsequent list item
    when the final <dd> child is an anonymous box */
 dl dd { margin: 1em 3% 1.5em 3%; }
 
-small { font-size: .9em; }
-
-/** Style **/
-
-h1, h2, h3, h4, h5, h6, strong, dt { font-weight: bold; }
-th { font-weight: bold; text-align: center; }
-th, td { border: 1px solid #bbb; padding: .5em; }
-
-em, cite { font-style: italic; }
-em i, em cite, cite i, cite em { font-style: normal; }
-
-code {
-   padding: 0 .1em;
-   background: #f5f5f5;
+dl.compact { margin: .5em 0; }
+dl.compact dt {
+   font-weight: normal;
+   font-style: italic;
+   margin: .5em 0 0;
 }
-pre code { background-color: transparent; }
+dl.compact dd { margin: .3em 3% 0; }
+dl.compact dd p { margin: .3em 0 0; }
+dl.compact dd ul { margin: .3em 1.5% 0; }
 
-/* The default color is too dark for large text in bold font. */
-h3, h4 { color: #333; }
 
-a[href] { color: #004caa; }
-a[href]:visited { color: #100070; }
-a[href]:active, a[href]:hover {
-   color: #100070;
-   text-decoration: none;
-}
+/*** TABLES ***/
 
-acronym, abbr {
-   text-decoration: none;
-   border-bottom: 1px dotted #000;
-   cursor: help;
+th, td {
+   border: 1px solid #bbb; /* default */
+   padding: .5em;
 }
+th { font-weight: bold; text-align: center; }
+table { margin: 1em 0; }
 
-ol li { list-style: decimal outside; }
-ul li { list-style: square outside; }
-ul ul li, ol ul li { list-style: circle; }
-
-/* Rarely used */
-del { text-decoration: line-through; }
-caption { margin-bottom: .5em; text-align: center; }
-sup { vertical-align: super; }
-sub { vertical-align: sub; }
-
-
-/*** SIMPLE CLASSES ***/
-
-.center, .c { text-align: center; }
-.nocenter{ text-align: left; }
-
-.underline { text-decoration: underline; }
-.nounderline { text-decoration: none; }
-
-.big { font-size: 1.1em; }
-
-.inline-list li { display: inline }
-.no-bullet li { list-style: none; }
-
-.no-display { display: none; }
-
-ul.blurbs li { margin-top: 1em; }
-ul.blurbs ul li, ul.blurbs ol li, ul.blurbs dl li {
-   margin-top: .5em;
+.listing,
+.stx table {
+   /* The default table for document listings. Contains name, document types,
+   modification times etc in a file-browser-like fashion */
+   border-collapse: collapse;
+   margin: 1em 0;
 }
-dl.compact { margin: .8em 0 0 0; }
-dl.compact dt {
-   margin: .8em 0 0;
+.listing th,
+.stx table th {
    font-weight: normal;
-   font-style: italic;
+   padding: .7em;
+}
+/* This doesn't work if the a element is within normal text. */
+.listing td a { display: block; }
+.listing .top {
+   text-align: right;
+   padding: 0 0 1em 0;
+}
+.listing .listingCheckbox {
+   text-align: center;
+}
+.listing td,
+.stx table td {
+   padding: 1em;
+   text-align: center;
+   line-height: 1.3em
+}
+.listing img {
+   vertical-align: middle;
+}
+.listing {
+   width: 100%;
+   display: block;
+   overflow: auto;
+   padding: .1em;
+   margin: auto;
 }
-dl.compact dd { margin: .5em 3% 0; }
-dl.compact dd p { margin: .5em 0 0; }
+
+
+/*** SEPARATORS ***/
 
 hr {
    display: block;
    margin: 1.2em 0;
-   color: #999;
-   background: #999;
 }
+
 /* For license-list.html, but could be used elsewhere. */
 hr.separator {
    height: .3em;
@@ -326,6 +298,14 @@
    margin: 1.5em 0;
    border: none;
 }
+/* Can be applied to div or hr. */
+.column-limit {
+   height: .4em;
+   width: 10%;
+   margin: 2em auto;
+   border: none;
+   background: #bbb; /* default */
+}
 
 
 /*** FORMS ***/
@@ -338,53 +318,45 @@
 }
 form.header input {
    line-height: 1.2em;
-   font-family: inherit;
-   font-weight: bold;
-   border: .1em solid #ccc;
 }
 form.header input[type="text"] {
    padding: .25em;
-   color: #555;
-   background: white;
 }
 form.header input[type="submit"] {
+   font-weight: bold;
    padding: .25em;
-   color: #333;
-   background: #fff;
-}
-form.header input[type="text"]:focus {
-   color: #333;
-   border: .1em solid #4080d0;
-}
-form.header input[type="text"]:focus + input[type="submit"] {
-   border: .1em solid #4080d0;
-}
-form.header input[type="submit"]:hover {
-   color: #777;
-   border-color: #777;
 }
 
 
-/*** BUTTONS ***/
+/*** BUTTONS & LINKS ***/
 
 .button a, #join-fsf a {
    display: block;
    line-height: 1.2em;
-   font-weight: bold;
    text-align: center;
-   text-decoration: none;
+   font-weight: bold;
    padding: .3em .5em;
-/* Color and background are left out because they depend
-   on the environment. */
-   border: .1em solid #999;
+   border: .1em solid #999; /* default */
 }
 
+/* Return link */
+.back {
+   line-height: 1.5em;
+   text-align: right;
+   font-weight: bold;
+   margin: 2em 2%;
+}
+
+/* Anchor - This is used in pages of lists, such as gnu-linux.faq.html,
+   to give readers a hint that they can link directly to a given item.
+   We make it less obtrusive than the item heading it follows.  */
+.anchor-reference-id { font-weight: normal; font-size: .8em; }
 
-/*** SPECIAL BORDERS ***/
 
-#searcher input[type="text"], #searcher input[type="submit"],
- #fssbox input[type="text"], #fssbox input[type="submit"],
- .button a, #join-fsf a {
+/*** ROUNDED CORNERS ***/
+
+form.header input[type="text"], form.header input[type="submit"],
+.button a, #join-fsf a {
    border-radius: .3em;
    -moz-border-radius: .3em;
    -khtml-border-radius: .3em;
@@ -393,95 +365,59 @@
 }
 
 
-/*** RETURN LINKS ***/
-
-.back {
-   text-align: right;
-   line-height: 1.5em;
-   font-weight: bold;
-   margin: 1.5em 2%;
-}
-.back a { color: #333; }
-.back a:hover { color: #777; }
-
+/*** SPECIAL TEXT WITH NO BACKGROUND OR LEFT BORDER ***/
 
-/*** BIG SECTION HEADERS ***/
+/* For comments within or at the beginning of an article. Can be used
+   with .important or .big. */
+.comment { margin: 1.5em 6%; }
 
-/* For browsers that don't support inline-block */
-.big-section {
-   clear: left;
-   float: left;
-}
-.big-section h3 {
-   display: inline-block;
-   font-size: 1.7em;
-   padding: .2em 0;
-   margin: 1em .3em .5em 0;
-   color: black;
-   border-top: .12em solid #e74c3c;
-   border-bottom: .12em solid #e74c3c;
-}
-.big-subsection {
-   margin: 1.5em 0;
-}
-.big-subsection h4 {
-   display: inline;
-   font-size: 1.5em;
-   margin-right: .3em;
-   color: black;
-}
-/* The next two statements adjust line spacing in Netsurf 1.2 */
-.big-subsection {
-   line-height: 2.0em;
-}
-.big-subsection h4 {
-   line-height: 1.2em;
+@media (max-width: 30em) {
+   .comment { margin: 1.5em 3%; }
 }
 
+/* Note about Free Software Free Society */
+blockquote#fsfs p { padding: .3em 0; }
 
-/*** ANCHOR ***/
-
-/* This is used in pages of lists, such as gnu-linux.faq.html,
-   to give readers a hint that they can link directly to a given item.
-   We make it less obtrusive than the item heading it follows.  */
-.anchor-reference-id { font-size: 80%; font-weight: normal; }
-
-span.anchor-reference-id a { color: #333; }
-span.anchor-reference-id a[href]:hover { color: #777; }
+/* For the note saying the page is a translation. */
+.trans-disclaimer {
+   font-size: .9em;
+   text-align: center;
+   font-weight: bold;
+   font-style: italic;
+   margin-bottom: 0;
+   margin-top: 1.2em;
+}
 
+/* For outdated translations  */
+#outdated {
+   font-size: .9em;
+   text-align: center;
+   padding: .5em;
+   margin: .8em 0;
+}
+#outdated p { margin: 0; }
 
-/*** NON-FLOATING INSETS AND HIGHLIGHTED STUFF ***/
 
-/** WITH BACKGROUND **/
+/*** TEXT WITH BACKGROUND ***/
 
 /* NetSurf collapses the bottom border of the last element with that of its
    parent div, even when the div has a padding or border.
    To fix this, strip the bottom margin of <p> and <pre>. If another element
    comes last, it may need a special clause. */
 div.highlight-para p, div.highlight-para pre, div.highlight-para ul,
- div.emph-box p, div.emph-box  pre, div.emph-box  ul,
+div.emph-box p, div.emph-box  pre, div.emph-box  ul,
  .lyrics p { margin-bottom: 0; }
 
 /* .highlight doesn't have a border. It can be applied to in-line elements.
    .highlight-para and .emph-box have borders. They are used for block 
elements.
-   highlight-para can be used next to .note or .summary because it only has top
-   and bottom borders. */
+   highlight-para can be used next to .note or .summary without special
+   precaution because it only has top and bottom borders. */
 
 div.highlight-para, div.emph-box { padding: .2em 1.2em 1.2em; }
 
 .highlight-para, p.highlight,
- p.emph-box, pre.emph-box { padding: .6em 1.2em; }
+p.emph-box, pre.emph-box { padding: .6em 1.2em; }
 
-.highlight-para, .highlight { background-color: #fff5d4; }
-span.highlight { background-color: #fff1c0; }
-.highlight-para {
-   border-top: .1em solid #fc7;
-   border-bottom: .1em solid #fc7;
-}
-.emph-box, .lyrics {
-   background-color: #f5f5f5;
-   border: .1em solid #ddd;
-}
 .lyrics {
    max-width: 25em;
    font-style: italic;
@@ -490,99 +426,24 @@
 }
 
 
-/** WITH LEFT BORDER **/
-
-/* For important text within an article. The border is bluish-green. */
-.important {
-   padding: 0 1em;
-   border-left: .3em solid #3aa;
-}
-
-/* For information that isn't part of the article. The border is
-   orange and the background is light gray. */
-.announcement blockquote { margin: 0; }
+/*** TEXT WITH LEFT BORDER ***/
 
-.announcement {
-   font-size: 1.1em;
+.announcement, .important {
+   font-size: inherit;
    padding: .1em 1em .7em;
    margin: 1.5em 0;
-   color: #333;
-   border-left: .3em solid #fc7;
-   background: #f5f5f5;
-   background: linear-gradient(to right, #f3f3f3, white); 
+   background: none;
 }
-/* Currently, announcements contain <p>, <ul>, and <h3>, with p or
-   ul as last element. Try to make them NetSurf-friendly. */
-.announcement p { margin: .5em 0 0; }
-.announcement ul { margin: 0 1em; }
-.announcement ul li { margin-top: .5em; }
-.announcement h3 {
+.announcement blockquote { margin: 0; }
+.announcement p, .important p { margin: .5em 0 0; }
+.announcement ul, .important ul { margin: 0 1em; }
+.announcement ul li, .important ul li { margin-top: .5em; }
+.announcement h3, .important h3 {
    font-size: 1.3em;
    margin: .4em 0;
 }
 
 
-/** WITH NO BACKGROUND OR LEFT BORDER **/
-
-/* For comments within or at the beginning of an article. Can be used
-   with .important or .big. */
-.comment { margin: 1.5em 6%; }
-
-/* Note about Free Software Free Society */
-blockquote#fsfs p { padding: .3em 0; }
-
-/* the urgent div should be enabled when we have something urgent to
-   appear on every page - these typically come from johns, peterb or rms
-   at the fsf */
-#urgent {
-   text-align: center;
-   font-size: .9em; font-weight: bold;
-   line-height: 2.6em;
-   color: black;
-   background-color: #ff3;
-   border-bottom: .3em solid #333;
-}
-#urgent a, #urgent a:visited {
-   color: blue;
-}
-#urgent a:hover { color: #777; }
-
-/* For the note saying the page is a translation. */
-.trans-disclaimer {
-   text-align: center;
-   font-weight: bold;
-   font-style: italic;
-   margin-bottom: 0;
-   margin-top: 1.2em;
-}
-.trans-disclaimer a,
- .trans-disclaimer a:visited { color: #333; }
-.trans-disclaimer a:hover { color: #777; }
-
-/* For outdated translations  */
-#outdated {
-   text-align: center;
-   padding: .4em 0;
-   margin: .8em 0;
-   color: #a42e2b;
-   border-bottom: 1px solid #999;
-}
-#outdated p { margin: .2em 0; }
-
-/* For translators notes */
-.translators-notes {
-   clear: left;
-   line-height: 1.5em;
-   margin-top: 2em;
-}
-.translators-notes hr {
-   height: 1px;
-   margin: 1.7em 0 1.2em;
-   border: none;
-}
-.translators-notes ol li { margin: .5em 1.1em; }
-
-
 /*** NOTES ***/
 
 .note, .edu-note {
@@ -595,7 +456,6 @@
    font-style: italic;
    padding: .8em 1em;
    margin: 0;
-   border: .15em dotted #6092d0;
 }
 /* Baby NetSurf (1.2) would hurt itself using these definitions.
    Place them out of reach. Too bad for its older brother (2.9). */
@@ -610,7 +470,6 @@
 .note {
    padding: .4em 3%;
    background: white;
-   border: .15em dotted #6092d0;
 }
 .note p {
    padding: .4em 0;
@@ -626,7 +485,6 @@
 .summary, .toc {
    padding: 1em 3% 1.7em;
    margin: 2.5em auto 1.5em;
-   background: #f5f5f5;
 }
 .summary ul, .toc ul {
    margin: 0 1.5%;
@@ -645,7 +503,8 @@
    .summary, .toc { max-width: 94%; }
 }
 
-/*** NOTE AND SUMMARY ON WIDE SCREENS ***/
+
+/*** NOTE AND SUMMARY ON WIDE SCREENS (FLOAT) ***/
 
 @media (min-width: 48em) {
    .note, .summary {
@@ -669,8 +528,9 @@
 
 /*** IMAGES ***/
 
-.imgright { float: right; margin: .3em 0 1em 1.5em; }
-.imgleft  { float: left;  margin: .3em 1.5em 1em 0; }
+.imgright, imgleft { max-width: 100%; }
+.imgright { float: right; margin: .3em 0 1em 2em; }
+.imgleft  { float: left;  margin: .3em 2em 1em 0; }
 
 /* For pictures with/without legend. */
 .narrow { width: 15em; }
@@ -681,380 +541,373 @@
 .pict p {
    text-align: center;
    font-style: italic;
+   font-size: .9em;
    margin-top: .5em;
 }
-@media (min-width: 43em) {
+
+@media (min-width: 45em) {
    .pict.narrow {
-       float:right; margin: .3em 0 1em 1.5em;
+       max-width: 45%;
+       float:right; margin: .3em 0 1em 2em;
    }
 }
-@media (min-width: 48em) {
+@media (min-width: 50em) {
    .pict.medium {
-       float:right; margin: .3em 0 1em 1.5em;
+       max-width: 45%;
+       float:right; margin: .3em 0 1em 2em;
    }
 }
-@media (min-width: 55em) {
+@media (min-width: 57em) {
    .pict.wide {
-       float:right; margin: .3em 0 1em 1.5em;
+       max-width: 45%;
+       float:right; margin: .3em 0 1em 2em;
    }
 }
 
 
-/*** LISTINGS ***/
 
-.listing,
-.stx table {
-   /* The default table for document listings. Contains name, document types,
-   modification times etc in a file-browser-like fashion */
-   border-collapse: collapse;
-   border: 1px solid #666666;
-   margin: 1em 0em 1em 0em;
-}
+/*============================================================================*/
+/*                   LAYOUT OF MAIN DIVS & CONSTANT FEATURES                  
*/
+/*============================================================================*/
 
-.listing th,
-.stx table th {
-   background: #fff1c0;
-   color: black;
-   font-weight: bold;
-   border: 1px solid #666666;
-   font-weight: normal;
-   padding: .7em;
-}
 
-.listing td a { display: block; }
-.listing .top {
-   border-top: 1px solid #666666;
-   text-align: right;
-   padding: 0em 0em 1em 0em;
-}
+/***************************************************/
+/*  HEADER & NAVIGATION FOR CSS3-UNAWARE BROWSERS  */
+/***************************************************/
 
-.listing .odd {
-   /*every second line should be shaded */
-   background-color: transparent;
-}
-.listing .even {
-   background-color: #f5f5f5;
-}
-.listing .listingCheckbox {
+
+/*** FSF STUFF ***/
+
+#toplinks { display: none; }
+
+
+/*** GNU BANNER ***/
+
+#header {
    text-align: center;
+   padding: 0;
 }
-.listing td,
-.stx table td {
-   border: 1px solid #666666;
-   padding: 1em;
+#gnu-banner {
+   display: inline-block;
+   font-size: 2em;
    text-align: center;
-   line-height: 1.3em
+   line-height: 1em;
+   margin: .1em 3%;
 }
-.listing img {
-   vertical-align: middle;
+#gnu-banner strong {
+   font-weight: normal;
 }
-.listing {
-   width: 100%;
-   display: block;
-   overflow: auto;
-   padding: .1em;
-   margin: auto;
+#gnu-banner img {
+   height: 1.7em;
+   vertical-align: bottom;
+   position: relative; top: .15em;
+   margin-right: .15em;
 }
 
-
-/*** TOP LINKS ***/
-
-#toplinks {
-   float: left;
-   /* Matches #searcher. */
-   font-family: "sans-serif", "FreeSans", sans-serif;
-   /* For NetSurf 1.2, and maybe a few other browsers. */
-   padding: .5em 2em .3em;
-}
-/* For standard browsers. */
-@media (min-width: 0) {
-   #toplinks { padding: .5em 3% .3em; }
+#fsf-support {
+   font-size: .45em;
+   font-style: italic;
 }
-#toplinks a, #toplinks a:visited {
-   white-space: nowrap;
-   /* the next line is a workaround for Midori 0.5.8 */
-   display: inline-block;
+#fsf-support a {
    font-weight: bold;
-   font-size: .9em;
-   color: #404040;
-   text-decoration: none;
-   margin-right: 1em;
 }
-#toplinks a:hover { color: #777; }
 
 
-/*** SEARCHER ***/
+/*** LANGUAGES ***/
 
-#searcher {
-   display: block;
-   text-align: right;
-   font-size: .9em;
+#languages { font-size: .9em; padding: 0 3%; }
+#set-language {
+   float: right;
    font-weight: bold;
-   padding-top: .3em; padding-bottom: .3em;
+   padding: .2em 0;
+   margin: .3em 0 0 1em;
+}
+#languages h3 {
+   display: inline-block;
+   font-size: 1em;
+   margin: .6em 0 0;
 }
 
-
-/*** TRANSLATION LIST ***/
-
+/* Could apply to div#translations or p#translations. */
 #translations {
-   clear: both;
-   font-size: .9em;
-   text-align: left;
-   border-bottom: .2em solid #d4d4d4;
+   padding: .4em 0;
+   margin: 0;
 }
 #translations p {
-   line-height: 1.2em;
-   padding: .3em 0;
    margin: 0;
 }
 #translations span {
-   white-space: nowrap;
-   font-size: .9em;
-   margin-right: .5em;
+   display:  inline-block;
+   vertical-align: middle;
+   width: 14em;
+   padding: 0;
+   margin: .1em 0;
 }
-#translations span a, #translations span a:visited {
-   color: #222; text-decoration: none;
+#translations span a {
+   line-height: 1.1em;
+   padding: .1em .3em;
 }
-/* Highlight the link to the original page */
 #translations span.original {
-   font-size: 1em; font-weight: bold;
+   font-weight: bold;
 }
-#translations span.original a,
-#translations span.original a:visited {
-   color: #004caa;
+
+
+/*** TOGGLE SWITCHES to display navbar and languages,
+   & SEARCHER BUTTON. ***/
+#switches {
+   display: inline-block;
+   clear: right;
+   float: right;
+   margin: .2em .7em .2em 0;
+}
+.switch {
+   display: inline-block;
+   vertical-align: middle;
+   height: 2em;
+   margin: .3em 0 .3em .5em ;
 }
-#translations a:hover,
-#translations span.original a:hover {
-   color: #777;
+.switch img {
+   display: inline-block;
+   vertical-align: middle;
+   height: 100%;
 }
 
+#navbar-input,  #outdated-input,  #language-input,
+#navbar-button, #outdated-button, #language-button {
+   display: none;
+}
 
-/*** HEADER ***/
-
-#header a { text-decoration: none; }
 
-/** FSF frame **/
+/*** NAVIGATION BARS ***/
 
-#fssbox, #join-fsf { display: none; }
+#navigation ul, #fsf-links ul { margin: 0; }
+ul#edu-navigation { margin: 0 -3.2%; }
 
-#fsf-frame {
-   float: right;
-   font-size: .9em;
-   text-align: center;
-   margin: .8em 0;
+/* line-height is defined here for NetSurf 1.2.
+   No effect in NetSurf 2.9 or Firefox. */
+#navigation ul, #fsf-links ul, ul#edu-navigation {
+   font-size: 0.9em;
+   line-height: 2em;
+   text-align: left;
+   font-weight: bold;
+   padding: 0 2.5%;
 }
-#fsf-frame p {
-   line-height: 1.3em;
+#navigation li, ul#edu-navigation li, #fsf-links li {
+   white-space: nowrap;
+   display: inline;
+   display: inline-block;
+   line-height: 2em;
+   padding: 1px;
    margin: 0;
 }
+li#more-links {
+   float: right;
+   margin-left: 1.7em;
+}
 
-#join-fsf a, #join-fsf a:visited {
+ /* For Firefox (can't set line-height when "a" is displayed inline) */
+#navigation a, ul#edu-navigation a, #fsf-links a {
    display: inline-block;
-   color: #b02500;
-   background: #fff;
-   border-color:  #b02500;
-   padding: .4em .5em .3em;
+   line-height: 2em;
+   padding: 0 .4em;
+   margin: 0;
 }
 
-#fssbox {
-   padding: 0;
-   margin-top: 1em;
-}
-#fssbox a, #fssbox a:visited {
-   font-weight: bold;
-   color: #004caa;
-}
-#fssbox form p { margin-top: .2em; }
 
-#fssbox input[type="submit"] {
-   color: #004caa;
-   border-color: #004caa;
+/*** BACK-TO-TOP ***/
+
+#back-to-top {
+   float: right;
+/* For NetSurf 1.2, and maybe a few other browsers. */
+   margin: .25em 1em 0;
 }
-#fssbox form input[type="text"]:focus + input[type="submit"] {
-   background: white;
+/* For standard browsers. */
+@media (min-width: 0) {
+   #back-to-top { margin-right: 3%; }
 }
-#fsf-frame a:hover, #fssbox input[type="submit"]:hover {
-   color: #777;
-   border-color: #777;
+#back-to-top a {
+   display: inline-block;
+   line-height: 1.2em;
+   padding: 0 .5em .2em;
 }
+#back-to-top a span { display: none; }
 
-/** GNU banner **/
 
-#gnu-banner {
-   font-size: 2em;
-   font-family: "FreeSans", sans-serif;
-   line-height: 1.2em;
-   text-align: center;
-   padding: .3em 0 .7em;
-}
-#gnu-banner img {
-   height: 1.7em;
-   vertical-align: bottom;
-   position: relative; top: .15em;
-   margin-right: .15em;
-}
-#gnu-banner a { color: #333; }
-#gnu-banner a strong { color: #a42e2b; }
+/*******************************************/
+/*  MEDIA QUERIES FOR HEADER & NAVIGATION  */
+/*******************************************/
 
-/* FSF support */
-#fsf-support { display: none; }
+@media (min-width: 0) {
+/* Reduce font size below 40em */
+   html { font-size: .9em; }
 
-#fsf-support {
-   font-size: .45em;
-   font-style: italic;
-   margin: .7em 0 0;
-   color: #555;
-}
-#fsf-support a, #fsf-support a:visited {
-   font-weight: bold;
-   color: #555;
-   text-decoration: underline;
-}
-#fsf-support a:hover {
-   color: black;
-   text-decoration: none;
-}
+   .hide { display: none; }
+   #gnu-banner { margin: .3em 0; }
 
-@media (min-width: 40em) {
-   #fsf-support { display: block; }
-   #gnu-banner { padding-bottom: .5em; }
-}
-@media (min-width: 60em) {
-   #gnu-banner { float: left; }
-   #fssbox, #join-fsf { display: block; }
-}
+   #switches { max-width: 6em; }
 
+   #languages { display: none; }
+   #language-button { display: inline-block; }
+   #language-input:checked ~ #languages { display: block; }
 
-/*** NAVIGATION BARS ***/
+   #navbar-button {
+      display: inline-block;
+      height: 1.8em;
+      padding: .1em 0;
+   }
+   #navigation { height: 3px; }
+   #navigation ul { display: none; }
+   #navbar-input:checked ~ #navigation { height: auto; }
+   #navbar-input:checked ~ #navigation ul { display: block; }
 
-#navigation ul, #fsf-links ul {
-   margin: 0;
+   ul#edu-navigation { display: none; }
+
+   #outdated-button {
+      display: inline-block;
+      float: right;
+   }
+
+   #outdated { display: none; }
+   #outdated-input:checked ~ #outdated { display: block; }
 }
-ul#edu-navigation {
-   margin: 0 -3.2%;
+
+@media (min-width: 22em) {
+   #gnu-banner { margin: .2em 0 .5em; }
+   #switches { max-width: none; }
 }
-#navigation ul, ul#edu-navigation, #fsf-links ul {
-   padding: .2em 1.5%;
+
+@media (min-width: 28em) {
+   #navbar-button { display: none; }
+   #navigation { height: auto; }
+   #navigation ul, ul#edu-navigation {
+      display: block;
+      text-align: left;
+   }
+
+   #gnu-banner { margin: .2em 3% .5em; }
 }
-ul#edu-navigation {
-   padding: .2em 1.5%;
+
+@media (min-width: 40em) {
+   html { font-size: 1em; }
+
+   .hide { display: inline; }
+   #gnu-banner { margin: .1em 3%; }
+   #gnu-banner img { top: .3em; }
+   #fsf-support {
+      font-size: .45em;
+      margin: .3em 0 0;
+   }
+
+   #switches { margin-right: 3%; }
+   #outdated-button { display: none; }
+   #outdated { display: block; }
 }   
 
-#navigation ul, ul#edu-navigation, #fsf-links ul, #backtotop {
-/* line-height of li element is defined here for NetSurf 1.2.
-   No effect in NetSurf 2.9 or Firefox. */
-   line-height: 1.7em;
+@media (min-width: 55em) {
+   #toplinks {
+      display: block;
+      width: 94%;
    font-size: .9em;
-   font-family: "sans-serif", sans-serif;
-   font-weight: bold;
-}
-#navigation li, #edu-navigation li, #fsf-links li {
-   list-style-type: none;
-   white-space: nowrap;
+      padding: .2em 3%;
+   }
+   #toplinks > a { display: none; }
+
+   #fssbox {
    display: inline;
+      margin: 0 1.5em .5em 0;
+   }
+   #fssbox > p {
    display: inline-block;
-   line-height: 1.6em;
-   margin: .15em .5em 0em;
-/* Mock border to avoid size change when a link becomes active. */
-   border-bottom: .15em solid transparent;
-}
-li#more-links {
-   float: right;
-   margin-left: 1.5em;
-}
-
-#navigation a, #edu-navigation a, #fsf-links a {
-/* For Firefox (can't set line-height when "a" is displayed inline) */
+      vertical-align: middle;
+      line-height: 1.1em;
+      margin: 0;
+   }
+   #fssbox a { font-weight: bold; }
+   #fssbox form {
    display: inline-block;
-}
+      margin: .1em 0;
+   }
+   #fssbox form p { margin: 0; }
 
-#backtotop {
+   #join-fsf {
    float: right;
-/* For NetSurf 1.2, and maybe a few other browsers. */
-   margin: .25em 1em 0;
-}
-/* For standard browsers. */
-@media (min-width: 0) {
-   #backtotop { margin-right: 1.5%; }
-}
-#backtotop span {
-   position: relative;
-   bottom: .1em;
+      margin: .1em 0 .1em 2em;
+   }
+   #join-fsf a {
+      padding: .25em .4em;
+   }
 }
-#backtotop a {
-   display: inline-block;
-   padding: 0 .5em;
-   background: white;
-   border: .1em solid #bbb;
+
+@media (min-width: 77.5em) {
+   body { margin-left: .5em; }
+   .inner { overflow: visible; }
+   #navigation ul, ul#edu-navigation, #fsf-links ul { text-align: center; }
+   li#more-links { float: none; }
 }  
 
-#navigation { background-color: #a42e2b; }
-#edu-navigation { background-color: #eee; }
-#fsf-links { background-color: #d4d4d4; }
+@media (min-width: 89em) {
+   body { position: relative; }
 
-#navigation a { color: white; }
-#education-content a, #fsf-links a, #backtotop a { color: #333; }
-#fsf-links .gnu a { color: #850803; }
-#backtotop a:hover { color: #777; }
+   #gnu-banner { padding-left: 2.35em; }
 
-#navigation li.active {
-   font-style: italic;
-   border-color: white;
-}
-#edu-navigation li.active,
- #edu-navigation li.current {
-   font-style: italic;
-   border-color: #a42e2b;
-}
-#navigation li a, #edu-navigation li a, #fsf-links li a,
- #navigation li.active a:hover, #backtotop a,
- #edu-navigation li.active a:hover {
-   text-decoration: none;
-}
-#navigation a:hover, #edu-navigation a:hover,
- #fsf-links a:hover {
-   text-decoration: underline;
-}
-@media (min-width: 53em) {
-   #navigation ul, #edu-navigation, #fsf-links {
-      text-align: center;
+   #language-button { display: none; }
+   #languages {
+      display: block;
+      width: 15em;
+      position: absolute;
+      top: -3px; left: 100%;
    }
-   li#more-links {
+   #translations span { padding: .2em 0; }
+   #translations span a { padding: .2em .3em; }
+   #set-language {
       float: none;
+      text-align: left;
+      margin: 0;
    }
 }
 
 
-/*** CONTENT ***/
+/*************/
+/*  CONTENT  */
+/*************/
 
+#content {
+   padding: 0 3%;
+   margin-bottom: 3em;
+}
+
+#main-text, #main-text ~ .translators-notes {
+   max-width: 50rem;
+   margin: auto;
+}
+
+#breadcrumb, .edu-breadcrumb {
+   line-height: 1.7em;
+   font-size: .9em;
+   padding: .6em 0 0;
+   margin: 0;
+}
+
+/* Author line after the main heading */
 p.byline {
-   font-size: 1.1em;
-   margin: 1.5em 0;
+   font-size: 1.1em; /* assumes #content > p.byline */
+   margin-bottom: 1.5em;
 }
+
 .article { font-size: 1.1em; }
-.article h3 { font-size: 1.4em; }
 
-h3.subheader {
-   padding-bottom: .2em;
-   border-bottom: 1px solid #bbb;
+.reduced-width {
+   width: 45em;
+   max-width: 100%;
+   margin: 1.5em auto;
 }
+
 .columns p.inline-block {
    display: inline-block;
-   vertical-align: top;
    margin: 0;
 }
 
-/* Can be applied to div or hr. */
-.column-limit {
-   height: .4em;
-   width: 10%;
-   margin: 1.5em auto;
-   border: none;
-   background: #bbb;
-   background-image: linear-gradient(to right, white, #bbb, white);
-}
-
-@media (min-width: 53em) {
+@media (min-width: 55em) {
    .columns {
       -webkit-column-count: 2;
       -webkit-column-gap: 1.5em;
@@ -1065,23 +918,62 @@
    }
    .columns > *:first-child { margin-top: 0 }
    .columns > *:last-child { margin-bottom: 0; }
-   .reduced-width {
-      width: 45em;
-      margin: 1.5em auto;
-   }
 }
 
+/* For metadata or footnotes at the end of articles. */
+.infobox {
+    font-size: .9em;
+    line-height: 1.3em;
+    margin: 2.5em 0 0;  
+}
+.infobox h3 {
+    font-size: 1.2em;
+    margin-top: 0;
+}
+.infobox p {
+    margin: .3em 0 0;
+}
+.infobox hr {
+    display: block;
+    width: 15em; max-width: 100%;
+    height: 1px;
+    background: #999;
+    border: none;
+    margin: 0 0 1em 0;
+}
+
+/* For translators notes */
+.translators-notes {
+   clear: left;
+   line-height: 1.5em;
+   margin-top: 2em;
+}
+.translators-notes hr {
+   height: 1px;
+   margin: 1.7em 0 1.2em;
+   border: none;
+}
+.translators-notes ol li { margin: .5em 1.1em; }
+
+div.translators-notes h3 { font-size: 1.2em; }
 
-/*** MISSION STATEMENT ***/
+
+/*******************************/
+/*  MISSION STATEMENT & FOOTER */
+/*******************************/
 
 #mission-statement {
    clear: both;
-   font-size: 0.9em;
-   margin-top: 2em; margin-bottom: 2em;
+   padding: 1.8em 3% 2em;
+   background: white;
 }
 #mission-statement blockquote {
+   font-size: .9em;
    font-weight: bold;
    font-style: italic;
+   margin: 0 3% .8em;
+}
+#mission-statement p {
    margin: 0;
 }
 #mission-statement img {
@@ -1089,14 +981,19 @@
    height: 2em;
    margin: .5em;
 }
-
-
-/*** FOOTER ***/
+#support-the-fsf {
+   clear: both;
+   text-align: center;
+}
+#support-the-fsf a {
+   display: inline-block;
+   padding: .5em .8em;
+   margin: 1em 1.5em 0; 
+}
 
 #footer {
    font-size: .9em;
-   color: #333;
-   border-top: 1px solid #ccc;
+   padding: 1.5em 3%;
 }
 #footer p, #bottom-notes {
    line-height: 1.3em;
@@ -1109,38 +1006,377 @@
 #footer p.unprintable, #generic p { margin-top: .7em; }
 
 
-/*** EDUCATION ***/
 
-/* Breadcrumbs */
-.edu-breadcrumb {
-   font-size: .9em;
-   font-weight: bold;
-   padding-top: .4em;
-   margin-top: 0;
+/******************************************************************************/
+/*                                   FONT FAMILY                              
*/
+/******************************************************************************/
+
+
+a[href] { font-family: sans-serif; }
+
+#toplinks, #toplinks a, #header, #header a,
+#edu-navigation a, #fsf-links a, #languages, #languages a {
+   font-family: "FreeSans", sans-serif;
+}
+
+h2, h3 { font-family: serif; }
+
+
+
+/******************************************************************************/
+/*                           COLOR, BACKGROUND, BORDER                        
*/
+/******************************************************************************/
+
+
+/*** Luminosity contrast ratio and color difference ***
+   source: http://juicystudio.com/services/luminositycontrastratio.php
+
+   Color1       Color 2       contrast       Color
+                               ratio      difference
+Black-gray
+   #000         white          21.3           765
+   #000         #ff3           19.6           561
+   #222         white          15.91          663
+   #333         white          12.63          612
+   #333         #eee           10.89          561
+   #404040      #d4d4d4         6.99          444
+   #555         white           7.46          510
+
+Red
+   #a42e2b      white           6.99          630
+   #850803      #d4d4d4         6.97
+
+Blue links
+   #004caa     white            8.03          443
+   #004caa     #e4ffcc          7.45          365
+   #004caa     #fff1c0          7.11          366
+   #004caa     #f3f3f3          7.24          407
+   #004caa     #ccffcc          7.17          341
+   #004caa     #777             1.79          137
+   #004caa     #333             1.57          169
+   #004caa     black            2.61          322
+*/
+
+
+/*** MAIN DIVS ***/
+
+html, body {
+   color: #222;
+}
+html { background: #e4e4e4; }
+
+body {
+   background: white;
+   border: 2px solid #bbb;
+   border-top: 3px solid #a42e2b;
+   -moz-box-shadow: 0 0 5px 5px #bbb;
+   -webkit-box-shadow: 0 0 5px 5px #bbb;
+   -icab-box-shadow: 0 0 5px 5px #bbb;
+   -o-box-shadow: 0 0 5px 5px #bbb;
+   box-shadow: 0 0 5px 5px #bbb;
+}
+
+#header { background: white; /* #f5f5f5; */ }
+
+#toplinks {
+   background: #eee;
+}
+#languages {
+   background: #f5f5f5; /* white; */
+   border-top: .1em solid #bbb;
+}
+@media (min-width: 87em) {
+   #languages {
+      border: .1em solid #999;
+      border-top: 3px solid #a42e2b;
+      padding: 1em;
+   }
+}
+
+#languages h3, #translations { color: #a42e2b; }
+
+#mission-statement {
+   background: white;
+}
+#footer {
    color: #333;
+   background: #f7f7f7;
+   border-top: .1em solid #ddd;
+}
+
+
+/*** <h2> & <h3> HEADERS ***/
+
+/* The default color is too dark for large text in bold font. */
+h3, h4 { color: #333; }
+
+h3.subheader {
+   padding-bottom: .2em;
+   border-bottom: 1px solid #bbb;
+}
+
+.big-section h3 {
+   color: black;
+   border-top: .12em solid #e74c3c;
+   border-bottom: .12em solid #e74c3c;
+}
+.big-subsection h4 {
+   color: black;
+}
+
+
+/*** SEPARATORS ***/
+
+hr {
+   color: #999;
+   background: #999;
+}
+
+.column-limit {
+   background: #bbb;
+   background-image: linear-gradient(to right, white, #bbb, white);
+}
+
+
+/*** LISTINGS ***/
+
+.listing,
+.stx table {
+   border: 1px solid #666;
+}
+.listing th,
+.stx table th {
+   color: black;
+   background: #fff1c0;
+   border: 1px solid #666;
+}
+.listing .top {
+   border-top: 1px solid #666;
+}
+.listing .odd {
+   /*every second line should be shaded */
+   background: transparent;
+}
+.listing .even {
+   background: #f5f5f5;
+}
+.listing td,
+.stx table td {
+   border: 1px solid #666;
 }
-.edu-breadcrumb a,
-.edu-breadcrumb a:visited {
+
+
+/*** EMPHASIZED TEXT, NOTES, etc. ***/
+
+.highlight-para, .highlight { background: #fff5d4; }
+span.highlight { background: #fff1c0; }
+.highlight-para {
+   border-top: .1em solid #fc7;
+   border-bottom: .1em solid #fc7;
+}
+
+.emph-box, .lyrics {
+   background: #f5f5f5;
+   border: .1em solid #ddd;
+}
+
+/* For information that isn't part of the article. The border is
+   green. */
+.announcement { border-left: .3em solid #5c5; }
+/* For important information inside an article. The border is orange. */
+.important    { border-left: .3em solid #fc7; }
+
+#outdated {
+   color: black;
+   border: .2em solid #fc7;
+}
+
+.note, .edu-note p { border: .15em solid #5c5; }
+
+.summary, .toc { background: #f5f5f5; }
+
+
+/*** LINKS ***/
+
+a[href]:link {
+   color: #004caa;
+   text-decoration: underline #4899ff solid;
+}
+a[href]:visited {
    color: #004caa;
+   text-decoration: underline #ccc solid;
+}
+a[href]:link:hover, a[href]:visited:hover {
+   color: #006400;
+   text-decoration: underline #006400 dotted;
+}
+a[href]:active { text-decoration: none; }
+
+/* Variants */
+
+#gnu-banner   a[href]:link, #gnu-banner   a[href]:visited {
+   color: #333;
    text-decoration: none;
 }
-.edu-breadcrumb a:hover {
-   color: #777;
+/*
+#gnu-banner a[href]:link strong, #gnu-banner a[href]:visited strong {
+   color: #a42e2b;
+}
+*/
+#fsf-support { color: #555; }
+#fsf-support      a[href]:link, #fsf-support      a[href]:visited,
+.trans-disclaimer a[href]:link, .trans-disclaimer a[href]:visited {
+   color: #555;
+   text-decoration: underline #ccc solid;
+}
+#fssbox              a[href]:link, #fssbox              a[href]:visited,
+.back                a[href]:link, .back                a[href]:visited,
+.anchor-reference-id a[href]:link, .anchor-reference-id a[href]:visited,
+#set-language        a[href]:link, #set-language        a[href]:visited,
+#translations        a[href]:link, #translations        a[href]:visited {
+   color: #333;
+   text-decoration: underline #ccc solid;
 }
 
-/* Subsections of /education "Case Studies" */
-.edu-cases {
-   border-top: 5px ridge #3465a4;
-   border-bottom: 5px ridge #3465a4;
-   padding: 1.5em 0;
-   margin: 2em 4%;
+#set-language        a[href]:link:hover, #set-language        
a[href]:visited:hover,
+#translations        a[href]:link:hover, #translations        
a[href]:visited:hover,
+#fsf-support         a[href]:link:hover, #fsf-support         
a[href]:visited:hover,
+.trans-disclaimer    a[href]:link:hover, .trans-disclaimer    
a[href]:visited:hover,
+#fssbox              a[href]:link:hover, #fssbox              
a[href]:visited:hover,
+.back                a[href]:link:hover, .back                
a[href]:visited:hover,
+.anchor-reference-id a[href]:link:hover, .anchor-reference-id 
a[href]:visited:hover {
+   color: #006400;
+   text-decoration: underline #006400 dotted;
 }
 
-/* make h3 for edu-cases look like h4 for other pages */
-.edu-cases h3 {
-   font-size: 1.3em;
-   margin: 0; margin-bottom: 1em;
+#breadcrumb a[href]:link, .breadcrumb a[href]:visited {
+   text-decoration: none;
+}
+#breadcrumb a[href]:link:hover, .breadcrumb a[href]:visited:hover {
+   text-decoration: underline #006400 dotted;
 }
-.edu-cases ul, .edu-cases ol {
-   padding: 0 4%;
+
+
+/*** BUTTONS ***/
+
+.button   a[href]:link,       .button   a[href]:visited,
+.button   a[href]:link:hover, .button   a[href]:visited:hover,
+#join-fsf a[href]:link,       #join-fsf a[href]:visited,
+#join-fsf a[href]:link:hover, #join-fsf a[href]:visited:hover {
+   text-decoration: none;
+}
+
+#join-fsf             a[href]:link, #join-fsf             a[href]:visited,
+#support-the-fsf a.join[href]:link, #support-the-fsf a.join[href]:visited {
+   color: #b02500;
+   background: white;
+   border-color: #b02500;
+}
+#join-fsf             a[href]:link:hover, #join-fsf             
a[href]:visited:hover,
+#support-the-fsf a.join[href]:link:hover, #support-the-fsf 
a.join[href]:visited:hover {
+   color: #a42e2b;
+   background: #f6e5e1;
+   border-color: #a42e2b;
+}
+
+#support-the-fsf a.donate[href]:link, #support-the-fsf a.donate[href]:visited {
+   color: #005ccd;
+   background: white;
+   border-color: #005ccd;
+}
+#support-the-fsf a.donate[href]:link:hover, #support-the-fsf 
a.donate[href]:visited:hover {
+   color: #004caa;
+   background: #d9e8f7;
+   border-color: #004caa;
+}
+#support-the-fsf a.shop[href]:link, #support-the-fsf a.shop[href]:visited {
+   color:  #008400;
+   background: white;
+   border-color: #008400;
+}
+#support-the-fsf a.shop[href]:link:hover, #support-the-fsf 
a.shop[href]:visited:hover {
+   color: #006400;
+   border-color: #006400;
+   background: #e7f2e2;
+}
+
+.switch img:hover {
+   opacity: 0.5;
+   filter: alpha(opacity=50); /* For IE8 and earlier */
+   cursor: pointer;
+}
+
+
+/*** FORM INPUTS ***/
+
+form.header input {
+   font-family: inherit;
+   border: .1em solid #ccc;
+}
+form.header input[type="text"], form.header input[type="submit"] {
+   color: #555;
+   background: white;
+}
+form.header input[type="submit"] {
+   cursor: pointer;
+}
+form.header input[type="text"]:focus {
+   color: #333;
+   border-color: #006400;
+}
+form.header input[type="text"]:focus + input[type="submit"] {
+   color: #006400;
+   border-color: #006400;
+}
+form.header input[type="submit"]:hover {
+   color: #006400;
+   border-color: #006400;
+}
+#fssbox input[type="submit"] {
+   color: #008400;
+   border-color: #008400;
+   background: white;
+}
+#fssbox input[type="submit"]:hover {
+   color: #006400;
+   border-color: #006400;
+   background: #e7f2e2;
+}
+
+
+/*** NAVIGATION BARS & BACK-TO-TOP ***/
+
+#navigation a, ul#edu-navigation a, #fsf-links a,
+#back-to-top a {
+   text-decoration: none;
+}
+#navigation       { background: #a42e2b; }
+ul#edu-navigation { background: #eee; }
+#fsf-links        { background: #d4d4d4; }
+
+#navigation a          { color: white; }
+ul#edu-navigation a,
+#fsf-links a           { color: #333; }
+#fsf-links .gnu a      { color: #850803; }
+
+#back-to-top a {
+   color: #444;
+   background: white;
+   border: .1em solid #bbb;
+}
+#navigation li:hover       { background: #850803; }
+ul#edu-navigation li:hover { background: #ddd; }
+#fsf-links li:hover        { background: #ccc; }
+#back-to-top a:hover       { background: #eee; }
+
+#navigation li.active, #navigation li.active a:hover {
+   font-style: italic;
+   background: #bb5653;
+   cursor: default;
+}
+ul#edu-navigation li.active, ul#edu-navigation li.active a:hover,
+ul#edu-navigation li.current {
+   background: white;
+   font-style: italic;
+   cursor: default;
 }

Index: nav-bar/test9/edu-software-tuxpaint.html
===================================================================
RCS file: 
/webcvs/www/www/server/staging/nav-bar/test9/edu-software-tuxpaint.html,v
retrieving revision 1.31
retrieving revision 1.32
diff -u -b -r1.31 -r1.32
--- nav-bar/test9/edu-software-tuxpaint.html    1 Jan 2020 14:06:00 -0000       
1.31
+++ nav-bar/test9/edu-software-tuxpaint.html    15 Jan 2020 19:25:46 -0000      
1.32
@@ -45,7 +45,7 @@
 -->
 </style>
 <!--#include virtual="/server/gnun/initial-translations-list.html" -->
-<!--#include virtual="/server/staging/layout/banner.html" -->
+<!--#include virtual="/server/staging/banner.html" -->
 <div id="main-text" class="article">
 
 <p id="breadcrumb"><a href="/education/education.html">Education</a> &rarr; 
@@ -216,7 +216,7 @@
 </div>
 </div>
 </div><!-- for id="content", starts in the include above -->
-<!--#include virtual="/server/staging/layout/footer-text.html" -->
+<!--#include virtual="/server/staging/nav-bar/test9/footer-text.html" -->
 <div id="footer">
 <div class="unprintable">
 
@@ -255,7 +255,7 @@
 
 <p class="unprintable">Updated:
 <!-- timestamp start -->
-$Date: 2020/01/01 14:06:00 $
+$Date: 2020/01/15 19:25:46 $
 <!-- timestamp end -->
 </p>
 </div>

Index: readability/free-sw.html
===================================================================
RCS file: /webcvs/www/www/server/staging/readability/free-sw.html,v
retrieving revision 1.26
retrieving revision 1.27
diff -u -b -r1.26 -r1.27
--- readability/free-sw.html    1 Jan 2020 05:32:46 -0000       1.26
+++ readability/free-sw.html    15 Jan 2020 19:25:46 -0000      1.27
@@ -8,7 +8,7 @@
 <meta name="DC.title" content="gnu.org" />
 <link rel="stylesheet" type="text/css" href="/reset.css" media="screen" />
 <link rel="stylesheet" type="text/css" href="/mini.css" media="handheld" />
-<link rel="stylesheet" type="text/css" href="/server/staging/layout.css" 
media="screen" />
+<link rel="stylesheet" type="text/css" 
href="/server/staging/layout/layout.css" media="screen" />
 <link rel="stylesheet" type="text/css" href="/print.min.css" media="print" />
 <!--#set var="DISABLE_TOP_ADDENDUM" value="yes" -->
 <!--#set var="TAGS" value="essay aboutfs" -->
@@ -44,7 +44,7 @@
 <!--#endif -->
 <h2 id="main-heading">What is free software?</h2>
 
-<div class="comment italic">
+<div class="important italic">
 <p>
 &ldquo;Free software&rdquo; means software that respects users'
 freedom and community.  Roughly, it means that <b>the users have the
@@ -624,7 +624,7 @@
 </div><!-- /.article -->
 
 </div><!-- for id="content", starts in the include above -->
-<!--#include virtual="/server/staging/layout/footer-text.html" -->
+<!--#include virtual="/server/footer.html" -->
 <div id="footer">
 <div class="unprintable">
 
@@ -681,7 +681,7 @@
 
 <p class="unprintable">Updated:
 <!-- timestamp start -->
-$Date: 2020/01/01 05:32:46 $
+$Date: 2020/01/15 19:25:46 $
 <!-- timestamp end -->
 </p>
 </div>

Index: nav-bar/test9/footer-text.html
===================================================================
RCS file: nav-bar/test9/footer-text.html
diff -N nav-bar/test9/footer-text.html
--- /dev/null   1 Jan 1970 00:00:00 -0000
+++ nav-bar/test9/footer-text.html      15 Jan 2020 19:25:46 -0000      1.21
@@ -0,0 +1,50 @@
+<!-- begin server/footer-text.html -->
+<div style="clear:both"></div>
+<hr class="no-display" />
+
+
+<!--#if expr="$TRANSLATION_LIST = /<span dir=\"ltr\">/" --><div id="languages">
+<p id="set-language" title="Set your preferred language on gnu.org">
+ <span class="gnun-split"></span><!--#echo
+ encoding="none" var="language_selector" -->Set
+ language<span class="gnun-split"></span><!--#echo
+ encoding="none" var="closing_anchor" -->
+</p>
+
+<h3>Available for this page:</h3>
+<!--#echo encoding="none" var="TRANSLATION_LIST" -->
+</div>
+</div><!--#endif -->
+
+<div id="back-to-top"><a href="#navigation"><span>TOP</span> &#9650;</a></div>
+
+<hr class="no-display" />
+<div id="fsf-links">
+ <ul>
+  <li class="gnu"><a href="/proprietary/proprietary.html">MALWARE</a></li>
+  <li class="gnu"><a href="/graphics/graphics.html">GNU&nbsp;ART</a></li>
+  <li class="gnu"><a href="/people/people.html">GNU'S&nbsp;WHO?</a></li>
+  <li class="gnu"><a href="/server/sitemap.html">SITEMAP</a></li>
+  <li><a href="//directory.fsf.org">SOFTWARE&nbsp;DIRECTORY</a></li>
+  <li><a href="https://h-node.org/";>HARDWARE</a></li>
+ </ul>
+</div><!-- /fsf-links -->
+
+<div id="mission-statement">
+
+<blockquote>
+<p style="direction:ltr; text-align:left"><a href="//www.fsf.org"><img 
id="fsfbanner"
+src="/graphics/fsf-logo-notext-small.png" alt=" [FSF logo] "/></a><strong>
+&ldquo;The Free Software Foundation (FSF) is a nonprofit with a worldwide
+mission to promote computer user freedom. We defend the rights of all
+software users.&rdquo;</strong></p>
+</blockquote>
+
+<p id="support-the-fsf" class="button">
+  <a class="join" 
href="//www.fsf.org/associate/support_freedom?referrer=4052">JOIN</a>
+  <a class="donate" href="//donate.fsf.org/">DONATE</a>
+  <a class="shop" href="//shop.fsf.org/">SHOP</a>
+</p>
+
+</div><!-- /mission-statement -->
+<!-- end server/footer-text.html -->



reply via email to

[Prev in Thread] Current Thread [Next in Thread]