/* +++++++++++ Definition der Body-Eigenschaften KS MOTORTECHNIK ++++++++++++++++++ */

body {
     width: 100%;
     font-size: 0.7em;
     color: #000000;
     background-color: #F0FFFF;
     margin: 0;
     padding: 0}



/* +++++++++++ Definition der Schriftart für Body und Tabellenelemente ++++++++++++ */

body,td,th {font-family: Verdana, Arial, Helvetica, sans-serif}



/* +++++++++++ Definition der Überschriften h1 und h2, h bedeutet immer Überschrift (immer bold) ++++++++++++ */
/* +++ Info: "margin: 5px 0px 5px 00px;" bedeutet: 5px oben, 0px rechts, 5px unten, 0px links +++ */

h1 {
    font-size: 1.3em;
    font-weight: bold;
    color: #ffffff;
    background-color: transparent;
    margin: 5px 0px 5px 5px;
    padding: 5px 0px 0px 0px;
    text-decoration: none;
    text-align: left}

h2 {
    font-size: 1.3em;
    font-weight: bold;
    color: #000000;
    background-color: transparent;
    margin: 5px 0px 5px 0px;
    padding: 5px 0px 1px 0px;
    text-decoration: none}



/* +++ Info: Weitere Definitionen von Texten +++ */
/* +++ Info: p bedeutet Textabsatz = Fließtext (wahlweise normal oder bold) +++ */
/* +++ p.normal ist eine so genannte Klasse, wird im Body als 'p class="normal"' aufgerufen +++ */
/* +++ p ist ein Element, p.normal ist ein Element mit der Klasse 'normal', einem Element können mehrere Klassen angehangen werden +++ */

p.normal  {
    font-size: 1.0em;
    font-weight: normal;
    color: #000000;
    text-decoration: none}

p.bold  {
    font-size: 1.0em;
    font-weight: bold;
    color: #000000;
    text-decoration: none}

a.accesskey_navigation_zierleiste {
    font-size: 1.0em;
    font-weight: normal;
    color: #084B8C}

/* +++ Definition der Eingabefelder für das Kontaktformular +++ */
input  {
    font-size: 1.2em;
    font-weight: normal;
    color: #000000;
    text-decoration: none}

select {
    font-size: 1.2em;
    font-weight: normal;
    color: #000000;
    text-decoration: none}

textarea {
    font-size: 1.2em;
    font-weight: normal;
    color: #000000;
    text-decoration: none}



/* +++ Info: #-Zeichen definiert die DIVisions, die im Body aktiviert werden +++ */
/* +++ Div sind auch eigenständige HTML-Element wie z.B. p +++ */

/* +++++++++++ Definition der oberen Zierleiste ++++++++++++++++++ */
#top {
        width: 100%;
        min-width: 775px;
        color: #FFFFFF;
        background-color: #084B8C;
        float: left;
        display: block}

/* +++++++++++ Definition der Kopfzeile ++++++++++++++++++ */
#header {
        width: 100%;
        height: 118px;
        min-width: 775px;
        color: #000000;
        background-color: #CEDBE8;
        margin: 0px 0px 0px 0px;
        clear: both}

/* +++++++++++ Definition des Inhalts-Bereichs (kompletter Bereich unterhalb des Kopfes) ++++++++++++++++++ */
#content_area {
        width: 100%;
        background-color: #F0FFFF;
        min-width: 775px}

/* +++++++++++ Definition des optionalen Puffers links ++++++++++++++++++ */
/* +++++++++++ 'float: left' bewirkt, dass der nachfolgende Bereich 'navigation' rechts vom Bereich 'puffer_links' positioniert wird ++++++++++++++++++ */
/* +++++++++++ !!! NICHT AKTIVIERT !!! */
#puffer_links {
        width: 5%;
        background-color: #000000;
        float: left}

/* +++++++++++ Navigationsrahmen hinter Schaltflächen ++++++++++++++++++ */
/* +++++++++++ Grundsätzlich sind die Bullets (=Listenpunkte) sichtbar. Durch den Befehl color erhalten die Bullets die Farbe des Hintergrundes ++++++++++++++++++ */
/* +++++++++++ Bullets sind unsichtbar bei 15px im Internet Explorer, bei 8px im Mozilla Firefox ++++++++++++++++++ */
#navigation {
        width: 23%;
        min-width: 295px;
        padding: 15px;
        color: #3B71A4;
        background-color: #3B71A4;
        float: left}

/* +++++++++++ Definition des Bereichs Copyright ++++++++++++++++++ */
#navigation_copyright {
        width: 100%;
        text-align: left;
        margin: 40px 0px;
        padding: 0px;
        display: block;
        float: left}

/* +++++++++++ Definition des Bereichs Schriftgrad ++++++++++++++++++ */
#navigation_schriftgrad {
        width: 100%;
        text-align: left;
        margin: 40px 0px;
        padding: 5px;
        display: block;
        color: #FFFFFF;
        float: left}

/* +++++++++++ Definition des Bereichs positioning_navigation ++++++++++++++++++ */
#positioning_navigation {
        width: 100%;
        display: block;
        }

/* +++++++++++ Definition des Inhalt ++++++++++++++++++ */
#content {
        width: 50%;
        min-width: 470px;
        margin-left: 10px;
        line-height: 1.6em;
        padding: 15px;
        float: left}

/* +++++++++++ Definition der Zierleiste unten ++++++++++++++++++ */
#bottom {
        width: 100%;
        min-width: 775px;
        color: #FFFFFF;
        background-color: #084B8C;
        float: left;
        display: block}

/* +++++++++ Definition nur für den aktuellen (Positions-)Link innerhalb der Website +++++++++ */





/* +++ Aenderung am 08.09.2009 fuer 15er-Linkleiste der Firma KS MOTORTECHNIK: "padding: 6px" auf "padding: 4px" +++ */
/* +++ Info: "padding: 6px 2%;" bedeutet Abstand nach oben/unten: 6px (statisch), Abstand nach links: 2% (variabel) +++ */





/* +++ Info: "border-top: 1px solid #3B71A4;" ruhendes Gestaltungselement Linie Schaltflächenkopf +++ */

/* Pufferraum zwischen Schaltflächen und dem Navigationsrahmen */
/* Die Listenpunkte bestehen auch weiterhin, werden aber durch die Schaltflächen "unterdrückt" */
ul#mainnav {
           margin: 0;
           padding: 0}





/* Definiton der Linkeigenschaften für den Link "Startseite", normal (hier: helles Blau), besucht (hellstes Textfeld-Blau) */
li.mainac a:link,
li.mainac a:visited  {
        font-size: 1em;
        font-weight: bold;
        color: #000000;
        text-decoration: none;
        border-top: 1px solid #3B71A4;
        display: block;
        width: 94%;

        padding: 4px 2%;

        background-color: #CEDBE8}





/* Definiton der Linkeigenschaften für den Link "Startseite", Mausüberfahrung (hellstes Textfeld-Blau), beim Klicken (hellstes Textfeld-Blau), FokusTastatur (hellstes Textfeld-Blau)*/
li.mainac a:hover,
li.mainac a:active,
ul#mainnav
li.mainac a:focus {
         color: #000000;
         background-color: #F0FFFF}





/* +++++++++ Definition nur für die Folgelinks innerhalb der Website +++++++++ */
/* Definiton der Linkeigenschaften für alle Folgelinks (unterhalb des Links "Startseite"), normal (hier: dunkles Blau), besucht (WEISS) */
li.main a:link,
li.main a:visited  {
        font-size: 1em;
        color: #FFFFFF;
        text-decoration: none;
        border-top: 1px solid #3B71A4;
        display: block;
        width: 94%;

        padding: 4px 2%;

        background-color: #084B8C}





/* Definiton der Linkeigenschaften für alle Folgelinks: Mausüberfahrung (hellstes Textfeld-Blau), beim Klicken (hellstes Textfeld-Blau), FokusTastatur (hellstes Textfeld-Blau) */
li.main a:hover,
li.main a:active,
ul#mainnav
li.main a:focus {
        color: #000000;
        background-color: #F0FFFF}



/* Produzieren der unterbrochenen (engl.: to dash) Unterstreichung für Abkürzungen, Akronyme, erklärungsbedürftige Wörter */
acronym {
        cursor: help;
        border-bottom: 1px dashed #000000}
