body{
    font-family: Verdana, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.42857;
    color: #000000;
    background-color: #F2F2F4;
}

.container{
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 15px;
    width: calc(100% - 30px);
}
nav ul li{
    padding: 4px 10px;
    margin: 1px;
    border: 1px solid #e0e0e0;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    font-size: 12px;

    background: #f9f9f9;
    width: 12px;
    text-align: center;
}

nav ul li.long{
    width: 130px;
}

nav ul{
    padding: unset;
    display: flex;
    list-style: none;
    justify-content: space-between;
    flex-wrap: wrap;
}

nav ul li a{
    color: #000;
    text-decoration: none;
}

html, body, footer, header, main {width: 100%; padding: 0; margin: 0;}
footer{ background: #bbb;}

footer .container{padding: 20px 15px; text-align: center;    line-height: 30px;}
footer .container a{color: #454545; text-decoration: none; font-weight: 600}


.block-letter .title{
    text-align: left;
    font-size: 12px;
    padding: 0px;
    font-weight: 600;
    color: #555;
}

.block-other{
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.block-other li,
.block-other div{margin-right: 10px}

.top-line{background: #bbb;height: 40px;     box-shadow: 1px 1px 10px #aaa;}
header .container{padding-top: 10px}
header{    border-bottom: 2px solid #bbbbbb; box-shadow: 0px 4px 7px #bbb;}
h1{text-align: center;    color: #454545;    font-size: 20px; padding-top: 20px; padding-bottom: 40px;}
h2{color: #454545;}
main{min-height: 400px}

.breadcrumbs{    display: flex;    justify-content: end;    font-size: 12px;padding: 10px 0; flex-wrap: wrap;}
.breadcrumbs div{ margin: 5px}
.breadcrumbs div a{ text-decoration: none}
.breadcrumbs div:after{ content: '/';margin-left: 10px;}
.breadcrumbs div:last-child:after{ content: none;margin-left: unset;}

.mainblock{
    width: 80%;
    margin: 0 auto;
    background: #fff;
    border-radius: 4px;
    padding: 20px 20px;
    box-shadow: 0px 4px 7px #bbb;
}

blockquote{
    text-align: center;
    font-style: italic;
    font-family: ui-serif, Arial, sans-serif;
}

.flex-as, .flex-js{display: flex; justify-content: space-between; align-items: center;}
.flex-as{justify-content: center;    flex-wrap: wrap;}
.text-top-line{padding-left: 20px;     font-size: 12px;    color: #fff;    font-weight: 600;}
.site-top-line{color: #848383;     font-weight: bolder;    font-size: 20px;    text-shadow: 1px 1px 1px #fff;}
.top-line img{width: 36px; height: 36px;}
main a:visited, main a{    color: dodgerblue;}

main a.song-url{    font-size: 16px;    font-weight: 600;  display: block;}
main .authors-block{     display: flex;    justify-content: space-between; flex-wrap: wrap}
main .authors-block .block-50{width: 300px}
.h1-small{font-size: 16px}
.authors-block {}
.download{
    text-align: right;
    font-style: italic;
    padding: 10px;
    font-weight: bold;
}

.search-form label{ font-size:12px;    padding-top: 2px;    cursor: pointer;}


.search-form input{
    padding: 5px;
    border: 1px solid #aaa;
    font-size: 14px;
    width: 100%;
    max-width: 340px;
    outline: none;
}
.search-form input[type=radio] {    width: 20px}

.search-button{
    padding: 5px 25px;
    margin-left: 10px;
    border: 1px solid #aaa;
    border-radius: 3px;
    font-size: 12px;
    cursor: pointer;
    user-select: none;
}

.flex-radio div{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 10px;
    padding-right: 20px;
}

.search-title{text-align: center;}
.except{margin-top: 0;}

@media screen and (max-width: 480px){
    .hidden{display: none}
    header .container{padding-bottom: 20px;}
    .block-letter .title{
        border: 1px solid #bbb;
        border-radius: 4px;
        margin: 20px 0;
        padding: 10px;
    }

    .block-other{display: block}
    .block-other li,
    .block-other div{margin-right: unset}

    nav ul li {
        padding: 8px 15px;
        margin: 5px;
    }

    .block-letter .title {
        text-align: center;
        font-size: 16px;
        padding: 20px;

    }
    .breadcrumbs {
        justify-content: center;
    }
    .text-top-line{    display: none;}
    .top-line .flex-js{justify-content: space-evenly;height: 100%;}
    .top-line img{width: 30px; height: 30px;}
    .site-top-line{text-transform: capitalize;}

    .search-form input{width: calc(100% - 100px);}

    .block-50 strong{text-align: center;width: 100%; display: block;}
    .block-50{width: 100%}
    .block-50:last-child{padding-top: 30px}
    .flex-js{flex-wrap: wrap}
}