/* @group Elements */

body {
    background: #feb url(/National_Library/20161130034600oe_/https://saltercane.com/images/stain.gif) top repeat-x;
    color: #300;
    font-size: 15px;
}
a {
    color: #963;
}
a:hover,
a:focus {
    background: #963;
    color: #feb;
}
img,
object {
    max-width: 100%;
}
input[type="submit"] {
    font-family: inherit;
    cursor: pointer;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 0.1em;
    border-color: #321;
    background-color: #963;
    color: #ffc;
    padding: .2em .8em;
    -webkit-border-radius: 0.25em;
    -moz-border-radius: 0.25em;
    -o-border-radius: 0.25em;
    border-radius: 0.25em;
}
input[type="submit"]:hover,
input[type="submit"]:focus {
    background-color: #630;
}

/* @end */

/* @group Classes */

.fleuron {
    clear: both;
    width: 100%;
    height: 1.6em;
    background: transparent url(/National_Library/20161130034600oe_/https://saltercane.com/images/fleuron.gif) center no-repeat;
    color: #feb;
}
.cover {
    display: block;
    margin: auto;
    width: 98%;
    max-width: 400px;
    border: 3px double;
}

/* @group .subscribe */

a.subscribe {
    display: block;
    background: transparent;
    color: #c60;
    font-size: .8em;
    text-align: right;
}
a.subscribe:hover,
a.subscribe:focus {
    text-decoration: underline;
}

a.rss {
    position: absolute;
    right: 0;
    top: 1.6em;
    padding-right: 15px;
    background: transparent url(/National_Library/20161130034600oe_/https://saltercane.com/images/feed-icon.gif) right no-repeat;
}

/* @end */

/* @group .title */

.title img {
    height: 2.4em;
}
.title a:hover,
.title a:focus {
    background: transparent;
}

/* @end */

/* @group .outlets */

.outlets {
    border-top-color: #963;
}
.outlets li {
    border-bottom-color: #dc9;
}
.outlets li a {
    display: block;
    font-style: italic;
    letter-spacing: .125em;
    padding: .8em .8em 0.7666em;
    border-bottom-color: #dc9;
}

/* @end */

/* @end */

/* @group IDs */

/* @group #introduction */

#introduction {
    padding: 0 25%;
}


/* @end */

/* @group #personae */

#personae {
    width: 100%;
    margin: 2em 0;
    border-top: 3px double #300;
}
#personae h2 {
    background: #300;
    color: #feb;
    padding: 0.1428em 37.5%;
}
#personae .vcards {
    width: 100%;
    float: left;
    background: transparent url(/National_Library/20161130034600oe_/https://saltercane.com/images/photo-bg.gif) top repeat-x;
}
#personae .vcard {
    position: relative;
    width: 25%;
    float: left;
}
#personae .vcard div {
    background: #300;
    border-bottom: 3px double #feb;
}

/* @end */

/* @group #music */

#music {
    position: relative;
    width: 25%;
    float: left;
    text-align: center;
}
#music h2 {
    border-bottom-color: #963;
}
#music a:link img,
#music a:visited img {
    opacity: 0.8;
}
#music a:hover img,
#music a:focus img,
#music a:active img {
    opacity: 0.9;
}

/* @end */

/* @group #news */

#news {
    position: relative;
    width: 50%;
    float: left;
}
#news h2 {
    border-bottom-color: #963;
}
#news .hentry {
    list-style: none;
    border-bottom-color: #dc9;
}

/* @end */

/* @group #shows */

#shows {
    position: relative;
    width: 25%;
    float: left;
}
#shows h2 {
    border-bottom-color: #963;
}
#shows .vevent {
    text-align: right;
    border-bottom-color: #dc9;
}

/* @end */

/* @group #contact */

#contact {
    background: #eda url(/National_Library/20161130034600oe_/https://saltercane.com/images/tear.gif) top repeat-x;
}
#contact p {
    width: 100%;
    position: relative;
}
#contact label {
    display: block;
    float: left;
    width: 24%;
    text-align: right;
    padding: 0 1em;
}
#contact label .error {
    color: #900;
    font-size: .8em;
    font-weight: bold;
    text-align: left;
    vertical-align: middle;
    position: absolute;
    left: 77%;
    padding: 0 1em;
}
#contact #name,
#contact #email,
#contact #message {
    font-family: Constantia,Georgia,serif;
    font-size: 1em;
    line-height: 1.6;
    vertical-align: middle;
    width: 50%;
    border-color: #963;
    background-color: #ffc;
    color: #321;
}
#contact #send {
    font-size: 1em;
    margin-left: 70%;
}
#contact .feedback {
    text-align: center;
}

/* @end */

/* @group #elsewhere */

#elsewhere {
    background-color: #200;
    color: #963;
    border-top: 3px double #eda;
    width: 100%;
    float: left;
}
#elsewhere a {
    color: #c96;
}
#elsewhere a:hover,
#elsewhere a:focus {
    background-color: #c96;
    color: #200;
}

/* @group #flickr */

#flickr {
    width: 19em;
    float: left;
}
#flickr ul {
    clear: both;
    line-height: 0;
}
#flickr li {
    list-style: none;
    display: inline;
}
#flickr li a {
    display: block;
    float: left;
}
#flickr li a img {
    opacity: 0.85;
    width: 5em;
    height: 5em;
    border: 0.2em double #630;
    background-color: #963;
}
#flickr li a:hover img,
#flickr li a:focus img {
    border-color: #963;
    background-color: #c96;
}

/* @end */

/* @group #twitter */

#twitter {
    position: relative;
    margin-left: 18em;
    margin-right: 14em;
}
#twitter ul {
    border-top-color: #422;
}
#twitter li {
    border-bottom-color: #422;
}

/* @end */

/* @group #facebook */

#facebook {
    width: 15em;
    float: right;
    overflow: hidden;
}
#facebook ul {
    border-top-color: #422;
}
#facebook li {
    border-bottom-color: #422;
}

/* @end */

/* @end */

/* @end */

/* @group Pages */

body.news .hentry {
    float: none;
    width: auto;
    margin: 0 20%;
}
.album .details {
    width: 25%;
    float: left;
    margin-left: 1.4em;
}
.album .details h2 {
    border-bottom-color: #963;
}
.album .listing {
    width: 66%;
    float: right;
    margin-right: 1.4em;
}
.album .listing ol {
    border-top-color: #963;
}
.album .listing li {
    border-bottom-color: #dc9;
}

/* @end */

@media screen and (max-width: 53em) {
    #news {
        width: 75%;
    }
    #shows {
        width: 75%;
        clear: both;
        float: right;
    }
    #contact #name,
    #contact #email,
    #contact #message {
        width: 66%;
    }
    #contact #submit {
        margin-left: 80%;
    }
    #twitter {
        width: 50%;
    }
    #myspace {
        clear: both;
        margin: 0;
    }
}
@media screen and (max-width: 42em) {
    #introduction,
    #personae .vcard,
    #music,
    #news,
    #news .hfeed,
    #shows,
    #flickr,
    #twitter,
    #myspace,
    .album .details,
    .album .listing {
        width: auto;
        float: none;
        margin: 0;
        padding: 0;
        text-align: left;
        overflow: hidden;
    }
    #introduction,
    #news {
        margin: 0 1.4em;
    }
    #personae .vcard {
        text-align: center;
        border-top: 3px double #300;
    }
    #contact {
        padding: 0 1.4em;
    }
    #contact label,
    #contact #name,
    #contact #email,
    #contact #message {
        float: none;
        width: 100%;
        margin: 0;
        text-align: left;
        padding: 0;
    }
}

@media screen and (min-width: 1280px) {
    body {
        font-size: 16px;
    }
}
@media screen and (min-width: 1440px) {
    body {
        font-size: 18px;
    }
}