1 Current CSS file

This file is generated from a template and used throughout the a2e sites in variations controlled by switches.

It works together with a template of a template from whose output Deplate uses for generating web pages from our wiki-like source text.

All object files are generated through a Makefile-based mechanism as soon as a parameter file is changed.

@charset "UTF-8";

body {
    font-size: 1em;
    margin-left: 1em;
    margin-right: 1em;
    font-family: sans-serif,"trebuchet 
    ms",verdana,arial,helvetica,sans-serif;
    min-width: 60em;
    /* padding: 1px; */
    color: #000000;
    background-color: #ffffff;
    text-align: left;
}

a {
    color : black;
    text-decoration: none;
}
a:link {
    /* color : #0071f0; */ 
    /* color : #07f; */
    color: #698288;

}
a:visited {
    /* color : #30306f; */
    color: #a0acb0;
}
a:hover {
    background-color: rgb(210,210,210);
}
a:link.ref {
}
a:visited.ref {
}

p {
    /* border-left: 10px solid #ffffff; */
    /* border-right: 10px solid #ffffff; */
    margin: 0 10px 0 10px;
    padding: 5px;
    /* text-indent: 20px; */
}
big {
}

hr {
}
hr.pagebreak {
    color: #000000;
}

img {
    border: 0;
}
img.latex {
    vertical-align: middle;
}
img.inline {
}

.dokmid h1, .dokmid h2 {
    text-align: left;
    margin-left: 0.5em;
}
.dokmid h1 {
    padding: .5em 0px;
    border-top: 1px solid #a0acb0;
    font-size: 1.4em
}
.dokmid h2 {
    font-size: 1.3em	
}
.dokmid h3 {
    font-size: 1.2em	
}
.dokmid h4 {
    font-size: 1.1em	
}
.dokmid h5 {
    font-size: 1.05em	
}
.dokmid h6 {
    font-size: 1em	
}

.dokmid p.center {
	text-align: center;
}

.dokmid p.right {
	text-align: right;
}

.dokmid p.details {
    clear: both; 
    margin: -0.25em 0 1.0em 0;
    line-height: 1.0em;
    font-size: 110%;
}

.dokmid blockquote {
    clear: both; 
    margin: 0 30px 0.6em 30px;
    font-size: 90%;
}

blockquote.longquote {
}
blockquote.abstract {
}

.dokmid table {
    clear:both; width:600px; 
    margin:2.0em 0 0.2em 20px;
    table-layout: fixed;
    border-collapse: collapse;
    empty-cells:show;
}

table th.top {
    height: 3.5em;
    padding: 0 7px 0 7px;
    empty-cells: show;
    background-color: rgb(175,175,175);
    text-align: left;
    color: rgb(255,255,255);
    font-weight: bold;
    font-size: 110%;
}

Old stuff that is probably not used anywhere. Perhaps in deplate?

p.caption {
    clear: both;
    margin: 0.5em 0 2.0em 20px;
    text-align: left;
    color: rgb(80,80,80);
    font-size: 110%;
}

1.1 OSWD elements

The following is derived from OSWD stylesheets but currently not used.

1.2 Deplate Elements

The following section comes from Deplate.

ul.Task {
    list-style-type: none;
}
li[class|=Task] {
}
li.Task-A {
}
li.Task-B {
}
li.Task-C {
}
li.Task-D {
}
li.Task-E {
}
li.Task-F {
}
li.done[class^=Task] {
    color: #606060;
    text-decoration: line-through;
}
span[class|=Task] {
    font-weight: bold;
    padding: 0 5px 0 5px;
    position: relative;
    right: 10px;
}
span.Task-A {
    background-color: #ff7f7f;
}
span.Task-B {
    background-color: #7fff7f;
}
span.Task-C {
    background-color: #7f7fff;
}
span.Task-D {
    background-color: #7fffff;
}
span.Task-E {
    background-color: #ff7fff;
}
span.Task-F {
    background-color: #ffff7f;
}
br.itempara {
}
p.itempara {
    border-left: 0;
    border-right: 0;
    padding: 0;
}

pre {
	margin-left: 40px;
	margin-right: 40px;
    padding: 5px;
}

pre.verbatim {
    background-color: #eaeaea;
    border-left: 5px solid #efefef;
    font-family: courier,sans-serif;
    font-size: 0.8em;
}

div.code {
    background-color: #ffffff;
}

/* Tables */
div.table {
    /* text-align: center; */
    padding: 10px;
}
div.tableNote {
    /* text-align: center; */
}
table, tr, th, td {
    border-style: none;
    /* background-color: rgb(233,233,233); */
    border-spacing: 0;
    color : black;
}
table {
    /* border-left: 10px solid #ffffff; */
    /* border-right: 10px solid #ffffff; */
    /* margin: 0 10px 0 10px; */
    margin: 0;
}
thead {
}
tfoot {
}
tr, th, td {
    padding: 2px;
    border: 1px solid #ffffff;
}
tr {
}
tr.head {
}
tr.foot {
}
tr.high {
}
th {
}
td {
}
td.head {
}
td.foot {
}
td.high {
}

/* Styled Tables */
.small {
}
.scriptsize {
}
.footnotesize {
}

.grid {
    background-color: rgb(233,251,255);
    border-collapse: collapse;
}
div.grid {
    border: 0;
}
th.grid, td.grid {
    border: 1px solid #000000;
    padding: 2px;
}

.formal {
    background-color: rgb(233,251,255);
}
div.formal {
    border: 0;
}
table.formal {
    border-top: 2px solid #000000;
    border-bottom: 2px solid #000000;
    border-left: 0;
    border-right: 0;
}
thead.formal {
}
tfoot.formal {
}
tr.formal[class~="head"] {
}
tr.formal[class~="foot"] {
}
td.formal, th.formal {
    border: 0;
    padding: 2px;
}
th.formal[class~="head"] {
    border-bottom: 1px solid #000000;
}
td.formal[class~="foot"] {
    border-top: 1px solid #000000;
}
.box {
    /* background-color: rgb(233,251,255); */
    margin: 0px;
    padding: 0px;
}
div.box {
    border: 0;
    margin: 0px;
    padding: 0px;
}
table.box {
    /* border: 1px solid #000000; */
    background-color: rgb(233,251,255);
    margin: 0px;
    padding: 0px;
}
thead.box, tfoot.box {
    border: 1px solid #000000;
}
td.box, th.box {
    border: 0;
    padding: 10px;
    margin: 0px;
    border-bottom: 1px solid rgb(233,251,255);
}
th.box[class~="head"] {
    border-bottom: 1px solid rgb(233,251,255);
}
td.box[class~="foot"] {
    border-top: 1px solid rgb(233,251,255);
}
td.box[class~="high"] {
    border-left: 1px solid rgb(233,251,255);
    border-right: 1px solid rgb(233,251,255);
}

.overlay {
    background-color: rgb(233,251,255);
}
div.overlay {
    border: 0;
}
table.overlay {
    border: 1px solid #000000;
}
thead.overlay {
    background-color: #e0e0e0;
    border: 1px solid #000000;
}
tfoot.overlay {
    background-color: #eaeaea;
    border: 1px solid #000000;
}
tr.overlay[class~="head"] {
}
td.overlay, th.overlay {
    border: 0;
    padding: 2px;
}
th.overlay[class~="head"] {
    background-color: #e0e0e0;
    border-bottom: 1px solid #000000;
}
td.overlay[class~="foot"] {
    background-color: #eaeaea;
    border-top: 1px solid #000000;
}
td.overlay[class~="high"] {
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
    background-color: #eaeaea;
}


/* htmlnavigation: Usage note */
.htmlnavigationnote {
    color: #888888;
}
p.htmlnavigationnote {
}
ul.htmlnavigationnote {
}
li.htmlnavigationnote {
}
hr.htmlnavigationnote {
    margin-top: 20px;
    /* border: 1px; */
}


/* Navigation bar */
a:link.navbarUrl, a:visited.navbarUrl {
    color : #7f607f;
}
a:link.navbarUrl {
}
a:visited.navbarUrl {
}
.navbar, .navmenu, .navgo {
    background: rgb(233,251,255);
    vertical-align: middle;
}
table.navbar {
    width: 100%;
    margin: 20px 0 20px 0;
}

td.navbar {
    text-align: center;
}
td.navmenu {
    width: 80%;
    text-align: left;
}
select.navmenu {
    width:250px;
    border:0;
}
p.navgo {
    border: 0;
    padding: 0;
    margin: 0;
}
button.navgo {
    border: 0;
}


/* Figure */
div.figure {
    text-align: center;
    padding: 20px;
}


/* Caption */
caption {
}
p.caption {
}

1.2.1 Deplate header

The following deplate header stuff is probably not used because we have our own deplate templates.

1.2.2 Deplate table of contents

/* Table of Contents etc. */
div.toc, div.lot, div.lof {
}
ul.toc, ul.lot, ul.lof {
}
li.toc, li.lot, li.lof {
    list-style-type : none;
    padding: 1px;
}

div.toc {
}
p.toc {
}
ul.toc, li.toc {
}
ul.toc {
}
li.toc {
}

div.lot {
}
p.lot {
}
ul.lot, li.lot {
}
ul.lot {
}
li.lot {
}

div.lof {
}
p.lof {
}
ul.lof, li.lof {
}
ul.lof {
}
li.lof {
}
hr.list {
    color:#f1f08f;
    background-color: #e4f8fc;
    border: 1px solid #f1f08f;
    padding: 1px;
    margin: 0 45% 0 45%;
}

div#List_of_Examples * li {
    list-style-type : none;
    padding: 1px;
}
p.example {
    margin-top: 10px;
    font-weight: bold;
}

/* Mini Table of Dokmids */
#Contents { 
    position: absolute;
    top:50px; 
    left:0px; 
    padding:0px; 
    visibility:hidden; 
    margin:0px;
}

#ContentsBlock { 
    position: absolute;
    top:30px; 
    left:0px; 
    padding:0px; 
}

div.minitoc {
    max-height: 500px;
    background: #f1f1f1;
    /* border-top: 1px solid #e0e0e0; */
    /* border-bottom: 1px solid #e0e0e0; */
    /* border-right: 1px solid #e0e0e0; */
}

h1.minitoc {
    margin: 0;
    padding: 5px;
    border: 0;
}
ul.minitoc {
}
li.minitoc {
}


/* Footnotes */
a:link.footnote, a:visited.footnote {
    vertical-align: top;
}
a:link.footnote {
}
a:visited.footnote {
}
div.footnotes {
    border-top: 1px dashed #888888;
    margin-top: 30px;
    padding-top: 10px;
}
p.footnotes {
    border-top: 1px solid #ffe590;
    padding-top: 10px;
    margin: 40px 40% 0 0;
}
ol.footnotes {
}
li.footnotes {
}


/* OpenOffice compatible footnotes */
.sdfootnoteanc {
    vertical-align: top;
    color: #30306f;
}
.sdfootnotesym {
    background-color: #e4f8fc;
    vertical-align: top;
    color: #30306f;
    margin-right: 4px;
}

.sdfootnote {
    /* margin-left: 5%; */
    /* margin-right: 5%; */
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 2px;
    margin-top: 2px;
}


/* Bibliography */
.bib, .bibLef, .bibRight {
    background-color: rgb(233,251,255);
}
table.bib {
    width: 100%;
}
td.bibLeft {
}
td.bib {
}
td.bibRight {
}
h1.bib {
}
p.bib {
    margin-left: 20px;
    text-indent: -20px;
}


/* Index */
h2.index {
}
p.indextoc {
}
dl.index {
}
dt.index {
}
dd.index {
}


/* Marker */
div.note, div.warning, div.caution, div.important {
    /* position: absolute; */
    /* left: 720px; */
    /* width: 100px; */
    /* background-color: #eaeaea; */
    /* background-color: #ffe590; */
    background-color: #fff3d0;
    /* background-color: #ffff00; */
}
p.note, p.warning, p.caution, p.important {
    padding: 5px;
    margin: 0;
}
p.note {
    border-left: 10px solid #ffff00;
    border-right: 10px solid #ffff00;
}
p.warning {
    border-left: 10px solid #cf0000;
    border-right: 10px solid #cf0000;
}
p.caution {
    border-left: 10px solid #ef4f00;
    border-right: 10px solid #ef4f00;
}
p.important {
    border-left: 10px solid #009f9f;
    border-right: 10px solid #009f9f;
}

em.marker {
    color : #910000;
    background-color: #ffff00;
}
span.marker {
    position: absolute;
    left: -25px;
    width: 60px;
    text-align: right;
}
/* Header, Footer */
.header, .footer {
    background-color: #eaeaea;
    border: 0;
}
div.header, div.footer {
}
table.header, table.footer {
    width: 100%;
}
thead.header, thead.footer {
}
tr.header, tr.footer {
}
th.header, th.footer {
}
td.header, td.footer {
}
p.header, p.footer {
}

/* Validate HTML */
div.pageicons {
    text-align: right;
    margin: 10px;
}
.validhtml {
    background-color: rgb(233,251,255);
}
table.validhtml {
}
tr.validhtml {
}
td.validhtml {
}


/* ProgressBar */
.progressBar {
    max-width: 150px;
}
div.progressBar {
    background-color: #dfdfff;
    text-align: center;
    vertical-align: middle;
    padding-top: 10px;
    padding-bottom: 10px;
}
table.progressBar {
    table-layout: fixed;
    min-width: 130px;
    border: 1px solid #30306f;
    padding: 0;
    margin: 2px 4px 2px 4px;
}
td.progressBarDone, tr.progressBarDone {
    border: 0;
    background-color: #ffe590;
}
td.progressBarToBeDone, tr.progressBarToBeDone {
    border: 0;
    background-color: #dfdfff;
}
span.progress {
    color: #30306f;
}

li.todo[class~="plus"] {
    list-style-type: none;
}
li.todo[class~="plus"]:before {
    font-weight: bold;
    content: "[TODO]";
    color: #ff0000;
    background-color: #ffff00;
}
li.todo[class~="dash"] {
    list-style-type: none;
    text-decoration:line-through;
    color: #555555;
}
li.todo[class~="dash"]:before {
    font-weight: bold;
    content: "[DONE]";
}

iframe {
    border: 0;
}

.bold {
    font-weight: bold;
    font-style: normal;
}


div.comment {
    margin: 40px 80px 10px 80px;
    font-size: 80%;
    line-height: 135%;
}
span.comment_author {
    font-weight: bold;
}
span.comment_author:after {
    content: ": ";
}
span.comment_subject {
    font-weight: bold;
}
span.comment_date {
    font-style: italic;
    font-size: 70%;
}
div.comment_title {
}
div.comment_text {
    margin: 0 0 0 20px;
}
div.comment_form {
    margin: 40px 80px 5px 80px;
}
table.comment_form {
    border: 0;
}
tr.comment_form {
    border: 0;
}
td.comment_form {
    border: 0;
    vertical-align: top;
    font-size: 80%;
    line-height: 135%;
}

input, textarea {
    border: 1px solid #2f2f5f;
    font-size: 90%;
    line-height: 135%;
}
button {
    font-size: 90%;
    line-height: 135%;
}

The following seems to be from Deplate but unused.

1.3 Homegrown page elements

The following is mostly written by us, initially for the old eupat.ffii.org site.

1.3.1 Top section

#doktop {
    width: 100%;
    height: 128px;
    /* border-bottom: 10px solid #cdd5d7; */
    background: transparent url(/a2e.gif) 
    no-repeat;
    /* background-color: #ffffff; */
    /* overflow: visible; */
    /* Title of docuement, hover problem still 
    exists*/
    /* color: #000066;*//*#1C2D95;*/
    /* color: #FFA500; */
    text-align: center; 
    padding-top: 0;
    padding-bottom: 0; 
    text-align: center;
    /* font-family: sans-serif,"trebuchet 
    ms",verdana,arial,helvetica,sans-serif; */
    font-weight: bold;	  
    font-variant: small-caps;
}
#doktop h1 {
    font-size: 1.6em;
}
#doktop h2 {
    font-size: 1.4em;
}
#doktop h3, div.sut {
    font-size: 1.2em;
}

#doktop h1, #doktop h2, #doktop h3, #doktop h4, 
#doktop h5, #doktop h6, div.sut  {
    margin-left: 128px;
    text-align: center;
}
/*Short desription text of document */
#dokdes
{
  text-align: center;	
  font-style: oblique;
  font-size: 1em;
}
#papri 
{
  text-align: center;	
  font-style: italic;
  font-size: 90%;
  margin-left: 1ex;
  right: 70%
}

1.3.2 Center of the page

.dokmid h1, .dokmid h2, .dokmid h3, .dokmid h4, 
.dokmid h5, .dokmid h6  {
    margin-left: 0px;
    text-align: left;
    background-color: transparent;
}
div.langforms
{
    text-align: right;	
}
div.langflags
{
    text-align: right;
}
div.formflags
{
    text-align: left;
}

H1,H2,H3,H4,H5,H6 { font-family: 
sans-serif,"trebuchet 
ms",verdana,arial,helvetica,sans-serif; }

The following should have no effect since dokmid is a class not an id.

1.3.3 Document footer

#dokped { 
	border-top: 1px solid #a0acb0;
	margin-top: 1px;
	padding: 1ex;
	font-size: 90%;
}
#pedarb {
    text-align: center;
    font-size: smaller;
    clear: both;
}
#dokadr {
    font-size: 0.8em;
}

The following stuff from eupat.ffii.org seems to be out of use.

1.4 Sidepanels from Moinmoin

Much of the following may have originated from a Moinmoin stylsheet used at FFII.

.sidepanel {
    padding-right: 0.5em;
    background-color: rgb(233,251,255);
    border-right: 0;
    margin-left: 0.5ex;
}

.sidepanel h1, .sidepanel h2, .sidepanel h3, 
.sideBarTitle {
    text-align: left;
    /* color: #698288; */
    border-top: 1px solid #a0acb0;
    background-color: white;
    font-weight: bold;
    /* font-size: 120%; */
    margin-top: 0.5ex;
    margin-bottom: 0.5ex;
    margin-left: 0em;
    margin-right: 0em;
    /*
    padding-top: 0.5ex;
    padding-bottom: 0;
    padding-left: 0em;
    padding-right: 0em;
    */
}

.sidepanel ul {
    padding-left: .5em;
    padding-right: .5em;
    margin: 0pt;
    font-size: 90%;
    font-family: sans-serif,"trebuchet 
    ms",verdana,arial,helvetica,sans-serif;
}

.sidepanel li {
    margin-bottom: .5ex;
    margin-left: 1ex;
    /* border-top: 1px dashed #a0acb0; */
    font-weight: bold;
}

.sidepanel a:hover {
    background-color: rgb(210,210,210);
}


td.cText {
 text-align: right;	 
 font-weight: bold;
 width: 50%;
}

td.cInput {
 text-align: left;
 width: 50%;
}

1.4.1 Stuff fromm screen.css of Moinmoin

The first part is related to the header and not used much by us. Let us see if we can omit it.

The sidebar stuff is used a lot.

/* ##### Side Bar ##### */

table.columnizer {
    width: 100%;
    margin-top: 0em; /* FIXME: remove if redundant 
    */
    /* background-color: #ffffff; */
}

tr.columnizer {
    vertical-align: top;
    margin-top: 0em;  /* FIXME: remove if 
    redundant */
}

td.nav {
    /* border-right:1px solid #0071f0; */
    /* border-left: 2px solid #c0b080; */
    /* border-right:1px solid rgb(100,100,100); */
    /* border-left: 1px solid rgb(100,100,100); */
    width: 128px;
    vertical-align: top;
    border-right: 1px solid #a0acb0;
}

td.newsticker {
    width: 240px;
    border-left: 1px solid #a0acb0;
    vertical-align: top;
}
td.dokdes {
    /* border-left: 1px solid #a0acb0 */
    /* color used to be #cdd5d7 */
    background-color: #ffffff;
    text-align: left;
}
td.dokmid {
    text-align: left;
    vertical-align: top;
    font-size: 1em;
    padding: .5ex .5em;
    background-color: rgb(233,233,233);
}

.sidebar {
    padding: 0;
    font-size: 0.9em;
    /*
    background-color: white;
    margin-left: 0;
    padding-left: 0;
    */
}

.sidebar ul {
    list-style-type: none;
    list-style-position: outside;
    margin-left: 0.5em;
    margin-right: 0em;
    margin-top: 0ex;
    margin-bottom: 0ex;
    padding-top: 0.5ex;
    padding-left: 0.5em;
    padding-right: 0em;
    padding-bottom: 0.5ex;
    font-size: 90%;
}

.sidebar .int {
    border-top: 1px dashed #a0acb0;
}

.sidebar li {
    margin-left: 0em;
    margin-right: 0em;
    margin-bottom: 2px;
    margin-top: 5px;
    text-decoration: none;
    padding: 0.1ex 0;  /* Circumvents a rendering 
    bug (?) in MSIE 6.0 */
}
.sidebar a, .current {
    padding-top: 0.5ex;
    padding-bottom: 0.5ex;
    padding-left: 0.5em;
    padding-right: 0em;
    text-decoration: none;
}
.sidebar li a {
    color: #698288;
    display: block;
}
.sidebar .ekso a {
    font-size: 80% ;
    color: rgb(210,210,210);
}
.sidebar .ekso a:hover {
    color: white ;
    background-color: rgb(210,210,210);
}
.current {
    /*
      color: rgb(253,160,91);
      border-top: 1px solid rgb(253,160,91);
      border-bottom: 1px solid rgb(253,160,91);
      display: block;
      */
    color: white; 
    background-color: #698288;

}

The following appears unneeded.

The following does not seem to be in use.

1.5 Drop-down menu from Forreest

Much of this may have come from the Apache Forrest project. We are currently not generating dropdown menus but may want to do so soon.

2 Chronology

• 2009-04-22 reformatted this page as a literate program from which the css code is generated
• 2007-04-22 first attempts to adapt OSWD stylesheets to our local web content production system
• 2007-03-05 first attempts to adapt FFII.de stylesheets to Deplate-based production system
• 2007-03-02 moved to ADP, css-sheets of different websites are separated installable via ‘make install’ by root privilege only
• 2007-01-16 apache created this directory

3 Tasks

1. Explain the existing CSS pages
2. Develop a simple scheme for literary programming of CSS pages using
   • Deplate source document with verbatim regions that are written to object *.css files
   • Means of extracting the regions and building *.css files from them, either by Deplate macros or an independent program invoked from Makefile
   • Rules for composing *.css files from source documents
3. Document and improve the CSS pages on this basis
4. Ask a professional with better aesthetic sense to improve further

4 Resources

4.1 CSS Documentation

• W3C: Web Style Sheets Home Page
• Selfhtml.de, Webdoku aus Opensuse 11.0

4.2 Designers, Templates, Theory

• OSWD Layout 2 in local copy
• Andreas Viklund
• OSWD Multiflex
• Jorga Interactive
• Kolur (Toni Allen) Color Palette Inspiration – advice on which colors go together, e.gl
  • Jeremy Wright: A wide range of contrasting and complimenting colours. – “Really most of these will work well together independently to give either a light and airy (look at all those pastelles!) look, or an equally dark and foreboding earth-tone feel. Mix and match for your pleasure.”

4.3 Other CSS files

• From Deplate
• oswd – Multiflex Layout, possibly adaptable for us
• etc – various css files

4.4 Interesting page designs

• TWiki
  • Success story of Michelin China
• Wikipedia list of CMS
• Django Tutorial