@import url(http://fonts.googleapis.com/css?family=Metamorphous|Open+Sans:400italic,400,600);

html {
        background-color: #290000;
        color: #fffebd;
        font-size: 16px;
            /* 16px default font size is standard for most
               browsers, but in case it isn't...  */
}
body {
        background-color: #f7ce65;
        color: #290000;
        margin: 2ex auto;
        width: 100%;
        max-width: 1000px;
            /* this max-width is optional, but does help to
               keep the number of characters per-line reasonable 
               when there is a lot of text in the page  */
        box-shadow: 0px 0px 3px 5px rgba(18,4,10,0.2);
        font-weight: 400;
        font-size: 62.5%;
            /* set font size to 10px/16px so that 1em = 10px;
               optional, but helps keep em and % in reasonable
               numbers during layout */
        font-family: 'Open Sans', sans-serif;
}
h1, h2 {
        margin: 0;
        font-weight: 400;
        font-family: 'Metamorphous', serif;
}
header {
        background-color: inherit;
        padding: 2%;
}
header h1 {
        font-size: 420%;
        text-shadow: 2px 2px 6px rgba(0,0,0,0.1);
}
hr {
        background-color: rgba(18,4,10,0.2);
        border: 0;
        height: 1px;
}

/*  nav
    This bar spans the top of the page and is intended for
    site links.
*/
nav {
        background-color: #930c10;
        float: left;
        width: 100%;
}
nav ul {
        margin: 0;
        padding: 0;
}
nav ul li {
        list-style-type: none;
        display: inline;
}
nav ul li a {
        color: #fffebd;
        display: block;
        float: left;
        padding: 0.5% 1%;
        text-decoration: none;
        border-right: 1px solid #fffebd;
        font-size: 140%;
        font-weight: 400;
}
nav ul li a:hover, nav ul li a:active {
        background-color: #fffebd;
        color: #930c10;
}

/*  Article:
    Everything below the site nav links, and above the footer,
    are within the article.
*/
article {
        /* background-color is set here for all three columns
           on the page, which are all part of the same "article";
           normally color is 1-2-1, where 1 is the color set
           here, and 2 is set in the section area.  To use
           colors 1-2-3 instead, use a CSS gradient here to
           establish colors 1 and 3.  Example: use this in Chrome
           to have three colors:
           background: -webkit-linear-gradient(left, #abc 0%, #abc 50%, #aba 51%, #aba 100%);
         */
        background-color: inherit;
        float: left;
        width: 100%;
        font-size: 160%;
}
article header {
        background-color: inherit;
        padding: 0;
}
article h1 {
        /* page/article title */
        font-size: 180%;
        margin: 1ex 0;
        text-shadow: none;
}
article h2 {
        /* page/article subheadings */
        font-size: 135%;
        margin: 1ex 0 0.5ex 0;
        font-weight: 500;
}
article nav {
        /* this column is meant to contain internal page
           links.  If it is not used, the "section" can be
           expanded by the width removed here.  */
        float: left;
        width: 8%;
        display: inline;
        background-color: inherit;
        padding: 2.25ex 0;
        margin: 0 2%;
}
article nav ul {
        margin: 0;
        padding: 0;
        position: fixed;
}
article nav ul li {
        margin: 0 0 1ex;
        padding: 0;
        list-style-type: none
}
article nav ul li a {
        background-color: inherit;
        color: #290000;
        clear: both;
        display: block;
        padding: 0;
        text-decoration: none;
        border-right: 0;
        font-size: 80%;
        font-weight: 600;
        line-height: 1.75;
}
article nav ul li a:hover,
article nav ul li a:active {
        background-color: inherit;
        text-decoration: underline;
        color: #000;
}

/*  section
    The section contains the main page content.  Width
    is set so that characters-per-line generally fall in
    the 55-75 range at the selected font size.  If other
    columns are removed from the layout, it may be best
    to remove the section's float and expand its width.
*/
section {
    background-color: #fffebd;
    color: #290000;
    float: left;
    width: 55%;
    padding: 0.5ex 4% 1ex 3%;
    margin: 0;
}
section p {
    margin: 0 0 2ex 0;
    line-height: 145%;
}
section h1, section h2 {
    clear: both;
}
section div.byline {
    margin-top: -3ex;
    margin-bottom: 3ex;
    font-size: 80%;
}
section header h1 + h2 {
    font-size: 120%;
    margin-top: -1.75ex;
    font-family: 'Open Sans', sans-serif;
}
section header h2 + div.byline {
    margin-top: -1ex;
}
section ul {
    list-style-type: none;
    margin-left: 0;
    padding-left: 0;
}
section ul li {
    margin-bottom: 2ex;
    font-size: 80%;
}
section a {
    color: #930c10;
    font-weight: 600;
    text-decoration: none;
}
section a:hover, section a:active {
    color: #290000;
    text-decoration: underline;
}
section ul li a {
    font-size: 120%;
    display: block;
}
section ul li a.inline-list-link {
    font-size: 100%;
    display: inline;
}
section em {
        font-style: italic;
}

section section {
    background-color: rgba(147,12,16,0.05);
    color: inherit;
    float: none;
    clear: both;
    width: 96%;
    padding: 1ex 2% 1ex 2%;
    margin: 1ex 0 0 0;
    border-top: 1px solid rgba(147,12,16,0.2);
    border-bottom: 1px solid rgba(147,12,16,0.2);
}
section section h3 {
    color: #930c10;
    margin: 0;
    font-weight: 400;
    font-family: 'Metamorphous', serif;
}
section section ul {
    list-style-type: circle;
    margin-left: 3%;
}
section section ul li {
    margin-bottom: 1ex;
    font-size: 95%;
}

/*  Article Lists
*/

section ol {
    list-style-type: upper-roman;
}
section ol ol {
    list-style-type: upper-latin;
}
section ol ol ol {
    list-style-type: decimal;
}
section section ol {
    list-style-type: upper-latin;
}
section section ol ol {
    list-style-type: decimal;
}
section section ol ul {
    list-style-type: circle;
}
section section ol li {
    margin-top: 1ex;
    color: #930c10;
    font-family: 'Metamorphous', serif;
    line-height: 2;
}
section section ol ul {
    margin-left: 2%;
}
section section ol ul li {
    color: #290000;
    line-height: 1.2;
    font-family: 'Open Sans', sans-serif;
}

/*  Table Types
*/

table.graduated {
    background-color: #f7ce65;
    border-spacing: 2px;
    min-width: 50%;
    margin: 2.5ex auto;
    border: solid 2px #930c10;
}
table.graduated th, td {
    padding: 0.25ex 0.5em;
    vertical-align: center;
}
table.graduated th {
    background-color: #a16421;
    color: #fffebd;
    font-size: 90%;
}
table.graduated td {
    background-color: #fbf1a9;
    font-size: 90%;
}
table.graduated td.numbers {
    font-family: monospace;
    text-align: center;
    font-size: 8    0%;
}
table.invisible {
    border-collapse: collapse;
    background-color: transparent;
}
table.invisible td {
    vertical-align: top;
}

/*  aside
    The aside column floats to the right and is intended
    extra information that is related or interesting.  It
    is optional, but its size and float should be kept in
    mind of it is removed.
*/
aside {
        float: right;
        width: 20%;
        padding: 2ex 1% 0 0;
        margin: 0 2.5% 0 0;
        display: inline;
        font-size: 82%;
}
aside h1 {
        font-size: 150%;
}

/*  Footer
    Footer, of course, spans the bottom with the copyright
    or other closing information.
*/
footer {
        background-color: #930c10;
        color: #fffebd;
        clear: both;
        width: 96%;
        text-align: right;
        padding: 0.5ex 2%;
        height: 5ex;
        line-height: 5ex;
        font-weight: 600;
}


/*  Media Queries
    For when the page is seen in different viewport sizes.
*/

@media screen and (max-width: 950px) {
    article {
        font-size: 140%
    }
}
@media screen and (max-width: 800px) {
    section {
        float: left;
        width: 79%;
        padding: 0.5ex 4% 1ex 3%;
        margin: 0 0 0 1.5ex;
    }
    aside {
        background-color: #abb;
        float: right;
        width: 80.4%;
        padding: 2ex 1% 4ex 5%;
        margin: 0;
        display: block;
    }
}
@media screen and (max-width: 680px) {
    article nav {
        clear: both;
        display: block;
        width: 96%;
        padding: 0.5ex 0;
    }
    article nav ul {
        position: relative;
        margin: 0;
        padding: 0;
    }
    article nav ul li {
        list-style-type: none;
        display: inline;
    }
    article nav ul li a {
        font-size: 90%;
        display: block;
        float: left;
        clear: none;
        margin: 0 1em 0 0;
    }
    article nav ul li a:before {
        content: "\2022\00A0\00A0";
    }
    section {
        clear: both;
        width: 93%;
        margin: 0;
    }
    aside {
        clear: both;
        width: 94%;
    }
}
@media screen and (max-width: 440px) {
    nav ul li a {
            font-size: 120%;
    }
    article nav ul li a {
        font-size: 90%;
    }
}
@media screen and (max-width: 400px) {
    nav ul li a {
            font-size: 100%;
    }
    article nav ul li a {
        font-size: 80%;
    }
}