/* Basic CSS Styles, Tim Reeves, Stand 2010-01-30 */
/* For the xml parser the canvas is , not */
html {
width: 100%;
height: 100%; /* Gecko and Opera both need this, in html AND body */
margin: 0px;
padding: 0px;
overflow: hidden;
}
body {
width: 100%; /* MSIE has a stupidly large default value */
height: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
background-color: transparent;
}
/* To make things "pixelgenau" */
img, table, table td, form, div, div div, div div div, div div div div, pre, label {
margin: 0px;
padding: 0px;
border-style: none;
border-width: 0px;
text-align: left;
overflow: hidden;
}
table {
/* Let width default - works better in IE6 when a scrollbar comes */
border-collapse: collapse; /* Gets rid of IE Borders */
border-spacing: 0px; /* Gets rid of Firefox Borders */
}
/* and don't forget to avoid the "white-space next to ![]()
" bug in MSIE */
/* The purpose of this DIV is to get the scrollers - IE5 and IE6 disagree
about scrollers in and , so this is easy and universal.
But OH GOD the positioning in IE6!! This must itself be a positioned
block so that div.main is positioned relative to this. Otherwise, a
relatively positioned div.main is in front of 'div.alles' scrollers */
div.alles {
position: absolute; /* Opera doesn't like "relative" here */
top: 0px; /* and for "absolute" MSIE needs top left */
left: 0px;
width: 100%;
height: 100%;
overflow: auto;
}
div.horbalken {
position: absolute;
top: 106px;
left: 0px;
height: 458px;
width: 100%;
}
div.allestext {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
overflow: hidden;
background-color: transparent;
}
/* The "code" background text of the whole website */
div.allestext p {
font-family: Verdana, Tahoma, Arial, Helvetica, Geneva, Swiss, SunSans-Regular, sans-serif;
font-size: 19pt;
line-height: 135%;
margin: 1px 0px 0px 6px !important;
}
div.main {
position: relative;
top: 20px;
left: 0px;
width: 886px;
height: 546px;
margin: 0px auto; /* W3C horizontal centering here */
overflow: hidden;
background-color: transparent;
z-index: 2;
}
div.main div.logo {
position: absolute;
top: 0px;
left: 620px;
width: 202px;
height: 68px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
}
div.main div.logo img {
display: block;
position: absolute;
top: 4px;
left: 13px;
}
div.main div.clicks {
position: absolute;
top: 38px;
left: 845px;
width: 25px;
height: 25px;
padding: 8px 8px 0px 0px;
color: #4A64BB;
font-weight: bold;
text-align: right;
border-radius: 9px;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
}
div.main div#fotooltip { /* For Flyout-Menu Tooltip */
color: #444444;
font-size: 8pt;
position: absolute;
top: 66px;
left: 0px;
width: auto;
height: auto;
z-index: 999;
padding: 1px 9px;
display: none;
background-color: white;
background-image: url(../images/tip.png);
background-repeat: repeat-x;
border-top: 1px solid #666666;
border-left: 1px solid #666666;
border-right: 1px solid #8A8A8A;
border-bottom: 1px solid #8A8A8A;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
/* For browsers which are not so good, set the bottom-right corner in div.alles */
/* If this coincides with the bottom-right of div.main, then IE6/7 und FF get the
scrollers right, you can just scroll to the bottom right corner. But it does not
work right in Opera, which overlays the bottom 17px of div-main with the scroller.
SO make things visually balanced top-bottom and all content visible in Opera by
setting this 17px lower than div.main. */
div.bottomright {
position: absolute;
left: 885px;
top: 582px;
height: 1px;
width: 1px;
}
div.bottomright img {
height: 1px;
width: 1px;
}
/* Classes for Navigation */
/* This DIV is the column containing all the button menu items */
div.menuleiste {
position: absolute;
top: 100px;
left: 0px;
width: 113px;
height: 432px;
text-align: left;
overflow: hidden;
background-color: transparent;
font-family: Verdana, Tahoma, Arial, Helvetica, Geneva, Swiss, SunSans-Regular, sans-serif;
}
div.menuborder {
position: absolute;
top: 86px;
left: 112px;
width: 1px;
height: 460px;
overflow: hidden;
}
div.contfarbe {
position: absolute;
top: 86px;
left: 113px;
width: 772px;
height: 458px;
overflow: hidden;
z-index: 1; /* Allow current tab to overwrite border of div.contfarbe */
}
div.contscroll { /* Für normale Seiten, innerhalb von contfarbe */
position: absolute;
top: 10px;
left: 24px;
width: 748px;
height: 440px;
overflow: auto;
}
div.content { /* Innerhalb contscroll, beschränkt die Breite - */
position: absolute; /* 17px für Scrollbalken + dazu 10 Abstand rechts */
top: 0px;
left: 0px;
width: 721px;
height: auto;
background-color: transparent;
}
iframe.content { /* Innerhalb contscroll, nutzt diesen voll aus */
position: static;
width: 724px;
height: 436px;
border-style: none;
border-width: 0px;
background-color: transparent;
overflow: auto;
}
/* Fünf Spalten Raster - mit divs geht es nicht wegen static-flow für Skrollbalken */
div.content table.spalten {
table-layout: fixed;
empty-cells: show; /* Geht nicht in MSIE */
margin-bottom: 8px;
}
div.content table.spalten td {
overflow: hidden;
vertical-align: top;
}
div.content table.spalten td.gap {
width: 29px;
}
div.content table.spalten td.sp1 {
width: 121px;
}
div.content table.spalten td.sp2 {
width: 271px; /* 121 + 29 + 121 */
}
/* Hälfte-Hälfte - Sonderfall für Webtechnik-Gästebuch */
/* Referenzen + 'Wofür steht' werden anders gelöst, siehe haelften.css */
/* div.contscroll = 750px breit, div.content = 720px breit */
div.content table.spalten td.sp5050 {
width: 346px; /* (721-28) / 2 */
}
div.content table.spalten td.sp3 {
width: 421px; /* 121 + 29 + 121 + 29 + 121 */
}
div.content table.spalten td.sp5 {
width: 721px; /* 5x121 + 4x29 */
}
/* Classes for Text */
h1, h2, h3, h4, h5 {
text-decoration: none;
letter-spacing: 1px;
}
h5 {
letter-spacing: 0px;
}
p, ul, ol, li, td, th {
text-decoration: none;
}
p {
margin: 2px 0px 6px 0px;
line-height: 133%;
}
ul, ol {
margin: 4px 0px 0px 16px;
padding: 0px;
}
ol {
margin-left: 21px;
}
ol.mehrluft {
margin-top: 10px;
}
ul.mehrluft {
margin-top: 8px;
margin-bottom: 8px;
}
ul li, ol li {
margin: 0px 0px 6px 0px;
padding: 0px 0px 0px 1px;
line-height: 130%;
}
p.pretty:first-letter {
font-weight: bold;
}
p.mehrluft {
margin: 8px 0px 1px 0px;
}
p.lessluft {
margin: 0px 0px 0px 0px;
}
p.knapper {
line-height: 120% !important;
}
p.nachoben {
margin-top: 12px;
}
.topless { margin-top: 0px; }
.bottomless { margin-bottom: 0px; }
strong, .strong {
font-weight: bold;
letter-spacing: 1px;
}
strong {
display: block;
}
em {
font-style: normal;
letter-spacing: 2px;
}
pre {
font-family: "courier new", courier, monospace;
letter-spacing: -1px;
line-height: 145%;
font-size: 11px;
}
.fixed {
font-family: "courier new", courier, monospace;
}
div.content table.spalten td div.text {
padding: 0px 8px 6px 12px;
margin-top: 13px;
border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
}
div.content table.spalten td div.text p {
line-height: 130%; /* Compensates for loss of space due to border-radius */
}
div.content table.spalten td.sp2 div.text {
width: 249px; /* (121 + 29 + 121) - 20 */
}
div.content table.spalten td.sp5050 div.text {
width: 324px; /* 346 - 20 */
}
/* Standard link style */
a, a:link, a:visited, a:active, a:focus, a:hover {
text-decoration: underline;
}
/* Classes for Navigation */
/* The margins and paddings order: top right bottom left */
a.avble, a.avble:link, a.avble:visited, a.avble:focus, a.avble:hover, a.avble:active,
a.offen, a.offen:link, a.offen:visited, a.offen:focus, a.offen:hover, a.offen:active,
a.iscur, a.iscur:link, a.iscur:visited, a.iscur:focus, a.iscur:hover, a.iscur:active {
display: block;
height: 15px;
width: 94px;
font-size: 10px;
font-weight: bold;
text-decoration: none;
letter-spacing: 1px;
margin: 9px 0px 0px 0px;
padding: 2px 0px 0px 8px;
}
a.iscur, a.iscur:link, a.iscur:visited, a.iscur:focus, a.iscur:hover, a.iscur:active {
width: 105px !important;
}
a.avblesub, a.avblesub:link, a.avblesub:visited, a.avblesub:focus, a.avblesub:hover, a.avblesub:active,
a.offensub, a.offensub:link, a.offensub:visited, a.offensub:focus, a.offensub:hover, a.offensub:active,
a.iscursub, a.iscursub:link, a.iscursub:visited, a.iscursub:focus, a.iscursub:hover, a.iscursub:active {
height: 14px;
width: 84px;
font-size: 9px;
margin: 7px 0px 0px 10px;
}
a.iscursub, a.iscursub:link, a.iscursub:visited, a.iscursub:focus, a.iscursub:hover, a.iscursub:active {
width: 97px !important;
}
/* Position the for the menu style link */
p.menus {
position: absolute;
top: 532px;
left: 3px;
margin: 0px;
padding: 0px;
font-size: 8pt;
}
p.menus a, p.menus a:link, p.menus a:visited, p.menus a:active, p.menus a:focus, p.menus a:hover {
text-decoration: none;
}
/* Klassen für Reiter */
div.contreiter {
position: absolute;
top: 70px;
left: 112px;
width: 774px;
height: 17px;
overflow: hidden;
background-color: transparent;
font-family: Verdana, Tahoma, Arial, Helvetica, Geneva, Swiss, SunSans-Regular, sans-serif;
z-index: 2; /* Allow current cell to overwrite border of div.contfarbe */
}
div.contreitertrennera { /* Obere Zeile des Karteikastens */
position: absolute;
top: 13px;
left: 14px;
width: 745px;
height: 1px;
overflow: hidden;
z-index: 1;
}
div.contreiterfiller1 { /* Erste Füllzeile des Karteikastens */
position: absolute;
top: 14px;
left: 13px;
width: 743px;
height: 1px;
overflow: hidden;
z-index: 1;
}
div.contreiterfiller2 { /* Zweite Füllzeile des Karteikastens */
position: absolute;
top: 15px;
left: 12px;
width: 745px;
height: 1px;
overflow: hidden;
z-index: 1;
}
table.reiter {
position: absolute;
top: 0px;
left: 32px;
height: 17px;
z-index: 2;
}
table.reiter td.gap {
width: 5px;
height: 16px;
overflow: hidden;
}
table.reiter td a, table.reiter td a:link, table.reiter td a:visited,
table.reiter td a:active, table.reiter td a:focus, table.reiter td a:hover {
display: block;
position: relative; /* Positioniert da enthält positionierte Gifs */
top: 0px;
height: 14px; /* 2px (border- & padding-top) kommen hinzu */
font-size: 10px;
font-weight: bold;
letter-spacing: 1px;
padding: 1px 13px 0px 13px;
text-decoration: none;
/* -moz-border-radius-topright: 7px; */
}
table.reiter td a.cur, table.reiter td a.cur:link, table.reiter td a.cur:visited,
table.reiter td a.cur:focus, table.reiter td a.cur:hover, table.reiter td a.cur:active {
height: 15px; /* To eclipse contreitertrennerb */
}
table.reiter td a img.tablinks {
position: absolute;
top: -1px; /* Zum Border-Top hinauf verschieben */
left: 0px;
}
table.reiter td a img.tabrechts {
position: absolute;
top: -1px; /* Zum Border-Top hinauf verschieben */
right: 0px;
}
/* Tabellarische Daten ohne Umrandung, z.B. Impressum, Kontaktdaten */
table.daten {
margin-top: 6px;
}
table.daten, table.daten td {
padding-bottom: 6px;
}
/* Umrandete Tabelle mit etwas dunklerem Hintergrund, z.B. Kontaktformular */
div.content table.delineated {
margin: 0px 0px 0px 1px; /* FF loses left border w/o left margin */
}
div.content table.delineated td {
/* Padding here causes IE5 to calculate wrongly */
}
div.content table.delineated td p { /* For Text content */
margin: 3px 11px 3px 8px;
}
div.content table.delineated td p.isinput { /* For input field content */
margin: 3px 10px 3px 12px; /* Otherwise FF loses right table border */
}
div.content table.delineated td p.forCheckBox {
margin: 2px 0px 1px 13px;
}
div.content table.delineated td p.download { /* For download.gif */
margin: 3px 12px 3px 6px;
}
div.content table.delineated td.noHorBord {
border-top: 0px solid transparent !important;
border-bottom: 0px solid transparent !important;
}
/* ================================================================
This copyright notice must be untouched at all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/flyout_4level.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
/*
Changes by Tim Reeves, August 2007
1. Removed container "div.menu" as this was obscuring links in the content area
So all the style specs got changed from ".menu ul" to "ul.menu".
2. As a consequence, the outermost
got positioned on the page.
3. The opacity-gif for MSIE got moved to a "IE only" place, because it caused
Opera to show the padding area black.
4. Added an "li.fst" to allow the first element to have a border-top and the rest not.
Had to add some more stuff to adjust positioning inheritance for it.
5. Added specific widths for each level, to make them adjustable to fit (max) link texts.
6. Resorted the whole area into commented groups of styles per tag-type
*/
/* AREA 1: STYLE THE TAGS - the block elements containing a level of links */
/* Remove all the bullets, borders and padding from the default list styling */
ul.menu, ul.menu li ul, ul.menu li ul li ul {
margin: 0px 0px 0px 0px;
padding: 0px;
border-style: none;
border-width: 0px;
list-style-type: none;
list-style-image: none;
z-index: 3;
}
/* Size and (absolute) position of top level (i.e. of the complete menu on the page) */
ul.menu {
position: absolute;
/* This is personal, to position the menu container on the web page */
top: 111px;
left: 0px;
width: 113px;
}
/* Hide the sub levels and give them a position absolute so that they take up no room */
ul.menu li ul, ul.menu li ul li ul {
position: absolute;
visibility: hidden;
/* Compensate position for padding */
top: -25px;
/* Set up the overlap (minus the overrun) */
left: 95px;
/* Set up the overrun area - none on the left, obscures part of parent link */
padding: 24px 24px 24px 0px;
/* The background of the flyout elements */
background-color: transparent;
/* MSIE also needs a transparent gif for the padding to work, BUT that
/* causes Opera to show a black padding area, so put it in an "IE Only" place */
/* Opacity is CSS3 or Proprietary - but in fact works in almost all modern browsers */
/*-moz-opacity: 0.95;*/ /* Mozilla legacy */
/* The following causes Opera to show a very dark padding area */
/* if in combination with a transparent gif as background image */
/* - which is needed by IE - so put that in an "IE only" place. */
/*opacity: 0.95;*/ /* Mozilla, Opera, Safari (modern versions) */
}
ul.menu li ul li.fst ul {
top: -24px;
}
/* Individual adjustments to different level 's */
ul.menu li ul { /* 2nd level block */
/* This is personal */
width: 252px; /* The most successful approach... "auto" does NOT work */
padding-right: 0px;
}
ul.menu li ul li ul { /* 3rd level */
/* This is personal */
width: 128px;
padding-right: 24px;
}
/* For browsers that understand, this is all you need for the flyouts */
ul.menu li:hover > ul { visibility: visible; }
/* For IE5.5 and IE6 you need to style each level hover */
ul.menu li a:hover ul ul, ul.menu li a:hover ul a:hover ul ul { visibility: hidden; }
ul.menu li a:hover ul, ul.menu li a:hover ul a:hover ul { visibility: visible; }
/* AREA 2: STYLE THE - TAGS - the block elements each containing one link */
/* NOTE: Modern browsers hover on this
- element (IE5+6 on the ) */
/* Style the list items */
ul.menu li, ul.menu li ul li, ul.menu li ul li ul li {
margin: 0px;
padding: 0px;
height: 23px;
border-width: 0px;
border-style: solid;
/* float: left; /* for IE7 */
}
/* Individual adjustments to different level
- 's */
ul.menu li ul li {
/* width: 113px; */
}
ul.menu li ul li ul li {
}
/* The first list item is one pixel higher for the top border */
ul.menu li.fst,
ul.menu li ul li.fst,
ul.menu li ul li ul li.fst { height: 24px; }
/* SPIELPLATZ */
ul.menu li {
/* float: left; /* for IE7, removes mysterious bottom margin, but not feasible here */
}
ul.menu li ul {
}
ul.menu li ul li {
}
ul.menu li ul li ul {
}
ul.menu li ul li ul li {
}
/* ENDE SPIELPLATZ */
/* AREA 3: STYLE THE TAGS - the link elements themselves */
/* Basic style of all the links (inherited down the line) */
ul.menu li a, ul.menu li a:link, ul.menu li a:visited, ul.menu li a:active,
ul.menu li a:focus, ul.menu li a:hover {
display: block;
height: 22px;
line-height: 22px; /* Centers the text in the link box */
width: 111px; /* 2px border will be added */
margin: 0px;
padding: 0px;
font-size: 10px;
font-weight: bold;
text-indent: 10px;
border-style: solid; /* border-width is set individually further down */
text-decoration: none;
}
/* In this implementation, 3rd level links are broader (for longer texts) */
ul.menu li ul li ul li a, ul.menu li ul li ul li a:link,
ul.menu li ul li ul li a:visited, ul.menu li ul li ul li a:active,
ul.menu li ul li ul li a:focus, ul.menu li ul li ul li a:hover {
width: 126px; /* 2px border will be added */
}
/* Hack for IE5.5 regarding quirks mode container width */
* html ul.menu li a, * html ul.menu li a:visited { width: 113px; w\idth: 111px; }
/* The arrow to a deeper level, if there is one. Prevent inheritance! */
ul.menu li a, ul.menu li.sub ul li a, ul.menu li.sub ul li.sub ul li a {
background-image: none;
}
ul.menu li.sub a,
ul.menu li.sub ul li.sub a {
background-repeat: no-repeat;
background-position: right center;
}
/* IE6: has a table contained in the link, set its attributes */
ul.menu li a table {
position: absolute;
top: 0px;
left: -1px;
border-collapse: collapse;
}
ul.menu li a table tr td ul li a table {
top: -1px;
}
/* Style the link hover */
* html ul.menu li a:hover { position: relative; } /* for IE5+6, only can hover on link */
ul.menu li:hover { position: relative; } /* modern browsers hover on
- */
/* Finally, style the link borders, avoiding inappropriate inheritance */
ul.menu li a, ul.menu li a:visited {
border-width: 0px 1px 1px 1px;
}
ul.menu li.fst a, ul.menu li.fst a:visited {
border-width: 1px 1px 1px 1px;
}
ul.menu li.sub ul li a, ul.menu li.sub ul li a:visited {
border-width: 0px 1px 1px 1px;
}
ul.menu li.sub ul li.fst a, ul.menu li.sub ul li.fst a:visited {
border-width: 1px 1px 1px 1px;
}
ul.menu li.sub ul li.sub ul li a, ul.menu li.sub ul li.sub ul li a:visited {
border-width: 0px 1px 1px 1px;
}
ul.menu li.sub ul li.sub ul li.fst a, ul.menu li.sub ul li.sub ul li.fst a:visited {
border-width: 1px 1px 1px 1px;
}
div.main p#loggedinas {
position: absolute;
top: 3px;
left: 116px;
margin: 0px;
padding: 5px 6px;
}
/* Styles for the search box */
div.main div#suchform {
position: absolute;
top: 31px;
left: 112px;
width: auto;
height: auto;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
}
div.main div#suchform form#search {
padding: 0px;
}
/* Optimiert für Firefox, angepasst in ie_styles.css. Safari und Opera nicht optimal. */
div.main div#suchform form#search p {
margin: 3px 6px 5px 6px;
}
.searchword {background-color: #ffd; border: 1px dotted #ffd;}
.searchword0 {background-color: #ff0; border: 1px dotted #ff0;}
.searchword1 {background-color: #0f0; border: 1px dotted #0f0;}
.searchword2 {background-color: #0ff; border: 1px dotted #0ff;}
.searchword3 {background-color: #fbb; border: 1px dotted #fbb;}
.searchword4 {background-color: #dfd; border: 1px dotted #dfd;}
.searchword5 {background-color: #faf; border: 1px dotted #faf;}
.searchword6 {background-color: #ccc; border: 1px dotted #ccc;}
/* Styles for forms, subsumed from forms.css for ever-present search form */
form {
padding: 10px 0px 0px 0px;
}
input.myField, textarea {
font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular, sans-serif;
font-size: 12px;
width: 306px; /* See table.spalten sp3 | table.delineated | Large fonts */
margin: 0px;
padding: 0px 1px 0px 3px;
}
input.myField {
height: 17px;
padding: 0px 1px 0px 4px;
}
textarea {
width: 308px; /* FF needs this */
padding: 0px 0px 0px 2px;
height: 62px;
overflow: auto;
}
input.myRadio {
margin: -2px 6px 0px 0px;
padding: 0px;
vertical-align: middle;
}
input.myCheck {
margin: -1px 6px 0px 0px;
padding: 0px;
vertical-align: middle;
}
input.myButton, input.myButtonDown {
/* Windows refuses to make a 10px Arial in a button bold */
font-family: Verdana, Tahoma, Arial, Helvetica, Geneva, Swiss, SunSans-Regular, sans-serif;
font-size: 10px;
font-weight: bold;
letter-spacing: 1px;
/* Same total height as input field required - looks more harmonious */
/* BUT all browsers seem to go crazy and disregard the box model on buttons */
/* Trial-and-error result here is opti in FF, OK in Safari, see ie_styles.css */
margin: 0px;
padding: 1px 6px 2px 6px;
cursor: pointer;
}
table.spalten td.sp2 div.text form {
padding: 0px 0px 0px 0px;
}
table.spalten td.sp2 div.text form input.myField {
width: 216px;
}
div.main div#suchform form#search p input.myField {
width: 216px;
}
div.main div#suchform form#search p input.myButton,
div.main div#suchform form#search p input.myButtonDown {
font-weight: normal;
}
.antwort {
background-color: #70FF70;
}