@import url('https://fonts.googleapis.com/css?family=Open+Sans');
body {
    width: 100%;
    max-width: 8.5in;
    background: white;
    margin: 0.25in;
    font-family: "Arial", "Open Sans", sans-serif;
}
h1, h2, p, ul, li {
    margin: 10px;
}
li {
    font-size: 90%;
}
h1 {
    font-weight: bold;
    font-style: normal;
    font-size: 200%;
}
h2 {
    font-weight: normal;
    font-style: italic;
    font-size: 110%;
}
td, th {
    padding: 2px 2px;
    vertical-align: top;
    text-align: left;
}
a {
    text-decoration: none;
}

/* Header details */
#transposelinks {
    float: right;
    background: pink;
    text-align: right;
    font-size: 90%;
    padding: 0.5em;
}
#transposelinks a:hover {
    cursor: pointer;
}
#transposekey {
    font-weight: bold;
}
#songinfo {
    font-size: 1.3em;
    font-weight: bold;
    font-style: normal;
    border-bottom: 1px solid black;
}
#keyinfo {
    color: red;
}
#capoinfo {
    color: #446;
}

/* The song lyrics and chords */
#song {
    padding-bottom: 0.5em;
}
#songlyrics, #songchords {
    display: inline-block;
    vertical-align: text-top;
    font-size: 12pt;
    white-space: pre;
    line-height: 1.2em;
}
#songlyrics {
    min-width: 4in;
    max-width: 5.25in;
    padding-right: 10px;
    overflow: hidden;
}
#songchords {
    font-weight: bold;
    padding-left: 10px;
    border-left: 1px solid #ddd;
}
.measurebreak {
    opacity: 0.33;
}
.overlap {
    opacity: 0.5;
}
.note {
    font-style: italic;
    color: red;
}
.altpart {
    font-style: italic;
    color: #838;
}
.optpart {
    background-color: #ddd;
}
.trans {
    opacity: 0.6;
    font-size: 0.7em;
    font-weight: normal;
    margin-right: -3px;
}

/* Version information */
@import url('https://fonts.googleapis.com/css?family=Nunito');
#versioninfo {
    border-top: 1px solid black;
    padding: 0.25em 0;
    font-style: italic;
    text-align: left;
    font-size: 80%;
}

/* Extra resources */
#resources {
    background: rgb(90%,90%,70%);
    padding: 0.5em;
}

/* Song story */
#songstory {
    background: rgb(80%,70%,80%);
    font-style: italic;
    padding: 0.5em;
}

/* Media-specific modifications */
@media print {
    body {
        margin: 0.1in;
    }    
    #transposelinks, #resources, #songstory {
        display: none;
    }
}
@media screen {
    #songinfo {
        padding-top: 2em;
    }
}