:root {
    --article-padding: 25px;
}

.col1 {
    max-width: var(--article-width);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1em;
    background-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

.col1 > div {
    padding-left: var(--article-padding);
    padding-right: var(--article-padding);
}

.col2 {
    --contents-width: 250px;

    z-index: 1;
    max-width: calc(var(--article-width) + var(--contents-width) * 2);
    margin-left: auto;
    margin-right: auto;

    position: sticky;
    position: -webkit-sticky;
    top: 0;
    height: 0;
}



#contents {
    width: calc(var(--contents-width) - 10px);
    
    margin-top: 10px;

    height: calc(100vh - 80px - 10px * 2);

    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

#contents-button {
    width: 100%;

    height: var(--article-padding);

    display: flex;
    flex-direction: row;
    justify-items: center;
    align-items: center;

    border: none;
    background-color: var(--primary-color);
    color: var(--secondary-color);

    font-size: 10pt;
    font-weight: bold;

    transform-origin: left bottom 0px;
    transform: rotate(0deg);
    
    pointer-events: none;

    transition: transform .5s, background-color .5s;
}

#contents-button > div {
    margin-left: auto;
    margin-right: auto;
}

#contents-up-arrow, #contents-down-arrow {
    display: none;
}

#contents-body {
    display: flex;
    flex-direction: column;

    background-color: var(--secondary-color);

    transition: opacity .5s;

    overflow-y: auto;
    height: calc(100% - var(--article-padding));
    padding-top: 1ch;
}

@media screen and (max-width: 1100px) {
    .col2 {
        max-width: var(--article-width);
    }

    #contents-button {
        pointer-events: auto;
    }

    #contents-down-arrow {
        display: inline;
    }

    #contents-up-arrow {
        display: none;
    }

    #contents.contents--collapsed {
        box-shadow: none;
        width: 0;
    }

    .contents--collapsed #contents-button {
        color: var(--primary-color);
        background-color: transparent;
        transform: rotate(90deg);
        width: var(--contents-width);
    }

    .contents--collapsed #contents-up-arrow {
        display: inline;
    }

    .contents--collapsed #contents-down-arrow {
        display: none;
    }

    .contents--collapsed #contents-body {
        display: none;
    }
}

#contents .menu-item-primary-color {
    padding-top: .5em;
    padding-bottom: .5em;
    padding-left: .75em;
    padding-right: .75em;
    margin-left: .25em;
    margin-right: .25em;
}

.center {
    text-align: center;
}

/* Old - CDC */

h1 {
    color:#7F8184;
    font-size:16pt;
}


h2 {
    color:#545658;
    font-weight:lighter;
    font-size:14pt;
}

h3 {
    color:black;
    font-size:12pt;
    font-weight:bolder;
}

p {
	text-indent: 2em;
	text-align: justify;
}

hr {
	margin-top: 10px;
	margin-bottom: 10px;
}

/* BOOK READER */

/* Chapter Controls */

#backbutton {
	float:left;
	font-size:11pt;
}

#backbutton a {
	color: darkred;
	text-decoration: none;
}

#backbutton a:hover {
	color: gold;
}

#nextbutton {
	float:right;
	font-size:11pt;
}

#nextbutton a {
	color: darkred;
	text-decoration: none;
}

#nextbutton a:hover {
	color: gold;
}

/* Start of two column template css */

body {
	font-size:90%;
    font-family:Arial;
}


/* common column settings 


.col1 p {
	font-size: 14pt;
    margin-bottom:1.5em}*/
    
.col1 p {
	font-size: 13pt;
  margin-bottom:1.2em; 
}
    
    /* tar additions */

p.iquote  {
	font-size:12pt;
  color:slategray; 
	margin-top:10px;
	margin-bottom:10px;
	margin-left:20px;
	margin-right:20px;
}

p.caption {
	font-size:11pt;
	margin-top:10px;
	margin-bottom:10px;
	margin-left:20px;
	margin-right:20px;
}

p.cquote {
	font-size:12pt;
	text-align:center;
	margin:5px 30px;
}

p.cent {
	font-size:13pt;
	text-align:center;
	margin:5px 30px;
}


.alist li {
	margin-left:40px;
	margin-bottom:5px; 
	font-size:12pt;
}

.alist ul {
	margin-left:40px;
	margin-bottom:20px;
	font-size:12pt;
}


.alist ol {
	margin-left:40px;
	margin-top:20px;
	font-size:12pt;
}


.blist li {
	margin-left:40px;
	margin-bottom:10px; 
	font-size: 13pt;

}

.blist ul {
	margin-left:40px;
	margin-bottom:20px;
}

.blist ol {
	margin-left:40px;
	margin-bottom:20px;
}



    /*
     * css directives for poems
     */
     table.poem td   {
        font-family:   Arial;
               font-size:   11pt; 
     }
    table.poem {margin-top:    2em;
                margin-right:  0em;
                margin-bottom: 2em;
                margin-left:   0;
                }
    
    P.SMALLHI   {margin-top:    0in;
            margin-right:  .25in;
            margin-bottom: 0in;
            margin-left:   .25in;
            text-indent:   -2em;
            font-size: 85%}
    
    
    P.RIGHT {margin-top:    0in;
            margin-right:  .25in;
            margin-bottom: 0in;
            margin-left:   .25in;
            text-align:    right;
            text-indent:   0em}
    
    
    
    
    
    P.L10   {margin-top:    0em;
            margin-right:  0em;
            margin-bottom: 0em;
            margin-left:   10.4em;
            text-indent:   0em}
    
    P.L11   {margin-top:    0em;
            margin-right:  0em;
            margin-bottom: 0em;
            margin-left:   11.4em;
            text-indent:   0em}
    
    P.L12   {margin-top:    0em;
            margin-right:  0em;
            margin-bottom: 0em;
            margin-left:   12.4em;
            text-indent:   0em}
    
    P.L13   {margin-top:    0em;
            margin-right:  0em;
            margin-bottom: 0em;
            margin-left:   13.4em;
            text-indent:   0em}
    
    P.L14   {margin-top:    0em;
            margin-right:  0em;
            margin-bottom: 0em;
            margin-left:   14.4em;
            text-indent:   0em}
    
    P.L15   {margin-top:    0em;
            margin-right:  0em;
            margin-bottom: 0em;
            margin-left:   15.4em;
            text-indent:   0em}
    
    
    P.V0   {margin-top:    0in;
            margin-right:  .25in;
            margin-bottom: 0in;
            margin-left:   .50in;
            text-indent:   0in}
    
    P.V0SQ {margin-top:    0in;
            margin-right:  .25in;
            margin-bottom: 0in;
            margin-left:   .50in;
            text-indent:   -.04in}
    
    P.V0DQ {margin-top:    0in;
            margin-right:  .25in;
            margin-bottom: 0in;
            margin-left:   .50in;
            text-indent:   -.08in}
    
    P.V1   {margin-top:    0in;
            margin-right:  .25in;
            margin-bottom: 0in;
            margin-left:   .75in;
            text-indent:   0in}
    
    P.V1SQ {margin-top:    0in;
            margin-right:  .25in;
            margin-bottom: 0in;
            margin-left:   .75in;
            text-indent:   -.04in}
    
    P.V1DQ {margin-top:    0in;
            margin-right:  .25in;
            margin-bottom: 0in;
            margin-left:   .75in;
            text-indent:   -.08in}
    
    P.V2   {margin-top:    0in;
            margin-right:  .25in;
            margin-bottom: 0in;
            margin-left:   1.00in;
            text-indent:   0in}
    
    P.V2SQ {margin-top:    0in;
            margin-right:  .25in;
            margin-bottom: 0in;
            margin-left:   1.00in;
            text-indent:   -.04in}
    
    P.V2DQ {margin-top:    0in;
            margin-right:  .25in;
            margin-bottom: 0in;
            margin-left:   1.00in;
            text-indent:   -.08in}
    
    P.V3   {margin-top:    0in;
            margin-right:  .25in;
            margin-bottom: 0in;
            margin-left:   1.25in;
            text-indent:   0in}
    
    P.V3SQ {margin-top:    0in;
            margin-right:  .25in;
            margin-bottom: 0in;
            margin-left:   1.25in;
            text-indent:   -.04in}
    
    P.V3DQ {margin-top:    0in;
            margin-right:  .25in;
            margin-bottom: 0in;
            margin-left:   1.25in;
            text-indent:   -.08in}
    
    P.V4   {margin-top:    0in;
            margin-right:  .25in;
            margin-bottom: 0in;
            margin-left:   1.50in;
            text-indent:   0in}
    
    P.V4SQ {margin-top:    0in;
            margin-right:  .25in;
            margin-bottom: 0in;
            margin-left:   1.50in;
            text-indent:   -.04in}
    
    P.V4DQ {margin-top:    0in;
            margin-right:  .25in;
            margin-bottom: 0in;
            margin-left:   1.50in;
            text-indent:   -.08in}
    
    P.V5   {margin-top:    0in;
            margin-right:  .25in;
            margin-bottom: 0in;
            margin-left:   1.75in;
            text-indent:   0in}
    
    P.V5SQ {margin-top:    0in;
            margin-right:  .25in;
            margin-bottom: 0in;
            margin-left:   1.75in;
            text-indent:   -.04in}
    
    P.V5DQ {margin-top:    0in;
            margin-right:  .25in;
            margin-bottom: 0in;
            margin-left:   1.75in;
            text-indent:   -.08in}
    
    P.V6   {margin-top:    0in;
            margin-right:  .25in;
            margin-bottom: 0in;
            margin-left:   2.00in;
            text-indent:   0in}
    
    P.V6SQ {margin-top:    0in;
            margin-right:  .25in;
            margin-bottom: 0in;
            margin-left:   2.00in;
            text-indent:   -.04in}
    
    P.V6DQ {margin-top:    0in;
            margin-right:  .25in;
            margin-bottom: 0in;
            margin-left:   2.00in;
            text-indent:   -.08in}
    
    P.V7   {margin-top:    0in;
            margin-right:  .25in;
            margin-bottom: 0in;
            margin-left:   2.25in;
            text-indent:   0in}
    
    P.V7SQ {margin-top:    0in;
            margin-right:  .25in;
            margin-bottom: 0in;
            margin-left:   2.25in;
            text-indent:   -.04in}
    
    P.V7DQ {margin-top:    0in;
            margin-right:  .25in;
            margin-bottom: 0in;
            margin-left:   2.25in;
            text-indent:   -.08in}
    
    P.V8   {margin-top:    0in;
            margin-right:  .25in;
            margin-bottom: 0in;
            margin-left:   2.50in;
            text-indent:   0in}
    
    P.V9   {margin-top:    0in;
            margin-right:  .25in;
            margin-bottom: 0in;
            margin-left:   2.75in;
            text-indent:   0in}
    
    P.VA   {margin-top:    0in;
            margin-right:  .25in;
            margin-bottom: 0in;
            margin-left:   3.00in;
            text-indent:   0in}
    
    P.VB   {margin-top:    0in;
            margin-right:  .25in;
            margin-bottom: 0in;
            margin-left:   3.25in;
            text-indent:   0in}
    
    P.VC   {margin-top:    0in;
            margin-right:  .25in;
            margin-bottom: 0in;
            margin-left:   3.50in;
            text-indent:   0in}
    
    P.VD   {margin-top:    0in;
            margin-right:  .25in;
            margin-bottom: 0in;
            margin-left:   3.75in;
            text-indent:   0in}
    
    P.VE   {margin-top:    0in;
            margin-right:  .25in;
            margin-bottom: 0in;
            margin-left:   4.00in;
            text-indent:   0in}
    
    P.VF   {margin-top:    0in;
            margin-right:  .25in;
            margin-bottom: 0in;
            margin-left:   4.25in;
            text-indent:   0in}