/** Defaults */
    * {
        margin: 0;
        padding: 0;
    }
    body {
        min-width: 1000px;
        font: 62.5%/1.4 "Trebuchet MS", sans-serif;
    }
    a {
        color: #06F;
    }
    a:hover {
        text-decoration: none;
    }
    a img {
        border: none;
    }
/* Defaults **/

/** Layout, l-prefix */
    .l-page-body {
        min-width: 1150px;
    }
/* Layout, l-prefix **/

/** Blocks, b-prefix */
    .b-main-header {
        margin: 50px 0 0 200px;
        text-align: center;
        width: 827px;
        font-family: Georgia, serif;
        font-size: 1.4em;
    }
    .b-main-header h1 {
        font-size: 3em;
        line-height: 1.8;
        font-weight: normal;
    }
    .b-inline-list li {
        display: inline;
    }
    .b-float-list li {
        float: left;
        list-style-type: none;
    }
    .b-copyright {
        text-align:center;
        color:#b8aead;
    }
    /** b-recorder-chart */
        .b-recorder-chart {
            width: 827px;
            margin: 50px auto;
        }
        .b-scale {
            margin: 0 auto;
        }
        .b-scale .first-octave h2 { margin-bottom: 10px; }
        .b-scale .first-octave ul {
            height: 62px;
            margin-bottom: 40px;
        }
        .b-scale_whistle { width: 608px; }
        .b-scale_zhaleyka { width: 608px; }
        .b-scale_zhaleyka .like2nd {
            margin-top: 9px;
        }
        .b-scale_recorder { width: 827px; }
        .b-scale .key
        , .b-scale .end {
            float: left;
            list-style-type: none;
        }
        .b-scale .key .key-title
        , .b-scale .end .end-title {
            width: 35px;
            float: left;
            text-indent: -9999px;
            height: 90px;
            background: url(../images/key.gif) no-repeat;    
        }
        .b-scale .second-octave .key .key-title { background-position: 0 9px; }
        .b-scale .third-octave .key .key-title { background-position: 0 35px; }
        .b-scale .end .end-title {
            width: 4px;
            background: url(../images/scale.gif) no-repeat right 0px;    
        }
        .b-scale .third-octave .end .end-title { background-position: right 35px; }
        .b-scale .second-octave ul {
            height: 64px;
            margin-bottom: 40px;
        }
        .b-scale .third-octave h2 { margin-bottom: -10px; padding-left: 35px; position: relative; z-index: 1001; }
        .b-scale .third-octave ul {
            height: 90px;
            margin-bottom: 40px;
        }
        .b-scale .note {
            list-style-type: none;
            float: left;
        }
        .b-scale .not-used a {
            visibility: hidden;
        }
        .b-scale .note a {
            float: left;
            text-align: center;
            color: #000;
            text-decoration: none;
            position: relative;
            background: #000 url(../images/scale.gif) no-repeat;    
        }
        .b-scale .first-octave .note a { height: 62px; }
        .b-scale .second-octave .note a { height: 64px; }
        .b-scale .third-octave .note a { height: 90px; }
        .b-scale .note .note-title {
            position: absolute;
            left: 0;
            top: 90%;
            font-size: 1.5em;
            width: 100%;
            color: #999;
        }
        .b-scale .note a:hover {
            background-color: #06C;
            outline: 0;
        }
        .b-scale .active a
        , .b-scale .active a:hover {
            background-color: #069!important;
            outline: 0;
        }
        .b-scale .active a .note-title
        , .b-scale .active a:hover .note-title {
            display: block;
            color: #069;
        }
        .b-scale a:hover .note-title {
            display: block;
            color: #06C;
        }
        /** First octave */
            #note-C1 {
                width: 57px;
                background-position: -37px 0;
            }
            #note-C1sharp-D1flat {
                width: 90px;
                background-position: -94px 0;
            }
            #note-D1 {
                width: 47px;
                background-position: -184px 0;
            }
            #note-D1sharp-E1flat {
                width: 91px;
                background-position: -231px 0;
            }
            #note-E1 {
                width: 46px;
                background-position: -322px 0;
            }
            #note-F1 {
                width: 47px;
                background-position: -368px 0;
            }
            #note-F1sharp-G1flat {
                width: 90px;
                background-position: -415px 0;
            }
            #note-G1 {
                width: 47px;
                background-position: -505px 0;
            }
            #note-G1sharp-A1flat {
                width: 90px;
                background-position: -552px 0;
            }
            #note-A1 {
                width: 47px;
                background-position: -642px 0;
            }
            #note-A1sharp-B1flat {
                width: 90px;
                background-position: -689px 0;
            }
            #note-B1 {
                width: 44px;
                background-position: -779px 0;
            }
            .zhaleyka #note-B1 {
                width: 44px;
            }
        /* First octave **/
        /** Second octave */
            #note-C2 {
                width: 45px;
                background-position: -35px -79px;
            }
            #note-C2sharp-D2flat {
                width: 92px;
                background-position: -80px -79px;
            }
            #note-D2 {
                width: 48px;
                background-position: -172px -79px;
            }
            #note-D2sharp-E2flat {
                width: 92px;
                background-position: -220px -79px;
            }
            #note-E2 {
                width: 47px;
                background-position: -312px -79px;
            }
            #note-F2 {
                width: 48px;
                background-position: -359px -79px;
            }
            #note-F2sharp-G2flat {
                width: 92px;
                background-position: -407px -79px;
            }
            #note-G2 {
                width: 48px;
                background-position: -499px -79px;
            }
            #note-G2sharp-A2flat {
                width: 92px;
                background-position: -547px -79px;
            }
            #note-A2 {
                width: 48px;
                background-position: -639px -79px;
            }
            #note-A2sharp-B2flat {
                width: 92px;
                background-position: -687px -79px;
            }
            #note-B2 {
                width: 48px;
                background-position: -779px -79px;
            }
        /* Second octave **/
        /** Third octave */
            #note-C3 {
                width: 52px;
                background-position: -28px -159px;
            }
            #note-C3sharp-D3flat {
                width: 92px;
                background-position: -80px -159px;
            }
            #note-D3 {
                width: 48px;
                background-position: -172px -159px;
            }
            #note-D3sharp-E3flat {
                width: 92px;
                background-position: -220px -159px;
            }
            #note-E3 {
                width: 47px;
                background-position: -312px -159px;
            }
            #note-F3 {
                width: 48px;
                background-position: -359px -159px;
            }
            #note-F3sharp-G3flat {
                width: 92px;
                background-position: -407px -159px;
            }
            #note-G3 {
                width: 48px;
                background-position: -499px -159px;
            }
            #note-G3sharp-A3flat {
                width: 92px;
                background-position: -547px -159px;
            }
            #note-A3 {
                width: 48px;
                background-position: -439px -159px;
            }
            #note-A3sharp-B3flat {
                width: 92px;
                background-position: -687px -159px;
            }
            #note-B3 {
                width: 44px;
                background-position: -779px -159px;
            }
        /* Third octave **/

    /* b-recorder-chart **/
    .b-info {
        clear: both;
        padding: 25px 0 0;
        text-align: center;
        color: #999;
    }
    .b-info a {
        color: #999;
    }
    .b-pseudo-link {
        border-bottom: 1px dotted;
        position: relative;
        z-index: 1001;
    }
    .b-dropdown {
        cursor: pointer;
        list-style-type: none!important;
        position: relative;
        z-index: 1001;
    }
    .b-dropdown ul {
        background: #FFF;
        width: 100%;
        text-align: left;
        position: absolute;
        top: 0;
        left: 0;
        padding: 1.2em 0 10px 10px;
        margin: 0 0 0 -10px;
        box-shadow: 3px 3px 20px #818181;
        -webkit-box-shadow: 3px 3px 20px #818181;
        -moz-box-shadow: 3px 3px 20px #818181;
        filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=5, offY=5, positive=true);
        display: none;
    }
    .b-dropdown.active ul {
        display: block;
        width: 7em;
    }
    .b-dropdown ul li {
        line-height: 1.2;
        list-style-type: none;
    }
    .b-dropdown ul li a {
        display: block;
    }
    .b-dropdown small {
        color: #DDD;
        position: relative;
        z-index: 1001;
    }

    /** b-pipe-chart */
        .b-pipe {
            margin: 40px auto 50px;
            position: relative;
        }
        .b-pipe .hole {
            list-style-type: none;
            position: absolute;
            z-index: 0;
            text-indent: -9999px;
        }
        .b-pipe .hole.open { }
        .b-pipe .hole.closed { background: #000; }
        .b-pipe .half-open { background-image: url(../images/half_bg.gif); }
        .b-current-note {
            position: absolute;
            z-index: 1000;
            width: 200px;
            top: 0;
            left: 0;
            width: 200px;
            margin:  0 0 0 -220px;
            font-size: 40px;
            line-height: 40px;
            text-align: center;
            color: #000;
        }
        .b-pipe .b-hands-sep {
            height: 100%;
            position: absolute;
            top: 0;
            left: 410px;
            z-index: 2;
            border-left: 1px dashed #CCC;
        }

        /** Recorder */
            .b-pipe_recorder {
                width: 752px;
                overflow: hidden;
                height: 90px;
            }
            .b-pipe_recorder .pipe {
                position: relative;
                z-index: 1;
            }
            .b-pipe_recorder .b-hands-sep {
                left: 478px;
                height: 80px;
            }

            .b-pipe_recorder .hole {
                top: 28px;
                width: 24px;
                height: 24px;
            }
            .b-pipe_recorder .hole-1 { left: 632px; top: 35px; background-position: 0 100%; }
            .b-pipe_recorder .hole-2 { left: 577px; }
            .b-pipe_recorder .hole-3 { left: 545px; }
            .b-pipe_recorder .hole-4 { left: 495px; }
            .b-pipe_recorder .hole-5 { left: 436px; }
            .b-pipe_recorder .hole-6 { left: 385px; }
            .b-pipe_recorder .hole-7 { left: 335px; }
            .b-pipe_recorder .hole-back { left: 305px; top: 70px; }
        /* Recorder **/

        /** Zhaleyka */
            .b-pipe_zhaleyka {
                width: 667px;
                height: 156px;
            }
            .b-pipe_zhaleyka .pipe {
                position: relative;
                z-index: 1;
            }
            .b-pipe_zhaleyka .b-hands-sep {
                left: 215px;
                height: 85px;
                top: 35px;
            }
            .b-pipe_zhaleyka .hole {
                top: 66px;
                width: 24px;
                height: 24px;
            }
            .b-pipe_zhaleyka .hole-1 { left: 328px; }
            .b-pipe_zhaleyka .hole-2 { left: 261px; }
            .b-pipe_zhaleyka .hole-3 { left: 231px; }
            .b-pipe_zhaleyka .hole-4 { left: 175px; }
            .b-pipe_zhaleyka .hole-5 { left: 134px; }
            .b-pipe_zhaleyka .hole-6 { left: 107px; }
            .b-pipe_zhaleyka .hole-back { left: 100px; top: 95px; }
        /* Zhaleyka **/

        /** Whistle */
            .b-pipe_whistle {
                width: 608px;
                height: 40px;
            }
            .b-pipe_whistle .pipe {
                position: relative;
                z-index: 1;
            }

            .b-pipe_whistle .hole {
                top: 8px;
                width: 24px;
                height: 24px;
            }
            .b-pipe_whistle .hole-1 { left: 514px; }
            .b-pipe_whistle .hole-2 { left: 460px; }
            .b-pipe_whistle .hole-3 { left: 421px; }
            .b-pipe_whistle .hole-4 { left: 374px; }
            .b-pipe_whistle .hole-5 { left: 326px; }
            .b-pipe_whistle .hole-6 { left: 285px; }
        /* Whistle **/
    /* b-pipe-chart **/ 
/* Blocks, b-prefix **/

/** Global, g-prefix */
    .g-line:after {
        display:block;
        clear:both;
        height:0;
        content:" ";
    }
    .g-hidden {
        display:none!important;
    }
    .g-right {
        float: right!important;
    }
    .g-left {
        float: left!important;
    }
/* Global, g-prefix **/