mirror of
https://gitlab.com/siarp/beethoven2000.de.git
synced 2026-08-07 11:08:21 +00:00
Martin Stadler
413 lines
6.5 KiB
CSS
413 lines
6.5 KiB
CSS
|
|
/**********************************************************
|
|
* FILE: http://www.beethoven2000.de/style.css
|
|
* DATE: 2007-06-19
|
|
* AUTHOR: Martin Stadler
|
|
**********************************************************/
|
|
|
|
|
|
/* ___wai________________________________________________ */
|
|
.hide {
|
|
position: absolute;
|
|
height: 1px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
|
|
/* ___general____________________________________________ */
|
|
|
|
/* Allgemeine Angaben zu Schrift und Farbe */
|
|
body, th, td, p, ul, legend {
|
|
font-family: Helvetica, Arial, Verdana, sans-serif;
|
|
font-size: small;
|
|
color: black;
|
|
line-height: 130%;
|
|
}
|
|
|
|
/* Schriftgröße in Pixel für Bildschirm */
|
|
@media screen {
|
|
body, th, td, p, ul, legend {
|
|
font-size: 13px;
|
|
}
|
|
}
|
|
|
|
/* Schriftgröße in Punkt für Druck */
|
|
@media print {
|
|
body, th, td, p, ul, legend {
|
|
font-size: 10pt;
|
|
}
|
|
}
|
|
|
|
body {
|
|
background-color: white; /* IE7 legt z.B. <p> über floats, also Hintergrundfarbe nur für BODY */
|
|
}
|
|
|
|
h1 {
|
|
font-size: 160%;
|
|
font-weight: normal;
|
|
margin: 0 0 0.6em 0;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 140%;
|
|
font-weight: normal;
|
|
margin: 1.2em 0 0.6em 0;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 120%;
|
|
font-weight: normal;
|
|
margin: 1em 0 0.6em 0;
|
|
}
|
|
|
|
h4 {
|
|
font-size: 100%;
|
|
font-weight: bold;
|
|
margin: 1em 0 0.6em 0;
|
|
}
|
|
|
|
p, ul {
|
|
margin: 0 0 0.6em 0;
|
|
}
|
|
|
|
a[name] {
|
|
color: black !important;
|
|
text-decoration: none !important;
|
|
font-weight: inherit !important;
|
|
}
|
|
|
|
a:link {
|
|
color: rgb(80, 80, 170);
|
|
text-decoration: none;
|
|
font-weight: bold;
|
|
}
|
|
|
|
a:visited {
|
|
color: rgb(125, 125, 160);
|
|
text-decoration: none;
|
|
font-weight: bold;
|
|
}
|
|
|
|
a:hover, a:focus, a:active {
|
|
color: rgb(80, 80, 170);
|
|
text-decoration: underline;
|
|
font-weight: bold;
|
|
}
|
|
|
|
a.active {
|
|
color: black !important;
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* Alle Links gleiche Farbe, normal dick und unterstrichen für Druck */
|
|
@media print {
|
|
a:link, a:visited, a:active, a:hover {
|
|
color: rgb(80, 80, 170);
|
|
font-weight: normal;
|
|
text-decoration: underline;
|
|
}
|
|
a.active {
|
|
font-weight: bold !important;
|
|
text-decoration: none !important;
|
|
}
|
|
}
|
|
|
|
img {
|
|
border: none;
|
|
}
|
|
|
|
fieldset legend {
|
|
padding: 4px;
|
|
}
|
|
|
|
|
|
/* ___site-wide__________________________________________ */
|
|
|
|
/* Feste Breite nur für Bildschirm */
|
|
@media screen {
|
|
div#main {
|
|
width: 760px;
|
|
margin: 16px auto 0; /* Hauptbereich zentrieren */
|
|
}
|
|
}
|
|
|
|
/* Header für Druck ausblenden */
|
|
@media print {
|
|
#header {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
div#head {
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
div#head img {
|
|
margin:0px 12px 0px 12px;
|
|
}
|
|
|
|
div#main_title {
|
|
font-size: 160%;
|
|
font-weight: normal;
|
|
text-align: center;
|
|
margin: 20px 0px 16px 0px;
|
|
}
|
|
|
|
div#navigation {
|
|
border-bottom: solid #888 1px;
|
|
text-align: center;
|
|
padding: 2px;
|
|
margin: 25px 0px 30px 0px;
|
|
}
|
|
|
|
div#navigation ul {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
div#navigation li {
|
|
display: inline;
|
|
margin: 0px 12px 0px 12px; /* IE macht's nicht. */
|
|
font-size: 113%;
|
|
}
|
|
|
|
div#navigation a:visited {
|
|
color: rgb(80, 80, 170);
|
|
}
|
|
|
|
div#content-area {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
fieldset#floating-box {
|
|
float: right;
|
|
margin-left: 10px;
|
|
padding: 0 10px 10px 10px; /* IE interpretiert padding anders, deswegen padding zur legend verlegt */
|
|
border: solid 1px #888;
|
|
}
|
|
|
|
fieldset#floating-box legend {
|
|
margin: 6px 0 6px 0; /* oben muss identisch wie unten sein, um mittig zu bleiben */
|
|
/* siehe auch "fieldset legend" oben */
|
|
}
|
|
|
|
|
|
/* ___server-side________________________________________ */
|
|
|
|
.server-error-message {
|
|
color: red;
|
|
}
|
|
|
|
.server-message {
|
|
color: blue;
|
|
}
|
|
|
|
|
|
/* ___page:"Start"_______________________________________ */
|
|
|
|
div#shoutbox {
|
|
width: 190px;
|
|
height: 250px;
|
|
overflow: auto;
|
|
font-size: 85%;
|
|
line-height: 125%;
|
|
padding-right: 10px;
|
|
}
|
|
|
|
div#shoutbox div.sender {
|
|
font-weight: bold;
|
|
}
|
|
|
|
div#shoutbox div.message {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
div#shoutbox form {
|
|
border-top: solid 1px #888;
|
|
padding: 8px 0px 8px 0px;
|
|
margin: 0; /* IE will das */
|
|
}
|
|
|
|
div#shoutbox input#name {
|
|
width: 110px;
|
|
}
|
|
|
|
div#shoutbox textarea#message {
|
|
width: 150px;
|
|
height: 55px;
|
|
}
|
|
|
|
div#shoutbox input#name, div#shoutbox textarea#message {
|
|
font-family: inherit;
|
|
font-size: 100%;
|
|
border: 1px solid #888;
|
|
padding: 2px;
|
|
}
|
|
|
|
div#shoutbox input#submit {
|
|
border: solid 1px #888;
|
|
font-size: 100%;
|
|
}
|
|
|
|
div#enter-link {
|
|
text-align: center;
|
|
border-top: 1px solid #888;
|
|
margin-top: 6px;
|
|
width: 200px; /* umgeht einen Bug im Firefox, der die Breite nicht auf 100% des Eltern-Fieldsets setzt, wenn dieses von Text umflossen wird */
|
|
}
|
|
|
|
|
|
/* ___page:"Intern"______________________________________ */
|
|
|
|
ul#intern-navigation {
|
|
padding: 0px;
|
|
margin: 10px 26px 6px 14px; /* top + 4: Weil sich IE und Opera nicht ans padding vom fieldset halten */
|
|
list-style-type: none;
|
|
font-size: 120%;
|
|
}
|
|
|
|
ul#intern-navigation ul {
|
|
padding-left: 30px;
|
|
margin: 0px 0px 8px 0px;
|
|
}
|
|
|
|
|
|
/* ___page:"AbiBuch"_____________________________________ */
|
|
|
|
#artikel-text {
|
|
width: 71%;
|
|
padding: 0 2% 1em 0;
|
|
}
|
|
|
|
/* IE6 Fix */
|
|
* html #artikel-text {
|
|
width: 69.8%;
|
|
}
|
|
|
|
/* IE7 Fix */
|
|
*+html #artikel-text {
|
|
width: 69.8%;
|
|
}
|
|
|
|
#artikel-spalte {
|
|
float: right;
|
|
width: 25%;
|
|
margin: -4.3em 0 1em 0;
|
|
padding: 0 0 0 2%;
|
|
border-left: 1px #888 solid;
|
|
}
|
|
|
|
/* IE6 Fix */
|
|
* html #artikel-spalte {
|
|
padding-left: 15px;
|
|
}
|
|
|
|
/* IE7 Fix */
|
|
*+html #artikel-spalte {
|
|
padding-left: 15px;
|
|
}
|
|
|
|
.artikel-block {
|
|
border-top: 1px #888 solid;
|
|
}
|
|
|
|
#artikel-imprint {
|
|
font-size: 85%;
|
|
padding: 0 0 0.3em 0;
|
|
border: none;
|
|
}
|
|
|
|
#artikel-navigation ol {
|
|
margin: 0;
|
|
padding: 1em 1em 1em 2em;
|
|
}
|
|
|
|
#advertisement {
|
|
margin: 0;
|
|
padding: 1em 1em 1em 1em;
|
|
}
|
|
|
|
/* Keine Werbung für Druck */
|
|
@media print {
|
|
#advertisement {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.subtitle {
|
|
font-style: italic;
|
|
}
|
|
|
|
.turn-page {
|
|
margin: 1em 0 0 0;
|
|
text-align: right;
|
|
}
|
|
|
|
|
|
/* ___page:"Kontakt"_____________________________________ */
|
|
|
|
fieldset#contact {
|
|
padding: 10px 18px 18px 18px;
|
|
border: solid 1px #888;
|
|
margin: 20px;
|
|
}
|
|
|
|
fieldset#contact div.form-input {
|
|
padding-bottom: 7px;
|
|
}
|
|
|
|
|
|
/* ___intern/breadcrumbs_________________________________ */
|
|
|
|
div#bread-crumbs {
|
|
margin: -22px 0 1em 0;
|
|
}
|
|
|
|
|
|
/* ___intern/Fotos_______________________________________ */
|
|
|
|
div#thumbs {
|
|
text-align: center;
|
|
}
|
|
|
|
div#thumbs img {
|
|
margin: 7px;
|
|
}
|
|
|
|
div#foto-navigation {
|
|
font-size: 130%;
|
|
}
|
|
|
|
|
|
/* ___intern/Steckbriefe_________________________________ */
|
|
|
|
div#steckbriefe {
|
|
background-image: url(bilder/wand.jpg);
|
|
text-align: center;
|
|
height: 430px;
|
|
}
|
|
|
|
|
|
/* ___intern/Steckbrief__________________________________ */
|
|
|
|
div#steckbrief {
|
|
position: relative;
|
|
left: 50%;
|
|
margin-left: -270px;
|
|
text-align: left;
|
|
width: 500px;
|
|
border: solid #888 1px;
|
|
padding: 20px;
|
|
}
|
|
|
|
div#steckbrief p.frage {
|
|
font-size: 85%;
|
|
font-weight: bold;
|
|
margin: 6px 0px 0px 0px;
|
|
}
|
|
|
|
div#steckbrief p.antwort {
|
|
margin: 0px 0px 12px 0px;
|
|
}
|