body {
    font-size: 100%;
    background: url(/img/bg_shdw_965.gif) center repeat-y;
}

#sliderToggleId {
    display: none;
}

#dim {
    position: static;
    padding-left: 0px;

    margin: 0;
    padding: 0;

    overflow-x: visible;
    overflow-y: visible;
}

#sframe {

    width: 960px;
    max-width: 960px;

    margin-left: auto;
    margin-right: auto;
    height: 100%;

    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

#header {
    background-image:url("/img/wikigenes.gif");
    background-color: #cc0000;
    background-repeat: no-repeat;
    height: 100px;

    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

#header_home_button {
    float: left;
    width: 260px;
    height: 100px;
    padding-top: 0px;
    padding-bottom: 0px;
    cursor: pointer;

    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

#subheader {
    background-image:url("/img/headline_flare.gif");
    background-repeat: repeat-x;
    background-position: top;

    min-height: 22px;

    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

#subheader_content, #subheader_content A, #subheader_content A:hover {
    color: #ffffff !important;
}

#left_main_content {
    /*width:810px;*/
    width: 800px;
    margin: 0;
    padding: 0;
    float: left;

    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;

}

#left_content {

    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;

    padding: 0;
    margin: 0;

    position: static;
    width: 185px;
    float: left;

    overflow: visible;
}

#main_content {

    float: right;
    width: 615px;

    padding-left: 1em;
    padding-right: 1em;

    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;

}

#right_content {
    margin: 0;
    padding: 0;

    width: 160px;
    float: right;

    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

#ref_div {
    float: left;
    white-space: nowrap;
}

#ref_div span {
    font-size: 80%;
    padding-left: 5px;
}

#wokoonStatusDiv {
    font-size: 90%;
    position: static;
    float: right;
    text-align: right;
    white-space: nowrap;
    margin-top: 2px;
    margin-right: 2px;
    padding-left: 0em;
}

#subheader {
    margin-bottom: 1em;
}

.searchicon {
    padding:0px; margin-top:45px; margin-bottom:5px; text-align:center;
}

.fbFloat {
 display: none;
}

/* smaller than 960 */
@media screen and (max-width: 959px) {

    #header_home_button {
        max-width: 220px;
        margin-left: 42px;
    }

    body {
        background: none;
    }

    .searchicon {
        margin-top:5px;
    }


    .fbFloat {
        display: inline-block;
        position: absolute;
        bottom: 17px;
        right: 0;
        padding-right: 5px;
    }

    #dim {
        left: -185px;
        /* !!! sometimes cuts off pags in safari ios (do in slided)
             height: 101%;
        */

        /*!!! DONT use box-sizing border box, cause else this padding would be part of the width*/
        width: 100%;
        padding-left: 185px;

        position: absolute;
        z-index: 1;

        -webkit-transition: left 1s;
        -moz-transition: left 1s;
        -ms-transition: left 1s;
        -o-transition: left 1s;
        transition: left 1s;
    }

    body.slided {
        overflow: hidden;
    }

    body.slided #dim {

        height: 101%;

        left: 0;

/* 3.2015: why was this here? it breaks fixed position of sliderToggleId in Android 5, Chrome

*/
        overflow-x: hidden;
        overflow-y: auto;

        /*border-radius: 7px 0 0 7px;*/
    }

    #sliderToggleId {
        display: block;

        position: fixed;
        left: 0px;
        top: 0px;

        border: 2px solid #284d5d;
        border-radius: 2px;
        height: 26px;
        width: 40px;

        opacity: 0.4;
        cursor: pointer;

        z-index: 5000;
        -webkit-transition: left 1s;
        -moz-transition: left 1s;
        -ms-transition: left 1s;
        -o-transition: left 1s;
        transition: left 1s;
    }

    #sliderToggleId:before {
        border-bottom: 12px double black;
        border-top: 4px solid black;
        content: "";
        height: 4px;
        position: absolute;
        right: 3px;
        top: 3px;
        width: 34px;
    }

    #sliderToggleId:hover {
        opacity: 1;
    }

    body.slided #sliderToggleId {
        left: 185px;
    }

    #sframe {
        margin: 0;
        padding: 0;

        width: auto;
    }

    #header {
        padding-top: 0px;
        padding-bottom: 0px;
    }

    #subheader_content {
        margin: 0;
        padding: 0;
    }

    #left_main_content {
        margin: 0;
        padding: 0;

        float: none;
        width: auto;

        clear: both;
    }

    #left_content {

        padding: 5px;

        position: fixed;
        top: 0;
        left: -185px;
        height: 100%;
        width: 185px;

        overflow: hidden;
        overflow-y: auto;

        float: none;

        -webkit-transition: left 1s;
        -moz-transition: left 1s;
        -ms-transition: left 1s;
        -o-transition: left 1s;
        transition: left 1s;
    }

    body.slided #left_content {

        top: 0;
        left: 0;
        overflow-y: visible;
        z-index: 10;
    }

    #main_content {

        /*!!! NOTE dont use em here to avoid slight left/right scrolling bug in ios safari*/
        padding-left: 5px;
        padding-right: 5px;

        float: none;
        width: auto;

    }

    #right_content {

        margin-top: 4em;

        padding-left: 5px;
        padding-right: 5px;

        float: none;
        width: auto;
    }

    #ref_div {
        overflow: hidden;
        padding: 0;
        float: none;
    }

    #wokoonStatusDiv {
        position: absolute;
        right: 0;
        padding-right: 5px;
        top: 0;
        /*
             float: right;
        */
        font-size: 60%;
    }
}

@media screen and (max-width: 320px) {

    .fbFloat, #wokoonStatusDiv {
     padding-right: 2px;
 }
}

@media screen and (max-width: 486px) {
    #ref_div {
        max-width: 379px;
    }
}

@media print {

    #main_content {
        float: left;
    }

    #left_main_content {
        width: 665px;
    }

    #sframe {
        width: 900px;
    }

    #right_content {
        margin-left: 0.5em;
    }

}