[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]
www layout.css
|
From: |
Therese Godefroy |
|
Subject: |
www layout.css |
|
Date: |
Tue, 29 Mar 2016 22:37:29 +0000 |
CVSROOT: /webcvs/www
Module name: www
Changes by: Therese Godefroy <th_g> 16/03/29 22:37:29
Modified files:
. : layout.css
Log message:
Reorganize definitions without changing them.
CVSWeb URLs:
http://web.cvs.savannah.gnu.org/viewcvs/www/layout.css?cvsroot=www&r1=1.186&r2=1.187
Patches:
Index: layout.css
===================================================================
RCS file: /webcvs/www/www/layout.css,v
retrieving revision 1.186
retrieving revision 1.187
diff -u -b -r1.186 -r1.187
--- layout.css 4 Nov 2015 07:27:12 -0000 1.186
+++ layout.css 29 Mar 2016 22:37:28 -0000 1.187
@@ -130,13 +130,27 @@
*/
-/*** GENERAL SETTINGS ***/
+/*** 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]
+*/
+
+
+/*** PAGE LAYOUT ***/
html, body {
font-size: 1em;
text-align: left;
- padding: 0;
- margin: 0;
text-decoration: none;
color: #000;
}
@@ -157,22 +171,63 @@
-o-box-shadow: 0 0 10px 10px #b9bcbf;
box-shadow: 0 0 10px 10px #b9bcbf;
}
+
+/** Widths **/
+
+/* To avoid a few problems with pages outside www.gnu.org,
+ the paddings and margins are defined without using
+ .inner. */
.inner { overflow: hidden; }
-.inner h2, .inner ul { padding-left: 1.5%; }
-#content ul { padding-left: 0; }
+#searcher, #translations, #header, #content,
+ #mission-statement, #footer {
+ padding-left: 1.5%; padding-right: 1.5%;
+}
+#content ul#edu-navigation {
+ margin-left: -1.6%; margin-right: -1.6%;
+}
-a[href] { color: #005090; }
-a[href]:visited { color: #100070; }
-a[href]:active, a[href]:hover { color: #777; }
+/** Backgrounds **/
-blockquote { margin: 1em; font-style: italic; }
+#searcher, #translations, #edu-navigation, #fsf-links {
+ background-color: #d1d4d7;
+}
+#footer { background-color: #f0f2f4; }
-acronym, abbr { border-bottom: 1px dotted #111; }
+#navigation { background-color: #a50606; }
-img { border: 0; }
+/** Fonts **/
+
+#searcher, #toplinks, #translations, #header,
+ #navigation, #edu-navigation,
+ #fsf-links { font-family: "FreeSans", sans-serif; }
+
+
+/*** BASIC ELEMENTS ***/
+
+/** Size and positioning **/
+
+#content li, #fsf-campaigns li, #content dd, #content p, #content pre,
+ #content dt, #content code, #content address { line-height: 1.3em; }
+
+#content h1 { font-size: 2.4em; }
+#content h2 { font-size: 2em; }
+#content h3 { font-size: 1.6em; }
+#content h4 { font-size: 1.3em; }
+#content h5 { font-size: 1.1em; }
+
+#content h1, #content h2 {
+ margin: .7em 0 .9em 0;
+}
+#content h3, #content h4, #content h5, #content h6 {
+ margin-top: 1em ;
+}
+#content p { margin-top: 1em ; }
address { margin-bottom: 1em; }
+#content ol {
+ margin-left: 1.9em; margin-right: 1.9em;
+}
/* separate the "term" from subsequent "description" */
dt { margin-bottom: 1em; color: #222; }
@@ -185,6 +240,33 @@
from subsequent <p> */
dd p { margin-top: 1em; }
+#content small { font-size: .9em; }
+
+
+/** Style **/
+
+#content h1, #content h2 {
+ color: #334683; text-shadow: #999 1px 1px 0;
+}
+#content h3 { color: #333; }
+#content h4 { color: #333; }
+
+a[href] { color: #005090; }
+a[href]:visited { color: #100070; }
+a[href]:active, a[href]:hover { color: #777; }
+
+#content h3 a[href]:visited, #content h4 a[href]:visited { color: #334683; }
+#content h3 a[href]:hover, #content h4 a[href]:hover { color: #777; }
+
+#content ul li, #fsf-campaigns ul li {
+ list-style: square;
+}
+
+blockquote { margin: 1em; font-style: italic; }
+acronym, abbr { border-bottom: 1px dotted #111; }
+
+
+/*** SIMPLE CLASSES ***/
.center, .c { text-align: center; }
.nocenter{ text-align: left; }
@@ -192,9 +274,6 @@
.underline { text-decoration: underline; }
.nounderline { text-decoration: none; }
-.imgright { float: right; margin: 1em; margin-right: 0; }
-.imgleft { float: left; margin: 1em; margin-left: 0; }
-
.big { font-size: 130%; padding-top: 0.7em; }
.inline-list li { display: inline }
@@ -202,36 +281,23 @@
.netscape4 { display: none !important; }
-/*** TOP OF THE PAGE ***/
-
-#toplinks {
- float: left;
- font-size: .9em;
- font-family: "FreeSans", sans-serif;
- font-weight: bold;
- padding: .6em 1.5em 0 1.5em;
- margin: 0;
-}
-#toplinks a, #toplinks a:visited {
- white-space: nowrap;
- /* the next line is a workaround for Midori 0.5.8 */
- display: inline-block;
- color: #404040; text-decoration: none;
- margin-right: 1em;
-}
-#toplinks a:hover { color: #777; }
+/*** SEPARATOR ***/
-#searcher {
+/* For license-list.html, but could be used elsewhere. */
+hr.separator {
display: block;
- text-align: right;
- font-weight: bold;
- padding: .3em 1.5%;
- background-color: #d1d4d7;
+ height: .3em;
+ margin-bottom: 1.2em;
+ color: #999;
+ background-color: #999;
+ border: none;
}
+
+
+/*** FORMS ***/
+
#searcher input {
font-family: "FreeSans", sans-serif;
- font-size: .9em;
- margin: 0;
}
#searcher input[type="text"] {
padding: .2em;
@@ -239,11 +305,6 @@
color: #555;
background: white;
border: .1em solid #c9cccf;
- border-radius: .3em;
- -moz-border-radius: .3em;
- -khtml-border-radius: .3em;
- -webkit-border-radius: .3em;
- -opera-border-radius: .3em;
}
#searcher input[type="submit"] {
padding: .2em .4em;
@@ -251,12 +312,6 @@
color: #333;
background: #e7e9eb;
border: .1em solid #c9cccf;
- border-radius: .3em;
- -moz-border-radius: .3em;
- -khtml-border-radius: .3em;
- -webkit-border-radius: .3em;
- -opera-border-radius: .3em;
-
}
#searcher input[type="text"]:focus {
color: #333;
@@ -269,126 +324,8 @@
cursor: pointer;
}
-#translations {
- clear: both;
- text-align: left;
- font-size: .8em;
- font-family: "FreeSans", sans-serif;
- line-height: 1.3em;
- padding-bottom: .5em;
- background-color: #d1d4d7;
-}
-#translations p {
- padding: .1em .5em .2em .5em;
- margin: 0 1.5%;
- background-color: #f0f2f4;
-}
-#translations span {
- white-space: nowrap;
- margin-right: .5em;
-}
-#translations a, #translations a:visited {
- color: #222; text-decoration: none;
-}
-/* Highlight the link to the original page */
-#translations span.original {
- font-size: 1.1em; font-weight: bold;
- padding-top: .3em;
-}
-#translations span.original a,
-#translations span.original a:visited {
- color: #334683;
-}
-#translations a:hover,
-#translations span.original a:hover {
- color: #777;
-}
-
-/* For translation lists below the navigation bar. */
-#content #translations { background: white; }
-#content #translations p {
- padding: .2em .5em .3em .5em;
- margin: 1em 0 0 0;
- background: #e7e9eb;
-}
-
-/* Still used in some outdated translations. */
-#translations h3, #translations h4 {
- font-size: 1em; font-weight: bold;
- padding: 1em 1.5% 0 1.5%;
- margin: 0;
-}
-#translations ul {
- margin: 1em 1.5%;
- background: #f0f2f4;
-}
-#translations li {
- direction: ltr; display: inline; white-space: nowrap;
- padding-left: 0.25em; padding-right: 0.25em;
-}
-/* Still used in some old /server/banner.*.html */
-#links { display: none !important; }
-
-
-/*** HEADER ***/
-
-#header {
- font-family: "FreeSans", sans-serif;
- margin: 0 1.5%;
- background-color: white;
-}
-#header:after {
- clear: both; content: ""; display: block;
- height: 0px; visibility: hidden; width: 0px;
-}
-
-#fsf-frame {
- float: right;
- font-size: .9em;
- text-align: center;
- line-height: 1.3em;
- width: auto;
- padding: 0;
- margin: 1em 0;
-}
-#fsf-frame a, #fsf-frame a:visited {
- font-size: 1.1em;
- font-weight: bold;
- text-decoration: none;
-}
-#fsf-frame p { padding: 0; margin: 0; }
-#fsf-frame hr { display: none; }
-
-#join-fsf {
- padding: .4em 0;
-}
-#join-fsf a, #join-fsf a:visited {
- padding: .3em 1em;
- color: #971611;
- background: #e7e9eb;
- border-radius: 1em;
- -moz-border-radius: 1em;
- -khtml-border-radius: 1em;
- -webkit-border-radius: 1em;
- -opera-border-radius: 1em;
- box-shadow: 0 .15em #171d33;
- -moz-box-shadow: 0 .15em #171d33;
- -webkit-box-shadow: 0 .15em #171d33;
- -icab-box-shadow: 0 .15em #171d33;
- -o-box-shadow: 0 .15em #171d33;
-}
-
-#fssbox {
- padding: 0;
- margin-top: 1.3em;
-}
-#fssbox a, #fssbox a:visited {
- color: #334683;
-}
-#fssbox form p { margin-top: .2em; }
#fssbox input {
font-family: "FreeSans", sans-serif;
- font-weight: bold;
}
#fssbox input[type="text"] {
padding: .2em;
@@ -396,11 +333,6 @@
color: #555;
background: white;
border: .1em solid #999;
- border-radius: .3em;
- -moz-border-radius: .3em;
- -khtml-border-radius: .3em;
- -webkit-border-radius: .3em;
- -opera-border-radius: .3em;
}
#fssbox input[type="submit"] {
padding: .2em .4em;
@@ -408,16 +340,6 @@
color: #333;
background: #e7e9eb;
border: .1em solid #e7e9eb;
- border-radius: 1em;
- -moz-border-radius: 1em;
- -khtml-border-radius: 1em;
- -webkit-border-radius: 1em;
- -opera-border-radius: 1em;
- box-shadow: 0 .15em #171d33;
- -moz-box-shadow: 0 .15em #171d33;
- -webkit-box-shadow: 0 .15em #171d33;
- -icab-box-shadow: 0 .15em #171d33;
- -o-box-shadow: 0 .15em #171d33;
}
#fssbox input[type="text"]:focus {
color: #333;
@@ -429,152 +351,71 @@
#fssbox input[type="text"]:focus + input[type="submit"] {
border: .1em solid #334683;
}
-#fsf-frame a:hover { color: #777; }
-/* For "normal" pages */
address@hidden (max-width: 40em) {
- #gnu-banner { clear: both }
-}
-#gnu-banner {
- font-size: 1.8em;
+/*** BUTTONS ***/
+
+#home .button {
+ text-align: center;
font-weight: bold;
- line-height: 1.3em;
- padding-top: 1.1em;
-}
-#gnu-banner img {
- float: left;
- height: 2.4em;
- margin: 0 .15em;
- position: relative; bottom: .4em;
+ margin-top: .7em; margin-bottom: .8em;
}
-#gnu-banner a {
- color: #334683; text-decoration: none;
-}
-#gnu-banner a strong {
- font-size: 1.4em;
+.button a, .button a:visited {
color: #971611;
+ text-decoration: none;
}
-#fsf-support {
- text-align: left;
- font-size: .9em;
- font-weight: bold;
- font-style: italic;
- padding: .5em 0;
- margin: 0;
- color: #555;
-}
-#fsf-support a, #fsf-support a:visited { color: #555; }
-#fsf-support a:hover { color: black; }
-
-/* For the pages still using style.css */
-#logo {
- background:url(/graphics/topbanner.png) no-repeat;
- float: left;
- padding:0; margin:0; border:0;
-}
-#logo a {
- display:block; overflow:hidden;
- width:550px;
- height:0px !important;
- text-decoration:none;
- padding:0; padding-top:101px;
- margin:0; border:0;
- cursor:pointer;
-}
-
-/*** PROMOTIONAL BANNER ***/
-
-.promo-banner {
- background-position: 99% 9%;
- background-color: #ccc;
- background-repeat: no-repeat;
- font-size: large;
- overflow: hidden;
- padding: 1em 6em 0.25em 6em; /* size-review */
-}
-
-
-/*** NAVIGATION BAR ***/
-
-#navigation {
- clear: both;
- font-family: "FreeSans", sans-serif;
- padding: .3em;
- background-color: #a50606;
-}
-
-#navigation:after {
- clear: both; content: ""; display: block;
- height: 0px; visibility: hidden; width: 0px;
-}
-#navigation ul {
- text-align: center;
- font-size: 0.9em;
- line-height: 1.8em;
- padding: 0;
- margin: 0;
- background-color: #a50606;
-}
-#navigation li {
- display: inline; white-space: nowrap;
- padding: 0;
-}
-#navigation li a, #navigation li a:visited {
- font-weight: bold;
- padding: .3em .5em;
- color: white; text-decoration: none;
+.button a:hover {
+ color: #777;
}
-#navigation li.active a {
- color: #333;
- background-color: white;
+.large {
+ width: auto: max-width: 100%;
+ font-size: 2em;
+ padding: .1em;
+ background-color: #e7e9eb;
+ border: .4em solid #c9cccf;
}
-#navigation li a:hover {
- text-decoration: underline;
+.small {
+ font-size: 1.6em;
+ background-color: #e7e9eb;
}
-/*** CONTENT ***/
+/*** SPECIAL BORDERS ***/
-#content {
- text-align: left;
- padding: 0 1.5% 1em 1.5%; margin-top: 0;
+#searcher input[type="text"], #searcher input[type="submit"],
+ #fssbox input[type="text"] {
+ border-radius: .3em;
+ -moz-border-radius: .3em;
+ -khtml-border-radius: .3em;
+ -webkit-border-radius: .3em;
+ -opera-border-radius: .3em;
}
-#content h1, #content h2 {
- font-weight:bold;
- padding: 0; margin: .7em 0 .9em 0;
- color: #334683; text-shadow: #999 1px 1px 0;
+#home .button, #join-fsf a, #join-fsf a:visited, #fssbox input[type="submit"] {
+ box-shadow: 0 .15em #171d33;
+ -moz-box-shadow: 0 .15em #171d33;
+ -webkit-box-shadow: 0 .15em #171d33;
+ -icab-box-shadow: 0 .15em #171d33;
+ -o-box-shadow: 0 .15em #171d33;
+ border-radius: 1em;
+ -moz-border-radius: 1em;
+ -khtml-border-radius: 1em;
+ -webkit-border-radius: 1em;
+ -opera-border-radius: 1em;
}
-#content h1 { font-size: 2.4em; }
-#content h2 { font-size: 2em; }
-#content h3, #content h4, #content h5, #content h6, #content p {
- margin-top: 1em ;
-}
-#content h3 { font-size: 1.6em; color: #333; }
-#content h4 { font-size: 1.3em; color: #333; }
-#content h5 { font-size: 1.1em; }
-#content h6 { font-size: 1em; }
-#content ul li, #fsf-campaigns ul li {
- list-style: square;
-}
-#content ol {
- list-style: decimal; margin-left: 1.9em; margin-right: 1.9em;
-}
-#content li, #fsf-campaigns li, #content dd, #content p, #content pre,
- #content dt, #content code, #content address { line-height: 1.3em; }
-#content h3 a[href]:visited, #content h4 a[href]:visited { color: #334683; }
-#content h3 a[href]:hover, #content h4 a[href]:hover { color: #777; }
+/*** RETURN LINKS ***/
-/* For column headers in education.html, but could apply elsewhere. */
-#content .yui-gc h2 {
- text-shadow: none;
- margin-bottom: .7em;
+#backtotop a {
+ clear: both;
+ float: right;
+ font-size: 1.1em;
+ font-weight: bold;
+ margin: .7em 1em 1.5em 1em;
}
-
-#content small { font-size: .9em; }
+#backtotop a, #backtotop a:visited { color: #333; }
+#backtotop a:hover { color: #777; }
/* Equivalent of #backtotop within a section */
#content p.back {
@@ -586,206 +427,79 @@
#content p.back a:hover { color: #777; }
-/*** ADDITIONAL LINKS ***/
+/*** BIG SECTION HEADERS ***/
-#fsf-links {
- clear: both;
- font-family: "FreeSans", sans-serif;
- padding: .3em;
- background-color: #d1d4d7;
-}
-#fsf-links ul {
- text-align: center;
- font-size: .9em;
- line-height: 1.8em;
- margin: 0;
- background-color: #d1d4d7;
+#content div.big-section {
+ float: left;
}
-#fsf-links li {
- display: inline; white-space: nowrap;
- list-style: none;
- padding: 0;
+#content div.big-section h3 {
+ font-size: 1.8em;
+ padding: .2em 0;
+ margin: 1.3em .3em .6em 0 ;
+ color: black;
+ border-top: .2em solid #6989b6;
+ border-bottom: .2em solid #6989b6;
}
-#fsf-links li a, #fsf-links li a:visited {
- font-weight: bold;
- padding: .3em .5em;
- color: #222; text-decoration: none;
+#content div.big-subsection {
+ margin-top: 1.3em;
+ margin-bottom: 2em;
}
-#fsf-links li a:hover {
- text-decoration: underline;
+#content div.big-subsection h4 {
+ clear: both;
+ display: inline;
+ font-size: 1.5em;
+ margin-right: .3em;
+ color: black;
}
- /*** FSF STUFF ***/
-
-#mission-statement {
- font-size: 0.9em;
- margin: 2em 1.5% 1em 1.5%;
-}
-#mission-statement blockquote {
- font-weight: bold;
- margin: 1em 0;
-}
-#mission-statement img {
- float: left;
- height: 2em;
- margin: .3em .5em;
-}
-#mission-statement p { margin: 0 0 .2em 0; }
+/*** ANCHOR ***/
-#backtotop a {
- clear: both;
- float: right;
- font-size: 1.1em;
- font-weight: bold;
- margin: .7em 1em 1.5em 1em;
-}
-div#backtotop {
-/* For older versions of layout. */
- margin: .7em 0 0 0;
- text-align: right; padding: 1em;
-}
-#backtotop a, #backtotop a:visited { color: #333; }
-#backtotop a:hover { color: #777; }
+/* 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; }
-#sisters { font-size: .9em; margin: 0 1.5% 1.5em 1.5%; }
+span.anchor-reference-id a { color: #333; }
+span.anchor-reference-id a[href]:hover { color: #777; }
-/*** FOOTER ***/
+/*** NON-FLOATING INSETS AND HIGHLIGHTED STUFF ***/
-#footer {
- clear: both;
- font-size: .9em;
- padding: 1.11em 1.5%;
- color: #333;
+.emph-box {
+ padding: .3em 1.2em .5em 1.2em;
+ margin-bottom: 2.5em;
background-color: #f0f2f4;
- border-top: 1px solid #c9cccf;
-}
-#footer p { margin-bottom: 0; }
-
-#footer .unprintable, #footer .translators-credits {
- margin-bottom: .7em;
+ border: 1px solid #c9cccf;
}
-
-#bottom-notes { margin-top: .7em; }
-
-
-/*** HOME PAGE ***/
-
-#home:after {
- clear: both; content: ""; display: block;
- height: 0px; visibility: hidden; width: 0px;
+.emph-box p { font-size: .9em }
+#content .emph-box h4 {
+ text-align: center;
+ font-size: 1.5em;
}
-
-#home .first-column {
- width: 60%;
- float: left;
+.highlight, .highlight-para {
+ clear: both;
+ margin-bottom: 1em;
+ color: black;
}
-#home .second-column {
- width: 38%;
- float: right;
-}
address@hidden (max-width: 40em) {
- #home .first-column, #home .second-column {
- float: none;
- width: 100%;
- }
-}
-#home .first-column, #home .second-column {
- margin-bottom: 2em; margin-top: 0;
-}
-
-#home h2 {
- text-shadow: none;
- margin-bottom: .6em;
-}
-#home .first-column img { width: 80%; margin: .5em 0 1em 0; }
-#home .second-column h4 img { height: .75em; width: .75em; }
-
-#home .button {
- text-align: center;
- font-weight: bold;
- margin-top: .7em; margin-bottom: .8em;
- box-shadow: 0 .15em #171d33;
- -moz-box-shadow: 0 .15em #171d33;
- -webkit-box-shadow: 0 .15em #171d33;
- -icab-box-shadow: 0 .15em #171d33;
- -o-box-shadow: 0 .15em #171d33;
- border-radius: 1em;
- -moz-border-radius: 1em;
- -khtml-border-radius: 1em;
- -webkit-border-radius: 1em;
- -opera-border-radius: 1em;
-}
-.button a, .button a:visited {
- color: #971611;
- text-decoration: none;
-}
-.button a:hover {
- color: #777;
-}
-.large {
- width: auto: max-width: 100%;
- font-size: 2em;
- padding: .1em;
- background-color: #e7e9eb;
- border: .4em solid #c9cccf;
-}
-.small {
- font-size: 1.6em;
- background-color: #e7e9eb;
-}
-
-.emph-box {
- padding: .3em 1.2em .5em 1.2em;
- margin-bottom: 2.5em;
- background-color: #f0f2f4;
- border: 1px solid #c9cccf;
-}
-.emph-box p { font-size: .9em }
-#content .emph-box h4 {
- text-align: center;
- font-size: 1.5em;
-}
-
-#Action {
- text-align: left;
- padding: 0 1em;
- border-left: .4em solid #b9bcbf; border-right: .4em solid #b9bcbf;
-}
-
-h2#Action {
- text-align: center;
-}
-#Action h2 {
- float: none;
- text-align: center;
- padding-top: 0;
- color: #171d33;
-}
-#Action li { margin-bottom: .7em; }
-
-
-/*** HIGHLIGHTED STUFF ***/
-
-.highlight, .highlight-para {
- clear: both;
- margin-bottom: 1em;
- color: black;
-}
-.highlight {
-/* Please do not add borders. This style is applied to an in-line tag. */
- padding: .2em .5em;
- background-color: #fff898;
- border: 0;
+.highlight {
+/* Please do not add borders. This style is applied to an in-line tag. */
+ padding: .2em .5em;
+ background-color: #fff898;
+ border: 0;
}
.highlight-para {
padding: 0 1.2em;
background-color: #ffc;
border: 2px solid #b9bcbf;
}
+.lyrics {
+ background-color: #f0f2f4; font-style: italic; width: 25em;
+ padding: 2em; border: 2px solid #e7e9eb;
+ margin-left: 2em; margin-right: 2em;
+}
-/* For the announcements */
+/* Announcements */
#content div.announcement {
font-size: 1.1em; font-weight: bold;
padding: 0 1em;
@@ -797,6 +511,9 @@
margin-left: 0; margin-right: 0;
}
+/* Note about Free Software Free Society */
+#content 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 */
@@ -813,31 +530,6 @@
}
#urgent a:hover { color: #777; }
-/* For the notes about mailing lists, etc. */
-#content .note {
- clear: right;
- float: right;
- text-align: center;
- font-style: normal;
- width: 20em; max-width: 90%;
- padding: 0;
- margin: .3em 1em 1em 1em;
- border: .3em solid #3465a4;
-}
-#content .note p {
- font-size: 1.1em;
- line-height: 1.4em;
- padding: 0 1em;
- margin: 1em 0;
-}
-#content .note strong { font-size: 1.2em; }
-
-/* For the note about Free Software Free Society */
-#content blockquote#fsfs p { padding: .3em 0; }
-
-
-/*** TRANSLATED PAGES ***/
-
/* For the note saying the page is a translation. */
#content .trans-disclaimer {
text-align: center;
@@ -861,9 +553,6 @@
#outdated p {
margin: 0.2em 0;
}
-/* In the out-of-date notice, we use <br> elements to separate
- translatable texts from automatically generated items. */
-#outdated br { display: none }
#outdated a:visited { color: #334683; }
#outdated a:hover { color: #777; }
@@ -872,42 +561,438 @@
#content .translators-notes hr { margin-top: 1.65em; }
-/*** EDUCATION ***/
+/*** FLOATING NOTES ***/
+
+#content .note {
+ clear: right;
+ float: right;
+ text-align: center;
+ font-style: normal;
+ width: 20em; max-width: 90%;
+ padding: 0;
+ margin: .3em 1em 1em 1em;
+ border: .3em solid #3465a4;
+}
+#content .note p {
+ font-size: 1.1em;
+ line-height: 1.4em;
+ padding: 0 1em;
+ margin: 1em 0;
+}
+#content .note strong { font-size: 1.2em; }
+
+
+/*** TABLES OF CONTENTS ***/
+
+#content div.toc {
+ max-width: 45em;
+ padding: 0 1em 1em 1em;
+ margin: 3em auto 1em auto;
+ background: #f0f2f4;
+ border: 1px solid #c9cccf;
+}
+#content div.toc h3 { text-align: center; }
+
+
+/*** IMAGES ***/
+
+.imgright { float: right; margin: 1em; margin-right: 0; }
+.imgleft { float: left; margin: 1em; margin-left: 0; }
+
+#content .photo {
+ float: right;
+ width: 30em; max-width: 100%;
+ margin: .3em 0 1em 0;
+}
+#content .photo img, #content .photo p {
+ width: 94%;
+ padding: 0 6%;
+}
+#content .photo img.recessed { width: 90%; }
+
+
+/*** 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;
+}
+
+.listing th,
+.stx table th {
+ background: #fff898;
+ color: black;
+ font-weight: bold !important;
+ border: 1px solid #666666;
+ font-weight: normal;
+ padding: .7em;
+}
+
+.listing td a { display: block; }
+.listing .top {
+ border-top: 1px solid #666666;
+ text-align: right ! important;
+ padding: 0em 0em 1em 0em;
+}
+
+.listing .odd {
+ /*every second line should be shaded */
+ background-color: transparent;
+}
+.listing .even {
+ background-color: #f0f2f4;
+}
+.listing .listingCheckbox {
+ text-align: center;
+}
+.listing td,
+.stx table td {
+ border: 1px solid #666666;
+ padding: 1em;
+ text-align: center;
+ line-height: 1.3em
+}
+
+.listing a:hover {
+ text-decoration: underline;
+}
+
+.listing img {
+ vertical-align: middle;
+}
+
+.listing { width: 100%; }
+
+/* For wide tables, e.g. in doc/other-free-books.html */
+table.listing {
+ display: block;
+ overflow: auto;
+ padding: .1em;
+ margin: auto;
+}
+
+
+/*** TOP LINKS ***/
+
+#toplinks {
+ float: left;
+ font-size: .9em;
+ font-weight: bold;
+ padding: .6em 1.5em 0 1.5em;
+ margin: 0;
+}
+#toplinks a, #toplinks a:visited {
+ white-space: nowrap;
+ /* the next line is a workaround for Midori 0.5.8 */
+ display: inline-block;
+ color: #404040; text-decoration: none;
+ margin-right: 1em;
+}
+#toplinks a:hover { color: #777; }
+
+
+/*** SEARCHER ***/
+
+#searcher {
+ display: block;
+ text-align: right;
+ font-weight: bold;
+ padding-top: .3em; padding-bottom: .3em;
+}
+#searcher input {
+ font-size: .9em;
+ margin: 0;
+}
+
+
+/*** TRANSLATION LIST ***/
+
+#translations {
+ clear: both;
+ text-align: left;
+ font-size: .8em;
+ line-height: 1.3em;
+ padding-bottom: .5em;
+}
+#translations p {
+ padding: .1em .5em .2em .5em;
+ margin: 0 1.5%;
+ background-color: #f0f2f4;
+}
+#translations span {
+ white-space: nowrap;
+ margin-right: .5em;
+}
+#translations a, #translations a:visited {
+ color: #222; text-decoration: none;
+}
+/* Highlight the link to the original page */
+#translations span.original {
+ font-size: 1.1em; font-weight: bold;
+ padding-top: .3em;
+}
+#translations span.original a,
+#translations span.original a:visited {
+ color: #334683;
+}
+#translations a:hover,
+#translations span.original a:hover {
+ color: #777;
+}
+
+/* For translation lists below the navigation bar. */
+#content #translations { background: white; }
+#content #translations p {
+ padding: .2em .5em .3em .5em;
+ margin: 1em 0 0 0;
+ background: #e7e9eb;
+}
+
+/* Still used in some outdated translations. */
+#translations h3, #translations h4 {
+ font-size: 1em; font-weight: bold;
+ padding: 1em 1.5% 0 1.5%;
+ margin: 0;
+}
+#translations ul {
+ margin: 1em 1.5%;
+ background: #f0f2f4;
+}
+#translations li {
+ direction: ltr; display: inline; white-space: nowrap;
+ padding-left: 0.25em; padding-right: 0.25em;
+}
+
+
+/*** HEADER ***/
+
+#header:after {
+ clear: both; content: ""; display: block;
+ height: 0px; visibility: hidden; width: 0px;
+}
+
+/** FSF frame **/
+
+#fsf-frame {
+ float: right;
+ font-size: .9em;
+ text-align: center;
+ line-height: 1.3em;
+ width: auto;
+ padding: 0;
+ margin: 1em 0;
+}
+#fsf-frame a, #fsf-frame a:visited {
+ font-size: 1.1em;
+ font-weight: bold;
+ text-decoration: none;
+}
+#fsf-frame p { padding: 0; margin: 0; }
+#fsf-frame hr { display: none; }
+
+#join-fsf {
+ padding: .4em 0;
+}
+#join-fsf a, #join-fsf a:visited {
+ padding: .3em 1em;
+ color: #971611;
+ background: #e7e9eb;
+}
+
+#fssbox {
+ padding: 0;
+ margin-top: 1.3em;
+}
+#fssbox a, #fssbox a:visited {
+ color: #334683;
+}
+#fssbox form p { margin-top: .2em; }
+#fssbox input {
+ font-weight: bold;
+}
+#fsf-frame a:hover { color: #777; }
+
+
+/** GNU banner **/
+
+#gnu-banner {
+ font-size: 1.8em;
+ font-weight: bold;
+ line-height: 1.3em;
+ padding-top: 1.1em;
+}
+#gnu-banner img {
+ float: left;
+ height: 2.4em;
+ margin: 0 .15em;
+ position: relative; bottom: .4em;
+}
+#gnu-banner a {
+ color: #334683; text-decoration: none;
+}
+#gnu-banner a strong {
+ font-size: 1.4em;
+ color: #971611;
+}
+#fsf-support {
+ text-align: left;
+ font-size: .9em;
+ font-weight: bold;
+ font-style: italic;
+ padding: .5em 0;
+ margin: 0;
+ color: #555;
+}
+#fsf-support a, #fsf-support a:visited { color: #555; }
+#fsf-support a:hover { color: black; }
+
address@hidden (max-width: 40em) {
+ #gnu-banner { clear: both }
+}
+
+
+/*** NAVIGATION BARS ***/
+
+#navigation {
+ clear: both;
+ padding: .3em;
+}
+
+#navigation:after {
+ clear: both; content: ""; display: block;
+ height: 0px; visibility: hidden; width: 0px;
+}
+#navigation ul {
+ text-align: center;
+ font-size: 0.9em;
+ line-height: 1.8em;
+ padding: 0;
+ margin: 0;
+ background-color: #a50606;
+}
+#navigation li {
+ display: inline; white-space: nowrap;
+ padding: 0;
+}
+#navigation li a, #navigation li a:visited {
+ font-weight: bold;
+ padding: .3em .5em;
+ color: white; text-decoration: none;
+}
+#navigation li.active a {
+ color: #333;
+ background-color: white;
+}
+#navigation li a:hover {
+ text-decoration: underline;
+}
-/* definitions for /education-specific navigation bar
- and breadcrumbs for education */
#edu-navigation {
clear: both;
- font-family: "FreeSans", sans-serif;
- background-color: #d1d4d7;
}
ul#edu-navigation {
text-align: center;
font-size: .9em; font-weight: bold;
line-height: 1.8em;
padding: 0;
- margin: 0 -1.6%;
+ margin-top: 0; margin-bottom: 0;
+}
+#edu-navigation li {
+ display: inline; white-space: nowrap;
+ list-style-type: none;
+ padding: 0;
+}
+#edu-navigation li.current {
+ border-bottom: 4px solid #971611;
+}
+#edu-navigation li a, #edu-navigation li a:visited {
+ padding: .3em .45em .35em .45em;
+ color: #222; text-decoration: none;
+}
+#edu-navigation li.active a {
+ background-color: white;
+}
+#edu-navigation li a:hover,
+#edu-navigation li.active a:hover {
+ text-decoration: underline;
+}
+
+#fsf-links {
+ clear: both;
+ padding: .3em;
+}
+#fsf-links ul {
+ text-align: center;
+ font-size: .9em;
+ line-height: 1.8em;
+ margin: 0;
+ background-color: #d1d4d7;
+}
+#fsf-links li {
+ display: inline; white-space: nowrap;
+ list-style: none;
+ padding: 0;
+}
+#fsf-links li a, #fsf-links li a:visited {
+ font-weight: bold;
+ padding: .3em .5em;
+ color: #222; text-decoration: none;
+}
+#fsf-links li a:hover {
+ text-decoration: underline;
+}
+
+
+/*** CONTENT ***/
+
+#content {
+ padding-bottom: 1em;
}
-#edu-navigation li {
- display: inline; white-space: nowrap;
- list-style-type: none;
- padding: 0;
+
+
+/*** MISSION STATEMENT ***/
+
+#mission-statement {
+ font-size: 0.9em;
+ margin-top: 2em; margin-bottom: 1em;
}
-#edu-navigation li.current {
- border-bottom: 4px solid #971611;
+#mission-statement blockquote {
+ font-weight: bold;
+ margin: 1em 0;
}
-#edu-navigation li a, #edu-navigation li a:visited {
- padding: .3em .45em .35em .45em;
- color: #222; text-decoration: none;
+#mission-statement img {
+ float: left;
+ height: 2em;
+ margin: .3em .5em;
}
-#edu-navigation li.active a {
- background-color: white;
+#mission-statement p { margin: 0 0 .2em 0; }
+
+
+/*** FOOTER ***/
+
+#footer {
+ clear: both;
+ font-size: .9em;
+ padding-top: 1.11em; padding-bottom: 1.11em;
+ color: #333;
+ border-top: 1px solid #c9cccf;
}
-#edu-navigation li a:hover,
-#edu-navigation li.active a:hover {
- text-decoration: underline;
+#footer p { margin-bottom: 0; }
+
+#footer .unprintable, #footer .translators-credits {
+ margin-bottom: .7em;
}
+#bottom-notes { margin-top: .7em; }
+
+
+/*** EDUCATION ***/
+
+/* Breadcrumbs */
#content .edu-breadcrumb {
font-size: .9em;
font-weight: bold;
@@ -925,7 +1010,7 @@
color: #777;
}
-/* styles for subsections of /education "Case Studies" */
+/* Subsections of /education "Case Studies" */
div.edu-cases {
border-top: 5px ridge #3465a4;
border-bottom: 5px ridge #3465a4;
@@ -942,87 +1027,61 @@
padding: 0 4%;
}
-/* For images in the Education section (and elsewhere?) */
-#content .photo {
- float: right;
- width: 30em; max-width: 100%;
- margin: .3em 0 1em 0;
-}
-#content .photo img, #content .photo p {
- width: 94%;
- padding: 0 6%;
-}
-#content .photo img.recessed { width: 90%; }
-
-/* End items specific to education */
-
-
-/*** LISTINGS AND TABLES ***/
-
-.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;
-}
+/*** THIS WILL MOVE TO THE HTML EVENTUALLY ***/
-.listing th,
-.stx table th {
- background: #fff898;
- color: black;
- font-weight: bold !important;
- border: 1px solid #666666;
- font-weight: normal;
- padding: .7em;
-}
+/* home.html */
-.listing td a { display: block; }
-.listing .top {
- border-top: 1px solid #666666;
- text-align: right ! important;
- padding: 0em 0em 1em 0em;
+#home:after {
+ clear: both; content: ""; display: block;
+ height: 0px; visibility: hidden; width: 0px;
}
-.listing .odd {
- /*every second line should be shaded */
- background-color: transparent;
+#home .first-column {
+ width: 60%;
+ float: left;
}
-.listing .even {
- background-color: #f0f2f4;
+#home .second-column {
+ width: 38%;
+ float: right;
}
-.listing .listingCheckbox {
- text-align: center;
address@hidden (max-width: 40em) {
+ #home .first-column, #home .second-column {
+ float: none;
+ width: 100%;
+ }
}
-.listing td,
-.stx table td {
- border: 1px solid #666666;
- padding: 1em;
- text-align: center;
- line-height: 1.3em
+#home .first-column, #home .second-column {
+ margin-bottom: 2em; margin-top: 0;
}
-.listing a:hover {
- text-decoration: underline;
+#home h2 {
+ text-shadow: none;
+ margin-bottom: .6em;
}
+#home .first-column img { width: 80%; margin: .5em 0 1em 0; }
+#home .second-column h4 img { height: .75em; width: .75em; }
-.listing img {
- vertical-align: middle;
+#Action {
+ text-align: left;
+ padding: 0 1em;
+ border-left: .4em solid #b9bcbf; border-right: .4em solid #b9bcbf;
}
-.listing { width: 100%; }
-
-/* For wide tables, e.g. in doc/other-free-books.html */
-table.listing {
- display: block;
- overflow: auto;
- padding: .1em;
- margin: auto;
+h2#Action {
+ text-align: center;
+}
+#Action h2 {
+ float: none;
+ text-align: center;
+ padding-top: 0;
+ color: #171d33;
}
+#Action li { margin-bottom: .7em; }
+#sisters { font-size: .9em; margin: 0 1.5% 1.5em 1.5%; }
+
+/* licenses/gpl-faq.html. */
-/* This is for licenses/gpl-faq.html. */
table#gpl-compat-matrix {
display: block;
width: 100%;
@@ -1045,72 +1104,47 @@
th.gpl-matrix-license { text-align: right; }
tr.gpl-matrix-use-type { border-top: 2px solid black; }
-/* 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; }
+/* music/music.html */
-/* For license-list.html */
-#content div.toc {
- max-width: 45em;
- padding: 0 1em 1em 1em;
- margin: 3em auto 1em auto;
- background: #f0f2f4;
- border: 1px solid #c9cccf;
-}
-#content div.toc h3 { text-align: center; }
+#content .caption { color: #334683; font-size: 1.5em; margin:0; }
-#content div.big-section {
+
+/*** FOR PAGES USING OLD BOILERPLATES ***/
+
+/* [Patches have been sent to the maintainers]
+ software/emacs-muse/manual.es/pagina-en-gnu-es.html
+ software/gnowsys/index.html
+ software/gnu-c-manual/index.html
+ software/mtools/*
+ software/sather/index/html
+ audio-video.gnu.org/video/ghm*
+ audio-video.gnu.org/video/individual-projects/index.html
+*/
+#logo {
+ background:url(/graphics/topbanner.png) no-repeat;
float: left;
+ padding:0; margin:0; border:0;
}
-#content div.big-section h3 {
- font-size: 1.8em;
- padding: .2em 0;
- margin: 1.3em .3em .6em 0 ;
- color: black;
- border-top: .2em solid #6989b6;
- border-bottom: .2em solid #6989b6;
-}
-#content div.big-subsection {
- margin-top: 1.3em;
- margin-bottom: 2em;
-}
-#content div.big-subsection h4 {
- clear: both;
- display: inline;
- font-size: 1.5em;
- margin-right: .3em;
- color: black;
-}
-
-hr.separator {
- display: block;
- height: .3em;
- margin-bottom: 1.2em;
- color: #999;
- background-color: #999;
- border: none;
+#logo a {
+ display:block; overflow:hidden;
+ width:550px;
+ height:0px !important;
+ text-decoration:none;
+ padding:0; padding-top:101px;
+ margin:0; border:0;
+ cursor:pointer;
}
-/* End license-list definitions */
-
-
-/*** MUSIC ***/
-
-#content .caption { color: #334683; font-size: 1.5em; margin:0; }
-
-.lyrics {
- background-color: #f0f2f4; font-style: italic; width: 25em;
- padding: 2em; border: 2px solid #e7e9eb;
- margin-left: 2em; margin-right: 2em;
+/* software/gnu-c-manual/index.html */
+#links { display: none !important; }
+div#backtotop {
+ margin: .7em 0 0 0;
+ text-align: right; padding: 1em;
}
-/*** IMAGES ***/
+/*** UNUSED ***/
-/* Still used in /s/cgicc/. */
#gplv3-dogear {
position: absolute;
top: -1px;
@@ -1129,9 +1163,53 @@
cursor: pointer;
}
-
-/*** UNUSED? ***/
-
.pad { margin-bottom: 1em; }
.pad td { padding-left: 1em; padding-right: 1em; }
div.spacer { height: .1em; width: 100%; background-color: transparent; }
+
+/* Promotional banner */
+.promo-banner {
+ background-position: 99% 9%;
+ background-color: #ccc;
+ background-repeat: no-repeat;
+ font-size: large;
+ overflow: hidden;
+ padding: 1em 6em 0.25em 6em; /* size-review */
+}
+#content .yui-gc h2 {
+ text-shadow: none;
+ margin-bottom: .7em;
+}
+/* In the out-of-date notice, we use <br> elements to separate
+ translatable texts from automatically generated items. */
+#outdated br { display: none }
+
+/* Tweak for the old home page of audio-video.gnu.org, but
+ no effect on the current bugs in video/ghm2009 and 2011. */
+.inner h2, .inner ul { padding-left: 1.5%; }
+#header {
+ background-color: white;
+}
+
+
+/*** REDUNDANT ***/
+
+img { border: 0; }
+html, body {
+ padding: 0;
+ margin: 0;
+}
+#content h6 { font-size: 1em; }
+#content ol { list-style: decimal; }
+#content h1, #content h2 {
+ font-weight:bold;
+}
+#content h1, #content h2 {
+ padding: 0;
+}
+#content ul { padding-left: 0; }
+#content {
+ text-align: left;
+ margin-top: 0;
+}
+
- www layout.css,
Therese Godefroy <=