/*BEGIN RESET*/


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	/*font: inherit;*/
	vertical-align: baseline;

    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;

    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */

}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*END RESET*/



*{
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}




/* BEGIN Fonts */

@font-face {
	font-family: main-font-regular;
    font-weight: normal;
	src: url( ../fonts/main-font-regular.ttf );
}

@font-face {
	font-family: main-font-regular;
    font-weight: bold;
	src: url( ../fonts/main-font-bold.ttf );
}

@font-face {
	font-family: main-font-bold;
	src: url( ../fonts/main-font-bold.ttf );
}

@font-face {
	font-family: main-font-light;
	src: url( ../fonts/main-font-light.ttf );
}

@font-face {
	font-family: main-font-italic;
	src: url( ../fonts/main-font-italic.ttf );
}

/* END Fonts */







/* BEGIN Typography */

body{
    font-family: main-font-regular;
    color: #353535!important;/**/
    /* color: red; /**/

    line-height: 1.5em;
}

h1,h2,h3,h4,h5,h6{
    font-family: main-font-bold;
    display: block;
}

h1{
    font-size: 2.0rem;
}

/* END Typography */







/* BEGIN Layout */

.content{
    display: block;
    padding: 1.0rem;
}
.content::after{
    content: '';
    display: block;
    clear: both;
}




.content-element{
    display: block;
    margin-bottom: 1.0rem;
}
.content-element::after{
    content: '';
    display: block;
    clear: both;
}

/* END Layout */







/* BEGIN Content Elements Styling */

.button-link{
    padding: 1.5em;
    
    border-radius: 0.5em;

    font-family: main-font-bold;
    font-size: 1.5rem;
    line-height: 1.0em;
    text-align: center;

    color: #ffffff;
    background-color: #ba9664;

}
.button-link,
.button-link:hover,
.button-link:active,
.button-link:visited{

    text-decoration: none;
}

.button-link-white{
    color: #ba9664;
    background-color: #ffffff;

    border-style: solid;
    border-width: 2px;
    border-color: #ba9664;
}



.logo-big{
    height: 10.0rem;
    background-image: url(../images/logo_mms_500px_de.png);
    background-size: contain;
    background-position: left;
    background-repeat: no-repeat;
}

.logo-small{
    height: 5.0rem;
    background-image: url(../images/logo_mms_500px_de.png);
    background-size: contain;
    background-position: left;
    background-repeat: no-repeat;
}

/* END Content Elements Styling */






/* Begin Bottom Panel */

.bottom-panel{

    position: fixed;
    left: 0px;
    right: 0px;
    bottom: 0px;

    padding: 1.0rem;

    /* background-color: aquamarine;/**/
    background-color: #ffffff;

}

/* End Bottom Panel */










/* BEGIN Content */

#content-container{
    margin: 1.0rem;
    font-size: 1.5rem;
    min-height: 100vh;
}

#content-container h2,
#content-container h1,
#content-container p{
    display: block;
    margin-bottom: 2.0rem;
}

#content-container h2{
    display: none;
    visibility: collapse;;
}

#content-container h1{
    margin-top: 6.0rem;
    line-height: 1.25em;

}

#content-container p{
    line-height: 1.5em;
}

#content-container ul{
    display: block;
    list-style-type: disc;
    margin-bottom: 1.5em;
}

#content-container ul li{
    line-height: 1.5em;
    margin-bottom: 0.75em;
    margin-left: 1.0em;
    font-family: main-font-light;
    color: #636363!important;
}

#content-container hr{
    display: block;
    margin-bottom: 8.0rem;
}

#content-container .name-ref{
    display: block;
    font-family: main-font-bold;
    color: #636363!important;
    line-height: 1.5em;
    margin-bottom: 0.0em;
}

.content_bottom-spacer{
    display: block;
    height: 5.0rem;
}

.row{
    display: flex;
    box-sizing: content-box;
}
.row::after{
    display: block;
    content: '';
    clear: both;
}

.column50{
    position: relative;
    box-sizing: content-box;
    float: left;
    width: 50%;
}

.column33{
    position: relative;
    box-sizing: content-box;
    float: left;
    width: 33.3%;
}

.column-right{
    text-align: right;
}

/* END Content */






/* BEGIN Content Element */

.image-element{
    width: 100%;
}

.image-element_caption{
    display: block;
    font-size: 1.0rem;
    font-style: italic;
}




.audio-element{
    background-color: #636363!important;
    padding: 1.5rem;
    border-radius: 0.5rem;
}
.audio-element::after{
    content: '';
    display: block;
    clear: both;
}


.audio-element_title{
    color: #ffffff;
    margin-bottom: 1.0rem;
}

.audio-element_play-button{
    background-color: #ba9664;
    width: 6.0rem;
    height: 6.0rem;
    border-radius: 100%;
    background-size: contain;
    background-repeat: no-repeat;
}

.audio-element_time{
    position: absolute;
    right: 0px;
    bottom: 0px;
    text-align: right;
    color: #ffffff;
}

.state-play{
    background-image: url(../images/button-stop.png);
}

.state-stop{
    background-image: url(../images/button-play.png);
}

/* END Content Element */








/* BEGIN APP */

.app header{
    position: fixed;
    
    left: 0px;
    top: 0px;
    right: 0px;

    height: 4.0rem;

    /* background-color: #ba9664;/**/
    background-color: #ffffff;/**/

    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #ba9664;
}

.app header #main-menu-button{
    position: absolute;
    
    top: 1.0rem;
    left: 1.0rem;
    bottom: 1.0rem;
    height: 2.0rem;
    width: 2.0rem;
    line-height: 2.0rem;

    background-image: url(../icons/menu-dark.svg?v=1);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;

    display: none;
}

.app header #station-number-label{
    position: absolute;

    left: 1.0rem;
    top: 0px;
    right: 1.0rem;
    bottom: 0px;

    height: 4.0rem;
    line-height: 4.0rem;

    /*color: #ffffff;/**/
    color: #ba9664;
    font-family: main-font-regular;
    font-size: 2.5rem;

    text-align: center;
    vertical-align: middle;
}

.app header #select-language-button{
    position: absolute;
    top: 1.0rem;
    right: 1.0rem;
    bottom: 1.0rem;
    height: 2.0rem;
    line-height: 2.0rem;

    /*color: #ffffff;/**/
    color: #ba9664;
    font-family: main-font-regular;
    font-size: 1.5rem;

    text-transform: uppercase;
}




.app footer{
    position: fixed;

    left: 0px;
    right: 0px;
    bottom: 0px;

    height: 6.0rem;

    background-color: #ba9664;/**/
}

.app footer #previous-station-button {
    position: absolute;
    left: 1.0rem;
    top: 1.0rem;
    bottom: 1.0rem;

    width: 4.0rem;

    background-image: url(../icons/previous-station.svg?v=1);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.app footer #show-dialpad-button{

    margin-left: auto;
    margin-right: auto;
    margin-top: 1.0rem;
    margin-bottom: 1.0rem;
    width: 4.0rem;
    height: 4.0rem;

    background-image: url(../icons/dialpad.svg?v=2);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.app footer #next-station-button {
    position: absolute;
    top: 1.0rem;
    right: 1.0rem;
    bottom: 1.0rem;

    width: 4.0rem;

    background-image: url(../icons/next-station.svg?v=1);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}




.close-button{
    position: absolute;
    top: 1.0rem;
    right: 1.0rem;
    width: 2.0rem;
    height: 2.0rem;

    background-image: url(../icons/close.svg?v=1);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;

}

.close-button-dark{
    background-image: url(../icons/close-dark.svg?v=1)!important;
}








#dialpad{
    position: fixed;

    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;

    z-index: 1000;

    background-color: #ba9664;
}



#dialpad #dialpad-number-label{
    display: block;
    color: #ffffff;
    text-align: center;
    font-size: 4.0rem;
    height: 6.0rem;
    line-height: 6.0rem;
}

#dialpad .dialpad-buttons-wrapper{
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 2.0rem;
}

#dialpad .dialpad-buttons{
    margin-left: auto;
    margin-right: auto;
}

#dialpad .dialpad-buttons td{
    margin: 0.5vw;
}

#dialpad .dialpad-button{
    width: 20vw;
    height: 20vw;
    line-height: 20vw;

    margin: 1.5vw;

    border-style: solid;
    border-width: 2px;
    border-color: #ffffff;
    border-radius: 100%;

    text-align: center;
    vertical-align: middle;

    font-size: 10vw;
    color: #ffffff;
}

#dialpad .dialpad-clear-button{
    border-color: #ff000088!important;
    color: #ff000088!important;
}






#select-language-dialog{
    position: fixed;

    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;

    z-index: 1000;

    background-color: #ffffff;

    padding: 1.0rem;
    padding-top: 8.0rem;
}

#select-language-dialog .select-langugae-buttons-wrapper{
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 2.0rem;
    padding: 1.0rem;
}



/* END APP */