/* ===========================
   Stylesheet klavierstimmer-bayreuth.de/klavierstimmer-bayreuth-kompakt.html
   Datei: kompakt.css
   Datum: 2016-07-19
   Autor: Matthias Meiners 
   ===========================*/


/* Allgemein */
* {margin: 0;
   padding: 0;}
   
html {width: 100%; height: 101%; background-color: #8BB2D9;}

body {
   min-width: 300px;
   max-width: 1004px;
   margin: 0 auto 0 auto;
   background-color: #ffffff;
   position: relative;
   font-family: Arial, Helvetica, sans-serif;
   color: #111;
   font-size: 95%;
   background: #FFF url(bilder/tastenbg.gif) repeat-y top right;}

div#container {
   max-width: 1004px;
   position: relative;
   background-color: none;
   padding-bottom: 50px;
   /*background: #FFF url(bilder/tastenbg.gif) repeat-y top right;*/}

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

h1, h2, h4 {font-family: Arial, Verdana, Helvetica, sans-serif; color: #666;}

h3, h5 {font-family: Arial, Verdana, Helvetica, sans-serif;}
h3, h5 {color: #555;}

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

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

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

.nofloat {float: none;
          clear: both;}

.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:hover span.preis {opacity: 0.5;}

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: #003399;
   border-bottom: #003399 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: #003399;
   border-bottom: #003399 1px solid;}

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

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

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

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


/* Textgestaltung */

.text_fett {font-weight: bold;
   color: #222222;}
.text_kursiv {font-weight: bold;
   font-style: italic;}
.text_kursiv2 {
   font-weight: bold;
   font-style: italic;
   color: #222222;}
.text_kursiv3 {
   font-weight: bold;
   font-style: italic;
   color: #003399;}
.text_kursiv4 {
   font-style: italic;}
.text_blau {font-weight: bold;
   color: #0033BB;}
.text_grau {font-weight: bold;
   color: #444444;}
.text_grau2 {font-weight: bold;
   color: #555555;
   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;}
.p2 {font-size: 0.8em;
   line-height: 1.4em;
   padding-bottom: 10px;
   padding-top: 5px;}
.p3 {font-size: 0.8em;
   line-height: 1.4em;
   padding-bottom: 10px;}
.p4 {padding-bottom: 15px;}
.p5 {padding: 10px 0;}
.register {position: relative;
   top: -3px; padding-left: 1px;}
.minus {position: relative;
   top: 1px;}
.schraeg {padding: 0 1px;}

.wid500 {width: 500px;}
.lh5 {line-height: 1.5em;}

.intern {font-weight: bold;
   font-size: 1.1em;}
.punkte li {list-style: circle;}
.preis {font-weight: bold;
   color: #BF0000;}

.margto2m {margin-top: 2em;}

/* NEU: primaTEK mit Copyright */

span.kopierrecht {position: relative; left: 2px; bottom: 3px;}
.abst-marg-re-4 {margin-right: 4px;}

/* Landkarte vom Einzugsbereich Bayern */

div.bilderbox {max-width: 642px;
	height: auto;}

img#landkarte {
   display: block;
   width: 100%;
   height: auto;
   border: 0px;
   margin: 30px 3% 30px 0;}

.pado60 {padding-top: 60px;}
.pado50 {padding-top: 50px;}
.absto40 {margin-top: 40px;}
.absto30 {margin-top: 30px;}
.absto20 {margin-top: 20px;}
.absto15 {margin-top: 15px;}
.abstu70 {margin-bottom: 70px;}
.abstu20 {margin-bottom: 20px;}
.abstu30 {margin-bottom: 30px;}
.abstu40 {margin-bottom: 40px;}
.abstu60 {margin-bottom: 60px;}
.padu10 {padding-bottom: 10px;}
.pado40 {padding-top: 40px;}
.padu50 {padding-bottom: 50px;}
.padu80 {padding-bottom: 80px;}
.padli5 {padding-left: 5px;}

.randtakt {
	float: right;
   display: block;
   margin: 20px 0 7px 0;}

@media only screen and (min-width: 300px) {
	
	#kompakt div#logo p#navilink a#dreistrich {position: absolute; bottom: 65px; right: 10%;}
	
	#kompakt #navigation:target  {
     	position: absolute;
     	top: -160px;
     	left: 0;}
	
	#kompakt div.inhalt {padding: 0 5% 5% 1em;}
	
	#kompakt img {max-width: 100%;
		height: auto;
		margin-bottom: 4em;}
	
	#kompakt h2 {margin-top: 1%;
		margin-bottom: 3%;
		font-size: 2em;}
	
	#kompakt h4 {
		font-size: 1.0em;
		color: #444;}
	
	#kompakt .abstu2 {margin-bottom: 0.8em;}
	#kompakt .abstu3 {margin-bottom: 1em;}
	#kompakt .abstu4 {margin-bottom: 2em;}
	#kompakt .abstu5 {margin-bottom: 5em;}
	
	#kompakt ul {padding-left: 1em;
		margin-bottom: 4em;}
	#kompakt ul li {margin-bottom: 0.3em;}
	
	#kompakt ul.sublist {margin: 0.5em 0 0.5em 0}
	
	.text_gros2 {font-size: 1.2em;}
	
	.inhalt p {line-height: 2em;
		font-size: 1.1em;}
	
	.inhalt a.phone { 
   		border: 1px solid #003388; 
   		padding: 5px;
   		border-radius: 5px;
   		margin-left: 25%;
   		font-size: 1.1em;}
    .inhalt a.phone:hover {background-color: #003388;}
   	.inhalt a.phone span#telicon {display: inline; 
   		color: #003388; 
   		margin-right: 6px;}
   	.inhalt a.phone:hover span#telicon {color: #fff;}
   		
   	.inhalt a.phone:hover,
   	.inhalt a.phone:active {text-decoration: none; border-bottom: 0; color: #fff;}
	
	.inhalt a.email {display: inline; 
   		border: 1px solid #003388; 
   		padding: 5px; 
   		border-radius: 5px;	
   		margin-top: 0;
   		margin-bottom: 0;
   		margin-left: 30%;
   		font-size: 1.1em;}
	.inhalt a.email:hover {background-color: #003388; color: #fff;}
	.inhalt span#mailicon {display: inline; 
		position: relative; 
		top: 2px; 
		font-size: 1.2em; 
		color: #003388; 
		margin-right: 6px;}
	.inhalt a.email:hover span#mailicon {color: #fff;}
   		
   	a.vollversion span.verstecken {display: none;}
   	
   	a.vollversion {font-size: 1.2em;
   		padding: 5px 20px;
   		margin: 0 0 0 20%;
   		line-height: 2em;
		border: 2px solid #003388;
		border-radius: 5px;}
		
	a.vollversion:hover {text-decoration: none;
		border: 2px solid #5588BB;}

	#kompakt div.bilderbox img#landkarte {
		display: block;
		width: 100%;
		height: auto;
		border: 0px;
		border-radius: 15px;}
	
}

@media only screen and (min-width: 400px) {
	
	a.vollversion {font-size: 1em;
		padding: 5px 5px;
   		margin: 0;}
   		
   	a.vollversion span.verstecken {display: inline;}
	
}

@media only screen and (min-width: 440px) {
	
	a.vollversion {font-size: 1.1em;}
	
}

@media only screen and (min-width: 470px) {
	
	#kompakt div#logo p#navilink a#dreistrich {width: 50px; font-size: 2.2em; color: #ddd; position: absolute; top: 15px; right: 5%;}
	
	a.vollversion {font-size: 1.2em;}
	
}

@media only screen and (min-width: 600px) {
		
	#kompakt .inhalt {padding: 0 5% 5% 5%;}
	
	#kompakt .abstu2 {margin-bottom: 0.8em;}
	#kompakt .abstu3 {margin-bottom: 1.2em;}
	#kompakt .abstu4 {margin-bottom: 3em;}
	
	.inhalt a.phone {margin-left: 20%;}
	.inhalt a.email {margin-left: 22%;}
	
	a.vollversion {font-size: 1.4em;}
	
}

@media only screen and (max-width: 800px) {

	#kompakt div#navigation a#nav06 {background-image: none;}
	#kompakt div#navigation a#nav06:hover {background-image: none;}
	
	#kompakt div#navigation {position: absolute;
		top: 0;}
	
}

@media only screen and (min-width: 801px) {
	
	#kompakt div.inhalt {padding: 0 2% 0 22.2%;}
	
	#kompakt div#navigation a#nav06 {background-image: url(bilder/praeludio-ac.gif);}
	#kompakt div#navigation a#nav06:hover {background-image: url(bilder/praeludio-ov.gif);}
	
	#kompakt div#navigation {width: 140px;
		height: auto;
   		position: absolute;
   		top: 0;
  	 	right: 0;
   		background-image: url(bilder/tastenbg.gif);
   		padding-top: 5px;
   		margin: 0;}
   
    #kompakt div#navigation ul li {margin-bottom: 0px;}
 	
	#kompakt div#logo p#navilink a#dreistrich {display: none; width: 0; height: 0; font-size: 0;}
 	
 	#kompakt a#nav06 {
   		background-image: url(bilder/praeludio-ac.gif);
   		background-repeat: no-repeat;}
	#kompakt a#nav06:hover {background-image: url(bilder/praeludio-ov.gif); color: #00346A;}
	
	.inhalt a.phone {margin-left: 160px;}
	.inhalt a.email {margin-left: 172px;}
	
	#kompakt div.bilderbox {max-width: 642px;
	height: auto;
	padding-right: 60px;
	margin: 30px 0 30px 0;}

	#kompakt div.bilderbox img#landkarte {
   		display: block;
   		width: 100%;
   		height: auto;
   		border: 0px;
		border-radius: 15px;}
	
}

@media only screen and (min-width: 880px) {
	
	#kompakt div.inhalt {padding: 0 2% 0 21.4%;}
		
	#kompakt div.bilderbox {max-width: 642px;
	height: auto;
	padding-right: 20px;
	margin: 30px 0 30px 0;
	border-radius: 25px;}

	#kompakt div.bilderbox img#landkarte {
   		display: block;
   		width: 100%;
   		height: auto;
   		border: 0px;
		border-radius: 15px;}
	
}

@media only screen and (min-width: 967px) {
	
	#kompakt div.inhalt {padding: 0 2% 0 21%;}
		
}