/* CSS Document */

body {
	background-image:url('../img/bg.gif');
    background-repeat:no-repeat;
    background-size:cover;
	background-attachment: fixed; 
	color : #50524f;
	font : 1em Corbel, Calibri, Helvetica, "Trebuchet MS", Arial, sans-serif;
	display : flex;
	flex-flow : row wrap;
	align-items : center;
	justify-content : center;
	margin : 0 auto;
	max-width : 75em;
}
.page {
	background : url(../img/page_bg.gif) repeat;
	width : 1080px;
}
.inhalt {
display : flex;
flex-flow : row wrap;
padding-bottom : 0em;
}
.logo, header, nav, nav a, article, form, section, aside, footer {
padding : 0 30px;
margin : 3px 10px;
flex : 1 100%;
}
form.hoerprobe, .beschreibung, .tasten, .download {
padding : 2px;
margin : 8px 10px 4px 10px;
flex : 1 100%;
}

form.hoerprobe {
padding : 2px;
margin : 8px 40px 4px 40px;
}

.beschreibung, .download  {
line-height : 36px;
margin : 8px 10px 4px 10px;
flex : 1 100%;
}

header {
flex-flow : row wrap;
}
header * {
flex : 1 1 0%;
}
header img {
flex : 0 0 150px;
margin-right : 50px;
}
.flex-container {
display : flex;
background-color : rgba(177, 188, 163, 0.3);
}
.flex-item {
flex : 1 5%;
margin : 0;
padding : 0;
text-align : center;
}
.flex1 {
flex : 1 0%;
}
.flex2 {
flex : 1 100%;
border-top : 5px solid #da1500;
border-right : 1px solid #999;
}
.flex3 {
flex : 1 100%;
border-top : 5px solid #0051a4;
font-size : 0.9em;
}
.flex2 a, .flex3 a {
text-decoration : none;
font-family : 'OCRB10PitchBT-Regular';
}
nav {
padding : 15px 5px;
font-family : 'OCRB10PitchBT-Regular';
font-size : 1.3em;
line-height : 1.2em;
}
article {
flex : 1 1 0%;
}
form.hoerprobe {
display : flex;
flex-flow : row wrap;
background-color : rgba(255, 255, 255, 0.5);
border-bottom : 1px solid rgba(177, 188, 163, 0.3);
}
footer {
flex : 1 1 0%;
font-size : 0.8em;
line-height : 1.8em;
padding-bottom : 20px;
}
footer a {
text-decoration : none !important ;
}
.kontakt {
	flex : 1 1 0%;
	padding-top: 20px;
    margin-top: 60px;
	padding-right: 0;
	padding-left: 0;
	padding-bottom: 5px;
	border-top : 1px solid #999;
	border-bottom : 20px solid rgba(177, 188, 163, 0.3);
	text-align : right;
}
.copy {
flex : 1 1 0%;
margin-top : 20px;
text-align : left;
}
.logo {
flex : 1 100%;
padding : 10px;
}

.beschreibung {
flex : 1 100%;
order : 1;
height : 20px;
font-weight : 600;
}
.tasten, .download {
flex : 1 10%;
order : 4;
}


.play {
background-image : url(../img/play.jpg);
width : 30px;
height : 30px;
background-repeat : no-repeat;
background-color : #FFF;
border : none;
margin-right : 20px;
}
.pause {
background-image : url(../img/pause.jpg);
width : 30px;
height : 30px;
background-repeat : no-repeat;
background-color : #FFF;
border : none;
margin-right : 20px;
}
h1 {
    font-family : 'OCRB10PitchBT-Regular';
    font-size : 1.5em;
    line-height : 1.2em;
    border-bottom : 1px solid #999;
    padding : 10px 0;
    font-weight: 400;
    padding-top : 1.5em;
}
h2 {
font-family : 'OCRB10PitchBT-Regular';
font-size : 1.3em;
line-height : 1.2em;
padding-top : 1.5em;
font-weight: 400;

}
h3 {
font-family : 'OCRB10PitchBT-Regular';
font-size : 1.2em;
padding-top : 1em;
font-weight: 400;
}

h4 {
font-family : 'OCRB10PitchBT-Regular';
font-size : 1.0em;
padding-top : 1em;
font-weight: 400;

}

p {
font-size : 1.1em;
line-height : 1.7em;
vertical-align : top;
padding : 0.2em 0 0 0;
}

li {
	line-height: 1.9em;
}
a {
font : 1em Corbel, Calibri, Helvetica, "Trebuchet MS", Arial, sans-serif;
font-weight : 400;
background : transparent;
text-decoration : none;
cursor : pointer;
}
a:link {
color : #50524f;
text-decoration : none;
}
a:visited {
color : #50524f;
text-decoration : none;
}
a:hover, a:active {
color : #000;
text-decoration : none;
}
a.sprecher {
font-family: 'OCRB10PitchBT-Regular';
color : #da1500;
font-size : 1.2em;
line-height : 1.2em;
text-decoration : none;
padding : 4px;
background-color : rgba(177, 188, 163, 0.3);
}
a.texter {
font-family: 'OCRB10PitchBT-Regular';
color : #0051a4;
font-size : 1.2em;
line-height : 1.2em;
text-decoration : none;
padding : 4px;
background-color : rgba(177, 188, 163, 0.3);
}
h1.sprecher, h2.sprecher, h3.sprecher {
color : #da1500;
}
h1.texter, h2.texter, h3.texter {
color : #0051a4;
}
.ocrb {
font-family: 'OCRB10PitchBT-Regular';
padding-top : 0;
}
.copy {
flex : 1 1 0%;
margin-top : 20px;
text-align : left;
}
.form-horizontal .control-label {
text-align : left;
width : 200px;
}
.col-md-4 {
width: 20em;
}
.col-md-4 .control-label {
text-align : left;
}
.inputGroupContainer, .input-group {
width: 20em;
}

.input-group .form-control {width: 90%;}

.btn {
color : #50524f;
background-color : #fff;
border-color : #ccc;
font : 0.9em Corbel, Calibri, Helvetica, "Trebuchet MS", Arial, sans-serif;
}
.btn-warning {
color : #50524f;
background-color : #ddd;
border-color : #ccc;
}
.btn-warning.focus, .btn-warning:focus {
color : #1e1e1e;
background-color : #B7B7B7;
border-color : #333;
}
.btn-warning:hover {
color : #1e1e1e;
background-color : #B7B7B7;
border-color : #ccc;
}
.btn-warning.active, .btn-warning:active, .open > .dropdown-toggle.btn-warning {
color : #1e1e1e;
background-color : #B7B7B7;
border-color : #ccc;
}
.btn-warning.active.focus, .btn-warning.active:focus, .btn-warning.active:hover, .btn-warning:active.focus, .btn-warning:active:focus, .btn-warning:active:hover, .open > .dropdown-toggle.btn-warning.focus, .open > .dropdown-toggle.btn-warning:focus, .open > .dropdown-toggle.btn-warning:hover {
color : #1e1e1e;
background-color : #B7B7B7;
border-color : #ccc;
}
.btn-warning.disabled.focus, .btn-warning.disabled:focus, .btn-warning.disabled:hover, .btn-warning[disabled].focus, .btn-warning[disabled]:focus, .btn-warning[disabled]:hover, fieldset[disabled] .btn-warning.focus, fieldset[disabled] .btn-warning:focus, fieldset[disabled] .btn-warning:hover {
background-color : #B7B7B7;
border-color : #ccc;
}
.btn-warning .badge {
color : #1e1e1e;
background-color : #ccc;
}
@media all and (min-width:30em) {
.beschreibung {
flex : 1.5 1 0%;
}
.tasten, .download {
flex : 1 1 0%;
}
	
.flex1 {
flex-grow : 3;
flex-shrink : 5;
flex-basis : 12em;
}
.flex2 {
flex-grow : 2;
flex-shrink : 0;
flex-basis : 7em;
border-right : 1px solid #999;
}
.flex3 {
flex-grow : 2;
flex-shrink : 0;
flex-basis : 7em;
}
.flex2 a, .flex3 a {
text-decoration : none;
}
.links {
flex : 2 auto;
order : 3;
}
aside {
flex : 1 auto;
order : 4;
}
nav {
padding : 15px;
}
}