/*! HTML5 Boilerplate v5.0 | MIT License | http://h5bp.com/ */

html {

    color: #222;

    font-size: 1em;

    line-height: 1.4;

}


::-moz-selection {

    background: #b3d4fc;

    text-shadow: none;

}


::selection {

    background: #b3d4fc;

    text-shadow: none;

}


hr {

    display: block;

    height: 1px;

    border: 0;

    border-top: 1px solid #ccc;

    margin: 1em 0;

    padding: 0;

}


audio,
canvas,
iframe,
img,
svg,
video {

    vertical-align: middle;

}


fieldset {

    border: 0;

    margin: 0;

    padding: 0;

}


textarea {

    resize: vertical;

}


.browserupgrade {

    margin: 0.2em 0;

    background: #ccc;

    color: #000;

    padding: 0.2em 0;

}



/* ===== Initializr Styles ==================================================

   Author: Jonathan Verrecchia - verekia.com/initializr/responsive-template

   ========================================================================== */


body {

    font: 16px/26px Helvetica, Helvetica Neue, Arial;

}


.wrapper {

    width: 90%;

    margin: 0 5%;

}


/* =======================

    ALL: Gray/Green Theme

   ======================= */


.header-container {

    border-bottom: 4px solid #741; /* originally 20px #e44d26, #808000 (green), #19317A (blue), #E9A528 (gold) */
}


.footer-container,

.main aside {

    border: 2px solid #741; 
 /* originally 20px #e44d26 (orange), #808000 (green), #19317A (blue), #E9A528 (gold) */
}


.main seriesframe,
.main picframe {

    border-top: 0px;

}


.header-container {
    background: #3F0000;
<!--
    background: #000 url(../img/bgheader.jpg);
-->
}

.footer-container {
    background: #3F0000;
<!--
    background: #000 url(../img/bgheader.jpg);
-->
}

.main aside {

    background: #FFC; /* originally #f16529 (orange), #808050 (green), #8199DA (blue), #1A6257 (teal) */
}


.main seriesframe,
.main picframe {

    background: white;
}


.title {

    color: white;

}


/* ==============

    MOBILE: Menu

   ============== */


nav ul {

    margin: 0;

    padding: 0;

    list-style-type: none;

}


nav a {

    display: block;

    margin-bottom: 2px;

    padding: 2px 0; /* was 15px 0 */

    text-align: center;

    text-decoration: none;

    font-weight: bold;

/*    font-size: 24px;   new attribute to increase default size */
    color: #FFF;
 /*    color: #530;
    background: #277;  #1A6257;
  originally 20px #e44d26 (orange), #808050 (green), #8199DA (blue), #1A6257 (teal) */
}


nav a:hover,

nav a:visited {

    color: #FFF;
 /*    color: #530; */
}


nav a:hover {

    text-decoration: underline;

}


/* ==============

    MOBILE: Main

   ============== */


.main {

    padding: 30px 0;
 /* originally 30px padding at top */
}

.main rightcol h1,
.main article h1 {

    font-size: 2em;

}


.main aside {

    color: #530;

    padding: 0px 5% 1px;

}


.main seriesframe {
    color: white;

    padding: 0% 0% 2% 0%;
 /* top right bottom left */
    margin-left: 32px; 
 /* originally 24px left margin */
    margin-bottom: 0px;
}


.main picframe {

    color: white;

    padding: 0% 0% 0% 0%;
 /* top right bottom left */
    margin-left: 32px; 
 /* originally 24px left margin */
    margin-bottom: 0px;
}


.footer-container footer {

    color: #999999; /* was #696969;

    padding: 10px 0;
 /* originally 20px */
}


/* ===============

    ALL: IE Fixes

   =============== */


.ie7 .title {

    padding-top: 20px;

}


/* ==========================================================================

   Author's custom styles

   ========================================================================== */
















/* ==========================================================================

   Media Queries

   ========================================================================== */


@media only screen and (min-width: 480px) {


/* ====================

    INTERMEDIATE: Menu

   ==================== */


    nav a {

        float: left;

        width: 20%;
	/* Originally 27% for 3 items; change to 17% for 4 items */
        margin: 0 1.7%;
	/* Originally 1.7% for 3 items; change to 2% for 4 items */ 
        padding: 15px 0%;
 /* originally 25px instead of 15px */
        margin-bottom: 0;

    }


    nav li:first-child a {

        margin-left: 0;

    }


    nav li:last-child a {

        margin-right: 0;

    }


/* ========================

    INTERMEDIATE: IE Fixes

   ======================== */


    nav ul li {

        display: inline;

    }


    .oldie nav a {

        margin: 0 0.7%;

    }

}


@media only screen and (min-width: 768px) {


/* ====================

    WIDE: CSS3 Effects

   ==================== */


    .header-container,

    .main aside {

        -webkit-box-shadow: 0 5px 10px #aaa;

           -moz-box-shadow: 0 5px 10px #aaa;

                box-shadow: 0 5px 10px #aaa;

    }


    .main shadowframe {

        -webkit-box-shadow: 0 5px 10px #aaa;

           -moz-box-shadow: 0 5px 10px #aaa;

                box-shadow: 0 5px 10px #aaa;

    }


/* ============

    WIDE: Menu

   ============ */


    .title {

        float: left;

    }


    nav {

        float: right;

        width: 38%;
	/* width of menu boxes */
    }


/* ============

    WIDE: Main

   ============ */


    .main article {

        float: right; 
	/* originally "left" */
        width: 47%;
	/* originally 57% */
    }


    .main rightcol {

        float: right;
        width: 44%;

    }

    .main leftcol {

        float: left;
        width: 44%;

    }

    .main picframe {

        float: left;
	/* originally "left" */
        width: 44%;
	/* originally 57%, then 28% for 3 pics abreast */
    }


    .main seriesframe {

        float: left;
	/* originally "left" */
        width: 28%;
	/* originally 57%, then 28% for 3 pics abreast */
    }


    .main aside {

        float: left;
	/* originally "right" */
        width: 38%;
	/* originally 27% */
    }

}


@media only screen and (min-width: 1140px) {


/* ===============

    Maximal Width

   =============== */


    .wrapper {

        width: 1026px; /* 1140px - 10% for margins */

        margin: 0 auto;

    }

}


/* ==========================================================================

   Helper classes

   ========================================================================== */


.hidden {

    display: none !important;

    visibility: hidden;

}


.visuallyhidden {

    border: 0;

    clip: rect(0 0 0 0);

    height: 1px;

    margin: -1px;

    overflow: hidden;

    padding: 0;

    position: absolute;

    width: 1px;

}


.visuallyhidden.focusable:active,

.visuallyhidden.focusable:focus {

    clip: auto;

    height: auto;

    margin: 0;

    overflow: visible;

    position: static;

    width: auto;

}


.invisible {

    visibility: hidden;

}


.clearfix:before,

.clearfix:after {

    content: " ";

    display: table;

}


.clearfix:after {

    clear: both;

}


.clearfix {

    *zoom: 1;

}


/* ==========================================================================

   Print styles

   ========================================================================== */


@media print {

    *,

    *:before,

    *:after {

        background: transparent !important;

        color: #000 !important;

        box-shadow: none !important;

        text-shadow: none !important;

    }


    a,

    a:visited {

        text-decoration: underline;

    }


    a[href]:after {

        content: " (" attr(href) ")";

    }


    abbr[title]:after {

        content: " (" attr(title) ")";

    }


    a[href^="#"]:after,

    a[href^="javascript:"]:after {

        content: "";

    }


    pre,

    blockquote {

        border: 1px solid #999;

        page-break-inside: avoid;

    }


    thead {

        display: table-header-group;

    }


    tr,

    img {

        page-break-inside: avoid;

    }


    img {

        max-width: 100% !important;

    }


    p,

    h2,

    h3,
    h4 {

        orphans: 3;

        widows: 3;

    }


    h2,

    h3,
    h4 {

        page-break-after: avoid;

    }

}