BODY { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 26px;
color: #000000;
background-image:white;
}

TABLE.haupt {
width:1460px;
border:none;
}
TR.hidden {
	visibility: hidden;
}
TR.collapse {
	visibility: collapse;
}

TD.SP1 {
width:660px;
}

TD.SP1und60hoch {
width:660px;
height:120px;
}

TD.SP2 {
width:60px;
}

TD.SP3 {
width:400px;
}

TD.SP4 {
width:160px;
text-align:right;
}

TD.SP5 {
width:200px;
text-align:right;
}

td.vorname {
width:20%;
text-align:right;
}

td.inputvorname {
width:80%;
}

td.dreissigprozent {
width:30%;
}

td.vierzig {
width:80px;
}

td.fuenfundsiebzigprozent {
width:75%;
}

.hundertprozent {
width:100%;
}

td.zehnhoch {
height:20px;
}

td.fuenfundzwanzighoch {
height:50px;
}

td.dreissighoch {
height:60px;
}

td.vierzighoch {
height:80px;
}

td.fuenfundvierzighoch {
height:90px;
}

td.sechzighoch {
height:120px;
}

/* formatierung funktioniert bei PHP Dateien seltsamerweise nur dann richtig, wenn summe spaltenbreiten kleiner als tabellengesamtbreite ist */


.bestellteartikel {
width:720px;
}

.netto {
width:200px;
vertical-align:bottom;
text-align:right;
}

.mehrwert {
width:2400px;
text-align:right;
}

.workshopartikel {
width:800px;
}

.workshoppreis {
width:360px;
vertical-align:bottom;
text-align:right;
}


A:link {
color: blue;
text-decoration: underline;
}
A:visited {
color:darkmagenta;         /* etwas dunkleres blau als bei link */
text-decoration: underline;
}
A:hover {
color: red;
text-decoration: underline;
}
A:active {
color: red;
text-decoration: underline;
}


A.faq:link {
color: black;
text-decoration: none;
}
A.faq:visited {
color:Navy;
text-decoration: none;
}
A.faq:hover {
color: blue;
text-decoration: underline;
}
A.faq:active {
color: blue;
text-decoration: underline;
}


A.up:link {
color: blue;
text-decoration: none;
}
A.up:visited {
color:Navy;
text-decoration: none;
}
A.up:hover {
color: blue;
text-decoration: underline;
}
A.up:active {
color: blue;
text-decoration: underline;
}


A.chrono:link {
color: blue;
text-decoration: none;
font-size: 28px;
float: left;
}
A.chrono:visited {
color:Navy;
text-decoration: none;
font-size: 28px;
float: left;
}
A.chrono:hover {
color: blue;
text-decoration: underline;
font-size: 28px;
float: left;
}
A.chrono:active {
color: blue;
text-decoration: underline;
font-size: 28px;
float: left;
}

/* für die info.html ist ein zweispaltiges format vorgesehen. die längere spalte muss dabei in der html datei als erste kommen und ohne breitenangabe formatiert werden. die kürzere spalte wird mit float formatiert, so dass sie in die längere reinfliesst. der abstand zwischen linker und rechter spalte wird nur in der linken spalte gesetzt (weil nur die einen rand auf der hälfte der seite hat. der rand wird doppelt berechnet, da die rechte spalte keinen linken rand hat. deswegen ist die linke spalte auch nur auf 48 prozent gesetzt. dadurch werden beide spalten ca. gleichbreit. */

#infolispalte {
float: left;
width: 48%;
margin-left: 2%;
margin-right: 4%;
}

#inforespalte {
margin-left: 2%;
margin-right: 2%;
}

/* die erste überschrift links darf keinen margin-top haben, sonst wird sie nicht gleichhoch wie die erste überschrift rechts */

.infoheadobenlinks {
font-size: 28px;
font-weight: bold;
margin-top: 0px;
margin-bottom: 0px;
}

.infoheadl {
font-size: 28px;
font-weight: bold;
margin-top: 30px;
margin-bottom: 0px;
}

.infoheads {
font-size: 22px;
text-align: justify;
margin-top: 10px;
margin-bottom: 10px;
}

/* infotable gibts nur, um schnell für testzwecke einen border um die ganze tabelle anzeigen zu lassen; die tabelle macht leider schwierigkeiten in alten browsern. nur mit der idiotischen weit unter 100% bleibenden Summe der Prozentangaben für die drei Spalten wird tatsächlich mehr oder weniger die gesamte zur Verfügung stehende Breite der Spalte ausgenutzt und es gibt auch in älteren Browsern keine Probleme. */

.infotable {
border: none;
}

.infosp1 {
font-size: 22px;
padding-top: 10px;
padding-bottom: 10px;
width: 40%;
}

.infosp2 {
font-size: 22px;
text-align: right;
padding-right:20px;
padding-top: 10px;
padding-bottom: 10px;
width: 15%;
}

.infosp3 {
font-size: 22px;
text-align: right;
padding-top: 10px;
padding-bottom: 10px;
width: 15%;
}

/* schriftgrössen und ränder */

.klein {
font-size: 20px;
}

.mittelgross {
font-size: 28px;
margin-top: 0px;
margin-bottom: 6px;
}

.gross {
font-size: 30px;
margin-top: 0px;
margin-bottom: 14px;
}

.grossfett {
font-size: 30px;
font-weight: bold;
text-align: center;
}

.groesser {
font-size: 36px;
font-weight: bold;
margin-top: 0px;
margin-bottom: 14px;
background-color:#C0C0C0;
padding: 14px;
}

.groessercenter {
font-size: 36px;
font-weight: bold;
margin-top: 0px;
margin-bottom: 14px;
background-color:#C0C0C0;
padding: 14px;
text-align: center;
}

.sehrgross {
font-size: 42px;
font-weight: bold;
text-align: center;
}

.header {
font-size: 36px;
font-weight: bold;
text-align: center;
}

.header2 {
font-size: 30px;
font-weight: bold;
margin-bottom: 14px;
}

.eng {
font-size: 28px;
margin-left: 150px;
margin-top: 0px;
margin-bottom: 8px;
}

.engusa {
font-size: 28px;
margin-left: 196px;
margin-top: 0px;
margin-bottom: 8px;
}

.faqfrage {
font-size: 28px;
margin-top: 0px;
margin-bottom: 14px;
}

.faqinha {
font-size: 32px;
font-weight: bold;
margin-top: 0px;
margin-bottom: 32px;
}

.demoanweis {
font-family: Courier New, monospace;
border-width:2px;
border-style:solid;
padding:4px;
}

.demobutton {
border-style: outset;
font-family: Courier New, monospace;
border-width:1px;
border-style:solid;
padding:4px;
}

/* farben */

.schwarz {
color: #000000;
}

.gruen {
color: #008B00;
}

.rot {
color: red;
}

.profifarbe {
color: #800000;
font-weight: bold;
}

.homefarbe {
color: #006000;
font-weight: bold;
}


/* position */

.mittig {
text-align: center;
}

.rechts {
text-align: right;
}

.strich {
clear:left;
width:100%;
border-bottom-width:2px;
border-bottom-style:solid;
border-bottom-color:#000000;
}




.ImgLink {
margin-top: 0px;
margin-bottom: 20px;
}

.startimg {
border: none;
margin-left: 60px;
margin-right: 60px;
}

.noscript {
font-size: 30px;
margin-top: 20px;
margin-bottom: 60px;
border-width:10px;
border-style:solid;
border-color:red;
padding:1em;
}

.kasten {
font-size: 30px;
margin-top: 20px;
margin-bottom: 60px;
border-width:6px;
border-style:solid;
border-color:red;
padding:1em;
}

.laufschrimage {
float:left;
margin-right:40px;
margin-bottom:20px;
border-width:6px;
border-style:solid;
border-color:red;
}

.vorlaufaufz {
margin-top: 0px;
margin-bottom: -20px;
}

.laufaufz {
margin-left: -40px;
margin-bottom: 14px;
}

/* border=0 bei img, die als link dienen noetig, da sonst der IE einen blauen rahmen drum zieht */

.ohnerand {
border:none;
}

/*  id mit # geht nur, wenn der button pro dokument nur einmal vorkommt. da agb und widerruf oben und unten drucken und schließen buttons haben, zusaetzlich noch eine entsprechende class eingerichtet, damit nicht alle anderen dateien geaendert werden muessen */

#SubmitButton {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 26px;
font-weight: bold;
color: green;
}

#ResetButton {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 26px;
color: red;
}

#Druckbutton {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 20px;
margin-top: 20px;
margin-bottom: 20px;
}

#Schliessbutton {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 20px;
margin-top: 20px;
margin-bottom: 20px;
}

.drucken {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 20px;
margin-top: 20px;
margin-bottom: 20px;
}

.schliessen {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 20px;
margin-top: 20px;
margin-bottom: 20px;
}

.unsichtbar {
display:none;
}

img.sample {
  width: 90%; 
  height: auto;
}