/* ##### Common Styles ##### */

html {
  overflow-y: scroll;  /* This forces a vertical toolbar on all pages (so heading/menu doesn't shift on short pages) */
}

body {
    color : black;
    background-color : white;
    background-image : url(/graphics/brenback.jpg);
    font-family : Verdana, Arial, Helvetica, sans-serif;
    font-weight : normal;
    font-size: 100%;
    margin: 0 5% 0 5%;
}

@media only screen and (min-width: 1200px) {
    body {
        color : black;
        background-color : white;
        background-image : url(/graphics/brenback.jpg);
        font-family : Verdana, Arial, Helvetica, sans-serif;
        font-weight : normal;
        font-size: 100%;
        margin: 0 15% 0 15%; /* Use larger left & right margins for wider screens */	
    }
}

dl {
    margin: 1em 1em 1.5em 3em;
    padding: 0;
}

dt {
    font-weight: bold;
    margin: 0 0 0 0;
    padding: 0;
}

dd {
    margin: 0 0 2em 2em;
    padding: 0;
}

img {
  max-width: 100%;
  height: auto;
  border: 0;
}

.center {
    text-align: center;
}

.datenote {
    font-size: 80%;
    color: #008000;
}

.doNotDisplay {
    display: none;
}

.large {
	font-size : 115%;
}

.note {
    font-style: italic;
}

.red  {
    color : #DC143C;
}

.small {
    font-size: 80%;
}

.smallCaps {
    font-size: 110%;
    font-variant: small-caps;
}

.tiny  {
    font-size : 65%;
}

.totop {
    font-size: 80%;
    text-align: right;
    text-decoration: none;
}


/* ##### Header ##### */

#header {
    margin-top: 1em;
	display: flex;
    justify-content: center;
}

#header img {
    display: inline;
	margin: auto;
}

/* ##### SubHeader (navigation menu) ##### */

#subHeader {
    text-align: center;
    font-size: 90%;
    line-height: 1.5em;
    margin-top: 2em;
}

#subHeader a {
    color: #000083;
    background-color: transparent;
    text-decoration: none;
    font-weight: bold;
    margin: 0;
    padding: 0 .25em 0 .25em;
}

#subHeader a:hover {
    text-decoration: underline dotted;
}

#subHeader .highlight {
    color: #d26839;
    background-color: transparent;
}

/* ##### Main Copy ##### */

#main-copy {
    text-align: left;
    line-height: 1.5em;
    margin-top: 3em;
}

#main-copy p {
    margin: 1em 0 1em 0;
    padding: 0;
}

#main-copy a:link  {
	color : #000083;
    text-decoration: underline;
}

#main-copy a:visited {
	color : #5C5C5C;
    text-decoration: underline;
}

#main-copy a:hover  {
	color : #000083;
    text-decoration: none;
}

#main-copy a:active {
    color: #DC143C;
    background-color: transparent;
    text-decoration: underline;
}

#main-copy h1, h2, h3 {
	color : #000083;
    background-color: transparent;
    line-height: normal;
    font-family: verdana,arial,tahoma,sans-serif;
    margin: 1.5em 0 .3em;
    border-bottom: 1px dotted #000083;
    padding-bottom: .1em;
}

#main-copy h1 {
    font-size: 150%;
    font-weight: bold;
}

#main-copy h2 {
    font-size: 130%;
    font-weight: bold;
}

#main-copy h3 {
    font-size: 115%;
    font-weight: bold;
}

#main-copy img {
    border: 0;
    padding: 0;
}

#main-copy img.imgleft {
    margin: 0.2em 1em 0 0;
    float: left;
}

#main-copy img.imgright {
    margin: 0.2em 0 0 1em;
    float: right;
}

#main-copy ul {
    list-style-type: square;
    list-style-image: url("/graphics/bluepointer.gif");
}

#main-copy li {
    margin: 1em 0 1em 1em;
    padding: 0 0 0 0.25em;
}

#main-copy li.nospace {
    margin: 0 0 0 1em;
    padding: 0 0 0 0.25em;
}

#main-copy li.redptr {
    margin: 1em 0 1em 1em;
    padding: 0 0 0 0.25em;
    list-style-image: url("/graphics/redpointer.gif");
}

#main-copy .lyricnote {
    color: #000083;
    margin: 2em 0 2em 0;
    padding: 1em;
    border: 1px dotted #000083;
}

/* ##### Footer ##### */

#footer {
    margin-top: 3em;
	margin-bottom: 1em;
    padding: 0 0 0 0;
    color: darkgray;
    font-size: 80%;
    text-align: center;
}

/* ##### Other customized styles for specific IDs ##### */

#homepage p {
    line-height: 1.5em;
    text-align: center;
    margin: 1em 1em 1em 1em;
}

#homepage p.pullquote {
    line-height: 1.5em;
    text-align: center;
    font-size: 120%;
    font-weight: bold;
    margin: 1em 1em 0 1em;
}

#homepage p.pullquotesrc {
    line-height: 1.5em;
    text-align: center;
    font-size: 85%;
    margin: 1em 1em 2em 1em;
}

#recs dl {
    margin: 3em 0 0 3em;
    padding: 0 0 0 0;
    line-height: 1.5em;
}

#recs dd {
    margin: 1em 0 0 0;
    padding: 0;
    font-size: 100%;
}

#recs dt {
    margin: 2em 0 0 0;
    padding: .75em 0 0 0;
    color: #000083;
    font-size: 125%;
    font-weight: bold;
    border-top: 1px dotted #000083;
}

#recs .spacer {
    clear: both;
    padding-bottom: 1em;
}

#sked dl {
    margin: 0 0 0 3em;
    padding: 0 0 0 0;
    line-height: 1.3em;
}

#sked dt {
    margin: 1.5em 0 0.2em 0;
    padding: 0;
    color: #000083;
    font-size: 115%;
    font-weight: bold;
}

#sked dd {
    margin: 0;
    padding: 0;
}

#sked h2 {
    border-bottom: 1px dotted #000083;
    margin-top: 2em;
    margin-bottom: 1em;
    padding-bottom: .1em;
    font-weight: bold;
    font-size: 130%;
}

#tracklist p {
    line-height: 1.75em;
    margin: 0;
    padding: 0;
}

#tracklist a:link {
    text-decoration: none;
}

#tracklist a:hover  {
    text-decoration: underline dotted;
}