/* The basic style for either tiny screens or legacy browsers */
body {
    font-family: arial, sans-serif;
    font-size: 100%;
    text-align: left;
    background-color: #908cdb;
    background-image: url(images/Background.jpg);
    background-repeat: repeat;
    background-attachment: fixed;
    color: black;
    margin: 0;
    padding: 0;
}

img.printlogo {
    display: none;
}

a.home {
    display: block;
    float: left;
    margin: 1px;
    padding: 3px 8px;
    font-family: 'Times New Roman', Times, serif;
    font-size: 110%;
    color: #390039;
    text-decoration: none;
    background-color: #908cdb;
    outline: #390039 solid 1px;
}

a.home:hover {
    background-color: #c8c6ed;
}

a.home:focus {
    background-color: #b7b5dc;
}

a.home:hover:focus {
    background-color: #b7b5dc;
}

#homeactive:hover {
    background-color: #908cdb;
}

#homeactive:hover:focus {
    background-color: #b7b5dc;
}

div.menu {
    display: block;
    margin: 0;
    padding: 2px 0 0 0;
}

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

li.menu {
    display: inline;
}

a.menu {
    display: inline-block;
    padding: 3px 8px;
    min-width: 4.5em;
    margin: 0;
    background-color: #000000;
    background-image: url(images/gradup.png);
    background-position: left top;
    background-repeat: repeat-x;
    color: #eeeeee;
    text-decoration: none;
    text-align: center;
    outline: none;
}

a.menu:focus {
    color: #dddddd;
}

a.menu:hover, a.menu#menuactive {
    background-color: #700070;
    background-image: url(images/graddown.png);
    background-position: left top;
    background-repeat: repeat-x;
    color: #ffffff;
}

h1 {
    margin: 1em 0.1em 0.1em 2em;
    padding: 0;
    font-size: 170%;
    font-weight: bold;
    text-align: left;
}

/* If the screen is too small, center the title as best can be managed. */
@media only screen and (max-width: 35em) {
    h1 {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
}

h2 {
    clear: both;
}

h3 {
    clear: both;
}

a.yelp {
    text-decoration: none;
    float: left;
    clear: left;
    font-size: x-large;
    width: 125px;
    background-color: #908cdb;
    color: white;
    margin: 0 10px 10px 0;
    padding: 0;
    border: none;
}

p.notice {
    background-color: #aeabe5;
    color: black;
    width: 92%;
    margin: 30px auto 10px;
    clear: both;
    font-size: small;
    text-align: center;
}

p.red {
    color: red;
    background-color: #908cdb;
}

/* Our form layout.  We have two layouts, in this case starting with right-aligned labels
   and inputs on the same line for larger widths, and reducing to left-aligned labels and
   next line inputs for smaller ones.
   We have two input width, "30 chars" and "50 chars", which we'll approximate with 20em
   and 35em respectively.  Our labels will all be 6em wide to keep them aligned. */
div.inputblock {
    width: 100%;
    clear: both;
    margin: 0;
    padding: 0;
}

div.inputlabel {
   display: inline-block;
   text-align: right;
   width: 6em;
   margin: 0.25em 0.25em 0.25em 0;
   padding: 0;
   float: left;
   clear: left;
}

div.inputarea {
   display: inline-block;
   margin: 0;
   padding: 0;
   float: left;
}

div.buttonarea {
   display: block;
   margin: 0;
   padding: 0 0 0 6.25em;
   clear: both;
}

.input30 {
    width: 20em;
    margin: 0.1em 0 0.1em 0;
    padding: 0;
}

.input50 {
    width: 35em;
    margin: 0.1em 0 0.1em 0;
    padding: 0;
}

.inputbutton {
    margin: 0.1em 0 0.1em 0;
    padding: 0;
}

/* Our input block layout is a maximum of 6.25em (label) + 35em (input) wide,
   plus the layout that uses the screen has 0.25em on each side, so it
   starts to reduce at 41.75em, so we'll switch over at that viewport width */
@media only screen and (max-width: 41.75em) {
    div.inputlabel {
        text-align: left;
    }

    div.inputarea {
        margin: 0 0 0 3%;
        clear: left;
    }

    div.buttonarea {
        padding: 0 0 0 3%;
    }

    .input30 {
        width: 97%;
    }

    .input50 {
        width: 97%;
    }
}

table.songs {
    border-collapse: collapse;
    margin-top: 1em;
    margin-left: auto;
    margin-right: auto;
    clear: both;
    width: 100%;
    max-width: 38em; /* Limit the size */
}

tr.head {
    font-weight: bold;
    border: 3px solid black;
}

td {
    vertical-align: top;
}

td.artist {
    width: 35%;
    border: 2px solid black;
}

td.song {
    width: 45%;
    border: 2px solid black;
}

td.track {
    width: 20%;
    border: 2px solid black;
}

td.center {
    text-align: center;
}

/* Use the prev link to preload the prev hover image */
a.prev {
    background-image: url(images/PrevHover.png);
    background-repeat: no-repeat;
    background-position: -9999px -9999px;
    background-attachment: scroll;
}

/* Use the next link to preload the next hover image */
a.next {
    background-image: url(images/NextHover.png);
    background-repeat: no-repeat;
    background-position: -9999px -9999px;
    background-attachment: scroll;
}

/* Resize the prev and next images to fit in with the table */
a.prev img, a.next img {
    width: 10em;
    height: 1.5em;
    margin: 0.15em;
    border-style: none;
}

dl {
    width: 100%;
    clear: both;
}

dt.servicetitle {
    font-weight: bold;
    margin: 0 1em 0 0;
}

dt.date {
    font-weight: bold;
    float: left;
    clear: left;
    margin: 0 1em 0 0;
}

.new span.day {
    display: inline-block;
    min-width: 6em;
}

dd.servicedesc:after, dd.venue:after {
    content: ' ';
    display: block;
    clear: both;
}

img.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    margin-bottom: 10px;
}

img.right {
    display: block;
    float: right;
    clear: right;
    margin: 10px;
}

img.left {
    display: block;
    float: left;
    clear: left;
    margin: 10px;
}

/* Rules for print - similar to the basic styled concept, but in inches, with
    a high-res logo */
@media only print {
    body {
        background-color: #ffffff;
        background-image: none;
    }

    img.printlogo {
        display: block;
        float: left;
        margin: 0 0 0.167in 0;
        padding: 0;
        background-color: transparent;
        width: 1.333in;
        height: 1.333in;
        outline: none;
    }

    a.home {
        display: none;
    }

    div.menu {
        margin: 0 0 0 1.5in;
        padding: 0.167in 0 0 0;
        min-height: 1.333in;
    }

    a.menu {
	background-color: transparent;
        background-image: none;
        color: black;
    }

    a.menu#menuactive {
	background-color: transparent;
        background-image: none;
        text-decoration: underline;
    }

    table.songs {
        width: 38em;
    }
}

/* We have a test for old IE browsers, the only likely ones to give us
    issues with SVG images at this point.  Set up a 200px home logo
    for those - it's almost certainly a computer screen with reasonable width */
.oldIE a.home {
    margin: 0 0 10px 0;
    padding: 0;
    background-color: transparent;
    width: 200px;
    height: 200px;
    background-image: url(images/Home200.png);
    background-position: left top;
    background-repeat: no-repeat;
    text-indent: -9999px;
    outline: none;
}

.oldIE a.home:hover {
    background-color: transparent;
    background-position: left -200px;
}

.oldIE a.home:focus {
    background-color: transparent;
    background-position: -200px top;
}

.oldIE a.home:hover:focus {
    background-color: transparent;
    background-position: -200px -200px;
}

.oldIE #homeactive:hover {
    background-color: transparent;
    background-position: left top;
}

.oldIE #homeactive:hover:focus {
    background-color: transparent;
    background-position: -200px top;
}

.oldIE div.menu {
    margin: 0 0 0 210px;
    padding: 33px 0 0 0;
    min-height: 167px;
}

/* And now we're going to assume that anything that handles media
    queries will also handle basic SVG images for the home background. */
@media only screen {
    body {
        margin: 0.25em 0.25em 0 0.25em;
    }

    /* Use multiple backgrounds to preload the other forms */
    a.home {
        margin: 0 0 0.25em 0;
        padding: 0;
        background-color: transparent;
        width: 10em;
        height: 10em;
        background-image: url(images/Home.svg), url(images/Home-hover.svg), url(images/Home-focus.svg), url(images/Home-hoverfocus.svg);
        background-position: left top, -9999px 0, -9999px 0, -9999px 0;
        background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
        text-indent: -9999px;
        outline: none;
    }

    a.home:hover {
        background-color: transparent;
        background-image: url(images/Home-hover.svg);
    }

    a.home:focus {
        background-color: transparent;
        background-image: url(images/Home-focus.svg);
    }

    a.home:hover:focus {
        background-color: transparent;
        background-image: url(images/Home-hoverfocus.svg);
    }

    #homeactive:hover {
        background-color: transparent;
        background-image: url(images/Home.svg);
    }

    #homeactive:hover:focus {
        background-color: transparent;
        background-image: url(images/Home-focus.svg);
    }

    /* Put enough room at the left for the logo, and pad
       the menu down enough to match the triangle top.
       Note the logo em size is 110% of standard */
    div.menu {
        margin: 0 0 0 11.25em;
        padding: 1.83em 0 0 0;
        min-height: 9.17em;
    }

    a.yelp {
        margin: 0 0.5em 0.25em 0;
    }
}