/* CSS Styles for Jackint, Author Tim Reeves, Stand 2006-09-12 */
/* For the xml parser the canvas is , not */
html {
height: 100%; /* Gecko and Opera both need this, in html AND body */
width: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
font-family: 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;
}
/* 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 */
/* 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;
height: 100%;
width: 100%;
overflow: auto;
background-color: #E3E9FB;
}
/* min-height:100% + overflow:visible does not help, because the size of the
table contained is computed to the "height", irrespective of the "min-height",
i.e. a container div may be as high as the viewport but not bequeth its height! */
div.bottomright {
position: absolute;
left: 867px;
top: 611px;
height: 1px;
width: 1px;
}
div.bottomright img {
height: 1px;
width: 1px;
}
/* The only way to get horizontal AND vertical positioning:
Since we default to "table-layout: auto" the dimensions
will be increased to at least that of the content,
i.e. maybe more than 100% of the viewport, but not less */
table.mitte {
width: 100%;
height: 100%;
/* THIS causes an unneccessary vertical scroller in its container in FF + OP */
/* WHEN the viewport width is too small but the viewport height is more than */
/* The only way to get rid of it is to set the table height (style) via JavaScript */
}
table.mitte td {
vertical-align: middle; /* Vertical centering here */
text-align: center; /* MSIE 5.x missachtet margin:auto bei Blockelementen */
width: 100%;
height: 100%;
/* Borders would look nice here, but cause scrollers - 100% + X */
/* The only way is to simulate them with 4 positioned divs, or HG-Pic */
}
/* Don't let these be inherited */
table.mitte table {
width: auto;
height: auto;
}
table.mitte table td {
vertical-align: top;
text-align: left;
width: auto;
height: auto;
}
div.main {
position: relative;
top: 0px;
left: 0px;
width: 868px;
height: 612px;
margin: 0px auto; /* W3C horizontal centering here */
/* background-image: url(../images/hintergrund.gif); */
background-repeat: no-repeat;
background-color: transparent;
background-color: white;
overflow: hidden;
}
div.ns67 { /* Compensate "absolute after relative" posn bug in NS 6+7 */
position: relative;
top: 0px;
left: 0px;
width: 868px;
height: 612px;
}
/* Hier fängt der "eigentliche" Inhalt an */
div.streifeOben {
position: absolute;
top: 0px;
left: 0px;
width: 868px;
height: 32px;
background-color: #E3E9FB;
}
div.streifeLinks {
position: absolute;
top: 176px;
left: 0px;
width: 16px;
height: 436px;
background-color: #E3E9FB;
}
div.international {
position: absolute;
top: 8px;
right: 0px;
width: 266px;
height: 16px;
background-color: #FF640A;
}
div.international img.fahne {
display: inline;
position: static;
width: 23px;
height: 16px;
overflow: hidden;
}
div.international div.unterwegs {
position: absolute;
top: 1px;
right: 0px;
width: 220px;
height: 15px;
color: white;
font-size: 11px;
font-weight: bold;
text-align: center;
letter-spacing: 1px;
background-color: transparent;
}
div.ganzLinks1 {
position: absolute;
top: 32px;
left: 0px;
width: 16px;
height: 144px;
background-color: #8899C6;
}
div.ganzLinks2 {
position: absolute;
top: 192px;
left: 0px;
width: 16px;
height: 144px;
background-color: #8899C6;
}
/* Die (ganze) Navigationsleiste */
div.navLeiste {
position: absolute;
top: 16px;
left: 16px;
width: 144px;
height: 596px;
background-color: #8899C6;
}
div.dave {
position: absolute;
top: 16px;
left: 0px;
width: 144px;
height: 144px;
background-color: transparent;
background-image: url(../images/dave-logo.gif);
background-repeat: no-repeat;
background-position: 0px 0px;
}
/* This DIV is the area containing all the menu items */
/* If you specify a width for this DIV then in IE hover only works */
/* on the text, not the block - so use a width on the link itself. */
div.nav {
position: absolute;
top: 176px;
left: 0px;
width: 144px;
height: 140px; /* IE5: 144px */
text-align: left;
padding-top: 4px;
background-color: #FF640A;
}
div.ctrDiv {
height: 1px;
width: 1px;
}
img.untenLinks { /* Nicht in navLeiste da individuell pro Seite */
display: block;
position: absolute;
top: 427px;
left: 16px;
width: 144px;
height: 170px;
overflow: hidden;
}
/* Ende Navigationsleiste */
img.mitteObenBild { /* Referenzseite */
position: absolute;
top: 176px;
left: 165px;
width: 540px;
height: 251px;
display: block;
overflow: hidden;
}
img.mitteBild { /* Kontaktseite (Veraltet) */
position: absolute;
top: 176px;
left: 165px;
width: 540px;
height: 421px;
display: block;
overflow: hidden;
}
div.mitteOben {
position: absolute;
top: 176px;
left: 165px;
width: 520px; /* IE5: 540 */
height: 251px;
overflow: hidden;
padding: 0px 0px 0px 20px;
background-color: #C6CEE4;
}
div.moKurz {
height: 188px;
}
div.mitteObenText {
position: absolute;
bottom: 0px;
right: 10px;
width: 494px;
height: 219px;
overflow: auto; /* But should not happen */
padding: 0px;
background-color: transparent;
/*background-color: gray;*/
}
div.motKurz {
height: 156px;
}
img.mitteUntenBild { /* Restaurantseite */
position: absolute;
top: 427px;
left: 165px;
width: 540px;
height: 170px;
display: block;
overflow: hidden;
}
div.mitteUnten {
position: absolute;
top: 427px;
left: 165px;
width: 520px; /* IE5: 540 */
height: 170px;
overflow: hidden;
padding: 0px 0px 0px 20px;
background-color: #8899C6;
}
div.muLang {
top: 364px;
height: 233px;
}
div.mitteUntenText {
position: absolute;
bottom: 0px;
right: 10px;
width: 494px;
height: 138px;
overflow: auto; /* But should not happen */
padding: 0px;
background-color: transparent;
}
div.mutLang {
height: 197px;
}
div.mitteGanz {
position: absolute;
top: 176px;
left: 165px;
width: 520px; /* IE5: 540 */
height: 421px;
overflow: hidden;
padding: 0px 0px 0px 20px;
background-color: #C6CEE4;
}
div.mitteGanzText {
position: absolute;
bottom: 0px;
right: 0px;
width: 494px; /* IE5: 504 */
height: 389px;
overflow: auto; /* Is allowed to happen */
padding: 0px 10px 0px 0px;
background-color: transparent;
}
div.mitteFuss {
position: absolute;
top: 597px;
left: 165px;
width: 704px;
height: 16px;
padding: 0px;
background-color: #C6CEE4;
}
img.hauptBild {
display: block;
position: absolute;
top: 32px;
left: 165px;
width: 704px;
height: 144px;
overflow: hidden;
}
div.rechtsText {
position: absolute;
top: 256px;
right: 0px;
width: 153px;
height: auto;
padding: 0px;
background-color: transparent;
}
div.untenRechts {
position: absolute;
bottom: 40px;
right: 16px;
width: 138px;
height: auto;
padding: 0px;
background-color: transparent;
}
div.untenRechts div { /* Jacks Logo */
margin-top: 12px;
width: 100%;
height: 44px;
background-color: transparent;
background-image: url(../images/jack-logo.jpg);
background-position: right top;
background-repeat: no-repeat;
}
p.verweise {
position: absolute;
top: 595px;
right: 15px;
width: 180px;
height: auto;
line-height: 100%;
text-align: right;
}
/* Classes for Text */
h1, h2, h3, h4, h5 {
color: #FF4D00;
font-weight: bold;
text-decoration: none;
}
div.mitteUnten h1, div.mitteUnten h2, div.mitteUnten h3,
div.mitteUnten h4, div.mitteUnten h5 {
color: #FFCEBB;
}
p, ul, ol, li, td, th {
color: #000000;
text-decoration: none;
}
div.mitteUntenText p {
color: white;
}
h1 {
font-size: 15px;
margin: 12px 0px 6px 0px;
}
h2 {
font-size: 14px;
margin: 11px 0px 4px 0px;
}
h3 {
font-size: 13px;
margin: 10px 0px 3px 0px;
letter-spacing: 1px;
}
h4 {
font-size: 12px;
margin: 9px 0px 3px 0px;
letter-spacing: 1px;
}
h5 {
font-size: 11px;
margin: 6px 0px 2px 0px;
}
p, td, th, ul, ol, li {
font-size: 12px;
}
p {
margin: 4px 0px 6px 0px;
/*line-height: 130%;*/
}
ul, ol {
margin: 4px 0px 0px 14px;
padding: 0px;
}
ul {
list-style-type: disc;
}
ul.sec {
list-style-type: circle;
}
ul.sec li {
margin-left: 0px;
}
ol {
margin-left: 20px;
}
ul li, ol li {
margin: 0px 0px 4px 0px;
padding: 0px 0px 0px 1px;
}
ul.kontakt, ul.impressum {
list-style-type: none;
margin: 0px 0px 0px 0px;
}
ul.kontakt li, ul.impressum li {
margin: 0px;
padding: 0px;
position: relative;
top: 0px;
left: 0px;
}
ul.kontakt li {
font-size: 11px;
}
ul.impressum li {
margin: 0px 0px 4px 0px;
}
ul.impressum li span.tabbed {
position: absolute;
top: 0px;
left: 132px;
}
ul.kontakt li.mehrluft {
margin: 6px 0px 0px 0px;
}
ul.kontakt li span.fon {
position: absolute;
top: 0px;
left: 30px;
}
ul.kontakt li span.mobil {
position: absolute;
top: 0px;
left: 57px;
}
ul.kontakt li span.mobile {
position: absolute;
top: 0px;
left: 59px;
}
td {
vertical-align: top;
}
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;
}
.topless { margin-top: 0px !important; }
.bottomless { margin-bottom: 0px !important; }
.kleiner {
font-size: 11px;
}
strong, .strong {
font-size: 11px;
font-weight: bold;
letter-spacing: 1px;
}
div.rule {
height: 1px;
width: 100%;
background-color: white;
margin: 4px 0px;
}
/* Standard link style : Permanently blue links */
a, a:link, a:visited, a:active, a:focus {
color: #0000FF;
text-decoration: none;
}
/* Except on Hover */
a:hover {
color: #0000FF;
text-decoration: underline;
}
div.international div.unterwegs a, div.international div.unterwegs a:link,
div.international div.unterwegs a:visited, div.international div.unterwegs a:active,
div.international div.unterwegs a:focus, div.international div.unterwegs a:hover {
color: white;
}
/* Link classes for Navigation */
a.avble, a.avble:link, a.avble:visited, a.avble:active, a.avble:focus, a.avble:hover,
a.iscur, a.iscur:link, a.iscur:visited, a.iscur:active, a.iscur:focus, a.iscur:hover {
display: block;
height: 13px;
width: 126px; /* IE5: 132 */
font-size: 11px;
font-weight: bold;
text-decoration: none;
letter-spacing: 0px;
margin: 2px 0px 0px 6px;
padding: 0px 0px 0px 6px;
}
a.avble, a.avble:link, a.avble:visited, a.avble:active, a.avble:focus {
color: white;
}
a.avble:hover {
color: #422F87;
}
a.iscur, a.iscur:link, a.iscur:visited, a.iscur:active, a.iscur:focus {
color: #422F87;
}
a.iscur:hover {
color: #422F87;
}