/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

html,
button,
input,
select,
textarea {
    color: black;
}

html {
    font-size: 1em;
    line-height: 1.35;
}

::-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,
img,
video {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.browsehappy {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}


/*
 * Links
 *
 * The order of link states are based on Eric Meyer's article:
 * http://meyerweb.com/eric/thoughts/2007/06/11/who-ordered-the-link-states
 */
a:link {
    text-decoration: none;
}

a:visited {
}

a:hover,
a:focus {
    text-decoration: underline;
}

a:active {
}


/* ===== Initializr Styles ==================================================
   Author: Jonathan Verrecchia - verekia.com/initializr/responsive-template
   ========================================================================== */

body {
    font: 16px/26px Arial, sans-serif;
}

.wrapper {
    width: 90%;
    margin: 0 5%;
}

/* ===================
    ALL:
   =================== */

.header-container {
    border-bottom: 20px solid #5E9CAE;
}

.footer-container,
.main aside {
    border-top: 20px solid #5E9CAE;
}

.header-container,
.footer-container,
.main aside {
    background: white;
}

.title {
    color: black;
}

/* ==============
    MOBILE: Main
   ============== */

.main {
    padding: 30px 0;
}

.main article {
    border-top: 20px solid #5E9CAE;
}

.main article:first-of-type {
    border-top: none;
}

.main article h1 {
    line-height: 1.6;
    font-size: 150%;
}

.main article h2 {
    font-size: 130%;
}

.main article h3, h4 {
    font-size: 110%;
}

.main article img {
    max-width: 100%;
    height: auto;
}

.main aside {
    color: black;
    padding: 30px 20px 10px 20px;
    /* margin-top: 30px; */
}

.main aside ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dc_element {
    font-family: monospace;
    background: #E4EFF2;
}

.footer-container footer {
    color: white;
    padding: 20px 0;
}

/* footer li { */
/*     margin: ; */
/*     padding: 0; */
/*     list-style: none; */
/*     display: inline; */
/* } */

/* footer li:before { */
/*     content: "+ "; */
/* } */

/* footer > li:first-child:before { */
/*     content: ""; */
/* } */

/* ===============
    ALL: IE Fixes
   =============== */

.ie7 .title {
    padding-top: 20px;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */















/* ==========================================================================
   Media Queries
   ========================================================================== */

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

/* ====================
    INTERMEDIATE: Menu
   ==================== */

/* ========================
    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;
    }

/* ============
    WIDE: Menu
   ============ */

    .title {
        float: left;
    }

    nav {
        float: right;
        width: 38%;
    }

/* ============
    WIDE: Main
   ============ */

    .main article {
        float: left;
        width: 67%;
    }

    .main aside {
        float: right;
        width: 25%;
    }
}

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

/* ===============
    Maximal W