body {
    background-color:#ffffff;
    font-family:Helvetica;
    
}

table,tr,td
{
    font-family:Arial;
    font-weight:normal;
    font-size:10pt;
    text-align:left;
    vertical-align: top;
    
    border: 0px solid #000;
    border-spacing: 0px;
    border-collapse: collapse;

    padding:0px;
    margin:0px;
}

.title-frame
{
    position:relative;
    width:697px;
    height:112px;
}
.title-links
{
    font-family:Verdana, Arial;
    font-weight:bold;
    text-align:right;
    font-size:10pt;
    position:absolute;
    top:88px;
    right:25px;
}
a.titlelinks:link    { color:#000000; text-decoration:none; }
a.titlelinks:visited { color:#000000; text-decoration:none; }
a.titlelinks:hover   { color:#aa0000; text-decoration:underline; }
a.titlelinks:active  { color:#ff0000; text-decoration:underline; }



.article-text
{
    position:relative;

    text-align:left;
    width: 650px;
    margin: 0 auto;

    font-family:Helvetica,Arial;
    font-size:12pt;

}

.content-frame
{
    position:relative;
    width:650px;
    text-align:left;
    margin: 0 auto;
}

.item-text
{
    position:relative;

    text-align:left;
    width: 430px;

    font-family:Helvetica,Arial;
    font-size:12pt;

}

.toolbar-frame
{
    position: absolute;
    right:0px;
    top:0px;
    font-size:10pt;
    width:180px;
}

.item-title
{
    font-family:Verdana,Georgia,Arial;
    font-size:18px;
    font-weight:bold;
    text-align:left;
    width:350px;
}
a.itemtitle:link    { color:#000000; text-decoration:none; }
a.itemtitle:visited { color:#000000; text-decoration:none; }
a.itemtitle:hover   { color:#aa0000; text-decoration:underline; }
a.itemtitle:active  { color:#ff0000; text-decoration:underline; }


.sidebar-heading
{
    font-family:Verdana,Georgia,Arial;
    font-size:11pt;
    font-weight:bold;
    text-align:right;
}

.item-credit
{
    font-family:Helvetica,Arial;
    font-size:10pt;
    text-decoration:none;
    text-align:left;
    margin-left:3px;
}
.item-link-full
{
    text-align:right;
}
a:link    { color:#aa0000; text-decoration:underline; }
a:visited { color:#aa0000; text-decoration:underline; }
a:hover   { color:#ff0000; text-decoration:underline; }
a:active  { color:#ff0000; text-decoration:underline; }


.item-rating
{
    position:absolute;
    top: 2px;
    right: 0px;
}
.article-title
{
    font-family:Verdana,Georgia,Arial;
    font-size:24px;
    font-weight:bold;
    text-align:left;
    width:520px;
}
.article-title-label
{
    font-family:Helvetica,Arial;
    font-size:10pt;
    text-decoration:none;
    text-align:left;
    margin-left:3px;
}
.article-credit
{
    text-align:right;
}
.article-label-row
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 650px;
}
.article-rating
{
}
.article-cover
{
    float: right;
    margin: 0 0 10px 20px;
    clear: right;
}
.article-cover-img
{
    border: 1px solid #000000;
}

.archive-title
{
    font-family:Verdana,Georgia,Arial;
    font-size:18px;
    font-weight:bold;
    text-align:middle;
}
.archive-letter
{
    font-family:Verdana,Georgia,Arial;
    font-size:18px;
    font-weight:bold;
    padding-bottom:5px;
}
.archive-month
{
    font-family:Verdana,Georgia,Arial;
    font-size:18px;
    font-weight:bold;
    padding-bottom:5px;
}
.archive-year
{
    font-family:Verdana,Georgia,Arial;
    font-size:18px;
    font-weight:bold;
    padding-bottom:5px;
    color:#770000;
}

a.archivelinks:link    { color:#000000; text-decoration:none; }
a.archivelinks:visited { color:#000000; text-decoration:none; }
a.archivelinks:hover   { color:#aa0000; text-decoration:underline; }
a.archivelinks:active  { color:#ff0000; text-decoration:underline; }
.archive-links
{
    font-family:Arial, Helvetica;
    font-size:10pt;
    line-height:12pt;
}

a.archiveorder:link    { color:#aa0000; text-decoration:none; }
a.archiveorder:visited { color:#aa0000; text-decoration:none; }
a.archiveorder:hover   { color:#ff0000; text-decoration:underline; }
a.archiveorder:active  { color:#ff0000; text-decoration:underline; }
.archive-mobile { display: none; }

.archive-list
{
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}
.archive-list-header
{
    font-family:Verdana,Georgia,Arial;
    font-size:18px;
    font-weight:bold;
    margin-top: 16px;
    color:#770000;
}
.archive-list-subheader
{
    font-family:Verdana,Georgia,Arial;
    font-size:14px;
    font-weight:bold;
    margin-top: 8px;
}
.archive-list-item
{
    font-family:Arial, Helvetica;
    padding: 8px 0 8px 8px;
}
.archive-list-artist
{
    display: block;
    font-family: Verdana,Georgia,Arial;
    font-size:14pt;
    font-weight: bold;
}
.archive-list-album
{
    display: block;
    font-size:11pt;
    font-style: italic;
    padding-left: 4px;
}

.archive-order
{
    font-family:Arial, Helvetica;
    font-size:8pt;
}


.comm-top
{
    position:relative;

    margin-top:17px;
    padding-bottom:17px;

    /*border-bottom:1px solid #aaaaaa;*/
    width:550px;
    position:relative;
    
    font-family:Arial;
    font-weight:normal;
    font-size:10pt;
    text-align:center;
}
.comm-frame,.form-frame
{
    position:relative;

    margin-top:17px;
    padding-bottom:17px;

    /*border-bottom:1px solid #aaaaaa;*/
    width:100%;
    position:relative;
    
    font-family:Arial;
    font-weight:normal;
    font-size:10pt;
    text-align:left;
}
.comm-text
{
    padding-left:5px;
    padding-right:5px;
}
.comm-name
{
    padding-left:7px;
    padding-right:7px;
    padding-top:4px;
    padding-bottom:4px;

    border: 0px solid #aaaaaa;
    
    margin-bottom:8px;
    background-color:#e4e4e4;
    font-size:12pt;
    font-weight:bold;
    position:relative;
}
.comm-name-admin
{
    padding-left:7px;
    padding-right:7px;
    padding-top:4px;
    padding-bottom:4px;

    border: 0px solid #55aa55;
    
    margin-bottom:8px;
    background-color:#bbe4bb;
    font-size:12pt;
    font-weight:bold;
    position:relative;
}
.comm-date
{
    padding-top:4px;
    padding-right:7px;
    
    font-family:Arial;
    font-weight:normal;
    font-size:8pt;
    color:#777777;
    position:absolute;
    right:0px;
    top:0px;
}
.form-comm-box
{
    border:1px solid #aaaaaa;
    width:100%;
    height:70px;
    resize:none;
    
    font-family:Arial;
    font-weight:normal;
    font-size:10pt;
    text-align:left;
}
.form-name-box
{
    border:1px solid #aaaaaa;
    width:300px;
    resize:none;
    
    font-size:12pt;
    font-weight:bold;
}
.form-bot-row
{
    width:100%;
    position:relative;
}
.form-err-msg
{
    position:absolute;
    top:0px;
    left:0px;
    font-size: 8pt;
    color:#FF0000;
}
.form-submit-frame
{
    text-align:right;
    position:absolute;
    right:0px;
    top:0px;
}



.contact-table, .contact-table tbody, .contact-table tr, .contact-table td
{
    display: block;
    width: 100%;
    border-spacing: 0;
    text-align: center;
}
.contact-label
{
    font-family: Helvetica, Arial;
    font-size: 10pt;
    color: #666666;
    padding: 12px 0 4px 0;
}
.contact-name-box, .contact-comm-box, .contact-submit
{
    display: block;
    margin: 0 auto;
}
.contact-name-box
{
    border: 1px solid #aaaaaa;
    width: 50%;
    padding: 6px 8px;
    font-family: Helvetica, Arial;
    font-size: 12pt;
    font-weight: normal;
    box-sizing: border-box;
}
.contact-name-box:focus
{
    outline: none;
    border-color: #777777;
}
.contact-comm-box
{
    border: 1px solid #aaaaaa;
    width: 50%;
    height: 160px;
    resize: vertical;
    padding: 6px 8px;
    font-family: Helvetica, Arial;
    font-weight: normal;
    font-size: 12pt;
    box-sizing: border-box;
}
.contact-comm-box:focus
{
    outline: none;
    border-color: #777777;
}
.contact-submit
{
    font-family: Helvetica, Arial;
    font-size: 10pt;
    margin-top: 10px;
    padding: 7px 22px;
    cursor: pointer;
    border: 1px solid #aaaaaa;
    background-color: #f0f0f0;
}
.contact-submit:hover
{
    background-color: #e0e0e0;
    border-color: #777777;
}


.comm-adminheader
{
    background-color:#444444;
    padding:1px;
    color:#ffffff;
    width:648px;
    text-align:middle;
    font-family:Arial;
    font-size:8pt;
    position:absolute;
    top:-16px;
}

@media (max-width: 720px) {
    .title-frame {
        width: 100%;
        height: auto;
    }
    .title-img {
        width: 100%;
        height: auto;
        display: block;
    }
    .title-links {
        position: relative;
        top: auto;
        right: auto;
        text-align: center;
        padding: 6px 0 2px 0;
    }
    .content-frame {
        width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
    }
    .item-text {
        width: 100%;
    }
    .toolbar-frame {
        display: none;
    }
    .item-title {
        width: auto;
    }
    .item-rating {
        display: none;
    }
    a.itemtitle::after {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
    }
    .article-text {
        width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
    }
    .article-title {
        width: auto;
    }
    .article-label-row {
        width: 100%;
    }
    .article-rating img {
        width: 17px;
        height: 17px;
    }
    .contact-iframe {
        width: 100%;
    }
    .contact-name-box, .contact-comm-box {
        width: 100%;
        box-sizing: border-box;
    }
    .archive-desktop { display: none; }
    .archive-mobile { display: block; }
}