* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

p, a, h1, h2, h3, blockquote, label, li {
    font-family: Georgia, "Times New Roman", Times, serif;
    color: #666;
}

input, select, textarea {
    color: #666;
}

h1, h2, h3 {
    font-weight: lighter;
}

a {
    text-decoration: underline dotted orange;
}

a:hover {
    background-color: orange;
}

label {
    font-size: 0.5em;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: orange;
}

blockquote {
    font-style: italic;
}

blockquote .citation {
    font-style: normal;
    font-size: smaller;
}

input[type=number].no-spinner::-webkit-inner-spin-button ,
input[type=number].no-spinner::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type=number].no-spinner {
    -moz-appearance:textfield;
}

select {
    -webkit-appearance: none;
}

.pure-button-primary {
    background-color: orange;
}

/* LAYOUT CSS */
.pure-img-responsive {
    max-width: 100%;
    height: auto;
}

#layout {
    padding: 0;
}

.header {
    text-align: left;
    top: auto;
}

.header h1, .header p {
    text-align: center;
}

.header a {
    text-decoration: none;
}

.header .folk {
    font-size: 1.3em;
    font-style: italic;
}

.header .rnn {
    font-size: 1.3em;
    font-variant: small-caps;
    font-weight: 900;
}

.header p {
    margin: -1.5em 0 0.5em 0;
}

.sidebar {
    margin: auto 1em;
    border-right: none;
    border-bottom: 1px black dotted;
}

#generate fieldset {
    border-top: 1px black dotted;
}

#generate legend {
    display: none;
}

#generate #compose_button {
    color: white
}

.content {
    padding: 2em 1em 0;
}

.content h1, .content h2 {
    border-bottom: 1px solid;
    padding: 0.4em 0 0.1em 0;
} 

.content h1 {
    text-transform: uppercase;
    border-bottom: 1px solid;
    font-size: 1em;
    letter-spacing: 0.1em;
}

.content h2 {
    text-transform: lowercase;
    font-variant: small-caps;
    border-bottom: 1px dotted;
    font-size: 1em;
    letter-spacing: 0.1em;
}

.tune {
    padding-bottom: 2em;
}

.tune .meta {
    font-style: italic;
    font-size: .8em;
}

.tune .meta .parameter {
    font-weight: bold;
}

.tune .meta {
    margin: 0.5em 0 0 0;
}

#composition textarea {
    resize: none;
    overflow:hidden;
    border: 0px;
    font-family: monospace;
}

div .abcjs-inline-midi {
    height: 34px;
    border-radius: 2px;
}

.abcjs-download-midi a {
    font-family: unset;
    text-decoration: none;
    color: white;
}

.abcjs-download-midi a:hover {
    background-color: unset;
}

.input-container {
    display: flex;
    flex-wrap: wrap;
}

.input-contained-fill {
    flex: 1 0 auto;
}

.input-contained-fixed-tempo {
    flex: 0 0 4em;
}

.input-contained-single-button {
    flex: 0 0 100%;
}

.input-contained-one-button-of-two {
    flex: 0 0 50%;
}

.input-contained-one-button-of-two:last-of-type {
    padding-left: 0.3em;
}

.input-contained-fixed-tempo input[type=number] {
    color: white;
    background-color: #424242;
    box-shadow: none;
    border: none;
}

.bpm-valign {
    margin-top: 0.625em;
}

.bpm-valign-tempo {
    margin-top: -0.45em;
}

.splash-overlay img {
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 1;
    width:150px;
    transform: rotate(15deg);
}

.splash-title {
    width:50%;
    margin-left:25%;
}

.video-responsive {
    overflow:hidden;
    padding-bottom:84.68%; /* aspect-ratio of video, e.g. 16:9 -> 9/16=56% */
    position:relative;
    height:0;
}
.video-responsive iframe {
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

@media (min-width: 48em) {
    .content {
        padding: 2em 3em 0;
        margin-left: 25%;
    }
    
    .standalone {
        margin: 0 25%;
    }

    .header {
        margin: 80% 2em 0;
        text-align: right;
    }
    
    .header h1, .header p {
        text-align: right;
    }

    .sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        margin: 0;
        border-right: 1px black dotted;
        border-bottom: none;
    }
    
    .input-contained-single-button {
        flex: 0 0 9em;
        padding: 0 0 0 0.3em;
    }

    .input-contained-one-button-of-two {
        flex: 0 0 9em;
        padding: 0 0 0 0.3em;   
    }
    
    .bpm-valign-tempo {
        margin-top: -0.5em;
    }
    
    .splash-overlay img {
        bottom: unset;
        top: 10px;
    }
    
    .drop-header-for-splash {
        margin-top: 80px;
    }
}