/* ===========================
   Stylesheet klavierstimmer-saale-orla-kreis.de/klavierstimmer-saale-orla-kreis-kompakt.html 
   Datei: kompakt.css
   Datum: 2017-09-11
   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;
   position: relative;
   font-family: Arial, Helvetica, sans-serif;
   color: #111;
   font-size: 95%;
   background: #FFF url(bilder/tastenbg.gif) repeat-y top left;}

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

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.4em;}

.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;}

.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 und Südthüringen */

img.landkarte {
   display: block;
   width: 100%;
   height: auto;
   border: 0;
   border-radius: 15px;
   margin: 30px 0 30px 0;}

.pado60 {padding-top: 60px;}
.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 #navigation:target  {
     	position: absolut;
     	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 h3 {color: #666;}
	
	#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;}
	
	/*#kompakt div.inhalt {padding: 50px 2% 0 2%;}*/
	
	div.inhalt p {line-height: 2em;
		font-size: 1.1em;}
	
	div.inhalt a.phone { 
   		border: 1px solid #003388; 
   		padding: 5px;
   		border-radius: 5px;
   		font-size: 1.1em;}
    div.inhalt a.phone:hover {background-color: #003388;}
   	div.inhalt a.phone span#telicon {display: inline; 
   		color: #003388; 
   		margin-right: 6px;}
   	div.inhalt a.phone:hover span#telicon {color: #fff;}
   		
   	div.inhalt a.phone:hover,
   	div.inhalt a.phone:active {text-decoration: none; border-bottom: 0; color: #fff;}
	
	div.inhalt a.email {display: inline; 
   		border: 1px solid #003388; 
   		padding: 5px; 
   		border-radius: 5px;	
   		margin-top: 0;
   		margin-bottom: 0;
   		font-size: 1.1em;}
	div.inhalt a.email:hover {background-color: #003388; color: #fff;}
	div.inhalt span#mailicon {display: inline; 
		position: relative; 
		top: 2px; 
		font-size: 1.2em; 
		color: #003388; 
		margin-right: 6px;}
	div.inhalt a.email:hover span#mailicon {color: #fff;}
	
	div.inhalt a.vollversion {
		line-height: 2em;
		font-size: 1.2em;
		border: 2px solid #003388; 
   		padding: 5px 20px; 
   		border-radius: 5px;}
   		
   	div.inhalt a.vollversion span.verstecken {display: none;}
   	
   	#kompakt div.inhalt ul.vita {list-style: none;
   		margin-left: 8%;
   		padding-left: 0;}
   	#kompakt div.inhalt ul.vita li {
   		display: block;
   		width: 90%;
   		padding: 15px 15px;
   		color: #FFF;
   		background-color: #326496;
   		border: 3px solid #CCC;
   		border-radius: 30px;
   		margin-bottom: 2em;
   		text-align: center;}
   		
   	#kompakt div.inhalt ul.vita li span.text_fett {color: #FFF;}
	
}

@media only screen and (min-width: 400px) {
		
		div.inhalt a.vollversion {font-size: 1.2em;
			padding: 5px 5px;}
   		
   	div.inhalt a.vollversion span.verstecken {display: none;}
	
}

@media only screen and (min-width: 440px) {
	
	div.inhalt a.vollversion {font-size: 0.9em;}
	
	div.inhalt a.vollversion span.verstecken {display: inline;}
	
	#kompakt div.inhalt ul.vita {list-style: none;
   		margin-left: 8%;}
	
}

@media only screen and (min-width: 470px) {
	
	div.inhalt a.vollversion {margin-left: 0px;
		font-size: 1em;}
	
	#kompakt div.inhalt ul.vita {list-style: none;
   		margin-left: 11%;}
	
}

@media only screen and (min-width: 600px) {
		
	#kompakt div.inhalt {padding: 50px 5% 5% 4%;}
	
	#kompakt .abstu2 {margin-bottom: 0.8em;}
	#kompakt .abstu3 {margin-bottom: 1.2em;}
	#kompakt .abstu4 {margin-bottom: 3em;}
	
	#kompakt div.inhalt ul.vita li {
   		width: 95%;}
	
	#kompakt div.inhalt ul.vita {list-style: none;
   		margin-left: 2%;}
   		
	div.inhalt a.vollversion {margin-left: 30px;
		font-size: 1.1em;}
}

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

	#kompakt div.inhalt h3#text {margin-top: 30px;}

	#kompakt div#navigation a#nav06 {background-image: none;}
	#kompakt div#navigation a#nav06:hover {background-image: none;}
	
	#kompakt div#navigation {position: absolute;
		top: 0;}
	
	#kompakt div.zentriert {text-align: center;}
	
}

@media only screen and (min-width: 801px) {
	
	#kompakt div.inhalt {padding: 20px 2% 0 1%;
		margin-left: 175px;}
	
	#kompakt div#navigation a#nav06 {background-image: praeludio-ac.gif;}
	#kompakt div#navigation a#nav06:hover {background-image: praeludio-ov.gif;}
	
	#kompakt div#navigation {width: 140px;
		height: auto;
   		position: absolute;
   		top: 0;
  	 	right: 0;
   		background-image: url(bilder/tastenbg.gif);
   		padding-top: 20px;}
   
    #kompakt div#navigation ul li {margin-bottom: 0px;}
   		
   	#kompakt div#logo {position: relative;}

	#kompakt div#logo h1 {
   		padding: 0;
   		margin: 0;}

	#kompakt div#logo h1 a img#bildlogo {max-width: 100%; height: auto; border: 0; padding: 0; margin: 0;}

	#kompakt div#logo h1 a:hover {border-bottom: 0; text-decoration: none;}

	#kompakt div#logo h1 a#start:hover {border-bottom: 0; text-decoration: none; cursor: default;}

	#kompakt div#logo h1 span.varanz {display: none; width: 0; height: 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;}
	
	/*#kompakt .inhalt {margin-left: 175px;}*/
	
	/*div.inhalt a.phone {margin-left: 160px;}
	div.inhalt a.email {margin-left: 172px;}
	div.inhalt a.vollversion {margin-left: 80px;}
	
	div.inhalt div.zentriert .abstli-5 {margin-left: 90px;}
	div.inhalt div.zentriert .abstli-6 {margin-left: 130px;}*/
	
	div.inhalt a.phone {margin-left: 225px;}
	div.inhalt a.email {margin-left: 242px;}
	div.inhalt a.vollversion {margin-left: 100px;
		font-size: 1.1em;}
	
	div.inhalt div.zentriert .abstli-5 {margin-left: 155px;}
	div.inhalt div.zentriert .abstli-6 {margin-left: 205px;}
	
	#kompakt div.inhalt ul.vita {list-style: none;
   		margin-left: 0;}
	
	#kompakt div.inhalt ul.vita li {
   		max-width: 610px;
   		text-align: center;
   		padding: 20px 10px;}
   	
   	#kompakt div.inhalt ul.vita li:last-child {margin-bottom: 90px;}
	
}