/* general styling */
body * {
    font-family: Garamond, Palatino, serif;
}

body.item {
    max-width: 1000px;
    margin: auto;
    padding-top: 2em;
    margin-bottom: 2em;
    padding: 5px;
}

h1 {
    margin-top: 5em;
    margin-bottom: 1em;
    font-weight: lighter;
    text-align: center;
    color: darkslateblue;
}


h2 {
    text-align: center;
    font-size: 110%;
    font-weight: lighter;
}

h3 {
    color: darkslateblue;
    font-size: 160%;
    margin-top: 1em;
    padding-top: 1em;
    border-width: 0;
    line-height: 0em;
}

body.item p {
    text-indent: 20px;
}

body.item p#pubinfo, body.item p.p1, body.item p.copyright, body.item blockquote p {
    text-indent: 0px;
}

p.copyright {
    margin-top: 2em;
    /* font-size: 110%;
    color: #999999; NS */
    font-size: 120%;
    color: #74808B;
}

p.copyright a, p.copyright a:visited {
    /* color: #999999; NS */
    color: #74808B;
}

p.center {
    text-align: center;
}

p.textbreak {
    text-align: center;
    color: darkslateblue;
}

p.epigraph {
    text-align: right;
}

p.verse {
    text-indent: 0; margin: 0 20px 0 20px; font-family:"serif";
}

span.quote {
    font-style: italic;
}

p#pubinfo {
    padding-bottom: 10px;
}

/* navigation specific */
#topnav, #footer {
    text-align: center;
    font-family: arial,helvetica,geneva,sans-serif;
    font-size: 80%;
}

#topnav a, #topnav a:visited, #botnav a, #botnav a:visited {
    color: midnightblue;
    font-family: arial,helvetica,geneva,sans-serif;
}

#topnav {
    display: inline-block;
    width: 100%;
    margin: auto;
    margin-top: 10px; /* NS restored */
}
#botnav {
    margin: 1em 0 1em 0;  /* NS (bec changed p to div) */
}

/* callout specific */
.callout {
    float: right;
    padding: 8px;
    margin: 10px;
}

.callout img {
    width: 450px; 
    margin: auto;
}

.callout.boxed {
    border: solid 1px darkslateblue;
    width: 40%;
    padding: 10px;
    margin: 15px;
    background: #F5FAFF;
}

.callout.ro {
    /* width: 30%;
    font-size: 110%;
    font-family: sans-serif; NS */
    width: 450px; 
    font-size: 150%;
    font-family: 'Courier Prime';
    color: midnightblue;
    margin: 0 0 1.3em 1.3em;
}

/* sidebars */
.sidebar {border:solid 1px darkslateblue; float: right; width: 40%; padding: 10px; margin: 15px; background: #F5FAFF;}
.sidebar p b.title {margin-left: -15pt; padding-left: 0;}
.sidebar-mobile, .sidebar-jump {display: none;}
@media screen and (max-width: 800px) {
.sidebar {display: none;}
.sidebar-mobile, .sidebar-jump {display:block; border:solid 1px darkslateblue; padding: 10px; background: #F5FAFF;}
.sidebar-jump {text-align:right;}
}


/* misc */
.cc-license {
    text-align: center;
}

.cc-license img {
    border: 0;
}

.item-top {
    font-family: "Sorts Mill Goudy", serif;
    font-weight: 400;
    font-style: normal;
    padding-top: 2px;
    margin-bottom: 2px;
    font-size: 380%;
    letter-spacing: -2px;
    color: #003366;
    background-color: #fff;
    border-top: 1px solid #000;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    border-bottom: 1px dashed #000;
    min-height: 110px;
}

.item-top span {
    display: block;
    margin-top: -25px;
    font-family: "Courier Prime", monospace;
    font-weight: 700;
    font-size: 18px;
    color: #000;
}

/* structure & borders */
#borderWrapper {
    border-bottom: 1px dashed #000;
    margin-bottom: 4px;
}

#borderBelow {
    border-top: 1px solid #000;
}

#contents {
    padding: 0 20px;
    border-left: 2px solid #003366;
    border-right: 2px solid #003366;
    /* font-size: 95%; NS*/ 
    font-size: 120%; 
    border-bottom: 1px dashed #000;
}

#bottomWrapper {
    padding-top: 3px;
    border-left: 2px solid #003366;
    border-right: 2px solid #003366;
    border-bottom: 1px solid #000;
}


/* screen handlers */

/* likely desktop, no special handling */
@media screen and (max-width: 1100px) {
}

/* likely tablet */
@media screen and (max-width: 800px) {
    .item-top {
        font-size: 300%;
    }

    .item-top span {
        margin-top: -17px;
        margin-left: -6px;
    }

    .callout, .callout.boxed, .callout.ro {
        width: 100%;
        float: none;
        /* JDN -- margin and padding were causing the width to > 100% reset to 0 */
        margin-left: 0;
        margin-right: 0;
        padding: 0;
    }

    .callout img {
        width: 60%;
        /* JDN - Drop margin fix, display block so auto margin centers */
        /* margin-left: 18%; */
        display: block;

    }

    /* JDN -- handled by the above master .callout change */
    /* .callout.ro { 
        margin: 0;
    } */

}

/* likely phone */
@media screen and (max-width: 520px) {
    .item-top {
        font-size: 250%;
    }

    .item-top span {
        margin-top: -15px;
        margin-left: -10px;
    }

    /* JDN -- No longer needed, should inherit from 800px rules */
    /* .callout, .callout.boxed, .callout.ro {
        width: 100%;
        float: none;
    }

    .callout img {
        margin-left: 8%;
    } */
}

/* likely ??? */
@media screen and (max-width: 400px) {
    h1 {
        margin-top: 4em;
    }

    /* JDN -- No longer needed, should inherit from 800px rules */
    /* .callout img {
        margin-left: 30px;
    } */
    /* this is shim, it should be centered */
}