@import url(common.css);
@import url(popup.css);

span.body {
    display: -webkit-flex; /* Safari */
    display: flex;
    flex-flow: column nowrap;
    -webkit-flex-flow: column nowrap; /* Safari 6.1+ */
    justify-content: center;
    -webkit-justify-content: center; /* Safari 6.1+ */
    align-items: center;
    -webkit-align-items: center; /* Safari 7.0+ */
}

span.downloads {
    display: -webkit-flex; /* Safari */
    display: flex;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    flex-flow: row nowrap;
    -webkit-flex-flow: row nowrap; /* Safari 6.1+ */
    justify-content: center;
    -webkit-justify-content: center; /* Safari 6.1+ */
    align-items: center;
    -webkit-align-items: center; /* Safari 7.0+ */
    align-content: space-around;
    -webkit-align-content: space-around;
    background-color: rgba(255, 255, 255, 0.15);
    width: 50%;
    margin-right: 3%;
}

span.downloads > span.download {
    display: -webkit-flex; /* Safari */
    display: flex;
    align-items: center;
    -webkit-align-items: center; /* Safari 7.0+ */
    align-content: space-around;
    -webkit-align-content: space-around;
    padding: 0.5em;
}

body > span.body > span.summary {
    display: inline-block;
    padding: 2em;
    font-size: 1.25em;
    width: 90%
}

span.testimonial {
    display: inline-block;
    font-size: 1.5em;
    margin-bottom: 0.5em;
    width: 80%;
    text-align: left;
    padding: 0.5em;
    border: 0.1em solid rgb(50, 50, 50);
    background-color: rgb(0, 0, 0);
}

span.testimonial > span.quote {
    display: inline;
    font-size: 1em;
    font-style: italic;
    quotes: '\201c' '\201d';
}

span.testimonial > span.quote:before {
    content: open-quote;
}

span.testimonial > span.quote:after {
    content: close-quote;
}

span.testimonial > span.quote + span.attribution::before {
    display: inline-block;
    vertical-align: middle;
    font-size: 0.5em;
    font-weight: bold;
    white-space: pre;
    content: " - ";
}

span.testimonial > span.attribution {
    display: block;
    vertical-align: middle;
    text-align: right;
    font-size: 0.5em;
    font-weight: bold;
    text-align: right;
    width: 100%;
}

span.other-bands {
    align-self: stretch;
    -webkit-align-self: stretch;
    display: inline-block;
    font-size: 1.5em;
    margin-bottom: 1em;
}

span.other-bands > span.title {
    align-self: stretch;
    -webkit-align-self: stretch;
   justify-content: center;
    -webkit-justify-content: center; /* Safari 6.1+ */
    font-weight: bold;
    background-color: rgba(255, 255, 255, 0.15);
    padding: 0.1em;
    margin-bottom: 0.25em;
}

span.other-bands > span.bands {
    align-self: stretch;
    -webkit-align-self: stretch;
    flex-flow: row wrap;
    -webkit-flex-flow: row wrap; /* Safari 6.1+ */
    justify-content: space-around;
    -webkit-justify-content: space-around; /* Safari 6.1+ */
    align-items: stretch;
    -webkit-align-items: stretch; /* Safari 7.0+ */
}

span.other-bands > span.bands > span.band {
    margin: 0.25em;
    padding: 0.25em;
    width: 12em;
    justify-content: center;
    -webkit-justify-content: center; /* Safari 6.1+ */
    background-color: rgba(0, 0, 0, 0.5);
}

span.customers {
    align-self: stretch;
    -webkit-align-self: stretch;
    display: inline-block;
    font-size: 1.5em;
    margin-bottom: 1em;
}

span.customers > span.title {
    align-self: stretch;
    -webkit-align-self: stretch;
   justify-content: center;
    -webkit-justify-content: center; /* Safari 6.1+ */
    font-weight: bold;
    background-color: rgba(255, 255, 255, 0.15);
    padding: 0.1em;
    margin-bottom: 0.25em;
}

span.customers > span.list {
    align-self: stretch;
    -webkit-align-self: stretch;
    display: -webkit-flex; /* Safari */
    display: flex;
    flex-flow: row wrap;
    -webkit-flex-flow: row wrap; /* Safari 6.1+ */
    justify-content: space-around;
    -webkit-justify-content: space-around; /* Safari 6.1+ */
    align-items: stretch;
    -webkit-align-items: stretch; /* Safari 7.0+ */
    margin: 0;
}

span.customers > span.list > span.customer {
    margin: 0.25em;
    padding: 0.25em;
    width: 15em;
    display: block;
    background-color: rgba(0, 0, 0, 0.5);
}

span.customers > span.list > span.customer > span.name {
    justify-content: center;
    -webkit-justify-content: center; /* Safari 6.1+ */
}

span.customers > span.list > span.customer > span.info {
    justify-content: center;
    -webkit-justify-content: center; /* Safari 6.1+ */
    font-size: 0.66em;
}

span.band_members {
    align-self: stretch;
    -webkit-align-self: stretch;
    display: inline-block;
    margin-bottom: 1em;
}

span.band_members > span.title {
    font-size: 1.5em;
    align-self: stretch;
    -webkit-align-self: stretch;
    justify-content: center;
    -webkit-justify-content: center; /* Safari 6.1+ */
    font-weight: bold;
    background-color: rgba(255, 255, 255, 0.15);
    padding: 0.1em;
}

span.band_members > span.bio {
    margin: 1em;
    padding: 1em;
    display: -webkit-flex; /* Safari */
    display: flex;
    flex-flow: row nowrap;
    -webkit-flex-flow: row nowrap; /* Safari 6.1+ */
    align-content: flex-start;
    -webkit-align-content: flex-start;
    align-items: flex-start;
    -webkit-align-items: flex-start; /* Safari 7.0+ */
    justify-content: flex-start;
    -webkit-justify-content: flex-start; /* Safari 6.1+ */
    text-align: left;
    vertical-align: top;
    background-image: url(bricks.jpg);
}

span.band_members > span.bio > span.photo, span.band_members > span.bio > span.photo * {
    display: -webkit-flex; /* Safari */
    display: flex;
    flex-flow: row nowrap;
    -webkit-flex-flow: row nowrap; /* Safari 6.1+ */
}

span.band_members > span.bio > span.photo > span.trigger img {
    width: 13em;
    display: inline-block;
    margin-top: 0.5em;
    margin-right: 0.5em;
}


span.band_members > span.bio > span.photo > span.modal {
    display: -webkit-flex; /* Safari */
    display: flex;
    flex-flow: row nowrap;
    -webkit-flex-flow: row nowrap; /* Safari 6.1+ */
    align-content: center;
    -webkit-align-content: center;
    align-items: center;
    -webkit-align-items: center; /* Safari 7.0+ */
    justify-content: center;
    -webkit-justify-content: center; /* Safari 6.1+ */
}

span.band_members > span.bio > span.photo > span.modal img {
    flex-shrink: initial;
    flex-grow: initial;
}

span.band_members > span.bio > span.text {
    display: -webkit-flex; /* Safari */
    display: flex;
    flex-flow: column nowrap;
    -webkit-flex-flow: column nowrap; /* Safari 6.1+ */
    align-content: flex-start;
    -webkit-align-content: flex-start;
    align-items: flex-start;
    -webkit-align-items: flex-start; /* Safari 7.0+ */
    justify-content: flex-start;
    -webkit-justify-content: flex-start; /* Safari 6.1+ */
    margin-left: 0.5em;
    margin-bottom: 0.5em;
}

span.band_members > span.bio > span.text > span.title {
    align-self: stretch;
    -webkit-align-self: stretch;
    font-size: 1.5em;
    display: -webkit-flex; /* Safari */
    display: flex;
    flex-flow: row nowrap;
    -webkit-flex-flow: row nowrap; /* Safari 6.1+ */
    align-content: flex-start;
    -webkit-align-content: flex-start;
    align-items: center;
    -webkit-align-items: center; /* Safari 7.0+ */
    justify-content: flex-start;
    -webkit-justify-content: flex-start; /* Safari 6.1+ */
    padding-bottom: 0.1em;
    border-bottom: 0.05em solid;
    margin-bottom: 0.5em;
}

span.band_members > span.bio > span.text > span.title > span.name {
    font-weight: bolder;
    white-space: nowrap;
}

span.band_members > span.bio > span.text > span.title > span.role::before {
    content: " - ";
}

span.band_members > span.bio > span.text > span.title > span.role {
    white-space: pre;
    flex-grow: 1;
    -webkit-flex-grow: 1;
}

span.band_members > span.bio > span.text > span.description {
    display: inline-block;
}

/* Overrides for constrained width */
@media only screen and (max-width: 480px) {
    body > span.body > span.downloads {
        flex-wrap: wrap;
        -webkit-flex-wrap: wrap; /* Safari 6.1+ */
        justify-content: flex-start;
        -webkit-justify-content: flex-start; /* Safari 6.1+ */
    }

    span.band_members > span.bio {
        flex-flow: column nowrap;
        -webkit-flex-flow: column nowrap; /* Safari 6.1+ */
        font-size: 3vw;
    }

    span.band_members > span.bio > span.photo {
        display: block;
        width: 100%;
    }

    span.band_members > span.bio > span.photo * {
        width: 100%
    }

    span.band_members > span.bio > span.photo > span.trigger img {
        display: inline-block;
        margin-left: 0.35em;
        width: 100%;
        height: 100%;
        align-self: stretch;
        -webkit-align-self: stretch;
    }

    span.band_members > span.bio > span.text {
        font-size: 0.75em;
    }
}