#skiptocontent a {
    /* hidden from visual readers unless they
       TAB to it; always read by screen reader */
    padding:6px;
    position: absolute;
    top:-40px;
    left:0;
    color:white;
    border: 2px solid #FF7F0F;
    background:#000061;
    z-index: 100;
}
#skiptocontent a:focus {
    position:absolute;
    left:0;
    top:0;
}

body {
    background-color: #fbfdff;
    font-family: times, serif;
}

header {
    width: 70%;
    height: 100px;
    position: relative;
    left: 0;
    top: 0;
    text-align: left;
    background-color: #000061;
    border-bottom: 6px solid #FF7F0F;
    margin-bottom: 1em;
}
header.img {
    float: left;
}
#headingText {
    position: absolute; /* with respect to header */
    left: 90px;
    top: 8px;
    z-index: 1;
    display: inline-block;
    color: white;
}
#topNav {
    position: absolute; /* with respect to header */
    left: 90px;
    bottom: 0;
    display: inline-block;
    margin-bottom: 4px;
    z-index: 2;
}
#topNav a {
    color: #FF7F0F;
    font-weight: bold;
    padding: 6px 15px;
    text-decoration: none;
}
#topNav a:hover, #topNav a:focus {
    color: white;
}
#topNav a.here {
    color: #000061;
    background-color: #FF7F0F;
}
#topLink a:hover, #topLink a:focus {
    color: white;
    background-color: #000061;
}
#stories a {
    padding: 2px 3px;
}
#stories a:hover, #stories a:focus {
    color: white;
    background-color: #000061;
}
select, button {
    border: 2px solid #FF7F0F;
    font-family: times, serif;
    font-size: 1em;
}
.abtn {
    display: inline-block;
    border: 2px solid #FF7F0F;
    color: black;
    text-decoration: none;
}
select:focus, select:hover {
    color: white;
    background-color: #000061;
}
article a:focus, article a:hover {
    color: white;
    background-color: #000061;
}
button:focus, button:hover, .abtn:focus, .abtn:hover {
    color: white;
    background-color: #000061;
    cursor: pointer;
}
h1 {
    display: inline;
    font-size: 125%;
    font-weight: normal;
    color: white;
}
h2 {
    display: inline;
    font-size: 110%;
    font-weight: bold;
    color: #000061;
}
.subj {
    display: inline;
    font-size: 100%;
    font-weight: bold;
    color: #000061;
}

div.left {
    text-align: left;
    padding: 4px 0;
}
p {text-align: left; margin: 8px 0;}
p.disclaimer { font-size: 85%; padding-top: 4px; border-top: 1px solid #99C;}
p.keepwith {padding-top: 0; border-top: 0;}

/* tables used now only on schedule page */
td {text-align: left;}
table.datatable {border: 0; border-collapse: collapse;}
table.datatable th {text-align: left; padding: 5px 10px 5px 0; vertical-align: top; border-top: 1px solid #99C;}
table.datatable td {padding: 5px 10px 5px 0; vertical-align: top; border-top: 1px solid #99C;}
table.datatable td.right {text-align: right;}

span.link a {color: #000061; text-decoration: none;}
span.link a:hover {color: #FF7F0F;}
span.locallink a {color: #FF7F0F; text-decoration: none;}

span.musicLabel {
    display: inline-block;
    vertical-align: 20px;
}

main.wide {width: 70%;}
main.norm {width: 50%;}
.up {text-decoration: none; color: #FF7F0F; border: 1px solid transparent;}
.up:hover, .up:focus {border: 1px solid #000061;}
h3.msg {
    padding-top: 4px;
    border-top: 1px solid #99C;
    text-align: left;
    font-size: 1em;
    width: 100%;
    padding-bottom: 0;
    margin-bottom: 0;
}
h3.sked {
    text-align: left;
    font-size: 1em;
    width: 100%;
    padding-bottom: 0;
    margin-bottom: 0;
}
p.msghd {
    margin-top: 0;
}
strong {color: #000061;}
#repList {display: block; margin-top: 0;}
img {padding-top: 1em;}

#topLink { /* goes to top of page */
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    padding: 10px;
    background-color: #eee;
    opacity: .8;
}

/* for enlarged text: preserve word wrap
   and keep header as small as possible */
@media screen and (max-width: 900px) {
    header {
        width: 100%;
    }
    main.norm, main.wide {
        width: 80%;
    }
}
@media screen and (max-width: 600px) {
    .xtra {
        display: none;
    }
    #topNav a {
        padding: 6px;
    }
    #topLink {
        position: static;
        opacity: 1;
    }
}
@media screen and (max-width: 500px) {
    #bernie {
        width: 0;
    }
    #headingText {
        left: 5px;
    }
    #topNav {
        left: 5px;
    }
    main.norm, main.wide {
        width: 98%;
    }
}
@media screen and (max-width: 400px) {
    .xxtra {
        display: none;
    }

}