BODY {
    background-color: #ffffff;
    background-image: url("/images/bg-pf-suits.png");
    background-repeat: no-repeat;
    background-position: 100% 0;
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

/*
    Anchors
*/

A:link {
    color: #1111dd;
}

A:visited {
    color: #333377;
}

A:hover {
    color: #993333;
}

A[name]:hover {
    background-color: #ffffff;
    color: black;
}

A.no-href {
    color: #1111dd;
    text-decoration: underline;
    cursor: pointer;
}

/*
    No borders on image links, except for ones in the "download" class.
*/

IMG {
    border: 0;
}

IMG.download {
    border: 2px solid #1111dd;
}

/*
    The center class can be used on paragraphs, table cells, and many other
    elements to center them on the page.  The DIV.center TABLE rule provides
    correct CSS to center a table (the margin statements), and is also a
    kludge that works around IE's buggy behavior of treating a table as an
    inline element.  To create a centered table that will work in all
    browsers, use this idiom:

    <div class="center">
        <table>
            ...
        </table>
    </div>
*/

.center {
    text-align: center;
}

DIV.center DIV, DIV.center TABLE {
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

DIV.center TABLE TH {
    text-align: center;
}

/*
    Header

    The three levels of DIVs is ridiculous but necessary to get the effect
    we're after in a majority of browsers.
*/

#header {
    height: 155px;
    width: 22em;
    padding-left: 1em;
}

/* old: 2.15em */

#header DIV {
    padding-top: 1.65em;
}

#header DIV DIV {
    text-align: center;
    background-image: url("/images/titlebg.gif");
    padding: 0 5px 5px 5px;
}

#header H1 {
    font-size: 180%;
    font-weight: bold;
    letter-spacing: 0.1em;
    margin: 0;
}

#header H2 {
    font-size: 110%;
    margin: 0;
    font-variant: normal;
}

/*
    Navigation
*/

#navigation {
    position: absolute;
    top: 155px;
    left: 0;
    background-color: #ffffcc;
    width: 11.5em;
    white-space: nowrap;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    font-variant: small-caps;
    border: 1px solid #ffcc00;
    border-left: 0;
    font-weight: bold;
}

#navigation UL {
    list-style-type: none;
    margin: 0;
    padding-left: 1em;
}

#navigation UL UL {
    font-size: 90%;
}

#navigation UL UL LI {
    padding: 0.1em 0 0.1em 0;
}

#navigation A {
    text-decoration: none;
}

#navigation, #navigation A:link, #navigation A:visited {
    color: #1111dd;
}

#navigation A.current:link, #navigation A.current:visited {
    color: #dd1111;
}

#navigation A:hover {
    color: #993333;
    text-decoration: underline;
    background-color: #ffe680;
}

/*
    Content

    The _height property is an [ab]use of the IE6 underscore hack to make
    the height of the content DIV taller than the navigation DIV when the
    former doesn't have enough content in it to be taller than the latter.
*/

#content {
    padding: 0 1em 0 1em;
    margin-left: 11.5em;
    min-height: 34em;
    _height: 34em;
}

#content.no-navigation {
    margin-left: 0;
    border-left: 0;
    padding: 0 1em 1em 1em;
    height: auto;
}

#content P, #content DT {
    margin-top: 0;
    margin-left: 0.5em;
}

/*
    Press list
*/

UL.press-list LI.year {
    font-size: 115%;
    margin-left: -1.7em;
    font-variant: small-caps;
    font-weight: bold;
    list-style-type: none;
}

UL.press-list LI.year > UL {
    margin-top: 1em;
    margin-bottom: 1em;
    font-variant: normal;
    font-weight: normal;
    font-size: 85%;
}

UL.press-list LI.subsection {
    font-size: 115%;
    margin-left: -1.7em;
    font-variant: small-caps;
    font-weight: bold;
    list-style-type: none;
}

UL.press-list LI.subsection > UL {
    margin-top: 1em;
    margin-bottom: 1em;
    font-variant: normal;
    font-weight: normal;
    font-size: 85%;
}

UL.press-list LI > UL LI {
    list-style-type: disc;
}

/*
    Image gallery
*/

TABLE.gallery-list {
    width: 100%;
}

TABLE.gallery-list TD {
    padding: 0em 0.5em 1em 0.5em;
}

TABLE.gallery-list TD.thumbnail {
    width: 15%;
    text-align: center;
    vertical-align: middle;
}

TABLE.gallery-list TD.thumbnail IMG {
    margin: 0;
}

TABLE.gallery-list TD.description {
    width: 34%;
    vertical-align: middle;
}

TABLE.gallery-list TD.description SPAN.description {
    font-size: 90%;
}

TABLE.gallery-list TD.description SPAN.counts {
    font-size: 80%;
    font-weight: bold;
}

TABLE.gallery {
    width: 100%;
}

TABLE.gallery TD {
    width: 24%;
    text-align: center;
    vertical-align: middle;
}

/*
    Footer
*/

#footer {
    background-color: #ffffcc;
    border-top: 1px solid #ffcc00;
    border-bottom: 1px solid #ffcc00;
    clear: both;
}

#footer DIV#footer-left {
    padding: 0.5em;
    float: left;
}

#footer DIV#footer-right {
    padding: 0.5em;
    float: right;
    text-align: right;
}

#footer P {
    margin: 0;
    font-size: 70%;
    line-height: 130%;
}

/*
    Alternate footer for printing
*/

#footer-print {
    display: none;
    border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;
    padding: 0.5em;
    clear: both;
}

#footer-print P {
    font-size: 70%;
    line-height: 130%;
}

/*
    Headers
*/

H1, H2, H3 {
    font-variant: small-caps;
}

H1 {
    font-size: 150%;
}

H2 {
    font-size: 140%;
    font-weight: normal;
}

H3 {
    font-size: 115%;
    margin-left: 0.5em;
}

/*
    Selectors for a two-column layout.  Example:

    <div class="column-container">
        <div class="column-left">
            ...
        </div>
        <div class="column-right">
            ...
        </div>
    </div>

    The column-container div fixes width problems in IE.  The percentages do
    not add up to 100 on purpose.  If the sum of the percentages is closer to
    100, IE will occasionally float them incorrectly, rendering one above the
    other.
*/

.column-container {
    width: 100%;
}

.column-left {
    width: 48.5%;
    float: left;
}

.column-right {
    width: 48.5%;
    float: right;
}

/*
    Make column contents flush with the top of the column.  IE doesn't
    recognize this, but that's okay because it renders what we want anyway.
*/

.column-left > *:first-child, .column-right > *:first-child {
    margin-top: 0;
}

/*
    Other formatting
*/

#breadcrumbs {
    background-color: #ffe680;
    font-weight: bold;
    font-variant: small-caps;
    padding: 0.25em;
}

#breadcrumbs FORM {
    float: right;
    padding: 0;
}

#breadcrumbs FORM A {
    color: #aaaaaa;
    font-weight: normal;
    text-decoration: none;
}

#breadcrumbs INPUT {
    border: 1px solid #ffffcc;
    width: 12em;
    vertical-align: top;
    font-size: 80%;
}

#sectionlist {
    font-size: 85%;
}

#sectionlist P {
    margin-left: 0;
    margin-bottom: 0;
    font-weight: bold;
}

#sectionlist UL {
    margin-top: 0;
}

#sectionlist LI {
    margin-left: -1.5em;
}

#sectionlist UL.year-nav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

#sectionlist UL.year-nav LI {
    display: inline;
    margin-left: 0;
    padding: 1em;
    font-weight: bold;
    font-size: 110%;
}

.indent {
    margin-left: 1em;
}

.clear-float {
    clear: both;
}

P, LI, DT, DD {
    line-height: 130%;
}

P.chorus {
    font-style: italic;
    padding-left: 1em;
}

DIV.thumbnailgroup {
    width: 95%;    
    text-align: center;
}

DIV.thumbnailgroup IMG {   
    margin: 0.25em 0.5em 0.25em 0.5em;
}

DIV.hr {
    height: 1px;
    border-top: 1px solid #dddddd;
    margin: 1em 0;
}

DIV.hr HR {
    display: none;
}

HR {
    border: 0;
    border-top: 2px solid #dddddd;
    height: 2px;
}

PRE {
    margin-left: 1em;
}

/*
    One-off items in press section.
*/

TABLE.band-social-media TD {
    font-weight: bold;
    padding: 0.1em 0.5em;
}

TABLE.band-social-media TD.name {
    text-align: right;
}

TABLE.tour-dates {
    margin-left: 1em;
    margin-bottom: 1em;
    border-collapse: collapse;
    width: 90%;
}

TABLE.tour-dates TH, TABLE.tour-dates TD {
    vertical-align: top;
    padding: 0.25em;
}

TABLE.tour-dates TD.date {
    text-align: right;
    font-weight: bold;
    white-space: nowrap;
}

TABLE.tour-dates.past {
    color: #aaaaaa;
    font-weight: normal;
}

TABLE.tour-dates.past A {
    color: #aaaaaa;
}

TABLE.tour-dates TD.current {
    background-color: #ffe680;
}

TABLE#factsheet TD.label {
    text-align: right;
    vertical-align: top;
    white-space: nowrap;
    padding-right: 1em;
}

.contact-me {
    font-weight: bold;
    text-align: center;
    padding: 0.5em;
    border: 1px solid #ffcc00;
    font-size: 80%;
}

/*
   New right-column styles for tour information.
*/

#tour-column {
    background-color: #ffffcc;
    padding: 0.5em;
    border: 1px solid #ffcc00;
    margin-bottom: 1em;
    font-size: 90%;
}

#tour-column .next-show {
    background-color: #ffe680;
    font-weight: bold;
    font-variant: small-caps;
    text-align: center;
    padding: 0.25em;
}