body {
    padding-top: 70px;
    padding-bottom: 20px;
}

.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Tonality */

.tonalitybreadcrumb {
    list-style: none;
    padding-left: 0;
}

    .tonalitybreadcrumb > li {
        display: inline-block;
    }

        .tonalitybreadcrumb > li + li:before {
            content: "\2023";
        }

    .tonalitybreadcrumb > .active {
        color: #999999;
    }

.tonalitybreadcrumb {
    border-style: solid;
    border-width: 0;
}

.mode {
    border: 2px none;
    -ms-border-radius: 5px;
    border-radius: 5px;
    border-style: none;
}

.defaultmode {
    border: 2px solid #158cba;
    -ms-border-radius: 5px;
    border-radius: 5px;
    border-style: outset;
}

.selectedmode {
    font-weight: bold;
}


/* Misc */

.inset-text {
    /* Shadows are visible under slightly transparent text color */
    color: #117095;
    text-shadow: 1px 4px 6px #def, 0 0 0 #000, 1px 4px 6px #def;
}

/* See http://stackoverflow.com/questions/3303173/position-element-fixed-vertically-absolute-horizontally */

div.positioner {
    position: absolute;
    right: 0;
}

div.fixed {
    right: 250px;
    width: 550px;
    height: 100px;
    position: fixed;
    top: 60px;
}

div.fixedmobile {
    right: 0;
    width: 20px;
    height: 20px;
    position: fixed;
    top: 30px;
}

/* Search */

form.form-search {
    position: relative;
}

    form.form-search:before {
        content: '';
        display: block;
        width: 14px;
        height: 14px;
        background-image: url(http://getbootstrap.com/2.3.2/assets/img/glyphicons-halflings.png);
        background-position: -48px 0;
        position: absolute;
        top: 12px;
        right: 8px;
        opacity: .5;
        z-index: 1000;
    }

/* JQuery autocomplete */

.ui-autocomplete {
    position: fixed;
    max-height: 300px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
    z-index: 9999;
}
/* IE 6 doesn't support max-height
        * we use height instead, but this forces the menu to always be this tall
        */
* html .ui-autocomplete {
    height: 100px;
}

/* Chords */

.chords-container {
    width: 100%;
    overflow: auto;
    height: 240px;
    white-space: nowrap;
}

.chord-container {
    width: 300px;
    display: inline-block;
}

/* Selector */

.selector {
    padding: 0;
    float: left;
}

    .selector > li {
        display: inline;
        padding: 0 5px;
        border-left: solid 1px black;
    }

        .selector > li:first-child {
            border-left: none;
        }

    .selector > .active {
        font-weight: bold;
    }

    .selector > li > a,
    .selector > li > a:hover,
    .selector > li > a:focus {
        text-decoration: none;
    }


/* Ads */

.skyscraperad {
    right: 0;
    width: 160px;
    height: 600px;
    position: fixed;
    top: 60px;
}