html {
    font-size: 100%;
    height: 100%;
}
/* fonts------------------------------------------------------- def*/
/* open-sans-300 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/open-sans-v17-latin-300.eot');
/* IE9 Compat Modes */
  src: local('Open Sans Light'), local('OpenSans-Light'),
       url('../fonts/open-sans-v17-latin-300.eot?#iefix') format('embedded-opentype'), 
/* IE6-IE8 */
       url('../fonts/open-sans-v17-latin-300.woff2') format('woff2'), 
/* Super Modern Browsers */
       url('../fonts/open-sans-v17-latin-300.woff') format('woff'), 
/* Modern Browsers */
       url('../fonts/open-sans-v17-latin-300.ttf') format('truetype'), 
/* Safari, Android, iOS */
       url('../fonts/open-sans-v17-latin-300.svg#OpenSans') format('svg'); 
/* Legacy iOS */
}
/* open-sans-300italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/open-sans-v17-latin-300italic.eot'); 
/* IE9 Compat Modes */
  src: local('Open Sans Light Italic'), local('OpenSans-LightItalic'),
       url('../fonts/open-sans-v17-latin-300italic.eot?#iefix') format('embedded-opentype'), 
/* IE6-IE8 */
       url('../fonts/open-sans-v17-latin-300italic.woff2') format('woff2'), 
/* Super Modern Browsers */
       url('../fonts/open-sans-v17-latin-300italic.woff') format('woff'), 
/* Modern Browsers */
       url('../fonts/open-sans-v17-latin-300italic.ttf') format('truetype'), 
/* Safari, Android, iOS */
       url('../fonts/open-sans-v17-latin-300italic.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v17-latin-regular.eot'); 
/* IE9 Compat Modes */
  src: local('Open Sans Regular'), local('OpenSans-Regular'),
       url('../fonts/open-sans-v17-latin-regular.eot?#iefix') format('embedded-opentype'), 
/* IE6-IE8 */
       url('../fonts/open-sans-v17-latin-regular.woff2') format('woff2'), 
/* Super Modern Browsers */
       url('../fonts/open-sans-v17-latin-regular.woff') format('woff'), 
/* Modern Browsers */
       url('../fonts/open-sans-v17-latin-regular.ttf') format('truetype'), 
/* Safari, Android, iOS */
       url('../fonts/open-sans-v17-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/open-sans-v17-latin-italic.eot'); 
/* IE9 Compat Modes */
  src: local('Open Sans Italic'), local('OpenSans-Italic'),
       url('../fonts/open-sans-v17-latin-italic.eot?#iefix') format('embedded-opentype'), 
/* IE6-IE8 */
       url('../fonts/open-sans-v17-latin-italic.woff2') format('woff2'), 
/* Super Modern Browsers */
       url('../fonts/open-sans-v17-latin-italic.woff') format('woff'), 
/* Modern Browsers */
       url('../fonts/open-sans-v17-latin-italic.ttf') format('truetype'), 
/* Safari, Android, iOS */
       url('../fonts/open-sans-v17-latin-italic.svg#OpenSans') format('svg'); 
/* Legacy iOS */
}
/* open-sans-600 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/open-sans-v17-latin-600.eot'); 
/* IE9 Compat Modes */
  src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
       url('../fonts/open-sans-v17-latin-600.eot?#iefix') format('embedded-opentype'), 
/* IE6-IE8 */
       url('../fonts/open-sans-v17-latin-600.woff2') format('woff2'), 
/* Super Modern Browsers */
       url('../fonts/open-sans-v17-latin-600.woff') format('woff'), 
/* Modern Browsers */
       url('../fonts/open-sans-v17-latin-600.ttf') format('truetype'), 
/* Safari, Android, iOS */
       url('../fonts/open-sans-v17-latin-600.svg#OpenSans') format('svg'); 
/* Legacy iOS */
}
/* open-sans-600italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 600;
  src: url('../fonts/open-sans-v17-latin-600italic.eot'); 
/* IE9 Compat Modes */
  src: local('Open Sans SemiBold Italic'), local('OpenSans-SemiBoldItalic'),
       url('../fonts/open-sans-v17-latin-600italic.eot?#iefix') format('embedded-opentype'), 
/* IE6-IE8 */
       url('../fonts/open-sans-v17-latin-600italic.woff2') format('woff2'), 
/* Super Modern Browsers */
       url('../fonts/open-sans-v17-latin-600italic.woff') format('woff'), 
/* Modern Browsers */
       url('../fonts/open-sans-v17-latin-600italic.ttf') format('truetype'), 
/* Safari, Android, iOS */
       url('../fonts/open-sans-v17-latin-600italic.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-700 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/open-sans-v17-latin-700.eot'); 
/* IE9 Compat Modes */
  src: local('Open Sans Bold'), local('OpenSans-Bold'),
       url('../fonts/open-sans-v17-latin-700.eot?#iefix') format('embedded-opentype'), 
/* IE6-IE8 */
       url('../fonts/open-sans-v17-latin-700.woff2') format('woff2'),
/* Super Modern Browsers */
       url('../fonts/open-sans-v17-latin-700.woff') format('woff'), 
/* Modern Browsers */
       url('../fonts/open-sans-v17-latin-700.ttf') format('truetype'), 
/* Safari, Android, iOS */
       url('../fonts/open-sans-v17-latin-700.svg#OpenSans') format('svg'); 
/* Legacy iOS */
}
/* open-sans-800 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/open-sans-v17-latin-800.eot'); 
/* IE9 Compat Modes */
  src: local('Open Sans ExtraBold'), local('OpenSans-ExtraBold'),
       url('../fonts/open-sans-v17-latin-800.eot?#iefix') format('embedded-opentype'), 
/* IE6-IE8 */
       url('../fonts/open-sans-v17-latin-800.woff2') format('woff2'), 
/* Super Modern Browsers */
       url('../fonts/open-sans-v17-latin-800.woff') format('woff'), 
/* Modern Browsers */
       url('../fonts/open-sans-v17-latin-800.ttf') format('truetype'), 
/* Safari, Android, iOS */
       url('../fonts/open-sans-v17-latin-800.svg#OpenSans') format('svg'); 
/* Legacy iOS */
}
/* open-sans-700italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/open-sans-v17-latin-700italic.eot'); 
/* IE9 Compat Modes */
  src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'),
       url('../fonts/open-sans-v17-latin-700italic.eot?#iefix') format('embedded-opentype'), 
/* IE6-IE8 */
       url('../fonts/open-sans-v17-latin-700italic.woff2') format('woff2'), 
/* Super Modern Browsers */
       url('../fonts/open-sans-v17-latin-700italic.woff') format('woff'), 
/* Modern Browsers */
       url('../fonts/open-sans-v17-latin-700italic.ttf') format('truetype'), 
/* Safari, Android, iOS */
       url('../fonts/open-sans-v17-latin-700italic.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-800italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 800;
  src: url('../fonts/open-sans-v17-latin-800italic.eot'); 
/* IE9 Compat Modes */
  src: local('Open Sans ExtraBold Italic'), local('OpenSans-ExtraBoldItalic'),
       url('../fonts/open-sans-v17-latin-800italic.eot?#iefix') format('embedded-opentype'), 
/* IE6-IE8 */
       url('../fonts/open-sans-v17-latin-800italic.woff2') format('woff2'), 
/* Super Modern Browsers */
       url('../fonts/open-sans-v17-latin-800italic.woff') format('woff'), 
/* Modern Browsers */
       url('../fonts/open-sans-v17-latin-800italic.ttf') format('truetype'), 
/* Safari, Android, iOS */
       url('../fonts/open-sans-v17-latin-800italic.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* fonts---------------------------------------------------------- ende*/
body {
	font: 100%,"Open Sans",Courier,Helvetica,Arial,Times;
	background-color:#fff;
	margin: 0;
	padding: 0;
	color: #000;
	background-image: url(../layout/allgemein/ronchamps_neu2.jpg);
	background-repeat: repeat;
}

/* ~~ Element-/Tag-Selektoren ~~ */
ul, ol, dl { /* Aufgrund von Abweichungen zwischen verschiedenen Browsern empfiehlt es sich, die Auffüllung und den Rand in Listen auf 0 einzustellen. Zu Konsistenzzwecken können Sie die gewünschten Werte entweder hier oder in den enthaltenen Listenelementen (LI, DT, DD) eingeben. Beachten Sie, dass die hier eingegebenen Werte hierarchisch auf die .nav-Liste angewendet werden, sofern Sie keinen spezifischeren Selektor festlegen. */
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 /* Durch Verschieben des oberen Rands wird das Problem behoben, dass Ränder aus dem zugehörigen div-Tag geraten können. Der übrig gebliebene untere Rand hält ihn getrennt von allen folgenden Elementen. */
	padding-right: 15px;
	padding-left: 15px; /* Durch Hinzufügen der Auffüllung zu den Seiten der Elemente innerhalb der div-Tags anstelle der div-Tags selbst entfallen jegliche Box-Modell-Berechnungen. Alternativ kann auch ein verschachteltes div-Tag mit seitlicher Auffüllung verwendet werden. */
}
p {
    color: #000000;
    font-family: "Open Sans", monospace;
    font-size: 16px;
    font-style: normal;
    font-variant:normal;
    font-weight: normal;
    line-height: 24px;
    text-align: left;
    padding: 5px;
    padding-left:5px;
    
	
}
.p_hg_home { /* Hintergrundfarbe für den Fliesstext */
	background: rgba(255,255,255,0.8);

}
.p_hg_links_zz1 {  /* Hintergrundfarbe für den Fliesstext */
	background: rgba(255,255,255,0.3);
}
.p_hg_links_zz2 { /* Hintergrundfarbe für den Fliesstext */
	background: rgba(255,255,255,0.3);
}
.p_hg_buehnenmusik_zz1 { /* Hintergrundfarbe für den Fliesstext */
	background: rgba(255,255,255,0.6);
}
.p_hg_buehnenmusik_zz2 { /* Hintergrundfarbe für den Fliesstext */
	background: rgba(255,255,255,0.6);
}
.p_hg_buehnenmusik_zz3 { /* Hintergrundfarbe für den Fliesstext */
	background: rgba(255,255,255,0.8);
}
.p_hg_buehnenmusik_bilder { /* Hintergrundfarbe für den Fliesstext */
	background: rgba(255,255,255,0.8);
}
.p_hg_hoehrspiel_zz1 { /* Hintergrundfarbe für den Fliesstext */
	background: rgba(255,255,255,0.8);
}
.p_hg_hoehrspiel_zz2 { /* Hintergrundfarbe für den Fliesstext */
	background: rgba(139,143,143,1.0);
}
.p_hg_hoehrspiel_zz2 { /* Hintergrundfarbe für den Fliesstext */
	background: rgba(255,255,255,0.8);
}
.p_hg_hoehrspiel_zz3 { /* Hintergrundfarbe für den Fliesstext */
	background: rgba(255,255,255,0.4);
}
.p_hg_hoeren { /* Hintergrundfarbe für den Fliesstext */
	background: rgba(255,255,255,0.4);
}
.p_hg_kompositionen { /* Hintergrundfarbe für den Fliesstext */
	background: rgba(255,255,255,0.4);
}
.p_hg_lebenslauf { /* Hintergrundfarbe für den Fliesstext */
	background-color: #BFBFBF;
}
.p_hg_texte { /* Hintergrundfarbe für den Fliesstext */
	background: rgba(255,255,255,0.3);
}
.p_hg_projekte { /* Hintergrundfarbe für den Fliesstext */
	background: rgba(255,255,255,0.3);
}
.p_hg_projekte_sys_mat { /* Hintergrundfarbe für den Fliesstext */
	background: rgba(255,255,255,0.8);
}
.p_hg_projekte_lust { /* Hintergrundfarbe für den Fliesstext */
	background: rgba(255,255,255,0.8);
}
.p_hg_projekte_flexible { /* Hintergrundfarbe für den Fliesstext */
	background: rgba(255,255,255,0.6);
}
.p_hg_projekte_allgemein { /* Hintergrundfarbe für den Fliesstext */
	background: rgba(255,255,255,0.3);
}
.p_hg_projekte_due { /* Hintergrundfarbe für den Fliesstext */
	background: rgba(255,255,255,0.4);
}
.p_hg_projekte_24h { /* Hintergrundfarbe für den Fliesstext */
	background: rgba(255,255,255,0.7);
}
.p_hg_projekte_due { /* Hintergrundfarbe für den Fliesstext */
	background: rgba(255,255,255,0.5);
}
.p_hg_kontakt { /* Hintergrundfarbe für den Fliesstext */
	background: rgba(255,255,255,0.1);
}
.p_hg_hertel { /* Hintergrundfarbe für den Fliesstext */
	background-color: #646A7E;
}
.p_hg_home_black { /* Hintergrundfarbe für den Fliesstext */
	background-color: #8A8F8F;
}
a img { /* Dieser Selektor entfernt den standardmäßigen blauen Rahmen, der in einigen Browsern um ein Bild angezeigt wird, wenn es von einem Hyperlink umschlossen ist. */
	border: none;
}
/* ~~ Die Reihenfolge der Stildefinitionen für die Hyperlinks der Site, einschließlich der Gruppe der Selektoren zum Erzeugen des Hover-Effekts, muss erhalten bleiben. ~~ */
a:link {
	color: #ffffff;
	text-decoration: none; /* Sofern Ihre Hyperlinks nicht besonders hervorgehoben werden sollen, empfiehlt es sich, zur schnellen visuellen Erkennung Unterstreichungen zu verwenden. */
}
a:visited {
	color: #ffffff;
	text-decoration: none;
}
a:hover {
	color:#000000;
	text-decoration: underline;
}
a:active, a:focus { /* Durch diese Gruppe von Selektoren wird bei Verwendung der Tastatur der gleiche Hover-Effekt wie beim Verwenden der Maus erzielt. */
	text-decoration: none;
}

/* ~~ Dieser Container mit fester Breite umschließt die anderen div-Tags. ~~ */
.container {
	width: 780px;
	background-color: #FFF;
	margin: 0 auto; /* Der mit der Breite gekoppelte automatische Wert an den Seiten zentriert das Layout. */
}


/* ~~ Dies sind die Layoutinformationen. ~~ 

1) Eine Auffüllung wird nur oben und/oder unten im div-Tag positioniert. Die Elemente innerhalb dieses div-Tags verfügen über eine seitliche Auffüllung. Dadurch müssen Sie keine Box-Modell-Berechnungen durchführen. Zu beachten: Wenn Sie dem div-Tag eine seitliche Auffüllung oder einen Rahmen hinzufügen, werden diese zu der festgelegten Breite addiert und ergeben die *gesamte* Breite. Sie können auch die Auffüllung für das Element im div-Tag entfernen und ein zweites div-Tag ohne Breite und mit der gewünschten Auffüllung im ersten div-Tag einfügen.

*/


/* ~~ Verschiedene float/clear-Klassen ~~ */
.fltrt {  /* Mit dieser Klasse können Sie ein Element auf der Seite nach rechts fließen lassen. Das fließende Element muss vor dem Element stehen, neben dem es auf der Seite erscheinen soll. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* Mit dieser Klasse können Sie ein Element auf der Seite nach links fließen lassen. Das fließende Element muss vor dem Element stehen, neben dem es auf der Seite erscheinen soll. */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* Diese Klasse kann in einem <br />-Tag oder leeren div-Tag als letztes Element nach dem letzten fließenden div-Tag (im #container) platziert werden, wenn #footer entfernt oder aus dem #container herausgenommen wird. */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}
/* ~~ Der Fonttype für das Kontaktformular ~~ */
.success {
    font-family: "Open sans", monospace;
    font-weight: normal;
    font-size: 18px;
    color: green;
  }
/* ~~ Die Fenstergrösse  für das Kontaktformular ~~ */

/* --- der Formularfelder (Name:,email:, Nachricht:) --- */

  .form-control {
    border: 1px solid #e1e1e1;
    box-shadow: 0 1px #fff, inset 0 1px 4px rgba(0, 0, 0, 0.15);
    border-radius: 3px;
    font-size: 12px;
    height: 13px;
    line-height: 22px;
    margin-bottom: 22px;
    min-height: 13px;
    padding: 8px 12px;
    width: 40%;
  }
  
  .form-control:hover {
    border-color: #ccc;
    text-decoration: none;
  }
  .form-control:focus {
  box-shadow: 0 0 10px rgba(46, 84, 129, 0.3);
  border: solid 1px #839bb7;
  outline: none;
  -webkit-transition: border linear .2s, box-shadow linear .2s;
          transition: border linear .2s, box-shadow linear .2s;
}
  textarea.form-control {
    height: 100px;
    max-width: 40%;
}