/* CSS definitions for corporate design of www.truefidelity.de * * tactix: - text blocks are clustered in
s to organize the layout. * - page header is a special
, avoids frames. * - tables shall not be misused for layout purposes, unless page specific * - text properties are determined by the logical context, e.g.; * h1, em,
etc. * - text size shall be in 'em' --> reason: 'px' depends on Mac/PC; * 'pt' may look crappy for some combinations of fonts/browsers. * - rather complicated CSS is tolerated --> advantage: JavaScript * is not necessary (may be deactivated). * * (copyleft) 2006 Helge Lueddemann */ /******************************************************************************/ /* basic HTML elements */ /******************************************************************************/ body { background-color : #ffffff; /* overwrite user settings */ color : #000000; /* text colour: overwrite user settings */ font-family : Verdana,Arial,Helvetica,sans-serif; /* pick a clear font */ width : 760px; /* fixed width, is 760px */ margin-left : auto; /* distance to left viewport border: auto-space, centered */ margin-right : auto; /* distance to right viewport border: auto-space, centered */ /*text-align : center; /* needed for centered page (IE5 ??) */ } p { text-align : left; /* fix the centered alignment of the body element */ /*text-indent : 2em; /* indent first line of paragraph */ line-height : 1.3em; /* vertical line spacing */ margin : 1em 0; /* (top/bottom left/right) */ /*border : dotted 1px black; /* !!! only for debugging !!! */ } table.cList { margin-left:auto; margin-right:auto; } /* tables with centered list */ td { vertical-align:top; text-align:left; } /* same default alignment as in other elements (left is useful for sitemap) */ h2 { text-align:center; font-size:1.8em; font-weight:bold; } h3 { text-align:center; font-size:1.6em; font-weight:normal; background-image:url(./pix/stripes.jpg); padding:3px; margin:20px 0; clear:both; } h4 { text-align:center; font-size:1.2em; font-weight:bold; } table.cList h6 { text-align:right; font-size:1em; font-weight:bold; } /* h2 --> page title: centered text, quite big, bold */ /* h3 --> section title: centered text, significantly bigger font, normal */ /* weight, background image, inner and outter margin */ /* h4 --> subsection title: centered text, slightly larger, bold */ /* h6 --> aligned to midline in 2-column-table, normal size, bold */ em { font-style : italic; } /* text, emphasized */ strong { font-weight : bold; } /* text, strongly emphasized */ a:link { text-decoration:none; color:#00008b; } /* normal links, darkblue=#00008B */ a:visited { text-decoration:none; color:#4682b4; } /* visited links, steelblue=#4682B4 */ a:hover { text-decoration:none; color:#0000ff; } /* links with mouse over, blue=#0000FF */ a:active { text-decoration:none; color:#000000; } /* link to current page, black=#000000 */ img { border:0; padding:0;} /* turns off gaps and lines around images (IE) */ ul { list-style-image:url(./pix/lapis_10x20.gif); } /* use small truefidelity logo as list bullet */ /*ul { list-style-image:url(./pix/lapis_12x25.gif); } /* use small truefidelity logo as list bullet */ hr { height:2px; background-color:#f5f5f5; margin:10px auto; } /* whitesmoke=#f5f5f5 */ hr.wavelet, hr.waveletLeft { width : 640px; /* is wider than the sectionContent box! */ height : 40px; /* */ background-image : url(./pix/wavelet_640x40.jpg); /* */ background-repeat : repeat-x; /* */ border : 0px none; /* */ margin : 10px auto; /* */ /*text-align : center; /* redundant for browser inconsistency */ } hr.waveletLeft { background-image:url(./pix/wavelet_640x40left.jpg); } .sectionContent hr.wavelet, .sectionContent hr.waveletLeft { position:relative; left:-20px; } /* move to the left because img is 40px wider than the sectionContent box. */ /******************************************************************************/ /* layout: table of contents (a little bit dirty...) */ /* - toc is organized in a table with 1-5 cells per row */ /* - first cell always contains the page title in

*/ /* - cells 2-5 contain images and section titles, both in */ /* (other more complicated methods have failed.) */ /* (IE5 may need to put the table into an extra div and */ /* set div#toc table {text-align:center}) */ /******************************************************************************/ table#toc { margin : 30px auto 30px; /* for centered alignment with some vertical space */ /*border-collapse : collapse; /* no space between cells */ } #toc td { width:100px; text-align:center; padding-bottom:10px; } #toc h2 { display:inline; padding-right:40px; } /******************************************************************************/ /* layout: page foot */ /* - contains links, copyright, last changes */ /* - elements are centered and have some more vertical space in between than */ /* usual */ /******************************************************************************/ #pageFoot { width:760px; text-align:center; margin-top:20px; } #pageFoot * { margin : 0.5em 0; } /******************************************************************************/ /* layout: section */ /* -

shall be used for section titles, has full width background image. */ /* - class .sectionIcon contains a 60x60 px image at the left side. */ /* - class .sectionContent contains subsection titles in

and text in

*/ /* and has some distance to the left/right page margin. */ /******************************************************************************/ div.sectionIcon { /* icon graphics at the section's left margin */ float : left; /* section text follows right to the icon */ width : 80px; /* fixed width of 80px */ clear : both; /* make sure that it starts top aligned to the new sectionContent */ /*border : dotted 1px black; /* !!! only for debugging !!! */ } div.sectionContent { /* section contents: images, tables, text etc., all encapsulated in right column */ margin-left : 80px; /* fixed distance to left border of #pageContent */ width : 600px; /* fixed width of 600px */ text-align : left; /* align elements to the left side of the box */ /*border : dotted 1px black; /* !!! only for debugging !!! */ } .sectionContent img { margin:7px; } /* leave some space to the text */ /******************************************************************************/ /* special elements: */ /******************************************************************************/ h3 { text-align:center; font-size:1.6em; font-weight:normal; background-image:url(./pix/stripes.jpg); padding:3px; margin:20px 0; clear:both; } div.linkList { text-align:center; padding:3px; background-image:url(./pix/stripes.jpg); clear:both; } /* horizontal list of links, occurs at page header and foot */ a.totop { display:block; float:right; text-align:right; width:100%; } /* link to top of page, at right border: */ /* stuff that sucks: */ /* + "clear:both;" is required in div.linkList and in h3 to workaround an */ /* Opera7 bug: Opera extends the backgroud-image of the subsequent block */ /* element (div.linkList or h3) topwards into the a.totop-linkstyle. */ /* + a[rel] { display:block; float:right; } requires the proprietary code */ /* [top] in the HTML. */ /* + a[href=#top] would make more sense, but wont work with most browsers. */ /* also try: */ /* vertical-align:text-bottom; */ /* vertical-align:baseline; */ /* EOF */