dottes/web/css/dottes.css

html {
    font-size: 100%;
}

body {
    background-color: #9900cc;
    background-image: url('../img/purple-fabric-background.jpg');
    color: #000000;
    height: auto;
    font-family: 'Open Sans', sans-serif;
}

h1 {
    background: white;
    text-align: center;
    font-weight: bold;
}

p
{
    background: white;
}

div.banner, div.dottes-body
{
    background-color: black;

    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;

    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;

    padding: 10px;

    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
}

div.banner
{
    background-color: black;
}

div.banner img
{
    width: 100%;
    max-width: 960;
    max-height: 136px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

div.banner h1
{
    display: none;
    text-align: left;
    font-weight: bold;
    color: #ffffff;
    font-family: 'Pirata One', sans-serif;
    padding: 10px;
}

div.dottes-body
{
    background-color: white;

    margin-top: 5px;
    margin-bottom: 5px;
}

div.dottes-body h1
{
    text-align: left;
}

div.dottes-transpose-container
{
    border: 2px solid grey;
}

div.dottes-transpose-instrument
{
    display: table;
    width: 100%;
}

div.dottes-transpose-instrument-item
{
    display: table-cell;
    vertical-align: middle;
    padding: 5px;
}

div.dottes-transpose-instrument-name
{
    width: 15%;
}

div.dottes-transpose-instrument-how
{
    width: 55%;
    text-align: left;
}

div.dottes-transpose-tune-types
{
    width: 30%;
    text-align: center;
}

div.dottes-tune-display
{
}

div.dottes-tune-header
{
    display: table;
    width: 100%;
}

div.dottes-tune-header-icons-column
{
    display: table-column;
    width: 25%;
}

div.dottes-tune-header-title-column
{
    display: table-column;
    width: 50%;
}

div.dottes-tune-header-last-column
{
    display: table-column;
    width: 25%;
}

div.dottes-tune-header-row
{
    display: table-row;
}

div.dottes-tune-header-icons
{
    display: table-cell;
}

div.dottes-tune-header-title
{
    display: table-cell;
}

div.dottes-tune-header-title h1
{
    font-weight: bold;
    text-align: center;
    margin: 0px;
}

div.dottes-tune-header-title h2
{
    font-weight: normal;
    text-align: center;
    margin: 0px;
}

div.dottes-tune-header-composer
{
    display: table-cell;
    text-align: right;
}

div.dottes-tune-footer
{
    display: table;
    width: 100%;
}

div.dottes-tune-footer-links-column
{
    display: table-column;
    width: 25%;
}

div.dottes-tune-footer-play-column
{
    display: table-column;
    width: 50%;
}

div.dottes-tune-footer-last-column
{
    display: table-column;
    width: 25%;
}

div.dottes-tune-footer-row
{
    display: table-row;
}

div.dottes-tune-footer-links
{
    display: table-cell;
    vertical-align: middle;
}

div.dottes-tune-footer-play
{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

div.dottes-tune-footer-last
{
    display: table-cell;
    text-align: right;
    vertical-align: middle;
}

div.dottes-tune-learner
{
    display: table;
    width: 100%;
}

div.dottes-tune-learner-speed-column
{
    display: table-column;
    width: 25%;
}

div.dottes-tune-learner-play-column
{
    display: table-column;
    width: 50%;
}

div.dottes-tune-learner-download-column
{
    display: table-column;
    width: 25%;
}

div.dottes-tune-learner-row
{
    display: table-row;
}

div.dottes-tune-learner-speed
{
    display: table-cell;
}

div.dottes-tune-learner-play
{
    display: table-cell;
    text-align: center;
}

div.dottes-tune-learner-download
{
    display: table-cell;
    text-align: right;
}

a.dottes-tune-icon-link
{
    text-decoration: none;
}

ul.tune-type-list
{
    list-style-type: none;
    margin: 0;
}

ul.tune-type-list li
{
    display: inline-block;
}

img.dottes-png
{
    display: block;
    width: 100%; /* Make image fill width */
    margin-top: 10px;
    margin-bottom: 10px;
}

ul.tune-data-list
{
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}

ul.tune-data-list li
{
    display: inline;
    margin-left: 0;
    margin-right: 5px;
}

div.dottes-tune-list
{
    display: table;
    margin: 10px;
}

div.dottes-tune-list-item
{
    display: table-row;
}

div.dottes-tune-list-link-column
{
    display: table-column;
    width: 20%;
}

div.dottes-tune-list-learner-link-column
{
    display: table-column;
}

div.dottes-tune-list-image-column
{
    display: table-column;
    width: 75%;
}

div.dottes-tune-list-item-link
{
    display: table-cell;
    vertical-align: middle;
}

div.dottes-tune-list-item-learner-link
{
    display: table-cell;
    vertical-align: middle;
    padding: 2px;
}

div.dottes-tune-list-item-learner-link img
{
    max-width: 20px;
}

div.dottes-tune-list-item-image
{
    display: table-cell;
    vertical-align: middle;
}

img.dottes-tune-table-image
{
    width: 100%;
}

div.dottes-notes-no
{
    display: none;
}

div.dottes-notes-yes
{
}

div.dottes-history-no
{
    display: none;
}

div.dottes-history-yes
{
    margin-top: 20px
}

@media only screen and (max-width: 480px) {
    div.dottes-transpose-instrument-item
    {
        display: table-row;
        vertical-align: middle;
        text-align: center;
        padding: 0px;
        margin: 0px;
    }

    div.dottes-transpose-instrument-item h1, p, ul
    {
        text-align: center;
        margin: 0px;
        padding: 0px;
    }

    div.dottes-tune-footer
    {
    }

    div.dottes-tune-footer-links-column
    {
    }

    div.dottes-tune-footer-play-column
    {
    }

    div.dottes-tune-footer-last-column
    {
    }

    div.dottes-tune-footer-row
    {
        display: table;
        width: 100%;
    }

    div.dottes-tune-footer-links
    {
        display: table-row;
        text-align: center;
        vertical-align: middle;
    }

    div.dottes-tune-footer-play
    {
        display: table-row;
        text-align: center;
        vertical-align: middle;
    }

    div.dottes-tune-footer-last
    {
        display: table-row;
        text-align: center;
        vertical-align: middle;
    }

    div.dottes-tune-learner
    {
    }

    div.dottes-tune-learner-speed-column
    {
    }

    div.dottes-tune-learner-play-column
    {
    }

    div.dottes-tune-learner-download-column
    {
    }

    div.dottes-tune-learner-row
    {
        display: table;
        width: 100%;
    }

    div.dottes-tune-learner-speed
    {
        display: table-row;
        text-align: center;
    }

    div.dottes-tune-learner-play
    {
        display: table-row;
        text-align: center;
    }

    div.dottes-tune-learner-download
    {
        display: table-row;
        text-align: center;
    }
}

/*
 * Stock Android browser needs this to force reconsideration of max-width
 * on an orientation change. Still doesn't help Android Chrome.
 */
@media screen and (orientation: landscape){
  .doesnt-exist { background:red; }
}