/* ===========================
   Stylesheet wohltemperierte-klaviere.de 
   Datei: wtk.css
   Datum: 2012-01-24
   Autor: Matthias Meiners 
   ===========================*/


/* Allgemein */

* {margin: 0;
   padding: 0;}
   
html {height: 101%; background-color: #003366;}

body {
   position: relative;
   width: 1003px;
   min-width: 800px;
   margin: 0 auto 0 auto;
   font-family: Arial, Helvetica, sans-serif;
   color: #222222;
   font-size: 95%;
   background: #FFFFFF url(bilder/tastenbg.gif) repeat-y top left;}

h1 {font-size: 1.2em;}
h2, h3 {font-size: 1.1em;}
h4 {font-size: 1.1em;}
h5, h6 {font-size: 1.0em;}

h1, h2, h3, h4 {font-family: Arial, Verdana, Helvetica, sans-serif;}
h1 {color: #750000;}
h2, h4 {color: #666666;}
h3, h5, h6 {color: #555555;}

p {
   font-size: 0.8em;
   line-height: 1.4em;}

ul, ol {line-height: 1.4em;}

.stopFloat {display: block;
            float: none;
            clear: both;
            height: 1px;
            line-height: 0;
            font-size: 0;}

.hidden {position: relative;
   top: -7000px;
   left: -7000px;
   margin: 0;
   padding: 0;
   font-size: 0;
   width: 0;
   height: 0;}

/* Hyperlinks */

a {
   color: #003399;
   font-size: 0.8em;
   font-weight: bold;
   text-decoration: none;}

a:link,
a:visited {color: #003399;
   outline: none;}

a:hover {color: #5588BB;
   text-decoration: none;
   border-bottom: #5588BB solid 1px;}

a:active {color: #003399;
   outline: none;}

a.intern {
   font-weight: bold;}
a.intern:link,
a.intern:visited {
   font-size: 0.8em;
   color: #5588BB;
   text-decoration: none;
   outline: none;}
a.intern:hover {
   color: #0033AA;
   border-bottom: #0033AA 1px solid;}


a.intern2 {font-weight: bold;
   margin-left: 20px;}
a.intern2:link,
a.intern2:visited {
   font-size: 0.8em;
   color: #5588BB;
   text-decoration: none;
   outline: none;}
a.intern2:hover {
   color: #0033AA;
   border-bottom: #0033AA 1px solid;}

a.intern3 {font-weight: bold;}
a.intern3:link,
a.intern3:visited {
   font-size: 1em;
   color: #5588BB;
   text-decoration: none;
   outline: none;}
a.intern3:hover {
   color: #0033AA;
   border-bottom: #0033AA 1px solid;}

a.extern {
   color: #003399;
   font-size: 1em;
   font-weight: bold;
   text-decoration: none;
   padding: 1px 1px 0 2px;}

a.extern:link,
a.extern:visited {
   font-size: 1em;
   color: #003399;
   text-decoration: none;
   outline: none;}

a.extern:hover {
   color: #FFFFFF;
   background-color: #003399;
   text-decoration: none;}

a.extern2 {
   color: #003399;
   font-size: 0.8em;
   font-weight: bold;
   text-decoration: none;
   padding: 1px 1px 0 0;}

a.extern2:link,
a.extern2:visited {
   font-size: 0.8em;
   color: #003399;
   text-decoration: none;
   outline: none;}

a.extern2:hover {
   color: #FFFFFF;
   background-color: #003399;
   text-decoration: none;}

/* Textgestaltung */

.intern {font-weight: bold;
   font-size: 1.1em;}
.preis {font-weight: bold;
   color: #BF0000;}
.text_fett {font-weight: bold;
   color: #222222;}
.text_rot {font-weight: bold;
   color: #BF0000;}
.text_rot_spezial {font-family: Verdana, Arial, sans-serif;
   font-weight: bold;
   color: #BF0000;}
.text_dunkelblau {font-weight: bold;
   color:#002255;}
.text_kursiv {font-weight: bold;
   font-style: italic;
   color: #444444;}
.text_blau {font-weight: bold;
   color: #0033BB;}
.text_grau {font-weight: bold;
   color: #444444;}
.text_grau2 {font-weight: bold;
   color: #333333;}
.text_grau3 {font-weight: bold;
   color: #444444;
   padding-right: 2px;}
.text_gros {font-weight: bold;
   font-size: 1.1em;}
.text_gros2 {font-weight: bold;
   font-size: 1em;}
.text_eng {font-size: 0.8em;
   line-height: 1.4em;}
.liste {font-size: 0.8em;}
.p1 {font-size: 0.8em;
   line-height: 1.4em;
   padding-bottom: 10px;}
.punkte li {list-style: circle;}
.register {position: relative;
   top: -3px;
   padding-left: 2px;}
.trenner1 {display: block;
   width: 605px;
   height: 100px;
   background-image: url(bilder/trenner1.jpg);
   background-repeat: no-repeat;
   margin: 70px 0 10px 20px;}
 a.trenner1:hover {border-bottom: 0;}
.trenner3 {display: block;
   width: 605px;
   height: 100px;
   background-image: url(bilder/trenner1.jpg);
   background-repeat: no-repeat;
   margin: 50px 0 40px 90px;}
 a.trenner3:hover {border-bottom: 0;}
 
.punkte li {list-style: circle;}
.abstand {margin-bottom: 9px;}   
.abstand2 {padding-bottom: 10px;}
.ab3 {padding-bottom: 15px;}
.abstand-oben {padding-top: 10px;}
.abstand-oben2 {margin-top: 20px;}
.abstand-oben3 {margin-top: 5px;}
.seitenende {padding-bottom: 8em;}
.rand {
   display: block;
   margin: 10px 0 0 70px;}
.rand2 {
   display: block;
   margin: 7px 0 50px 70px;}
.rand9 {display: block;
   margin-top: 10px;}
.rand24 {display: block;
   margin: 10px 0 0 0;}
.randa {
   display: block;
   margin: 10px 0 0 0;}
.randb {
   display: block;
   margin: 7px 0 50px 0;}

/* Seitenkopf */

.logo {background-image: url(bilder/hbg143.gif);
   background-repeat: repeat-x;}
.logo-ganz {
   display: block;
   width: 1003px;
   height: 143px;
   padding: 0;
   margin: 0;
   background-image: url(bilder/logo1004.jpg);
   background-repeat: no-repeat;}
a.logo-ganz:hover {border-bottom: 0;}

/* Spalte */

.spalte {width: 140px;
   position: absolute;
   top: 210px;
   left: 845px;}

a.einladung {display: block;
   width: 140px;
   height: 140px;
   background-image: url(bilder/hoerbeispiele.jpg);
   background-repeat: no-repeat;}
a.einladung:hover {display: block;
   width: 140px;
   height: 140px;
   background-image: url(bilder/selberhoeren.jpg);
   background-repeat: no-repeat;
   border-bottom: 0px;}

/* Navigation */
   
.navi {width: 140px;
   position: absolute;
   top: 110px;
   left: 0;
   background-image: url(bilder/tastenbg.gif);
   padding-top: 65px;}

.nav01, .nav02, .nav03, .nav04, .nav05 {
   position: relative;
   left: 36px;
   margin-top: 0px;
   border-bottom: 0px;}

#wohltemperiert a.nav01 {
   background-image: url(bilder/wohlklang-ac.gif);
   background-repeat: no-repeat;}
#wohltemperiert a.nav01:hover {background-image: url(bilder/wohlklang-ov.gif);}

#fragen a.nav02 {background-image: url(bilder/fragen-ac.gif);
   background-repeat: no-repeat;}
#fragen a.nav02:hover {background-image: url(bilder/fragen-ov.gif);}   

#neuro a.nav02 {background-image: url(bilder/fragen-ac.gif);
   background-repeat: no-repeat;}
#neuro a.nav02:hover {background-image: url(bilder/fragen-ov.gif);}   

#kontakt a.nav04 {
   background-image: url(bilder/kontakt-ac.gif);
   background-repeat: no-repeat;}
#kontakt a.nav04:hover {background-image: url(bilder/kontakt-ov.gif);}

#impressum a.nav05 {
   background-image: url(bilder/impressum-ac.gif);
   background-repeat: no-repeat;}
#impressum a.nav05:hover {background-image: url(bilder/impressum-ov.gif);}

a.nav01 {display: block;
   width: 123px;
   height: 31px;
   background-image: url(bilder/wohlklang-pa.gif);
   background-repeat: no-repeat;}
   
a.nav01:hover {background-image: url(bilder/wohlklang-ov.gif);
   border-bottom: 0px;}

a.nav02 {display: block;
   width: 123px;
   height: 31px;
   border: 0;
   background-image: url(bilder/fragen-pa.gif);
   background-repeat: no-repeat;}

a.nav02:hover {background-image: url(bilder/fragen-ov.gif);
   border-bottom: 0px;}

a.nav03 {display: block;
   width: 123px;
   height: 31px;
   background-image: url(bilder/praeludio-pa.gif);
   background-repeat: no-repeat;}
   
a.nav03:hover {background-image: url(bilder/praeludio-ov.gif);
   border-bottom: 0px;}

a.nav04 {display: block;
   width: 123px;
   height: 31px;
   border: 0;
   background-image: url(bilder/kontakt-pa.gif);
   background-repeat: no-repeat;}

a.nav04:hover {background-image: url(bilder/kontakt-ov.gif);
   border-bottom: 0px;}

a.nav05 {display: block;
   width: 123px;
   height: 31px;
   background-image: url(bilder/impressum-pa.gif);
   background-repeat: no-repeat;}
   
a.nav05:hover {background-image: url(bilder/impressum-ov.gif);
   border-bottom: 0px;}

a.nav01, a.nav02, a.nav03, a.nav04, a.nav05, a.nav06 {outline: none;}

/* preload */

div.preload {display: none; width: 0; height: 0; border: 0;}

/* Priming-Bilder */

.picplac {position: absolute; left: 0px;}

a#priming08:hover, a#priming09:hover, a#priming10:hover, a#priming11:hover,
a#priming12:hover, a#priming13:hover, a#priming14:hover, a#priming15:hover,
a#priming16:hover, a#priming17:hover, a#priming36a:hover, a#priming19:hover,
a#priming20:hover, a#priming21:hover, a#priming22:hover, a#priming23:hover,
a#priming24:hover, a#priming25:hover {border-bottom: 0;}

#priming36a {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/klavierstimmerei.jpg);
   margin-top:0em;}
a#priming36a:hover {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/praegestimmt.jpg);
   margin-top:0em;}

#priming08 {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/praegestimmt.jpg);
   margin-top: 0em;}
a#priming08:hover {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/klavierstimmerei.jpg);
   margin-top: 0em;}
#priming09 {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/tonmusik.jpg);
   margin-top: 0em;}
#priming10 {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/klangwirkt.jpg);
   margin-top: 0em;}

#priming11 {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/pianobalance.jpg);
   margin-top: 0em;}
a#priming11:hover {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/klickbalance.jpg);
   margin-top: 0em;}

#priming12 {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/tutmirgut.jpg);
   margin-top: 0em;}
a#priming12:hover {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/klickklavier.jpg);
   margin-top: 0em;}
#priming13 {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/roman.jpg);
   margin-top: 0em;}
#priming14 {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/klaviermodell.jpg);
   margin-top: 3em;}
#priming15 {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/pianolust.jpg);
   margin-top: 0em;}
a#priming15:hover {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/klickpiano.jpg);
   margin-top: 0em;}
#priming16 {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/wooohl.jpg);
   margin-top: 0em;}
#priming17 {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/urklang.jpg);
   margin-top: 2em;}

#priming19 {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/klangfarben.jpg);
   margin-top: 0em;}
a#priming19:hover {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/klickfarben.jpg);
   margin-top: 0em;}

#priming20 {display: block;
   width: 140px;
   height: 432px;
   background-image: url(bilder/hse3.jpg);
   margin-top: 0em;}

#priming21 {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/spielgefuehl.jpg);
   margin-top: 0em;}
a#priming21:hover {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/klickgefuehl.jpg);
   margin-top: 0em;}

#priming22 {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/brillanzpot.jpg);
   margin-top: 0em;}
a#priming22:hover {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/klickpotenzial.jpg);
   margin-top: 0em;}

#priming23 {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/neuro.jpg);
   margin-top: 0em;}
a#priming23:hover {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/euro.jpg);
   margin-top: 0em;}
#priming24 {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/pianosphere.jpg);
   margin-top: 0em;}
a#priming24:hover {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/pianomotion.jpg);
   margin-top: 0em;}

#priming25 {display: block;
   width: 140px;
   height: 288px;
   background-image: url(bilder/urklang.jpg);
   margin-top: -5em;}

            
/* Seite index */

#thema {
   padding: 30px 5% 64px 8%;
   margin-left: 160px;}
#thema h3 {padding-bottom: 15px;
   padding-top: 20px;}
#thema h4 {padding: 0px 0 15px 0;
   margin-top: 40px;
   font-size: 1em;
   font-family: Arial, Verdana, Helvetica, sans-serif;}
#zusammen {margin: 5px 0 10px 0;
   border: #C9C9C9 1px solid;
   padding: 10px 15px;
   background-color: #F9F9F9;
   font-size: 1.1em;}
#ersteh {margin-top: -15px;
   font-family: Arial, Verdana, Helvetica, sans-serif;
   font-size: 1em;
   color: #666666;}
#thema ul {font-size: 0.8em;
   padding: 0 0 0 20px;}
#thema ul li {list-style-type: circle;
   line-height: 1.4em;
   padding-bottom: 2px;}

/* Seite Fragen */

#fragen ul {list-style: none;}

#frageninhalt {
   margin-left: 170px;
   padding-top: 30px;
   padding-bottom: 250px;}

#frageninhalt h2 {margin: 0 0 0 70px;
   color: #777777;}
#frageninhalt h3 {margin: 20px 0 15px 70px;}
#frageninhalt h4 {margin: 20px 20px 10px 70px;}
#frageninhalt h5 {margin: 15px 0 10px 70px;}
#frageninhalt ul {
   font-size: 0.8em;
   list-style: circle;
   margin: 0px 20px 10px 80px;}
#frageninhalt li {
   padding-bottom: 5px;
   padding-right: 20px;}
#frageninhalt p {margin: 0 20px 0 70px;
   padding-right: 20px;} 
#frageninhalt li a {  font-size: 1.1em;}
#kundenfragen li a {font-weight: normal;
   line-height: 1em;}
#meineantworten {padding-right: 40px;}
#meineantworten ol {font-size: 0.8em;
   margin: 10px 20px 0 93px;}
#meineantworten ul {margin-left: 90px;}
#meineantworten ul li a.extern {font-size: 1em;}
#meineantworten h3 {margin: 0px 0 20px 70px;
padding-top: 20px;}
#meineantworten p a {font-size: 1em;}
#kundenfragen {margin-top: 0px;
   padding-top: 20px;}
#kundenfragen ul li {list-style-type: none;}
#kundenfragen ul li a {font-weight: bold;}
#kundenfragen ul {margin-bottom: 10px;
   margin-left: 70px;}

#meineantworten ul li a {font-size: 1em;}

#smile {width: 18px;
   height: 18px;
   margin-bottom: -5px;
   margin-left: 4px;}
#fragen span.rand2 a.extern {font-size: 0.8em; color: #003399; padding-left: 0;}
#fragen span.rand2 a.extern:hover {color: #FFFFFF;
   background-color: #003399;
   text-decoration: none;}
#meineantworten ul.abu3 {margin-bottom: 15px;}

#meineantworten iframe.klang {margin: 10px 0 0 70px;}

/* Netzwerke */

div#netzwerk {position: absolute;
   width: 140px;
   height: 420px;
   top: 166px;
   right: 15px;}

div#netzwerk div#primateq {position: absolute;
   top: 10px;
   left: 0;
   width: 122px;
   height: 207px;}

div#netzwerk div#primateq a#aufeins {
   display: block;
   width: 122px;
   height: 207px;
   background-image: url(bilder/primatek.jpg);}

div#netzwerk div#primateq a#aufeins:hover {
   display: block;
   width: 122px;
   height: 207px;
   background-image: url(bilder/primajetzt.jpg);}


div#netzwerk a#hoer {
   display: block;
   width: 116px;
   height: 50px;
   position: absolute;
   top: 235px;
   left: 3px;
   background-image: url(bilder/hoerbsplink.jpg);
   background-repeat: no-repeat;
   border-bottom: 0;}

div#netzwerk a#hoer:hover {
   display: block;
   width: 116px;
   height: 50px;
   position: absolute;
   top: 235px;
   left: 3px;
   background-image: url(bilder/hoerbsphover.jpg);
   background-repeat: no-repeat;
   border-bottom: 0;}


div#netzwerk a#rahmen {
   display: block;
   width: 116px;
   height: 50px;
   position: absolute;
   top: 303px;
   left: 3px;
   background-image: url(bilder/praetwitt.jpg);}

div#netzwerk a#rahmen:hover {
   display: block;
   width: 116px;
   height: 50px;
   position: absolute;
   top: 303px;
   left: 3px;
   background-image: url(bilder/praefollow.jpg);}


div#netzwerk a#aura {position: absolute;
  top: 371px;
  left: 3px;
  width: 116px;
  height: 50px;
  background-image: url(bilder/meinblog.jpg);
  background-repeat: no-repeat;}

div#netzwerk a#aura:hover {position: absolute;
  top: 371px;
  left: 3px;
  width: 116px;
  height: 50px;
  background-image: url(bilder/zumthema.jpg);
  background-repeat: no-repeat;}

div#netzwerk a#rahmen:hover,
div#netzwerk div#primateq a#aufeins:hover,
div#netzwerk a#aura:hover,
div#netzwerk a#hoer:hover {border-bottom: 0;}

div.preload {display: none; width: 0; height: 0; border: 0;}
div.preload a#picprimateq {background-image: url(bilder/primajetzt.jpg);}
div.preload a#pictwitter {background-image: url(bilder/praefollow.jpg);}
div.preload a#picbeispiele {background-image: url(bilder/hoerbsphover.jpg);}
div.preload a#picblog {background-image: url(bilder/zumthema.jpg);}

/* Neuromarketing */

#inhalt h2 {margin: 0 0 30px 0;
   font-size: 1.1em;}
#inhalt h3 {margin: 0px 0 25px 0;
   padding-top: 20px;}
#inhalt ol, #inhalt ul.punkte {margin: 0 0 15px 20px;
   font-size: 0.8em;
   line-height: 1.4em;}
#inhalt ul.punkte li {padding-bottom: 3px;}
#inhalt {
   margin-left: 170px;
   padding: 30px 60px 300px 70px;}

/* Kontaktseite */

#kontaktinhalt {
   width: auto;
   margin-left: 170px;
   padding: 30px 50px 98px 70px;}
#kontaktinhalt h2 {margin-bottom: 40px;}
#kontaktinhalt h3 {margin-bottom: 20px;
   margin-top: 30px;}
#kontaktinhalt p {margin-bottom: 20px;
   margin-top: 20px;}
#kontaktinhalt .fon {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 1.2em;
   line-height: 2em;
   font-weight: bold;
   color: #444444;
   margin-left: 240px;}

#kontaktinhalt a#mail {margin-top: 20px;
   margin-bottom: 20px;}
#kontaktinhalt a#mail:hover {color: #0033AA;
   border-bottom: #0033AA 1px solid;}
a#mail {font-size: 1.2em;
   line-height: 2em;
   font-weight: bold;
   margin-left: 265px;}

#kontaktinhalt ul {line-height: 1.4em;
   list-style-type: circle;
   font-size: 0.8em;
   margin-left: 20px;}
#kontaktinhalt .p2 {margin-bottom: 10px;}
#kontaktinhalt .p3 {margin-top: 10px;}


/*Impressum */

#impressuminhalt {
   width: auto;
   margin-left: 240px;
   padding: 30px 70px 40px 0;
   overflow: hidden;}

#block-2 h2 {margin-bottom: 20px;}
#block-2 {}
#block-3 {
   width: auto;
   float: left;
   margin: 10px 0;}
#block-4 {width: auto;
   float: left;}
#block-5 {width: auto;
   float: left;
   margin-left: 70px;}
#impressuminhalt #block-3 .p1 a {font-size: 1em;}
#impressuminhalt #block-3 p a {font-size: 1em;}
#impressuminhalt #block-2 .p1 a {font-size: 1em;}
#impressuminhalt #block-2 .px a {font-size: 1em;}
.px {padding-bottom: 10px;
margin-top: 15px;}
#impressuminhalt p.p3 {margin-bottom: 10px;}
#impressuminhalt #spez {padding: 0 3px;}