/*   
 #efefef (239,239,239) 
 #27363d (39,54,61) 
 #121321 (18,19,33) 
 #959595 (149,149,149) 
 #d5c2ac (213,194,172) 
*/
html {
    background-color: #121321;
    padding: 0;
    margin: 0;
}

body {
    font: caption;
    background-color: #121321;
    color: white;
    padding: 0;
    margin: 0;
}

.youtubelink {
    color: white;
}

    .youtubelink a {
        padding: 10px;
    }

    .youtubelink img {
        width: 100%;
        max-width: 80px;
        padding: 10px;
    }

.box {
    margin: 20px;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid transparent;
    border-radius: 6px;
    background-color: #d5c2ac;
}

    .box h4 {
        color: #121321;
    }

    .box ul {
        margin-top: -4px;
        padding: 4px;
    }

    .box li {
        color: #27363d;
        list-style: none;
        text-align: left;
    }

    .box input {
        width: 25px;
    }

    .box span {
        position: relative;
        top: -5px;
        /*border:1px solid blue;*/
    }

    .box img {
        width: 80%;
        margin: 10px;
        border-radius: 6px;
    }

.widget {
    display: inline-block;
    margin-top: 45px;
}

.ng-scope, .widget_iframe {
    background-color: black !important;
}



em {
    color: #efefef;
}

.contentarea {
    margin-left: 16px;
    margin-right: 16px;
}

.banner {
    /*border:1px solid red;*/
    text-align: center;
    margin: 0 0 2% 0;
    width: 100%;
}

    .banner img {
        width: 80%;
    }

.accordeon {
    width: 100%;
    display: block;
    position: relative;
    top: 10px;
    text-align: left;
}

.accordeonHeader {
    background-color: #27363d;
    padding: 10px;
    border: 1px solid #d5c2ac;
    cursor: pointer;
}

    .accordeonHeader:hover {
        color: lightyellow;
        transform: scale(0.99);
    }

    .accordeonHeader input {
        width: 48px;
        margin: 4px 30px 2px 2px;
    }

.accordeonContent {
    background-color: #d5c2ac;
    padding: 10px 20px 10px 20px;
    font-size: 2vw;
}


    .accordeonContent input {
        max-width: 10%;
        padding-bottom: 6px;
    }

audio {
    border: 2px solid green;
    border-radius: 50px;
    padding: 2px;
    text-decoration: none;
    outline: none;
    height: 54px;
}

.player {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    padding: 10px 5px 5px 5px;
    max-width: 100%;
    position: relative;
    display: block;
    width: 320px;
    text-decoration: none;
    outline: none;
    /*border:1px solid red;*/
}

    .player audio {
        display: inline-block;
        text-decoration: none !important;
        width: 100%;
    }

    .player > .blockDownload {
        float: left;
        display: block;
        width: 45px;
        height: 45px;
        background-color: transparent;
        position: relative;
        left: 260px;
        top: -50px;
        z-index: 100;
    }

.activeSong {
    display: inline-block;
    padding: 6px;
    border: 2px solid green;
    border-radius: 6px;
    margin-top: 4px;
    position: relative;
    left: -25px;
}

.footeryess {
    text-align: center;
}

    .footeryess img {
        background-color: gray;
        opacity: 0.8;
        border: 1px solid gray;
        border-radius: 6px;
        width: 100px;
    }

        .footeryess img:hover {
            background-color: white;
            margin: 1px 0 0 1px;
        }

@media handheld, only screen and (max-width: 800px) {
    .accordeonContent {
        font-size: large;
    }
}