Interface/static/Btopenjs/livedemo.css

i.desc {
    font-size: 1.2em;
    line-height: 1.1em;
    color: #768799;
}
.bold {
    font-weight: 500;
    color: #525e6b;
}
.plugin-demo-header {
    text-align: center;
    margin: 1em 2em 6em 2em;
}
/*Sections*/

.feature {
    background-color: #3366cc;
    color: white;
    text-shadow: white 1px 1px;
    border-radius: 100%;
    width: 75px;
    height: 75px;
    line-height: 85px;
    vertical-align: baseline;
    text-align: center;
    position: relative;
    display: inline-block;
}
.feature-desc {
    font-variant: small-caps;
    text-align: center;
}
.section-cont {
    margin: 0 auto;
    margin-top: 3em;
    margin-bottom: 1em;
    padding: 1.5em;
    box-shadow: #cadee9 -1px 1px 10px;
    display: block;
}
.feature-cont {
    text-align: center;
}
.feature-cont p {
    margin-left: 2em;
    margin-top: 1em;
}
.section-label {
    font-size: 2em;
    color: #647883;
    font-weight: bold;
    font-variant: small-caps;
    margin-top: 2em;
    margin-bottom: 2em;
}
#round {
    min-height: 25em;
}
#menu-v-example {
    min-height: 40em;
}
#docs {
    display: none;
    margin: auto;
}
/*Menus*/

#gooey-upper .gooey-menu-item,
#gooey-upper .open-button {
    left: 50%;
    top: 50%;
}
#gooey-h .open-button,
#gooey-h .gooey-menu-item {
    margin-top: 4.2em;
    margin-left: .6em;
}
#gooey-v .open-button,
#gooey-v .gooey-menu-item {
    margin-top: 30em;
}
/*#gooey-round,*/
/*#gooey-API {*/
/*    left: 30%;*/
/*    top: 50%;*/
/*}*/
/*#gooey-round .open-button,*/
/*#gooey-API .open-button,*/
/*#gooey-round .gooey-menu-item,*/
/*#gooey-API .gooey-menu-item {*/
/*    margin-top: 6.5em;*/
/*    margin-left: 3.2em;*/
/*}*/
.fa.fa-angle-double-up {
    position: fixed;
    left: 95%;
    bottom: 0%;
    cursor: pointer;
    color: #748c99;
}
/* Responsive styles */

@media screen and (min-device-width: 320px) and (orientation: portrait) {
.fa.fa-angle-double-up {
        left: 75%;
    }
}
@media screen and (min-width: 320px) and (max-width: 780px) and (orientation: landscape) {
.fa.fa-angle-double-up {
        left: 89%;
    }

}

@media (max-width: 780px) {

    .code-example {
        margin-top: 5em;
    }
    #gooey-upper {
        margin: 0;
    }
    #gooey-upper .gooey-menu-item,
    #gooey-upper .open-button {
        left: 44%;
        top: 70%;
    }
    #gooey-round .gooey-menu-item, #gooey-round .open-button {
        top:50%;
    }
    #gooey-h .open-button,
    #gooey-h .gooey-menu-item {
        top: 20%;
        left: 20%;
    }
    .round-example {
        min-height: 20em;
    }
    #gooey-v .open-button,
    #gooey-v .gooey-menu-item {
        margin-top: 0;
    }
    #gooey-v {
        margin-top: 24em;
    }
    .event-api-ex {
        min-height: 23em;
    }
    #gooey-API {
        margin-top:6em;
    }
    .vertical-example {
        min-height: 15em;
    }
    #gooey-round,
    #gooey-API {
        top: 30%;
    }
    #gooey-round .open-button,
    #gooey-API .open-button,
    #gooey-round .gooey-menu-item,
    #gooey-API .gooey-menu-item {
        margin-top: 3.5em;
        margin-left: 3.2em;
    }
    .gooeySVG {
        width: 0;
        height: 0;
    }
    #gooey-h .open-button,
    #gooey-h .gooey-menu-item {
        margin-top: .8em;
    }
    .prettyprint {
        font-size: .7em;
    }
    .plugin-demo-header {
        margin: 1em 2em 5em 2em;
    }
    .feature {
        width: 55px;
        height: 55px;
        line-height: 65px;
    }
    .feature-desc {
        font-size: 1em;
    }
    .section-label {
        font-size: 1.5em;
        margin-top: 1em;
    }
    #menu-v-example {
        min-height: 35em;
    }
}