/* CSS Styles for Dakini, Author Tim Reeves, Stand 2011-12-23 */
/* 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;
background-color: #285D2B;
background-color: #7FC241;
background-color: #50821F;
font-family: Arial, Tahoma, Helvetica, Geneva, Swiss, SunSans-Regular, sans-serif;
font-family: Calibri, Lucida Grande, Arial, Tahoma, Helvetica, Geneva, Swiss, Trebuchet MS, Lucida Sans Unicode, SunSans-Regular, sans-serif;
font-family: Segoe UI, Frutiger Next, DejaVu Sans, Bitstream Vera Sans, Lucida Grande, Lucida Mac, Tahoma, Arial, Helvetica, Geneva, Swiss, SunSans-Regular, sans-serif;
}
body {
height: 100%;
width: 100%; /* MSIE has a stupidly large default value */
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 {
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 */
div.alles { /* Some browsers, esp. IE5, miss scrollbars on body */
position: absolute; /* so we need an extra div for them */
top: 0px;
left: 0px;
width: 100%;
height: 100%;
overflow: auto; /* THIS allows the scrollbars */
text-align: center; /* This is for a weakness in IE5 */
/*background-image: url(../images/hg_kat-rose-2010.jpg);*/
background-repeat: no-repeat;
background-position: bottom right;
}
div.main {
position: relative;
top: 30px;
width: 780px;
height: 600px;
margin: 0px auto;
text-align: left;
overflow: hidden;
border: 1px solid #063109;
background-color: #F5F6D0;
background-image: url(../images/hg_tiger_gelb.gif);
background-repeat: no-repeat;
background-position: bottom left;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
}
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: 781px;
top: 638px;
height: 1px;
width: 1px;
}
div.bottomright img {
height: 1px;
width: 1px;
}
/* This DIV is the column containing all the menu items */
div.nav {
position: absolute;
top: 0px;
left: 0px;
width: 217px; /* img = 205 + 12 Abstand */
height: 100%;
text-align: center;
background-color: #7FC241;
background-color: transparent;
overflow: hidden;
}
div.ctrDiv {
height: 1px;
width: 1px;
}
div.trennstrich {
position: absolute;
top: 0px;
left: 216px;
width: 1px;
height: 304px;
background-color: #75AF78;
overflow: hidden;
}
div.content {
position: absolute;
top: 0px;
left: 238px;
width: 530px; /* Total Width = 238 + 12 + 530 = 780 */
padding: 0px 12px 6px 0px;
height: 594px;
background-color: transparent;
overflow: auto;
}
/* Classes for Text */
h1, h2 {
font-family: Verdana, DejaVu Sans, Tahoma, Arial, Helvetica, Geneva, Swiss, SunSans-Regular, sans-serif;
font-weight: normal;
color: #17602C;
text-decoration: none;
letter-spacing: 1px;
line-height: 130%;
text-shadow: 1px 1px 1px #888888;
}
h3, h4, h5 {
font-family: Verdana, DejaVu Sans, Tahoma, Arial, Helvetica, Geneva, Swiss, SunSans-Regular, sans-serif;
font-weight: normal;
color: #17602C;
text-decoration: none;
/*text-shadow: 1px 1px 1px #888888;*/
}
p, ul, ol, li, td, th, div {
color: #333333;
text-decoration: none;
line-height: 140%;
}
h1 {
font-size: 15pt;
margin: 15px 0px 6px 0px;
}
h2 {
font-size: 13pt;
margin: 13px 0px 4px 0px;
line-height: 130%;
}
h3 {
font-size: 12pt;
margin: 12px 0px 3px 0px;
}
h4 {
font-size: 11pt;
margin: 11px 0px 3px 0px;
}
h5 {
font-size: 10.5pt;
margin: 10px 0px 2px 0px;
}
p, td, th, ul, ol, li, div {
font-size: 10.5pt;
}
p, strong {
margin: 4px 0px 6px 0px;
line-height: 140%;
}
ul, ol {
margin: 4px 0px 0px 16px;
padding: 0px;
}
ul { list-style-type: circle; }
ol { margin-left: 18px; }
ul.vielluft { margin-top: 16px; }
ul li, ol li {
margin: 0px 0px 6px 1px;
padding: 0px 0px 0px 1px;
}
ul.vielluft li {
margin: 0px 0px 12px 0px;
}
td {
vertical-align: top;
}
p.pretty:first-letter {
font-weight: bold;
}
p.vielluft {
margin: 16px 0px 6px 0px;
}
p.mehrluft {
margin: 10px 0px 6px 0px;
}
.ohneluft {
margin: 0px 0px 0px 0px;
}
.vorliste {
margin-bottom: 3px;
}
.letzte {
margin-bottom: 0px;
padding-bottom: 15px;
}
p.nachoben {
margin-top: 12px;
font-size: 11px;
}
.topless { margin-top: 0px !important; }
.bottomless { margin-bottom: 0px !important; }
strong, .strong {
color: #17602C;
font-size: 11pt;
font-weight: bolder;
letter-spacing: 1px;
}
.small {
font-size: 12px;
}
div.content hr, hr.myrule {
height: 1px;
color: #75AF78;
background-color: #75AF78;
border-style: none;
/* note that msie doesnt collapse margins around an hr */
margin: 16px 0px 16px 0px;
padding: 0px;
}
.floatleft {
display: block;
float: left;
text-align: center;
border-top: 1px solid #AFDAB1;
border-left: 1px solid #AFDAB1;
border-right: 1px solid #75AF78;
border-bottom: 1px solid #75AF78;
margin: 0px 12px 6px 0px;
}
.floatright {
display: block;
float: right;
text-align: center;
border-top: 1px solid #AFDAB1;
border-left: 1px solid #AFDAB1;
border-right: 1px solid #75AF78;
border-bottom: 1px solid #75AF78;
margin: 0px 0px 6px 12px;
}
img.luftoben, div.luftoben {
margin-top: 12px !important;
}
div.floatright img {
display: block;
}
/* Tabellarische Daten ohne Umrandung, z.B. Impressum, Kontaktdaten */
table.daten {
margin-top: 6px;
}
table.daten, table.daten td {
padding-bottom: 5px;
}
/* Lined Table */
table.delineated {
margin: 3px 0px 3px 1px; /* FF loses left border w/o at least 1px left margin */
border-top: 1px solid #C7C7C7; /* top: light */
border-left: 1px solid #C7C7C7; /* left: light */
border-bottom: 1px solid #888888; /* bottom: dark */
border-right: 1px solid #666666; /* right: very dark */
background-color: #F3F5BE;
border-collapse: collapse; /* Gets rid of IE Borders */
border-spacing: 0px; /* Gets rid of Firefox Borders */
width: 99%;
}
table.delineated tr.mouseover {
background-color: #FFFFFF; /* Lighter than table.delineated */
}
table.delineated th { background-color: #C3E995; }
table.delineated th, table.delineated td {
vertical-align: middle;
padding: 2px 3px 2px 3px;
line-height: 111%; /* To save space */
font-size: 0.85em;
}
table.delineated td.ltBordBott {
padding-top: 18px;
}
table.delineated td.dkBordBott {
padding-left: 8px;
}
table.delineated td.stronger {
/*font-size: 1em;*/
font-weight: bold;
}
table.delineated td.nobreak {
white-space: nowrap;
}
/* Table cell shadows: This layout aims at an inset appearance, */
/* which means that top and left borders are light between cells but */
/* medium dark for header rows (table border is dark at bottom + right) */
table.delineated th.ltBordBott, table.delineated td.ltBordBott { /* Between cells */
border-bottom: 1px solid #C7C7C7;
}
table.delineated td.ltBordLeft { /* Between cells */
border-left: 1px solid #C7C7C7;
}
table.delineated td.ltBordTop { /* Between cells */
border-top: 1px solid #C7C7C7;
}
table.delineated th.dkBordBott, table.delineated td.dkBordBott {
/* More accentuated in header rows */
border-bottom: 1px solid #999999;
}
table.delineated th.dkBordLeft, table.delineated td.dkBordLeft {
/* More accentuated in header rows */
border-left: 1px solid #999999;
}
table.delineated td a, table.delineated td a:link, table.delineated td a:visited,
table.delineated td a:active, table.delineated td a:focus, table.delineated td a:hover {
text-decoration: none;
}
/* Standard link style : Permanently blue links */
a, a:link, a:visited, a:active, a:focus {
color: #4000FF;
background-color: transparent;
text-decoration: none;
}
/* Except on Hover */
a:hover {
color: #4000FF;
background-color: #DDFAB9;
text-decoration: underline;
}
/* ================================================================
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;
padding: 0px;
border-style: none;
border-width: 0px;
list-style-type: none;
list-style-image: none;
}
/* 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: 96px;
left: 99px;
width: 118px;
font-family: Verdana, DejaVu Sans, Tahoma, Arial, Helvetica, Geneva, Swiss, SunSans-Regular, sans-serif;
z-index: 7;
}
/* 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: 104px;
/* 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 */
filter: alpha(opacity=95); /* MSIE */
-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: 158px; /* The most successful approach... "auto" does NOT work */
padding-right: 0px;
}
ul.menu li ul li ul { /* 3rd level */
/* This is personal */
left: 149px;
width: 113px;
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;
/* float: left; /* for IE7 */
}
/* Individual adjustments to different level
- 's */
ul.menu li ul li {
width: 158px;
}
ul.menu li ul li ul li {
width: 113px;
}
/* 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 {
}
/* 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: 116px; /* 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, 2nd level links are broader (for longer texts) */
ul.menu li ul li a, ul.menu li ul li a:link,
ul.menu li ul li a:visited, ul.menu li ul li a:active,
ul.menu li ul li a:focus, ul.menu li ul li a:hover {
width: 156px; /* 2px border will be added */
}
/* In this implementation, 3rd level links are NOT broader */
ul.menu li ul li ul li a, ul.menu li ul ul li li a:link,
ul.menu li ul li ul li a:visited, ul.menu li ul ul li li a:active,
ul.menu li ul li ul li a:focus, ul.menu li ul ul li li a:hover {
width: 111px; /* 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 {
width: 111px; /* 2px border will be added */
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;
}
/* Flyout-Menu Colours */
ul.menu li a, ul.menu li a:visited {
border-color: #75AF78;
}
ul.menu li.sub a {
background-image: url(../images/menupfeil.gif);
}
ul.menu li.sub ul li.sub a {
background-image: url(../images/menupfeil.gif);
}
a.avblefo, a.avblefo:link, a.avblefo:visited, a.avblefo:active, a.avblefo:focus {
color: #17602C;
background-color: #C3E995; /* 195 233 149 */
}
a.avblefo:hover {
color: #17602C;
background-color: #E6E995; /* 230 233 149 */
}
a.iscurfo, a.iscurfo:link, a.iscurfo:visited, a.iscurfo:active, a.iscurfo:focus,
a.iscurfo:hover {
color: #17602C;
background-color: #E6E995;
}