/* Pure CSS Framework Modifier - supposedly necessary to add padding and borders directly to grid units;
I don't think I could reproduce a difference when disabling the rule last time I checked */
.pure-g > div {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* reduced fonts for low bandwidth */
@font-face {
    font-family: 'raleway';
    src: url('../font/raleway-bold-webfont.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'raleway';
    src: url('../font/raleway-italic-webfont.woff2') format('woff2');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'raleway';
    src: url('../font/raleway-regular-webfont.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* page design formatting */
/* used in every page */
body {
    background-color: #396C99;
    background-image:
    url("../img/backgrounds/bg-nautilus.gif");
}

#toplogo {
    margin: 0em 0em -105% 0em;
    border-right: solid 0.5em #74151F;
    border-bottom: solid 0.5em #74151F; 
    border-bottom-right-radius: 1em;
}
@media (max-width: 47.999em) {
    .vanish {
        display:none;
    }
}	
.forty-em-one-column {
    max-width: 40em;
    margin: auto;
}
#call-to-action {
    margin-top: 0.5em;
    margin-right: 3em;
}

/* content formatting */ 
/* potentially used in any page */
.main-column {
    padding: 0em 1.2em;
    text-align: justify;
    border: solid 0.23em #1E135F;
    border-top: solid 1px #1E135F;
    background: #EAFFB9;
    }
h1, h2 {
    text-align: center;
}
.left-head {
    text-align: left;
}
.work-title {
    font-style: italic;
}
.attribution {
    font-size: 13px;
}
blockquote p, blockquote div {
    font-family: Cambria, Georgia, serif;
    font-size: 105%;
    margin-left: 2em;
}
.bigger-font {
    font-size: 18px;
}
.label-emphasis {
    font-weight: bold;
}
.emphasis {
    padding: 0 .2em;
    font-weight: bold;
    background-color: rgba(255, 241, 212, 50%);
    /* background-color: rgba(200, 250, 225, 50%); */
}
.plain-list {
    list-style-type: none;
}
.plain-list li {
    margin: 0.7em auto 0.5em -2em;
}
.footnote, .reduced {
    font-size: smaller;
}
.footnote-mark {
    padding: 0.2em 0.5em;
}
.body-img {
    border: 2px solid #555555;
    border-radius: 0.3em;
}
.vert-image-roll {
    margin-top:0.5em;
    margin-bottom:0.5em;
}
.reduce-img {
    margin: auto;
    max-height: 20em;
}

/* featured article section on index.html and articles-1.html */
.stand-out {
    border: .25em solid #EBD8E5;
    padding: 0.7em;
    border-radius: 0.7em;
}

/* featured articles section on index.html */
aside.main-column {
    padding: 0.6em;
}

/* footer formatting */
.shrink {
    padding: 0em;
    margin: 0.5em 0.75em;
}
.foot-1 {
    padding: 0em 1.2em;
    text-align: justify;
    border: solid 0.2em #1E135F;
    background: #cfe9a9;
    border-top: none;
}
.top-footer {
    border-top: solid 0.2em #1E135F;
}

/* Bottom footer block on every page */
#copyright {
    text-align: center;
}

/* ::::::::::: */
/* to-do: SMACSS-ify selectors */
/* new additions to be sorted */

/* basic */
h1, h2, h3, h4 {
    font-weight: normal;
    font-family: Cambria, Georgia, serif;
    letter-spacing: 1px;
}
/* h4 declaration was only in combined-styles.css; let's not have any more new rules
that differ, unless they're in the low-bandwidth block at the bottom */
h4 {
    margin: 0.7em auto 0.5em;
}
p, li {
    font-family: 'raleway';
}

main a, aside a {
    font-family: 'Courier New', Courier, monospace;
    color: #461bac;
    padding: 0.2em;
}
main a:visited, aside a:visited {
    color: #794e78;
}
main a:hover, aside a:hover {
    color: #c3d8f9;
    background-color: #011E3C;
    padding: 0.2em;
    border-radius: 3px;
}
main a:active, aside a:active {
    color: #011E5C; 
    background-color: transparent;
}

/* quotes */
blockquote {
    margin: 1em 0.5em;
    padding-right: 1em;
    border: 2px solid #d9eec7;
    background-color: rgba(200, 250, 225, 50%);
    padding-bottom: 0.5em;
}
blockquote p {
    margin-left: 1.5em;
}
blockquote cite {
    display: inline-block;
    margin-left: 3em;
}
.inline-quote {
    font-style: italic;
    font-family: Cambria, Georgia, serif;
}

/* buttons and nav - so far this group only applies to the in-page navigation on the articles page,
none of it affects the main navigation at top of every page */
.to-top {
    font-size: 1.3em;
}
.page-nav-block, .blog-nav-block {
    margin: 0.4em auto;
    text-align: center;
}
.page-nav-link, .blog-nav-link {
    border: 2px solid #1E135F;
    border-radius: 4px;
    background-color: rgb(247, 236, 245);
    padding: 0.2em;
    margin: 0.1em auto;
    display: inline-block;
    color: #664444;
    text-decoration: none;
    font-family: "raleway";
    text-align: center;
}
 .page-nav-link:hover, .blog-nav-link:hover {
    color: #442222;
    background-color: rgb(249, 249, 249);
    text-decoration: underline;
    border: 2px solid #1E135F;
    border-radius: 4px;
    padding: 0.2em;
}
.blog-nav-block {
    border: 2px solid #1E135F;
    padding: 0.3em;
}


/* ** !!! ** */
/* collapsing menu */
/* starter code (next 9 declarations) modified from https://purecss.io/layouts/tucked-menu-vertical/ 
although javascript has been rewritten from scratch to do submenus since then.
later declarations are my creation */
.nav-wrapper {
    -webkit-font-smoothing: antialiased;
    height: 2.1em;
    overflow: hidden;
    -webkit-transition: height 0.5s;
    -moz-transition: height 0.5s;
    -ms-transition: height 0.5s;
    transition: height 0.5s;
    padding-bottom: 0.5em;
}
.transforming-wrapper {
    text-align: right;
    font-weight: normal;
    font-family: 'immortal';
}
.main-menu-hamburger {
    width: 34px;
    height: 34px;
    position: absolute;
    top: 0;
    right: 0;
    display: none;
}
.main-menu-hamburger .x-switch-animation {
    background-color: #777;
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 100px;
    position: absolute;
    top: 30px;
    right: 13px;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    transition: all 0.5s;
}
/* :first-child specifies not the child of elements having .x-switch-animation, but an element having .x-switch-animation itself
and only if the element having .x-switch-animation element is the first subelement (child) of an element having .main-menu-hamburger */
/* i guess this makes sense, because if .main-menu-hamburger:first-child referred to its own child,
then the pseudo-class on el.main-menu-hamburger would refer to an element other than the one having the pseudo-class */
/* and pseudo-classes should point to their owners; there's no white space between after all */
.main-menu-hamburger .x-switch-animation:first-child {
    -webkit-transform: translateY(-6px);
    -moz-transform: translateY(-6px);
    -ms-transform: translateY(-6px);
    transform: translateY(-6px);
}
.main-menu-hamburger .x-switch-animation:last-child {
    -webkit-transform: translateY(-12px);
    -moz-transform: translateY(-12px);
    -ms-transform: translateY(-12px);
    transform: translateY(-12px);
}
.main-menu-hamburger.x-shape .x-switch-animation {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.main-menu-hamburger.x-shape .x-switch-animation:first-child {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
@media (max-width: 47.999em) {
    .transforming-wrapper {
        text-align: left;
    }
    .main-menu-hamburger {
        display: block;
    }
    #main-menu {
        padding-left: 0.25em;
    }
}
.pure-menu-heading {
    text-transform: none;
}

/* additions to collapsing menu */
#main-menu {
    background: #E8F4E0;
    border-bottom: solid 0.2em #10144D;
    border-top: solid 0.2em #10144D;
    padding-bottom: 0.65em;
    padding-right: 0.25em;
}
.site-title {
    font-size: 120%;
    font-weight: 900;
    display: inline-block;
    font-family: 'immortal', 'Courier New', Courier, monospace;
    font-weight: 900;
}
.site-title:hover {
    text-decoration: solid underline #426b96;
    color: #426b96;
}
.pure-menu-item {
    padding-top: 0.25em;
}
.pure-menu-link {
    white-space: normal;
    padding: 0.5em 0.4em;
    display: inline-block;
    border: solid 0.1em #E8F4E0;
}
a.pure-menu-link:hover {
    border-radius: 4px;
    border: solid 0.1em #426b96;
}
.bandwidth-switch {
    color: #222222;
    background-color: #dddddd;
    border: 1px solid #000000;
    font-size: 80%;
}
a.bandwidth-switch:hover {
    border-color: #ff7777;
}

/* additions when changing to menu/submenu layout */
#submenu {
    display: none;
    padding-left: 0;
}
.pure-menu-horizontal .pure-menu-heading,
.pure-menu-horizontal .pure-menu-item,
.pure-menu-horizontal .pure-menu-separator {
	vertical-align: top;
}
.submenu-heading, .submenu-item {
    text-align: left;
}
.pure-menu-link:focus, .pure-menu-link:hover{
    border: 0.1em solid #ee3333;
    border-radius: 6px;
}
#submenu.narrow-menu {
    padding-left: 1em;
}
.submenu-link {
    display: list-item;
    list-style: circle inside;
}


/* we don't put this in a second separate stylesheet and use combined-styles.css although it would be simpler, because
these pages are for people with bad connections or very low bandwidth, and requesting
an extra file can take longer than a little extra data in adverse network conditions */
/* there are differences in the body, @media, and @font-face rules up top, as well as the 2 rules below */
/* also note, the .headbar rule from combined-styles.css is absent here because the banner image
is removed from low-bandwidth pages, not that it would have any effect if it were here */
/* and there are differences in the font stack  declarations throughout */

/* low-bandwidth only rules: */
.pure-menu-link {
    color: #000;
}
a.site-title {
    color: #000;
}