.app_ikkuna {
    margin : auto;
    margin-top : 20px;
    margin-bottom : 80px;
    background-image : url('/images/content-bg.jpg');
    max-width : 1180px;
    width : 96%;
    overflow : hidden;
    border-radius : 10px;
    box-shadow : 0 0 26px 4px rgba(0, 0, 0, 0.75);
}
@media (max-width:768px) {
    .app_ikkuna {
        width : 99%;
    }
}
.logo {
    position : absolute;
    z-index : 1000;
    background-image : url('/images/logo.png');
    width : 280px;
    height : 60px;
    margin-top : -16px;
    background-repeat: no-repeat;
}

.img-lang{
    float: right;
    width: 40px;
    height: 40px;
    margin-top: 8px;
    margin-right:5px;
}/*25.08.15 Jevgeni*/
.top {
    background-image : url('/images/navibg.jpg');
    width : 100%;
    padding : 10px;
}
.navi {
    font-family : 'Carter One', cursive;
    border-style : dashed;
    border-color : #f0e4d8;
    border-width : 1.5px;
    padding : 25px 0 0 5px;
    border-top-left-radius : 10px;
    border-top-right-radius : 10px;
}
.navigaatio {
    float : left;
}
.right_top_btn {
    margin-top : -5px;
    height : 60px;
    width : 60px;
    float : right;/*25.08.15 Jevgeni*/
    background-image : url('/images/top_btn.png');
    background-position : 0 0;
}
.right_top_navi {
    width : 240px;
    float : right;
}
.right_top_btn:hover {
    background-position : 0 -60px;
}
.right_top_navi .active {
    background-position : 0 -60px;
}
.posti_viesti_numero {
    color : #f5f2d5;
    font-family : 'Open Sans', sans-serif;
    font-size : 9px;
    text-align : center;
    padding-top : 3px;
    position : absolute;
    z-index : 1000;
    background-color : #682b2b;
    width : 18px;
    height : 18px;
    border-radius : 9px;
    margin-left : 21px;
    margin-top : 12px;
}
.ohje_text {
    color : #333333;
    background-color : #f2efd8;
    background-position : bottom;
    padding : 10px 15px 10px 15px;
    margin : 0 -5px 0 -5px;
    box-shadow : 0 1px 6px 2px rgba(0, 0, 0, 0.3) inset;
}
.sisalto {
    padding : 10px 15px 3px 15px;
    min-height : 350px;
}
@media (max-width:468px) {
    .sisalto {
        padding : 0 5px 3px 5px;
    }
}
.img-btn {
    height : 70px;
    width : 70px;
}
.nav-img-btn {
    margin : -10px -9px;
    height : 105px;
    width : 105px;
}
.kesto-nav {
    position : absolute;
    z-index : 100;
    bottom : -30px;
    background-color : #2d7ab5;
    width : 70px;
    padding : 0;
    border-radius : 5px;
    text-align : center;
    font-family : 'Open Sans', sans-serif;
    font-weight : 300;
    font-size : 16px;
    margin-left : -35px;
    color : #f5f2d5;
    left : 50%;
    box-shadow : 0 2px 4px 0 rgba(0, 0, 0, 0.65);
    visibility : visible;
}
.empty .kesto-nav {
    visibility : hidden;
}
.kesto-triangle {
    content : '';
    display : inline-block;
    border-left : 10px solid transparent;
    border-right : 10px solid transparent;
    border-bottom : 10px solid #ccc;
    border-bottom-color : rgba(45, 122, 181, 1);
    position : absolute;
    top : -10px;
    left : 25px;
}
@media (max-width:990px) {
    .img-btn {
        height : 60px;
        width : 60px;
    }
    .nav-img-btn {
        margin : -10px -10px;
        height : 70px;
        width : 70px;
    }
    .kesto-nav {
        position : absolute;
        z-index : 100;
        bottom : -30px;
        background-color : #2d7ab5;
        width : 50px;
        padding : 0;
        border-radius : 3px;
        text-align : center;
        font-weight : 300;
        font-size : 14px;
        margin-left : -25px;
        left : 50%;
    }
    .kesto-triangle {
        left : 16px;
    }
}
.soitin_ikkuna {
    background-image : url('/images/player-window-bg.png');
    padding : 10px;
    margin-bottom : 10px;
    color : #f5f2d5;
    border-radius : 10px;
    box-shadow : 0 2px 5px 0 rgba(0, 0, 0, 0.75);
    overflow : hidden;
}
.soitin_ikkuna a {
    color : #ffffff;
}
.soitin {
    margin-top : 5px;
}
.laulun_otsikko {
    font-size : 22px;
    text-transform : uppercase;
    font-family : 'Open Sans', sans-serif;
    font-weight : 300;
}
.luoja {
    font-size : 14px;
    font-family : 'Open Sans', sans-serif;
    font-weight : 300;
}
.kuvaus {
    font-family : 'Open Sans', sans-serif;
    font-weight : 300;
}
.non-activ-soitin {
    padding : 15px 5px;
    border-bottom : 1px solid #5a884b;
    cursor: pointer;
}/*25.08.15 Jevgeni*/
.non-activ-otsiko {
    text-transform : uppercase;
    padding-top : 10px;
}
@media (max-width:990px) {
    .non-activ-otsiko {
        padding-top : 0;
    }
}
.tab-content {
    padding : 10px 10px;
}
.alareuna {
    bottom : 0;
    width : 100%;
    min-height : 70px;
    padding : 5px;
    margin-bottom : 10px;
    margin-top : 5px;
    background-image : url('/images/alareuna_bg.png');
    background-color : #f5f2d5;
    box-shadow : 0 2px 5px 0 rgba(0, 0, 0, 0.75);
}
.alareuna_text {
    padding-left : 20px;
    padding-top : 7px;
}
.tikkaus {
    border-radius : 5px;
    padding : 5px;
    min-height : 70px;
    border-style : dashed;
    border-color : #306ba1;
    border-width : 1px;
}
.yksi_tikkaus {
    margin : 0 -30px;
    height : 10px;
    width : 1600px;
    border-top-style : dashed;
    border-top-color : #306ba1;
    border-top-width : 1px;
}
audio {
    width : 100%;
    margin-top : 10px;
}
.kirjaudu_otsikko {
    color : #f1ecc8;
    font-size : 22px;
    text-shadow : 1px 1px 3px #000000;
    text-align : center;
    margin-bottom : 10px;
}
.kirjaudu_sisalto {
    padding : 10px;
}
.kirjaudu_ikkuna {
    position : absolute;
    top : 50%;
    left : 50%;
    margin-top : -165px;
    margin-left : -190px;
    background-image : url('/images/ikkuna_bg.jpg');
    width : 380px;
    min-height : 330px;
    overflow : hidden;
    border-radius : 10px;
    box-shadow : 0 0 26px 4px rgba(0, 0, 0, 0.75);
}
.ulos {
    cursor : pointer;
    margin-top : 2px;
    margin-right : 10px;
    height : 30px;
    width : 120px;
    float : right;
    background-image : url('/images/ulos.png');
    background-position : 0 0;
}
.ulos:hover {
    background-position : 0 -30px;
}


.item_otsikko {
    font-size : 22px;
    color : #5a884b;
    text-transform : uppercase;
}
.alasivu_item {
    font-size : 18px;
    margin-bottom : 10px;
}
.hakusana {
    font-size : 34px;
    color : #f57e20;
    text-transform : uppercase;
    text-shadow : 1px 1px 1px #682b2b;
}
.mista-haetaan {
    padding : 5px;
    margin-bottom : 10px;
    border-radius : 5px;
    background-image : url('/images/alareuna_bg.png');
    background-color : #f5f2d5;
    box-shadow : 0 2px 5px 0 rgba(0, 0, 0, 0.75);
}
.form-item {
    font-size : 18px;
    font-family : 'Open Sans', sans-serif;
    padding : 5px 5px;
    color : #2777a3;
    text-transform : none;
}
.form-item .form-control {
    width : auto;
    display : inline;
    margin-right : 5px;
    margin-bottom : 0;
    margin-left : 5px;
}
.haku-checkbox {
    width : 20px;
}
.ryhman-item .orange_btn {
    height : 40px;
    width : 40px;
    margin-top : -5px;
    float : right;
    background-image : url('/images/top_btn.png');
    background-position : 0 0;
    background-size : 40px;
    cursor : pointer;
}
.ryhman-item .orange_btn:hover {
    background-position : 0 -40px;
}
.ryhman-item .orange_btn_active {
    background-position : 0 -40px;
}
.haku-btn-img {
    height : 40px;
    width : 40px;
}
.ryhman-otsikko {
    background-image : url('/images/player-window-bg.png');
    color : #f5f2d5;
    font-size : 22px;
    text-transform : uppercase;
    text-shadow : 1px 1px 1px #682b2b;
    padding : 5px 10px;
    border-top-left-radius : 5px;
    border-top-right-radius : 5px;
}
.ryhman-item {
    padding : 10px;
    border : #5a884b dashed 1px;
    border-top : 0 transparent;
}
.ryhman-item-otsikko {
    font-size : 20px;
}
.ryhman-item .img-btn, .s-img-btn{
    height : 30px;
    width : 30px;
    margin-top : -5px;
}
.modal-pdf .modal-dialog {
    height : 70%;
}
.modal-pdf .modal-body {
    height : 100%;
    padding : 10px;
}
.modal-pdf .modal-footer {
    padding : 5px;
    margin-top : 0;
}
thead {
    font-size : 24px;
    background-image : url('/images/player-window-bg.png');
    color : #f5f2d5;
    text-shadow : 1px 1px 1px #682b2b;
    padding-left : 10px;
}
.resepti_otsikko {
    font-size : 20px;
    color : #5a884b;
    min-width : 140px;
}
.top_radius {
    overflow : hidden;
    border-top-left-radius : 10px;
    border-top-right-radius : 10px;
    box-shadow : 0 -1px 5px 0 rgba(0, 0, 0, 0.5);
}
.table-hover {
    border-style : dashed;
    border-color : #5a884b;
    border-width : 1px;
}
.form-control {
    display : block;
    width : 100%;
    height : 40px;
    padding : 6px 12px;
    font-size : 18px;
    line-height : 1.428571429;
    color : #555555;
    background-color : #ffffff;
    background-image : none;
    border : #cccccc solid 1px;
    border-radius : 4px;
    box-shadow : 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    transition : border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.btn-haku {
    display : block;
    width : 100%;
    height : 40px;
    padding : 6px 12px;
    margin-bottom: 15px;/*25.08.15 Jevgeni*/
    font-size : 18px;
    line-height : 1.428571429;
    color : #5a884b;
    background-color : #f5f2d5;
    background-image : none;
    border : #5a884b solid 2px;
    border-radius : 4px;
    box-shadow : 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    transition : all 0.15s ease-in-out;
}
.btn-haku:hover {
    background-color : #5a884b;
    color : #f5f2d5;
    border : #f5f2d5 solid 2px;
}
.simple-pagination {
    margin-top:5px;/*25.08.15 Jevgeni*/
}
.btn-sirkku {
    margin : 10px;
    min-width : 100px;
    height : 40px;
    padding : 6px 12px;
    font-size : 18px;
    line-height : 1.428571429;
    color : #5a884b;
    background-color : #f5f2d5;
    background-image : none;
    border : #5a884b solid 2px;
    border-radius : 4px;
    box-shadow : 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    transition : all 0.15s ease-in-out;
}
.btn-sirkku:hover {
    background-color : #5a884b;
    color : #f5f2d5;
    border : #f5f2d5 solid 2px;
}
.close {
    float : right;
    font-size : 21px;
    font-weight : bold;
    line-height : 1;
    color : #000000;
    text-shadow : 0 1px 0 #ffffff;
    opacity : 0.20000000298023223876953125;
}
.close:hover, .close:focus {
    color : #000000;
    text-decoration : none;
    cursor : pointer;
    opacity : 0.5;
}
button.close {
    padding : 0;
    cursor : pointer;
    background : transparent;
    border : 0;
}
.modal-open {
    overflow : hidden;
}
body.modal-open, .modal-open .navbar-fixed-top, .modal-open .navbar-fixed-bottom {
    margin-right : 15px;
}
.modal {
    position : fixed; top : 0; right : 0; bottom : 0; left : 0; z-index : 1040; display : none; overflow : auto; overflow-y : scroll;
}
.modal.fade .modal-dialog {
    transform : translate(0,-25%);
    transition : transform 0.3s ease-out;
}
.modal.in .modal-dialog {
    transform : translate(0,0);
}
.modal-dialog {
    z-index : 1050;
    width : auto;
    padding : 10px;
    margin-right : auto;
    margin-left : auto;
}
.modal-content {
    background-image : url('/images/ikkuna_bg.jpg');
    position : relative;
    background-color : #ffffff;
    border : #999999 solid 1px;
    border : rgba(0, 0, 0, 0.2) solid 1px;
    border-radius : 6px;
    outline : none;
    box-shadow : 0 3px 9px rgba(0, 0, 0, 0.5);
    background-clip : padding-box;
}
.modal-backdrop {
    position : fixed;
    top : 0;
    right : 0;
    bottom : 0;
    left : 0;
    z-index : 1030;
    background-color : #000000;
}
.modal-backdrop.fade {
    opacity : 0;
}
.modal-backdrop.in {
    opacity : 0.5;
}
.modal-header {
    min-height : 16.428571429px;
    padding : 15px;
    border-bottom : 1px dashed #306ba1;
}
.modal-header .close {
    margin-top : -2px;
}
.modal-title {
    margin : 0;
    line-height : 1.428571429;
}
.modal-body {
    position : relative;
    padding : 20px;
}
.modal-footer {
    padding : 5px;
    text-align : right;
    border-top : 1px dashed #306ba1;
}
.modal-footer:before, .modal-footer:after {
    display : table;
    content : " ";
}
.modal-footer:after {
    clear : both;
}
.modal-footer:before, .modal-footer:after {
    display : table;
    content : " ";
}
.modal-footer:after {
    clear : both;
}
@media (min-width:768px) {
    .modal-dialog {
        right : auto;
        left : 0%;
        width : 760px;
        padding-top : 30px;
        padding-bottom : 30px;
    }
    .modal-content {
        box-shadow : 0 5px 15px rgba(0, 0, 0, 0.5);
    }
}
.orange_btn {
    height : 60px;
    width : 60px;
    float : right;
    background-image : url('/images/top_btn.png');
    background-position : 0 0;
    cursor : pointer;
}
.orange_btn:hover {
    background-position : 0 -60px;
}
.s-orange_btn {
    height : 40px;
    width : 40px;
    float : right;
    background-image : url('/images/top_btn.png');
    background-position : 0 0;
    background-size:40px;
    cursor : pointer;
}/*25.08.15 Jevgeni*/
.s-orange_btn:hover {
    background-position : 0 -40px;
}
.s-orange_btn .img-center {
    width:40px;
    height:40px;
}
.orange_btn_active {
    background-position : 0 -60px;
}
.orange_btn_lista {
    margin-right : -10px;
}
.suosikit {
    position : relative;
    bottom : 0;
    right : 0;
    float : right;
    margin-bottom : -10px;
    margin-right : -10px;
}
.sivun-otsikko {
    padding-bottom : 10px;
    margin-top : -10px;
    text-align : center;
    text-transform : uppercase;
    font-size : 30px;
    color : #f5f2d5;
    text-shadow : 3px 3px 2px #682b2b;
}

@media (min-width:960px) {
    .modal-dialog {
        right : auto;
        left : 0%;
        width : 940px;
        padding-top : 30px;
        padding-bottom : 30px;
    }
}


.tehtava{
    padding:15px;
    font-size: 18px;
    font-weight: 500;
}

.kysymys,
.vastaus{
    //padding: 15px;
    padding: 0px;
}

.kysymys h3{
    margin-top:0px;
    color:#2777a3;
}
.mielipide {
    float: left;
    margin-right: 20px;
    margin-top: -10px;
}
.mielipide .fa-smile-o{
    font-size: 23px;
    color:#33AC3B;
}

.mielipide .fa-frown-o{
    font-size: 23px;
    color:#F12F2F;
    margin-top:3px;
}

.mieli-box{
    background-color: rgb(234, 226, 210);
    box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, 0.15);
    padding:4px;
    border-radius: 20px;
    width:20px;
    height: 100%;
}
.mieli-ruler{
    box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.45);
    width:12px;
    /* height:150px; */
    height: 100%;
    border-radius: 10px;

    background-image: -webkit-gradient(
            linear,
            left top,
            left bottom,
            color-stop(0, #33AC3B),
            color-stop(0.5, #E9CC0C),
            color-stop(1, #F12F2F)
    );
    background-image: -o-linear-gradient(bottom, #33AC3B 0%, #E9CC0C 50%, #F12F2F 100%);
    background-image: -moz-linear-gradient(bottom, #33AC3B 0%, #E9CC0C 50%, #F12F2F 100%);
    background-image: -webkit-linear-gradient(bottom, #33AC3B 0%, #E9CC0C 50%, #F12F2F 100%);
    background-image: -ms-linear-gradient(bottom, #33AC3B 0%, #E9CC0C 50%, #F12F2F 100%);
    background-image: linear-gradient(to bottom, #33AC3B 0%, #E9CC0C 50%, #F12F2F 100%);
}

.mieli-ruler-sort{
    box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.45);
    width:12px;
    height:230px;
    border-radius: 10px;

    background-image: -webkit-gradient(
            linear,
            left top,
            left bottom,
            color-stop(0, #33AC3B),
            color-stop(0.5, #E9CC0C),
            color-stop(1, #F12F2F)
    );
    background-image: -o-linear-gradient(bottom, #33AC3B 0%, #E9CC0C 50%, #F12F2F 100%);
    background-image: -moz-linear-gradient(bottom, #33AC3B 0%, #E9CC0C 50%, #F12F2F 100%);
    background-image: -webkit-linear-gradient(bottom, #33AC3B 0%, #E9CC0C 50%, #F12F2F 100%);
    background-image: -ms-linear-gradient(bottom, #33AC3B 0%, #E9CC0C 50%, #F12F2F 100%);
    background-image: linear-gradient(to bottom, #33AC3B 0%, #E9CC0C 50%, #F12F2F 100%);
}

.k-navi{
    margin-bottom: 10px;
    margin-top:40px;
    clear: both;
}
.muistosi{
    display: block;
    min-height: 32px;
}
.muistosi h4{
    margin-top:7px;
    /*margin-left: 10px;*/
    color:#2777a3;
    margin-bottom:0px;
    text-transform: uppercase;
    font-weight:600;
    display: inline-block;
}

.top-title{
    font-family: 'Carter One', cursive;
    border-style: dashed;
    border-color: #f0e4d8;
    border-width: 1px;
    padding: 10px 15px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    color: #f5f2d5;
    text-shadow: 3px 3px 2px #682b2b;
    font-size: 30px;
}


.box{
    border-radius: 5px;
    background-color: #eae2d2;
    box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, 0.15);
    padding:7px;
}

.btn {
    display: inline-block;
    padding: 10px 25px;
    margin-bottom: 0;
    font-size: 17px;
    font-weight: normal;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 20px;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.btn-right{
    float: right;
    margin-left:10px;
}
.btn-full-width{
    width:100%;
}

.btn img{
    margin-top: -3px;
    position: relative;
    margin-left: 10px;
}

.btn-vihrea {
    border-width: 1px;
    border-color: #4b8a43;
    border-style: solid;
    border-radius: 5px;
    background-color: #ece8bc;
    color:#4b8a43;
    padding:3px 15px;
}

.btn-vihrea:hover,
.btn-vihrea:focus,
.btn-vihrea:active,
.btn-vihrea.active {
    color: #ece8bc;
    background-color:#4b8a43;
    border-color: #275a25;
}


.btn-sininen {
    border-width: 1px;
    border-color: #ff7600;
    border-style: solid;
    border-radius: 5px;
    background-color: #2777a3;
    color:#f6f3d0;
    padding:3px 15px;
}
.btn-sininen:hover,
.btn-sininen:focus,
.btn-sininen:active,
.btn-sininen.active {
    color: #2777a3;
    background-color:#ff7600;
    border-color: #2777a3;
}

.btn-tvihrea {
    padding:3px 15px;
    color: #ece8bc;
    border-width: 1px;
    border-color: #275a25;
    border-style: solid;
    border-radius: 5px;
    background-color: #4b8a43;
    box-shadow: inset 0px 1px 6px 0px rgba(0, 0, 0, 0.45);
}

.up-down-voute tr{
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}
.up-down-voute a.down{
    margin-right:6px;
    margin-left:2px;
}

.up-down-voute img {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px transparent;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
}
.up-down-voute img:hover, .up-down-voute img:focus, .up-down-voute img:active {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

input[type=checkbox]:not(old),
input[type=radio   ]:not(old){
    width   : 28px;
    margin  : 0;
    padding : 0;
    opacity      : 0;
}

input[type=checkbox]:not(old) + label{
    display      : inline-block;
    margin-left  : -28px;
    padding-left : 28px;
    background   : url('/images/checks.png') no-repeat 0 0;
    line-height  : 24px;
}


input[type=radio   ]:not(old) + label{
    display      : inline-block;
    margin-left  : -28px;
    padding-left : 28px;
    background   : url('/images/radio.png') no-repeat 0 0;
    line-height  : 24px;
}

input[type=checkbox]:not(old):checked + label{
    background-position : 0 -24px;
}

input[type=radio]:not(old):checked + label{
    background-position : 0 -24px;
}


/*
    PLAYER by
    Audio Player: Responsive and Touch-friendly demo by Osvaldas Valutis
    at view-source:http://osvaldas.info/examples/audio-player-responsive-and-touch-friendly/
*/

.audioplayer
{
    height: 3.5em; /* 40 */
    color: #fff;
    text-shadow: 1px 1px 0 #000;
    border: 1px solid #f5f2d5;
    position: relative;
    z-index: 10000;
    background: #333;
}


/* mini mode (fallback) */

.audioplayer-mini
{
    width: 2.5em; /* 40 */
    margin: 0 auto;
}


/* player elements: play/pause and volume buttons, played/duration timers, progress bar of loaded/played */

.audioplayer > div
{
    position: absolute;
}


/* play/pause button */

.audioplayer-playpause
{
    width: 3.5em; /* 40 */
    height: 100%;
    text-align: left;
    text-indent: -9999px;
    cursor: pointer;
    z-index: 20000;
    top: 0;
    left: 0;
    border-radius: 5px 0 0 5px;
}
.audioplayer:not(.audioplayer-mini) .audioplayer-playpause
{
    border-right: 1px solid #555;
    border-right-color: rgba( 255, 255, 255, .1 );
}
.audioplayer-mini .audioplayer-playpause
{
    width: 100%;
}
.audioplayer-playpause:hover,
.audioplayer-playpause:focus
{
    background-color: #33542a;
}
.audioplayer-playpause a
{
    display: block;
}
.audioplayer-stopped .audioplayer-playpause a
{
    width: 0;
    height: 0;
    border: 0.7em solid transparent;
    border-right: none;
    border-left-width: 1em;
    border-left-color: #fff;
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -0.65em 0 0 -0.35em;
}
.audioplayer-playing .audioplayer-playpause a
{
    width: 1.05em; /* 12 */
    height: 1.05em; /* 12 */
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -0.525em 0 0 -0.525em; /* 6 */
}
.audioplayer-playing .audioplayer-playpause a:before,
.audioplayer-playing .audioplayer-playpause a:after
{
    width: 40%;
    height: 100%;
    background-color: #fff;
    content: '';
    position: absolute;
    top: 0;
}
.audioplayer-playing .audioplayer-playpause a:before
{
    left: 0;
}
.audioplayer-playing .audioplayer-playpause a:after
{
    right: 0;
}


/* timers */

.audioplayer-time
{
    width: 3.125em; /* 70 */
    height: 100%;
    line-height: 3.3249999999999997em; /* 38 */
    text-align: center;
    z-index: 20000;
    top: 0;
}
.audioplayer-time-current
{
    border-left: 1px solid #111;
    border-left-color: rgba( 0, 0, 0, .25 );
    left: 3.5em; /* 40 */
}
.audioplayer-time-duration
{
    border-right: 1px solid #555;
    border-right-color: rgba( 255, 255, 255, .1 );
    right: 3.5em; /* 40 */
}
.audioplayer-novolume .audioplayer-time-duration
{
    border-right: 0;
    right: 6.875em;
}


/* progress bar of loaded/played */

.audioplayer-bar
{
    height: 1.225em; /* 14 */
    background-color: #e7e5cd;
    cursor: pointer;
    z-index: 10000;
    top: 50%;
    right: 6.875em; /* 110 */
    left: 6.875em; /* 110 */
    margin-top: -0.6132em; /* 7 */
    border: 1px solid #f5f2d5;
}
.audioplayer-novolume .audioplayer-bar
{
    right: 10.125em; /* 70 */
}
.audioplayer-bar div
{
    width: 0;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
.audioplayer-bar-loaded
{
    background-color: #f5f2d5;
    z-index: 10000;
}
.audioplayer-bar-played
{
    background: #246a91;
    z-index: 20000;
}




.audioplayer-next
{
    width: 3.5em; /* 40 */
    height: 100%;
    border-radius: 0 5px 5px 0;
    border-left: 1px solid #111;
    border-left-color: rgba( 0, 0, 0, .25 );
    text-align: left;
    text-indent: 0px;
    cursor: pointer;
    z-index: 20000;
    top: 0;
    right: 0;
}
.audioplayer-next:hover,
.audioplayer-next:focus
{
    background-color: #33542a;
}
.audioplayer-prev
{
    width: 3.5em; /* 40 */
    height: 100%;
    border-left: 1px solid #111;
    border-left-color: rgba( 0, 0, 0, .25 );
    text-align: left;
    text-indent: 0px;
    cursor: pointer;
    z-index: 20000;
    top: 0;
    right: 3.5em;
}
.audioplayer-prev:hover,
.audioplayer-prev:focus
{
    background-color: #33542a;
}

.audioplayer-disabled {
    background-color: #4d7c40 !important;

    cursor:default !important;
}

.audioplayer-disabled img {
    display:none;
}
.audioplayer-img-button {
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-9px;
    margin-left:-10px;
    width: 20px;
    height: 18px;
    z-index: 30000;

}

.audioplayer-volume
{
    width: 3.5em; /* 40 */
    height: 100%;
    border-left: 1px solid #111;
    border-left-color: rgba( 0, 0, 0, .25 );
    text-align: left;
    text-indent: -9999px;
    cursor: pointer;
    z-index: 20000;
    top: 0;
    right: 0;
}
.audioplayer-volume:hover,
.audioplayer-volume:focus
{
    background-color: #222;
}
.audioplayer-volume-button
{
    width: 100%;
    height: 100%;
}
.audioplayer-volume-button a
{
    width: 0.4382em; /* 5 */
    height: 0.525em; /* 6 */
    background-color: #fff;
    display: block;
    position: relative;
    z-index: 10000;
    top: 40%;
    left: 35%;
}
.audioplayer-volume-button a:before,
.audioplayer-volume-button a:after
{
    content: '';
    position: absolute;
}
.audioplayer-volume-button a:before
{
    width: 0;
    height: 0;
    border: 0.5em solid transparent; /* 8 */
    border-left: none;
    border-right-color: #fff;
    z-index: 20000;
    top: 50%;
    right: -0.25em;
    margin-top: -0.5em; /* 8 */
}
.audioplayer:not(.audioplayer-muted) .audioplayer-volume-button a:after
{
    /* "volume" icon by Nicolas Gallagher, http://nicolasgallagher.com/pure-css-gui-icons */
    width: 0.4382em; /* 5 */
    height: 0.4382em; /* 5 */
    border: 0.25em double #fff; /* 4 */
    border-width: 0.25em 0.25em 0 0; /* 4 */
    left: 0.563em; /* 9 */
    top: -0.063em; /* 1 */
    -webkit-border-radius: 0 0.938em 0 0; /* 15 */
    -moz-border-radius: 0 0.938em 0 0; /* 15 */
    border-radius: 0 0.938em 0 0; /* 15 */
    -webkit-transform: rotate( 45deg );
    -moz-transform: rotate( 45deg );
    -ms-transform: rotate( 45deg );
    -o-transform: rotate( 45deg );
    transform: rotate( 45deg );
}


/* volume dropdown */

.audioplayer-volume-adjust
{
    height: 3.25em; /* 100 */
    cursor: default;
    position: absolute;
    left: 0;
    right: -1px;
    top: -9999px;
    background: #333;
}
.audioplayer-volume:not(:hover) .audioplayer-volume-adjust
{
    opacity: 0;
}
.audioplayer-volume:hover .audioplayer-volume-adjust
{
    top: auto;
    bottom: 100%;
}
.audioplayer-volume-adjust > div
{
    width: 40%;
    height: 80%;
    background-color: #222;
    cursor: pointer;
    position: relative;
    z-index: 10000;
    margin: 30% auto 0;
}
.audioplayer-volume-adjust div div
{
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    background: #222222;
}
.audioplayer-novolume .audioplayer-volume
{
    display: none;
}


/* CSS3 decorations */

.audioplayer
{
    /*
        -webkit-box-shadow: inset 0 1px 0 rgba( 255, 255, 255, .15 ), 0 0 1.25em rgba( 0, 0, 0, .5 );
        -moz-box-shadow: inset 0 1px 0 rgba( 255, 255, 255, .15 ), 0 0 1.25em rgba( 0, 0, 0, .5 );
        box-shadow: inset 0 1px 0 rgba( 255, 255, 255, .15 ), 0 0 1.25em rgba( 0, 0, 0, .5 );  */
}


.audioplayer-volume-adjust
{
    -webkit-box-shadow: -2px -2px 2px rgba( 0, 0, 0, .15 ), 2px -2px 2px rgba( 0, 0, 0, .15 );
    -moz-box-shadow: -2px -2px 2px rgba( 0, 0, 0, .15 ), 2px -2px 2px rgba( 0, 0, 0, .15 );
    box-shadow: -2px -2px 2px rgba( 0, 0, 0, .15 ), 2px -2px 2px rgba( 0, 0, 0, .15 );
}
.audioplayer-bar,
.audioplayer-volume-adjust > div
{
    -webkit-box-shadow: -1px -1px 0 rgba( 0, 0, 0, .5 ), 1px 1px 0 rgba( 255, 255, 255, .1 );
    -moz-box-shadow: -1px -1px 0 rgba( 0, 0, 0, .5 ), 1px 1px 0 rgba( 255, 255, 255, .1 );
    box-shadow: -1px -1px 0 rgba( 0, 0, 0, .5 ), 1px 1px 0 rgba( 255, 255, 255, .1 );
}
.audioplayer-volume-adjust div div,
{
    -webkit-box-shadow: inset 0 0 5px rgba( 255, 255, 255, .5 );
    -moz-box-shadow: inset 0 0 5px rgba( 255, 255, 255, .5 );
    box-shadow: inset 0 0 5px rgba( 255, 255, 255, .5 );
}

.audioplayer-volume a
{
    -webkit-filter: drop-shadow( 1px 1px 0 #000 );
    -moz-filter: drop-shadow( 1px 1px 0 #000 );
    -ms-filter: drop-shadow( 1px 1px 0 #000 );
    -o-filter: drop-shadow( 1px 1px 0 #000 );
    filter: drop-shadow( 1px 1px 0 #000 );
}
.audioplayer,
.audioplayer-volume-adjust
{
    background: -webkit-gradient( linear, left top, left bottom, from( #67a255 ), to( #35592c ) );
    background: -webkit-linear-gradient( top, #67a255, #35592c );
    background: -moz-linear-gradient( top, #67a255, #35592c );
    background: -ms-radial-gradient( top, #67a255, #35592c );
    background: -o-linear-gradient( top, #67a255, #35592c );
    background: linear-gradient( to bottom, #67a255, #35592c );
}
.audioplayer-bar-played
{
    -webkit-box-shadow: inset 1px 3px 3px 0px rgba(255,255,255,0.3);
    -moz-box-shadow: inset 1px 3px 3px 0px rgba(255,255,255,0.3);
    box-shadow: inset 1px 3px 3px 0px rgba(255,255,255,0.3);



    background: -webkit-gradient( linear, left top, left bottom, from( #2e99d4 ), to( #21668c ) );
    background: -webkit-linear-gradient( top, #2e99d4, #21668c );
    background: -moz-linear-gradient( top, #2e99d4, #21668c );
    background: -ms-radial-gradient( top, #2e99d4, #21668c );
    background: -o-linear-gradient( top, #2e99d4, #21668c );
    background: linear-gradient( to bottom, #2e99d4, #21668c );
}

/*
    {
        background: -webkit-gradient( linear, left top, right top, from( #246a91 ), to( #257fb1 ) );
        background: -webkit-linear-gradient( left, #246a91, #246a91 );
        background: -moz-linear-gradient( left, #246a91, #257fb1 );
        background: -ms-radial-gradient( left, #246a91, #257fb1 );
        background: -o-linear-gradient( left, #246a91, #257fb1 );
        background: linear-gradient( to right, #246a91, #257fb1 );
    }*/
.audioplayer-volume-adjust div div
{
    background: -webkit-gradient( linear, left bottom, left top, from( #222222 ), to( #dddddd ) );
    background: -webkit-linear-gradient( bottom, #222222, #dddddd );
    background: -moz-linear-gradient( bottom, #222222, #dddddd );
    background: -ms-radial-gradient( bottom, #222222, #dddddd );
    background: -o-linear-gradient( bottom, #222222, #dddddd );
    background: linear-gradient( to top, #222222, #dddddd );
}
.audioplayer-bar,
.audioplayer-bar div,
.audioplayer-volume-adjust div
{
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}
.audioplayer
{
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.audioplayer-volume-adjust
{
    -webkit-border-top-left-radius: 2px;
    -webkit-border-top-right-radius: 2px;
    -moz-border-radius-topleft: 2px;
    -moz-border-radius-topright: 2px;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
}
.audioplayer *,
.audioplayer *:before,
.audioplayer *:after
{
    -webkit-transition: color .25s ease, background-color .25s ease, opacity .5s ease;
    -moz-transition: color .25s ease, background-color .25s ease, opacity .5s ease;
    -ms-transition: color .25s ease, background-color .25s ease, opacity .5s ease;
    -o-transition: color .25s ease, background-color .25s ease, opacity .5s ease;
    transition: color .25s ease, background-color .25s ease, opacity .5s ease;
}

@media (min-width: 769px) {
    .navbar-header {
        margin-left: 0px;
    }
}

#questionsBlock, #mediaFileBlock {
    margin-top: 10px;
}

.vastaus {
    margin-left: 5px;
    margin-right: 5px;
    padding-left: 10px;
}

.side-by-side > .question_container {
    margin-left: 15px;
    margin-right: 5px;
    font-size: 18px;
    padding-left: 10px;
}

.side-by-side > .question_container > .related {
    font-size: 18px;
}

/*
.side-by-side > .question_container > .related > form > .vastaus > .row > div > .vastaus > .row {
    padding-bottom: 5px;
}

.side-by-side > .question_container > .related > form > .vastaus > .row > .color-bar > .align-keskelle > .mieli-box > .mieli-ruler {
    height: 165px;
}
*/

.memory-save-block {
    position: relative;
}

#memoryBox {
}

.footer-image {
    max-height: 100%;
    max-width: 100%;
}

.full-height {
    height: 100%;
    max-height: 100%;
}