/*
   --------------------------------------------------------------------------------------------------------
   --------------------------------------------------------------------------------------------------------
   (c) 2012 Jon White
   --------------------------------------------------------------------------------------------------------
   If you steal code, I'll summon a pack of starved wild albino boll weevils to gnaw at your socks.
   --------------------------------------------------------------------------------------------------------
   --------------------------------------------------------------------------------------------------------
*/





/* --------------------------------------------------------------------------------------------------------
   BASIC BASICS
----------------------------------------------------------------------------------------------------------- */

body {
    background: white;
    font-size: 100%;
    -webkit-text-size-adjust: none;
    font-family: "OpenSansRegular", "Arial", sans-serif;
    line-height: 1.3; /* ARBITARY */
    color: #474747;
}


/* --------------------------------------------------------------------------------------------------------
   STACKING MAAAADNNNEEESSSSSS
----------------------------------------------------------------------------------------------------------- */

    body,
    .masthead,
    .foreword {
        position: relative;
    }

    body            { z-index: 1; }
    .masthead       { z-index: 2; }
    .foreword       { z-index: 3; }
    



/* ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */
/* ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */
/* ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */
/* ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */



/* --------------------------------------------------------------------------------------------------------
   MASTHEAD
----------------------------------------------------------------------------------------------------------- */

    .masthead {
        background: #13a8de url(i/masthead-sky-gradient.jpg) repeat-x;
    }
            .masthead .ephemera-a {
                background: url(i/masthead-sky-petals.png) repeat;
            }
            .masthead .ephemera-b {
                background: url(i/masthead-sky-sunburst.png) no-repeat center top;
            }
            .masthead .ephemera-c {
                background: url(i/masthead-sky-clouds.png) repeat-x left 138px;
                min-height: 237px; /* 270 */
                padding-top: 33px;
            }
            .masthead hgroup {
                width: 90%;
                max-width: 690px;
                height: 206px;
                background: url(i/masthead-signboard-2x.png) no-repeat;
                background-size: 100%;
                margin: 0 auto;
                text-indent: -9999px;
                overflow: hidden;
            }
            
            /* --------------------------------------------------------------------------------------------------- */
            @media screen and (max-width: 600px) {
                        .masthead .ephemera-b {
                            background-size: 1125px 210px; /* relative to source's 1500 280 */
                        }
                        .masthead .ephemera-c {                            
                            background-size: 750px 78px; /* relative to source's 1500 157 */
                            min-height: 0; /* as opposed to 237 */ /* ...arbitrary? */
                        }
            }
            @media screen and (max-width: 400px) {
                        .masthead .ephemera-b {
                            background-size: 750px 140px; /* relative to source's 1500 280 */
                        }
                        .masthead .ephemera-c {
                            padding-top: 20px;
                            background-position: left 75px;
                        }
                        .masthead hgroup {
                            height: 110px; /* as opposed to 206 */
                        }
            }
            /* --------------------------------------------------------------------------------------------------- */







/* ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */
/* ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */
/* ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */
/* ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */

/* --------------------------------------------------------------------------------------------------------
   FOREWARD
----------------------------------------------------------------------------------------------------------- */

    .foreword {
        background: url(i/foreword-clouds.png) repeat-x left top;
        margin-top: -72px;
        border-bottom: 1px solid #565656;
    }
            .foreword-essay {
                width: 65.1041666666667%; /* 625 / 960 */
                float: left;
                position: relative;
                z-index: 1;
            }
            .foreword-sidebar {
                width: 30.2083333333333%; /* 290 / 960 */
                float: right;
                position: relative;
            }
            .foreword-ephemera-a {
                background: url(i/foreword-hills-2x.png) repeat-x left bottom;
                background-size: 49px 211px;
            }
            .foreword-ephemera-b {
                background: url(i/foreword-campus.png) no-repeat center bottom; /* source: 1405 x 360 */
                padding-bottom: 60px; /* ARBITRARY! ADJUST! FINALIZE! CORRECT! */
            }

            /* --------------------------------------------------------------------------------------------------- */
            @media screen and (max-width: 600px) {
                .foreword {
                    background-size: 750px 100px; /* relative to source's 1500 200 */
                }
            }
            @media screen and (max-width: 400px) {
                .foreword {
                    margin-top: -39px;
                }
            }
            @media screen and (max-width: 1030px) {
                .foreword-ephemera-b {
                    background-size: 1194px 306px;
                    padding-bottom: 40px;
                }
            }
            @media screen and (max-width: 900px) {
                .foreword-ephemera-a {
                    background: none;
                }
                .foreword-ephemera-b {
                    background-size: 913px 234px;
                    padding-bottom: 20px;
                }
            }
            @media screen and (max-width: 600px) {
                .foreword-ephemera-b {
                    background-size: 801px 205px;
                    background-position: -23px bottom;
                    padding-bottom: 10px;
                }
            }
            @media screen and (max-width: 465px) {
                .foreword-ephemera-b {
                    background-size: 562px 144px;
                    background-position: -39px bottom;
                    padding-bottom: 0;
                }
            }            
            /* --------------------------------------------------------------------------------------------------- */


            .foreword-sidebar {
            }
                    .prospectus {
                        background: url(i/foreword-sidebar-petals.png);
                        background-size: 100%;
                        margin-top: -88px;
                    }
                            .prospectus-ephemera {
                                background: url(i/foreword-sidebar-topper.png) no-repeat left top;
                                background-size: 100%;
                                padding: 88px 0 15px;
                            }
                            .sidebar-epilogue {
                            }
                                    .sidebar-epilogue span {
                                        display: block;
                                        width: 100%;
                                        background: url(i/foreword-sidebar-tearoff.png) no-repeat;
                                        background-size: 100%;
                                        overflow: hidden;
                                        height: 36px;
                                        text-indent: -9999px;
                                    }



                    .foreword-sidebar .portrait {
                        display: block;
                        width: 111.7241379310345%; /* 324 / 290 */
                        margin: 0 0 0 -5.5%;

                    }
                            .foreword-sidebar .portrait img {
                                display: block;
                                max-width: 100%;
                            }
                    
                    .foreword-sidebar h3 {
                        text-align: center;
                        width: 100%;
                        background:
                            url(i/foreword-sidebar-ribbon-chock-l.png) no-repeat left bottom,
                            url(i/foreword-sidebar-ribbon-chock-r.png) no-repeat right bottom,
                            url(i/foreword-sidebar-ribbon.png) repeat-x left top;
                        height: 35px; /* 48 */
                        padding: 13px 8px 0;
                        margin: 0 0 7px -8px;
                        color: #024163;
                        overflow: hidden;
                        font-size: 0.875em; /* 14 / 16 */
                        line-height: 1.1;
                        font-family: "DemingEPRegular", "Georgia", serif;
                        white-space: nowrap;
                        letter-spacing: -0.03em;
                    }

                    /* --------------------------------------------------------------- */
                    /* Manually apply CLEARFIX behavior to certain SIDEBAR components. */
                    .foreword-sidebar .chapters a:after,
                    .foreword-sidebar .vitals div:after {
                        content: "."; 
                        display: block; 
                        height: 0; 
                        clear: both; 
                        visibility: hidden;
                    }
                    .foreword-sidebar .chapters a,
                    .foreword-sidebar .vitals div {
                        display: inline-block;
                    }
                    /* ...end manual application. */
                    /* --------------------------------------------------------------- */

                    .foreword-sidebar .chapters {
                        width: 89%;
                        margin: 0 auto 9px;
                        overflow: hidden;
                    }
                            .foreword-sidebar .chapters li {
                            }
                            .foreword-sidebar .chapters a {
                                display: block;
                                width: 94%;
                                margin-bottom: 1px;
                                padding: 7px 3% 6px;
                                text-shadow: 0 1px 0 white;
                                line-height: 0.89;
                            }
                                    .foreword-sidebar .chapters span,
                                    .foreword-sidebar .chapters mark {
                                        display: block;
                                    }
                                    .foreword-sidebar .chapters span {
                                        float: left;
                                        width: 85%;
                                        text-transform: uppercase;
                                        font-size: 0.8125em; /* 13 / 16 */
                                        font-family: "OpenSansBoldItalic", "Arial", sans-serif;
                                        color: #00598a;
                                    }
                                    .foreword-sidebar .chapters mark {
                                        float: right;
                                        width: 10%;
                                        text-align: right;
                                        background: none;
                                        color: #f20067;
                                        font-size: 0.6875em; /* 11 / 16 */
                                        font-family: "OpenSansBold", "Arial", sans-serif;
                                    }
                                    
                                    /* --------------------------------------------------------------------------------------------------- */
                                    @media screen and (min-width: 479px) {                                
                                            .foreword-sidebar .chapters a:hover {
                                                background: #f20067;
                                                box-shadow: 0 1px 2px rgba(0,0,0,0.5);
                                                border-radius: 8px;
                                                text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
                                            }
                                                    .foreword-sidebar .chapters a:hover span,
                                                    .foreword-sidebar .chapters a:hover mark {
                                                        color: white;
                                                    }
                                    }
                                    /* --------------------------------------------------------------------------------------------------- */
                                    



                    .foreword-sidebar .vitals {
                        width: 86.2068965517241%; /* 250 / 290 */
                        margin: 0 auto;
                        text-shadow: 0 1px 0 white;
                    }
                            .foreword-sidebar .vitals div {
                                width: 100%;
                                border-bottom: 1px solid #7ad5ff;
                                margin-bottom: 1px;
                                padding-bottom: 6px;
                                overflow: hidden;
                                line-height: 1.05;
                            }
                                    .foreword-sidebar .vitals div:last-child {
                                        border-bottom: none;
                                    }
                                    .foreword-sidebar .vitals dt {
                                        display: block;
                                        width: 44%; /* 110 / 250 */
                                        float: left;
                                        text-transform: uppercase;
                                        font-size: 0.8125em; /* 13 / 16 */
                                        font-family: "OpenSansBoldItalic", "Arial", sans-serif;                                        
                                        color: #27acdd;
                                    }
                                    .foreword-sidebar .vitals dd { /* Had been "SemiBold" in the PSD -- omitting here for KB savings */
                                        display: block;
                                        float: right;
                                        width: 54.8%; /* 137 / 250 */
                                        color: #343434;
                                        font-size: 0.6875em; /* 11 / 16 */
                                        text-align: right;
                                        padding-top: 1px;
                                    }
                                            .foreword-sidebar .vitals dd li {
                                                margin-bottom: 10px;
                                            }
                                            .foreword-sidebar .vitals dd li:last-child {
                                                margin-bottom: 0;
                                            }

            
                    /* --------------------------------------------------------------------------------------------------- */
                    @media screen and (max-width: 800px) {
                        .prospectus-ephemera {
                            padding-bottom: 90px;
                        }
                    }
                    @media screen and (max-width: 500px) {
                        .prospectus-ephemera {
                            padding-bottom: 5px;
                        }
                    }

                    @media screen and (max-width: 478px) {

                        .prospectus {
                            margin-top: -38px;
                        }
                                .prospectus-ephemera {
                                    padding-top: 38px;
                                }

                        .foreword-sidebar h3 {
                            font-size: 0.58em;
                            height: 33px; /* 48 */
                            padding-top: 15px;
                        }
                        .foreword-sidebar .chapters {
                        }
                                .foreword-sidebar .chapters a {
                                    margin-bottom: 6px;
                                    border-bottom: 1px solid rgba(0,0,0,0.15);
                                    padding: 0 0 5px 0;
                                    text-align: center;
                                }
                                        .foreword-sidebar .chapters li:last-child a {
                                            border-bottom: none;
                                        }
                                        .foreword-sidebar .chapters span {
                                            float: none;
                                            width: 100%;
                                            font-size: 0.6em;
                                        }
                                        .foreword-sidebar .chapters mark {
                                            display: none;
                                        }
                                        .foreword-sidebar .chapters a:hover {
                                            text-decoration: underline;
                                        }
                        
                        .foreword-sidebar .vitals {
                        }
                                        .foreword-sidebar .vitals dt {
                                            width: 100%;
                                            float: none;
                                            font-size: 0.65em;
                                        }
                                        .foreword-sidebar .vitals dd {
                                            float: none;
                                            width: 100%;
                                            font-size: 0.65em;
                                            padding-top: 3px;
                                        }
                                                .foreword-sidebar .vitals dd li {
                                                    margin-bottom: 6px;
                                                }             

                    }
                    /* --------------------------------------------------------------------------------------------------- */




            .foreword-essay {
                padding-top: 74px;
            }
                    .foreword-essay header {
                        width: 108%;
                        margin-left: -4%;
                        margin: 0 0 36px -4%; /* bottom value is VERY arbitary */
                    }
                            .foreword-essay h2 {
                                font-family: "DemingEPRegular", "Georgia", serif;
                                color: #00aeef;
                                font-size: 2em; /* 32 / 16 */
                                line-height: 0.95;
                                letter-spacing: -0.04em;
                            }
                            .foreword-essay .greet {
                                display: block;
                                font-style: normal;
                                text-transform: uppercase;
                                color: black;
                                font-family: "OpenSansExtraboldItalic", "Arial", sans-serif;
                                font-size: 0.9375em; /* 15 / 16 */
                                line-height: 1;
                                margin-bottom: 15px;
                            }
                            
                            /* --------------------------------------------------------------------------------------------------- */
                            @media screen and (max-width: 500px) {
                                        .foreword-essay {
                                            padding-top: 41px;
                                        }
                            }
                            @media screen and (max-width: 1036px) {
                                        .foreword-essay header {
                                            margin-bottom: 18px;
                                        }
                                        .foreword-essay h2 {
                                            font-size: 1.75em;
                                        }
                            }
                            @media screen and (max-width: 920px) {
                                        .foreword-essay h2 {
                                            font-size: 1.45em;
                                        }
                            }
                            @media screen and (min-width: 550px) and (max-width: 1015px) {
                                        .foreword-essay .greet {
                                            padding-top: 10px;
                                            margin-bottom: 11px;
                                        }
                                        .foreword-essay .greet span {
                                            display: block;
                                        }
                            }
                            @media screen and (max-width: 475px) {
                                        .foreword-essay .greet {
                                            padding-top: 12px;
                                            font-size: 0.71em;
                                            margin-bottom: 9px;
                                        }
                            }
                            /* --------------------------------------------------------------------------------------------------- */



                    .foreword-essay .monogram {
                        display: block;
                        position: absolute;
                        width: 42.56%; /* 266 / 625 */
                        height: 266px;
                        z-index: 2;
                        top: -29px;
                        left: -14.24%; /* 89 / 625 */
                    }
                            .foreword-essay .monogram span {
                                background: url(i/foreword-monogram-2x.png) no-repeat;
                                background-size: 100%;
                                display: block;
                                width: 100%;
                                height: 100%;
                                text-indent: -9999px;
                                overflow: hidden;
                            }

                    /* --------------------------------------------------------------------------------------------------- */
                    @media screen and (max-width: 1024px) {
                        .foreword-essay .monogram {
                            top: 0px;
                        }
                    }
                    @media screen and (max-width: 600px) {
                        .foreword-essay .monogram {
                            display: none;
                        }
                    }
                    /* --------------------------------------------------------------------------------------------------- */

                    .foreword-essay header,
                    .foreword-essay article {
                        position: relative;
                        z-index: 3;
                    }
                            .foreword-essay article {
                                font-size: 0.825em; /* 14 / 16 */
                                line-height: 1.35;
                                background: url(i/foreword-vert-divider.png) repeat-y center top;
                                margin-bottom: 235px;
                            }
                                    .foreword-essay .col-1 p:first-child:first-line {
                                        font-family: "OpenSansBold", "Arial", sans-serif;
                                        color: black;
                                    }
                                    .foreword-essay .col-1,
                                    .foreword-essay .col-2 {
                                        width: 46.4%; /* 290 / 625 */
                                    }
                                    .foreword-essay .col-1 {
                                        float: left;
                                    }
                                    .foreword-essay .col-2 {
                                        float: right;
                                    }
                                    .foreword-essay article p {
                                        margin-bottom: 1em;
                                    }
                                    .foreword-essay .dropcap {
                                        color: black;
                                        font-family: "DemingEPRegular", "Georgia", serif;
                                        font-size: 2.7em;
                                        overflow: hidden;
                                        margin-bottom: -7px;
                                        display: inline-block;
                                        float: left;
                                        line-height: 1.09;
                                        padding: 0 3px 0 0;
                                    }
                                    .foreword-essay em {
                                        font-style: normal;
                                        font-family: "OpenSansItalic", "Arial", sans-serif;
                                    }
                                    .foreword-essay .pub {
                                        font-family: "OpenSansBoldItalic", "Arial", sans-serif;
                                    }
                                    .foreword-essay strong {
                                        font-weight: normal;
                                        font-family: "OpenSansBold", "Arial", sans-serif;
                                    }



                                    /* --------------------------------------------------------------------------------------------------- */
                                    @media screen and (max-width: 1015px) {
                                        .foreword-essay article {
                                            margin-bottom: 200px;
                                        }
                                    }
                                    @media screen and (max-width: 770px) {
                                        .foreword-essay article {
                                            background: none;
                                        }
                                        .foreword-essay .col-1,
                                        .foreword-essay .col-2 {
                                            width: 100%;
                                            float: none;
                                        }
                                    }
                                    @media screen and (max-width: 330px) {
                                        .foreword-essay article {
                                            font-size: 0.75em; /* 12 / 16 */
                                            margin-bottom: 150px;
                                        }
                                    }
                                    /* --------------------------------------------------------------------------------------------------- */
                                    









/* ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */
/* ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */
/* ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */
/* ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */

/* --------------------------------------------------------------------------------------------------------
   PRETEST
----------------------------------------------------------------------------------------------------------- */

    .pretest {
        background: white url(i/pretest-split-flood.png) no-repeat 34.0038314176245% 0; /* 355 / 1044 */
    }
            .pretest .constrain {
            }
            .pretest .cols {
                overflow: hidden;
                min-height: 740px;
            }
                    .pretest .col-quiz,
                    .pretest .col-dressup {
                        padding-bottom: 30px;
                    }
                    .pretest .col-quiz {
                        width: 30.2083333333333%; /* 290 / 960 */
                        float: left;
                    }
                    .pretest .col-dressup {
                        width: 62.5%; /* 600 / 960 */
                        float: right;
                    }
                    /* --------------------------------------------------------------------------------------------------- */
                    @media screen and (min-width: 1050px) {
                        .pretest .cols {
                            background: url(i/pretest-split-flood.png) no-repeat -708px top;
                        }
                    }
                    /* --------------------------------------------------------------------------------------------------- */
                    

                    
                    .col-quiz {
                    }
                            .col-quiz header {
                                width: 74.4827586206897%; /* 216 / 290 */
                                margin: 0 auto 6px;
                                padding: 78px 0 0 0;
                                height: 129px; /* 207 */
                                background: url(i/global-banners-2x.png) no-repeat center -667px;
                                background-size: 262px 1086px;
                            }
                                    .col-quiz header em,
                                    .col-quiz header h2 {
                                        text-align: center;
                                        width: 134%; /* rounded-down version of 290 / 216 */
                                        margin-left: -17%;
                                    }
                                    .col-quiz header em {
                                        display: block;
                                        font-family: "DemingEPRegular", "Georgia", serif;
                                        color: #3c3c3c;
                                        font-style: normal;
                                        font-size: 0.75em; /* 12 / 16 */
                                        letter-spacing: -0.05em;
                                        margin-bottom: 5px;
                                    }
                                    .col-quiz header h2 {
                                        color: black;
                                        font-size: 3.3125em; /* 53 / 16 */
                                        font-family: "LavanderiaRegular", "Georgia", serif;
                                    }
                                    .quiz-ticker {
                                        background: url(i/pretest-quiz-ticker-2x.png) no-repeat right top;
                                        width: 78px; /* deliberately fixed *//* 58 + 20 (for left padding, to keep things perceived-"centered") */
                                        height: 35px;
                                        color: #2e2e2e;
                                        font-family: "DemingEPRegular", "Georgia", serif;
                                        font-size: 1em;
                                        margin: 0 auto 25px;
                                        background-size: 58px 35px; /* exactly half of source raster's 116 70 */
                                        position: relative;
                                        overflow: hidden;
                                    }
                                            .quiz-ticker b {
                                                display: block;
                                                top: 7px;
                                                position: absolute;
                                                left: 21px;
                                                text-align: center;
                                                width: 35px;
                                            }
                                    
                                    .quiz-questions {
                                        position: relative;
                                    }
                                            .question-card {
                                                position: absolute;
                                                top: 0;
                                                left: 0;
                                                background: #dbdbdb;
                                            }
                                                    .question-card:first-child {
                                                        position: relative;
                                                    }
                                                    .question-card p {
                                                        font-family: "OpenSansLightRegular", "Arial", sans-serif;
                                                        font-size: 1em;
                                                        line-height: 1.12;
                                                        letter-spacing: -0.01em;
                                                        margin: 0 3% 23px;
                                                        text-shadow: 0 1px 0 rgba(255,255,255,0.7);
                                                        text-align: center;
                                                    }
                                                    .question-card-conclusion {
                                                        width: 100%;
                                                    }
                                                    .question-card p em {
                                                        font-style: normal;
                                                        font-size: 1.2em;
                                                        background: #00acbe;
                                                        display: inline-block;
                                                        padding: 5px 10px;
                                                        border-radius: 30px;
                                                        color: white;
                                                        font-family: "OpenSansBold", "Arial", sans-serif;
                                                        text-shadow: 0 0 2px rgba(0,0,0,0.5);
                                                        box-shadow: inset 0 0 2px rgba(0,0,0,0.35);
                                                    }
                                                    .question-card p strong {
                                                        font-weight: normal;
                                                        font-family: "OpenSansBold", "Arial", sans-serif;
                                                    }
                                                    .question-card ul {
                                                    }
                                                            .question-card li {
                                                                position: relative;
                                                                cursor: pointer;
                                                                -webkit-touch-callout: none;
                                                                -webkit-user-select: none;
                                                                -khtml-user-select: none;
                                                                -moz-user-select: none;
                                                                -ms-user-select: none;
                                                                user-select: none;
                                                            }
                                                                    .col-quiz-completed .question-card li {
                                                                        cursor: default;
                                                                    }
                                                                    .question-card mark {
                                                                        display: block;
                                                                        position: absolute;
                                                                        width: 26px;
                                                                        height: 26px;
                                                                        overflow: hidden;
                                                                        background: url(i/pretest-quiz-answer-icons-2x.png) no-repeat;
                                                                        background-size: 26px 78px; /* half of source raster's 52 156 */
                                                                        top: 16px;
                                                                        left: 12px;
                                                                        text-indent: -9999px;
                                                                    }
                                                                    .question-card span {
                                                                        display: block;
                                                                        background: #b3b3b3;
                                                                        color: white;
                                                                        border: 4px solid white;
                                                                        box-shadow: 0 3px 0 rgba(0,0,0,0.25);
                                                                        font-size: 0.75em; /* 12 / 16 */
                                                                        line-height: 1.18;
                                                                        margin-bottom: 15px;
                                                                        padding: 12px 12px 14px 43px;
                                                                        text-shadow: 0 1px 1px rgba(0,0,0,0.2);
                                                                        font-family: "OpenSansBold", "Arial", sans-serif;
                                                                        min-height: 29px;
                                                                    }
                                                                    .question-card span em {
                                                                        font-family: "OpenSansBoldItalic", "Arial", sans-serif;
                                                                        font-style: normal;
                                                                    }

                                                                    .question-card li:hover {
                                                                    }
                                                                            .question-card li:hover span {
                                                                                background: #989898;
                                                                            }
                                                            
                                                                    .question-card li:active {
                                                                        padding-top: 2px;
                                                                    }
                                                                            .question-card li:active span {
                                                                                margin-bottom: 13px;
                                                                                box-shadow: 0 1px 0 rgba(0,0,0,0.25);
                                                                            }
                                                                            .question-card li:active mark {
                                                                                top: 18px;
                                                                            }
                                                                    
                                                                    .question-card-committed .pants mark {
                                                                        background-position: 0 -26px;
                                                                    }
                                                                    .question-card-committed .pants span,
                                                                    .question-card-committed li.pants:hover span {
                                                                        background-color: #97a29d;
                                                                        background-color: #6cbca2;
                                                                    }
                                                                    .question-card-committed .mustard mark {
                                                                        background-position: 0 -52px;
                                                                    }
                                                                    .question-card-committed .mustard span,
                                                                    .question-card-committed li.mustard:hover span {
                                                                        background-color: #c0908c;
                                                                        background-color: #e37373;
                                                                    }



                                    /* --------------------------------------------------------------------------------------------------- */
                                    @media screen and (max-width: 930px) {

                                        .col-quiz header em {
                                            font-size: 0.6em; /* had been 0.75 */
                                        }

                                    }
                                    /* --------------------------------------------------------------------------------------------------- */
                                    /* --------------------------------------------------------------------------------------------------- */
                                    @media screen and (max-width: 767px) {

                                        .pretest {
                                            background: white;
                                        }
                                        .pretest .constrain {
                                            width: 100%;
                                        }
                                        .pretest .col-dressup {
                                            float: none;
                                            width: 100%;
                                        }
                                        .pretest .col-quiz {
                                            float: none;
                                        }
                                                .pretest .airbag-a {
                                                    background: #dbdbdb;
                                                    box-shadow: inset 0 6px 0 rgba(0,0,0,0.3);
                                                    border-bottom: 1px solid gray;
                                                    width: 100%;
                                                }
                                                .pretest .col-quiz {
                                                    width: 92%;
                                                    margin: 0 auto;
                                                    max-width: 960px;
                                                }
                                                .col-quiz header em {
                                                    font-size: 0.75em; /* had been 0.75 */
                                                }

                                    }
                                    /* --------------------------------------------------------------------------------------------------- */





/* --------------------------------------------------------------------------------------------------------
   DRESSUP
----------------------------------------------------------------------------------------------------------- */

    .col-dressup {
        position: relative;
        z-index: 1;
    }
            .col-dressup header {
                text-align: center;
                padding-top: 79px;
                height: 128px; /* 207 */
                margin: 0 auto 36px;
                margin-left: -3.6666666666667%; /* 22 / 600 */
                background: url(i/global-banners-2x.png) no-repeat center -879px;
                background-size: 262px 1086px;
            }
                    .col-dressup header em {
                        display: block;
                        font-family: "DemingEPRegular", "Georgia", serif;
                        font-style: normal;
                        font-size: 0.75em; /* 12 / 16 */
                        line-height: 1.1;
                        color: #3099a3;
                        margin-bottom: 7px;
                        letter-spacing: -0.025em;
                    }
                    .col-dressup header h2 {
                        font-family: "LavanderiaRegular", "Georgia", serif;
                        color: #005a7d;
                        font-size: 3.3125em; /* 53 / 16 */
                    }
                    
                    /* --------------------------------------------------------------------------------------------------- */
                    @media screen and (max-width: 890px) {

                        .col-dressup header em {
                            font-size: 0.63em; /* had been 0.75 */
                        }
                        .col-dressup header h2 {
                            font-size: 3.1em; /* had been 3.3125 */
                        }

                    }
                    /* --------------------------------------------------------------------------------------------------- */
                    /* --------------------------------------------------------------------------------------------------- */
                    @media screen and (max-width: 767px) {

                        .col-dressup {
                            box-shadow: inset 0 6px 0 rgba(0,0,0,0.3);
                        }
                        .col-dressup header {
                            margin: 0;
                            padding-top: 45px;
                            height: 162px; /* 207 */
                        }
                        .col-dressup header em {
                            font-size: 0.7em;
                            margin-bottom: 15px;
                        }
                        .col-dressup header h2 {
                            font-size: 2.8em;
                            line-height: 0.9;
                        }


                    }
                    /* --------------------------------------------------------------------------------------------------- */
                    /* --------------------------------------------------------------------------------------------------- */
                    @media screen and (max-width: 440px) {

                        .col-dressup header h2 span {
                            display: block;
                        }

                    }
                    /* --------------------------------------------------------------------------------------------------- */


        .dressup-controls,
        .dressup-balloon {
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        .dressup-controls {
            height: 148px;
            margin: 0 0 4px -1px;
        }
                .dressup-controls ul {
                }
                        .dressup-controls li {
                        }
                                .dressup-controls span {
                                    display: block;
                                    width: 19.5%; /* 117 / 600 */
                                    margin-bottom: 8px;
                                }
                                        .dressup-controls b {
                                            display: block;
                                            color: white;
                                            color: #cdf3fe;
                                            text-align: center;
                                            background: #4cd1f7 url(i/pretest-dressup-dart-capper.png) no-repeat right top;
                                            background-size: 11px 31px;
                                            font-family: "DemingEPRegular", "Georgia", serif;
                                            font-size: 0.9375em; /* 15 / 16 */
                                            line-height: 1;
                                            padding: 7px 12px 0 0;
                                            letter-spacing: -0.05em;
                                            height: 24px; /* 31 */
                                            cursor: pointer;
                                        }
                                                .dressup-controls b:hover {
                                                    color: white;
                                                    padding-top: 6px;
                                                    height: 25px; /* 31 */
                                                    text-shadow: 0 1px 1px rgba(0,0,0,0.7);
                                                }
                                                .dressup-controls b:active {
                                                    color: rgba(255,255,255,0.8);
                                                    padding-top: 7px;
                                                    height: 24px; /* 31 */
                                                    text-shadow: 0 -1px 0 rgba(0,0,0,0.4);
                                                }
        
        .dressup-balloon {
            background:
                url(i/pretest-dressup-string-shade.png) no-repeat 105px top,
                url(i/pretest-dressup-string.png) no-repeat 105px top,
                url(i/pretest-dressup-balloon.png) no-repeat left bottom;
            background-size:
                1px 6px,
                1px 240px,
                100%;
            position: absolute;
            width: 209px;
            top: 0;
            height: 343px;
            left: 49.1666666666667%; /* 295 / 600 */
            cursor: default;
        }
                .dressup-balloon p {
                    position: absolute;
                    left: 30px;
                    bottom: 20px;
                    overflow: hidden;
                    width: 155px;
                    height: 80px;
                }
                        .dressup-balloon span {
                            display: block;
                            height: 100%;
                            background: url(i/pretest-dressup-phrases.png) no-repeat;
                            background-size: 930px 80px; /* half of source raster's 1860 160 */
                            width: 930px;
                            text-indent: -9999px;
                            overflow: hidden;
                            position: absolute;
                            top: 0;
                            left: 0;
                        }
                
        
        .dressup-model {
            position: absolute;
            width: 188px;
            height: 373px;
            overflow: hidden;
            position: absolute;
            top: 181px;
            left: 22.5%; /* 135 / 600 */
            z-index: 2;
        }
                .dressup-model .head,
                .dressup-model .torso,
                .dressup-model .hats,
                .dressup-model .shirts,
                .dressup-model .pants {
                    display: block;
                    position: absolute;
                    overflow: hidden;
                }
                .dressup-model .hats span,
                .dressup-model .shirts span,
                .dressup-model .pants span {
                    display: block;
                    text-indent: -9999px;
                    overflow: hidden;
                    position: absolute;
                    height: 100%;
                    top: 0;
                    left: 0;
                }
                .dressup-model img {
                    display: block;
                    width: 100%;
                    overflow: hidden;
                }
                        .dressup-model .head {
                            width: 135px;
                            height: 124px;
                            z-index: 6;
                            top: 41px;
                            left: 23px;
                        }
                        .dressup-model .torso {
                            width: 157px;
                            height: 235px;
                            z-index: 3;
                            top: 123px;
                            left: 14px;
                        }
                        .dressup-model .shirts {
                            width: 178px;
                            height: 184px;
                            z-index: 5;
                            top: 133px;
                            left: 4px;
                        }
                                .dressup-model .shirts span {
                                    width: 1000px; /* ha ha ha */
                                    background: url(i/pretest-dressup-props-shirts.png) no-repeat;
                                    background-size: 890px 184px;
                                }

                        .dressup-model .pants {
                            width: 175px;
                            height: 154px;
                            z-index: 4;
                            top: 219px;
                            left: 13px;
                        }
                                .dressup-model .pants span {
                                    width: 875px;
                                    background: url(i/pretest-dressup-props-pants.png) no-repeat;
                                    background-size: 875px 154px;
                                }

                        .dressup-model .hats {
                            width: 174px;
                            height: 194px;
                            z-index: 7;
                            top: 0;
                            left: 0;
                        }
                                .dressup-model .hats span {
                                    width: 1566px;
                                    background: url(i/pretest-dressup-props-hats.png) no-repeat;
                                    background-size: 1566px 194px; /* half of source raster */
                                }



        .dressup-bio {
            padding-left: 59.3333333333333%; /* 356 / 600 */
        }
                .dressup-bio h3 {
                    font-family: "OpenSansBold", "Arial", sans-serif;
                    line-height: 1.2;
                    margin-bottom: 12px;
                }
                .dressup-bio p {
                    font-size: 0.75em; /* 12 / 16 */
                    margin-bottom: 0.8em;
                }
                .dressup-bio .instruction {
                    font-family: "OpenSansBold", "Arial", sans-serif;
                }
                .dressup-bio .epilogue {
                    font-family: "OpenSansItalic", "Arial", sans-serif;
                }
                .dressup-bio a {
                    font-family: "OpenSansBoldItalic", "Arial", sans-serif;
                    color: #D5006E;
                }
                        .dressup-bio a:hover {
                            text-decoration: underline;
                        }
                

                /* --------------------------------------------------------------------------------------------------- */
                @media screen and (max-width: 950px) {

                    .pretest .col-dressup {
                        width: 65%; /* had been 62.5% */
                    }
                    .dressup-model {
                        left: 20%; /* had been 22.5 */
                    }
                    .dressup-controls {
                    }
                            .dressup-controls b {
                                font-size: 0.75em; /* had been 0.9375 */
                                text-align: left;
                                padding-top: 10px;
                                padding-left: 4px;
                                height: 21px; /* 31 */
                            }
                                    .dressup-controls b:hover {
                                        padding-top: 9px;
                                        height: 22px; /* 31 */
                                    }
                                    .dressup-controls b:active {
                                        padding-top: 10px;
                                        height: 21px; /* 31 */
                                    }

                    .dressup-balloon {
                        right: 0; /* had been 49.1% */
                    }
                    .dressup-bio {
                        padding: 180px 0 0 0;
                    }

                }
                /* --------------------------------------------------------------------------------------------------- */
                /* --------------------------------------------------------------------------------------------------- */
                @media screen and (max-width: 767px) {

                    .pretest .airbag-b {
                        box-shadow: inset 0 6px 0 rgba(0,0,0,0.3);
                    }
                    .pretest .col-dressup {
                        width: 90%;
                        margin: 0 auto;
                        background: none;
                        box-shadow: none;
                    }
                            .col-dressup header {
                                margin-bottom: -60px;
                            }

                    .dressup-bio {
                        padding: 392px 0 0 0;
                    }
                    .dressup-model {
                        top: 190px; /* had been 181 */
                        left: 15%; /* had been 20%; */
                    }
                    .dressup-balloon {
                        z-index: 1;
                    }
                    .dressup-controls {
                        margin: 0 0 0 0;
                        height: 31px;
                        position: relative;
                        overflow: hidden;
                        z-index: 3; /* higher than BALLOON and MODEL */
                    }
                            .dressup-controls li {
                            }
                                    .dressup-controls span {
                                        margin: 0 0 0 0;
                                        position: absolute;
                                        top: 0;
                                        width: 24%;
                                    }
                                            .dressup-controls span b {
                                                text-align: center;
                                                background: maroon;
                                                padding-right: 0;
                                                padding-left: 0;
                                            }
                                            .dressup-controls .hat span         { left: 0;      }
                                            .dressup-controls .quote span       { left: 25.5%;  }
                                            .dressup-controls .shirt span       { left: 51%;    }
                                            .dressup-controls .pants span       { right: 0;     }


                }
                /* --------------------------------------------------------------------------------------------------- */
                /* --------------------------------------------------------------------------------------------------- */
                @media screen and (max-width: 450px) {

                    .col-dressup header {
                        margin-bottom: 15px;
                    }
                    .dressup-model {
                        top: 265px;
                        left: -28px;
                    }
                    .dressup-balloon {
                        height: 400px; /* had been 343 */
                        left: 107px;
                        background-size:
                            1px 6px,
                            1px 297px,
                            100%;
                    }

                    .dressup-controls {
                    }
                            .dressup-controls span b {
                                font-size: 0.65em; /* had been 0.75 */
                                padding-top: 11px;
                                height: 20px; /* 31 */
                            }
                                    .dressup-controls b:hover {
                                        padding-top: 10px;
                                        height: 21px; /* 31 */
                                    }
                                    .dressup-controls b:active {
                                        padding-top: 11px;
                                        height: 20px; /* 31 */
                                    }
                    

                }
                /* --------------------------------------------------------------------------------------------------- */



















/* ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */
/* ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */
/* ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */
/* ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */

/* --------------------------------------------------------------------------------------------------------
   COALMINE
----------------------------------------------------------------------------------------------------------- */

    .coalmine {
        background: #3a9caf url(i/coalmine-texture.jpg) repeat;
        padding-bottom: 50px;
        color: white;
        border-top: 1px solid #434343;
        box-shadow: inset 0 6px 0 rgba(0,0,0,0.3);
    }
            .col-coalintro {
                width: 30.2083333333333%; /* 290 / 960 */
                float: left;
            }
                    .col-coalintro header {
                        text-align: center;
                        width: 100%;
                        height: 168px; /* 254 */
                        padding-top: 86px;
                        margin: 0 auto 40px;
                        background: url(i/global-banners-2x.png) no-repeat center -408px;
                        background-size: 262px 1086px;
                    }
                            .col-coalintro header span {
                                display: block;
                                font-family: "DemingEPRegular", "Georgia", serif;
                                font-size: 1.25em; /* 20 / 16 */
                                letter-spacing: -0.04em;
                                color: #227584;
                                margin-bottom: 5px;
                            }
                            .col-coalintro header b {
                                display: block;
                                color: black;
                                font-size: 5em; /* 80 / 16 */
                                font-family: "LavanderiaRegular", "Georgia", serif;
                                overflow: hidden;
                                padding-bottom: 0.15em;
                            }

                    .col-coalintro article {
                        font-size: 0.75em; /* 13 / 16 */ /* ...fiddled-with */
                        text-shadow: 0 1px 1px rgba(0,0,0,0.4);
                        line-height: 1.4;
                    }
                            .col-coalintro blockquote {
                                margin-bottom: 1em;
                                font-family: "OpenSansItalic", "Arial", sans-serif;
                            }
                                    .col-coalintro blockquote cite {
                                        text-transform: uppercase;
                                        padding-top: 0.5em;
                                        text-align: right;
                                        display: block;
                                    }
                                            .col-coalintro blockquote cite span {
                                                font-family: "OpenSansBoldItalic", "Arial", sans-serif;
                                            }

            .col-puzzle {
                width: 65.1041666666667%; /* 625 / 960 */
                float: right;
                padding-top: 36px;
            }
                    .mine-box {
                        position: relative;
                        width: 107.2%; /* 670 / 625 */
                        margin: 0 0 10px -7.2%; /* bottom is arbitrary *//* left is 45 / 625 */
                        z-index: 1;
                    }
                            .mine-box img {
                                display: block;
                                max-width: 100%;
                                position: relative;
                                z-index: 2;
                            }
                            .mine-box figcaption {
                                position: absolute;
                                width: 100%;
                                height: 100%;
                                z-index: 3;
                                top: 0;
                                left: 0;
                            }
                                    .mine-box figcaption span {
                                        display: block;
                                        position: absolute;
                                        color: black;
                                        overflow: hidden;
                                        width: 9.5%;
                                        height: 14.2%;
                                        text-indent: -9999px;
                                    }
                                            
                                            .mine-box figcaption span b {
                                                display: block;
                                                background: url(i/coalmine-starburst-2x.png) no-repeat;
                                                background-size: 100%;
                                                overflow: hidden;
                                                width: 1px;
                                                height: 1px;
                                            }
                                            .mine-box figcaption .found b {
                                                width: 100%;
                                                height: 100%;
                                            }
                                            
                                            .mine-box figcaption .btl-1     { top: 11%;         left: 76%;      }
                                            .mine-box figcaption .btl-2     { top: 32%;         left: 51%;      }
                                            .mine-box figcaption .btl-3     { top: 38%;         left: 76%;      }
                                            .mine-box figcaption .btl-4     { top: 58%;         left: 30.5%;    }
                                            .mine-box figcaption .btl-5     { top: 70%;         left: 50.5%;    }
                                            .mine-box figcaption .btl-6     { top: 63.5%;       left: 84.5%;    }


                    .mine-score {
                        background:
                            url(i/coalmine-score-ribbon-l.png) no-repeat left 5px,
                            url(i/coalmine-score-ribbon-r.png) no-repeat right 5px,
                            url(i/coalmine-score-base.png) repeat-x 0 5px;
                        background-size:
                            13px 22px,
                            13px 22px,
                            124px 22px;
                        position: relative;
                        height: 36px;
                    }
                            .mine-score .count {
                                position: absolute;
                                width: 241px; /* shut up, i have my reasons */
                                width: 250px; /* diagnosis */
                                height: 35px;
                                overflow: hidden;
                                top: 0;
                                right: 20px;
                                right: 15px; /* arbitrary, diagnosis */
                            }
                                    .mine-score .label {
                                        position: absolute;
                                        width: 95px;
                                        height: 14px;
                                        left: 0;
                                        top: 10px;
                                        text-indent: -9999px;
                                        overflow: hidden;
                                        background: url(i/coalmine-score-label-2x.png) no-repeat;
                                        background-size: 100%;
                                    }
                                    .mine-score ul {
                                        position: absolute;
                                        left: 105px;
                                        top: 0;
                                    }
                                            .mine-score li {
                                                display: inline;
                                            }
                                                    .mine-score span {
                                                        display: block;
                                                        float: left;
                                                        height: 35px;
                                                        width: 28px;
                                                        background: url(i/coalmine-score-bottle-2x.png) no-repeat;
                                                        background-size: 28px 70px;;
                                                        text-indent: -9999px;
                                                        overflow: hidden;
                                                        cursor: default;
                                                        margin-right: -6px;
                                                    }
                                                    .mine-score .scored span {
                                                        background-position: 0 -35px;
                                                    }



                    /* --------------------------------------------------------------------------------------------------- */
                    @media screen and (max-width: 984px) {
                        .col-coalintro header span {
                            font-size: 1.0em; /* arbitrarily smaller than previous 1.25em */
                        }
                        .col-coalintro header b {
                            font-size: 4em; /* arbitrarily smaller than previous 5em */
                        }
                    }
                    /* --------------------------------------------------------------------------------------------------- */
                    /* --------------------------------------------------------------------------------------------------- */
                    @media screen and (max-width: 823px) {

                        .col-coalintro header {
                            background-size: 183px 760px;
                            background-position: center -290px;
                            height: 122px; /* 175 */
                            padding-top: 53px;
                            margin-bottom: 20px;
                        }
                                .col-coalintro header span {
                                    font-size: 0.8em;
                                    margin-bottom: 3px;
                                }
                                .col-coalintro header b {
                                    font-size: 3.75em;
                                }
                                .col-coalintro article {
                                    font-size: 0.67em; /* had been 0.8125 */
                                    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
                                    line-height: 1.4;
                                }
                                
                    }
                    /* --------------------------------------------------------------------------------------------------- */
                    /* --------------------------------------------------------------------------------------------------- */
                    @media screen and (max-width: 734px) {

                        .col-coalintro,
                        .col-puzzle {
                            float: none;
                            width: 100%;
                        }
                                
                    }
                    /* --------------------------------------------------------------------------------------------------- */
















/* ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */
/* ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */
/* ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */
/* ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */

/* --------------------------------------------------------------------------------------------------------
   GRAPHS
----------------------------------------------------------------------------------------------------------- */

    .graphs {
        border-top: 1px solid #40666d;
        box-shadow: inset 0 6px 0 rgba(0,0,0,0.3);
        background: url(i/foreword-vert-divider.png) repeat-y center top;
        padding-bottom: 80px; /* arbitrary */
    }
            .col-cross,
            .col-slope {
                width: 47.6041666666667%; /* 457 / 960 */
            }
            .col-cross {
                float: left;
            }
            .col-slope {
                float: right;
            }
            .graph-o-matic {
                width: 86.8708971553611%; /* 397 / 457 */
                margin: 0 auto;
            }
            /* --------------------------------------------------------------------------------------------------- */
            @media screen and (max-width: 767px) {
                .graph-o-matic {
                    width: 100%;
                }
            }
            /* --------------------------------------------------------------------------------------------------- */

            .graph-o-matic article {
                font-size: 0.75em; /* 12 / 16 */
            }
                    .graph-o-matic article h3 {
                        font-family: "OpenSansBold", "Arial", sans-serif;
                        font-size: 1.166666666666667em; /* 14 / 12 */
                        letter-spacing: -0.025em;
                        margin-bottom: 10px;
                        line-height: 1.1;
                    }
                    .graph-o-matic article p {
                    }
                    .graph-o-matic article em {
                        font-style: normal;
                        font-family: "OpenSansItalic", "Arial", sans-serif;
                    }
                    .graph-o-matic article .credit {
                        display: block;
                        padding-top: 0.5em;
                        color: #c0c0c0;
                        font-family: "OpenSansItalic", "Arial", sans-serif;
                    }
                            .graph-o-matic article a {
                                font-family: "OpenSansBoldItalic", "Arial", sans-serif;
                                color: #D5006E;
                            }
                            .col-cross .graph-o-matic article a {
                                color: #37859F;
                            }
                            .graph-o-matic article a:hover {
                                text-decoration: underline;
                            }
            
            .graph-demo {
                background: #c3efff;
                border-radius: 10px;
                margin-bottom: 20px;
                position: relative;
                padding-top: 40px;
                border: 1px solid #23b5d2;
            }
                    .col-slope .graph-demo {
                        background: #fee2fe;
                        border-color: #f13c72;
                    }
                    .graph-demo .economist {
                        width: 25.6926952141058%; /* 102 / 397 */
                        width: 100%;
                        height: 89px;
                        position: absolute;
                        top: -44px;
                    }
                    .graph-demo .economist img {
                        display: block;
                        margin: 0 auto;
                        max-height: 100%;
                    }
                    .graph-demo .visualization {
                        width: 92%;
                        margin: 0 auto 10px;
                        position: relative;
                        z-index: 1;
                    }
                            .graph-demo .visualization img {
                                position: relative;
                                zoom: 1;
                                display: block;
                                max-width: 100%;
                                z-index: 2;
                            }
                            .graph-demo .visualization .segment {
                                display: block;
                                position: absolute;
                                top: 0;
                                left: 0;
                                overflow: hidden;
                                width: 194px;
                                height: 71px;
                                z-index: 3;
                                text-indent: -9999px;
                                background-size: 100%;
                                background-repeat: no-repeat;
                            }
                                    .graph-demo .visualization .segment-e {
                                        width: 53.7190082644628%; /* 195 / 363 */
                                        height: 29.7071129707113%; /* 71 / 239 */
                                        background-image: url(i/graphs-segment-e.png);
                                        left: 22.0385674931129%; /* 80 / 363 */
                                        top: 34.3096234309623%; /* 82 / 239 */
                                    }
                                    .graph-demo .visualization .segment-x {
                                        width: 46.0055096418733%; /* 167 / 363 */
                                        height: 66.5271966527197%; /* 159 / 239 */
                                        background-image: url(i/graphs-segment-x.png);
                                        top: 11.7154811715481%; /* 28 / 239 */
                                        left: 29.7520661157025%; /* 108 / 363 */
                                    }
                                    .graph-demo .visualization .segment-y {
                                        width: 41.3223140495868%; /* 150 / 363 */
                                        height: 36.4016736401674%; /* 87 / 239 */
                                        background-image: url(i/graphs-segment-y.png);
                                        top: 35.9832635983264%; /* 86 / 239 */
                                        left: 26.4462809917355%; /* 96 / 363 */
                                    }

                                            .graph-demo-activated .visualization .segment-x {
                                                transform: rotate(1.5deg);
                                                -moz-transform: rotate(1.5deg);
                                                -ms-transform: rotate(1.5deg);
                                                -webkit-transform: rotate(1.5deg);
                                                -o-transform: rotate(1.5deg);
                                            }
                                            .graph-demo-activated .visualization .segment-y {
                                                transform: rotate(5.5deg);
                                                -moz-transform: rotate(5.5deg);
                                                -ms-transform: rotate(5.5deg);
                                                -webkit-transform: rotate(5.5deg);
                                                -o-transform: rotate(5.5deg);
                                            }


                    .graph-demo mark {
                        display: block;
                        margin: 0 12px 16px;
                        cursor: pointer;
                        color: white;
                        background: #23b5d2;
                        border-radius: 9px;
                        height: 30px; /* 42 */
                        padding-top: 12px;
                        box-shadow: 0 3px 0 #177689;
                    }
                            .col-slope .graph-demo mark {
                                background: #f13c72;
                                box-shadow: 0 3px 0 #9d274a;
                            }

                    .graph-demo mark span {
                        display: block;
                        background: url(i/graphs-button-label-2x.png) no-repeat;
                        background-size: 100%;
                        width: 282px;
                        height: 19px;
                        margin: 0 auto;
                        text-indent: -9999px;
                        overflow: hidden;
                    }
                            .graph-demo mark:hover {
                                background-color: #0392af;
                                box-shadow: 0 3px 0 #014f5f;
                            }
                            .col-slope .graph-demo mark:hover {
                                background-color: #c20a41;
                                box-shadow: 0 3px 0 #670724;
                            }
                            .graph-demo-activated mark,
                            .graph-demo-activated mark:hover,
                            .col-slope .graph-demo-activated mark,
                            .col-slope .graph-demo-activated mark:hover {
                                box-shadow: inset 0 0 6px rgba(0,0,0,0.4);
                                border-top: 3px solid rgba(0,0,0,0.6);
                                margin-bottom: 13px; /* not its usual 16 */
                                background-color: #0392af;
                            }
                            .col-slope .graph-demo-activated mark,
                            .col-slope .graph-demo-activated mark:hover {
                                background-color: #c20a41;
                            }
                            
                    
                    /* --------------------------------------------------------------------------------------------------- */
                    @media screen and (min-width: 768px) and (max-width: 870px) {
                        .graph-demo mark span {
                            width: 240px; /* not 282 */
                        }
                    }
                    @media screen and (max-width: 400px) {
                        .graph-demo mark span {
                            width: 230px; /* not 282 */
                        }
                    }
                    /* --------------------------------------------------------------------------------------------------- */
                    










/* ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */
/* ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */
/* ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */
/* ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */

/* --------------------------------------------------------------------------------------------------------
   TRADING CARDS
----------------------------------------------------------------------------------------------------------- */

    .cards {
        border-top: 1px solid #434343;
        background: #e3e3e3 url(i/cards-texture.jpg) repeat;
        box-shadow: inset 0 6px 0 rgba(0,0,0,0.3);
        padding: 48px 0 100px;
    }
            .cards header {
                background:
                    url(i/cards-ribbon-base-l-2x.png) no-repeat left 22px,
                    url(i/cards-ribbon-base-r-2x.png) no-repeat right 22px,
                    url(i/cards-ribbon-base-2x.png) repeat-x left 22px;
                background-size:
                    22px 42px,
                    22px 42px,
                    14px 42px;
                margin-bottom: 26px;
            }
                    .cards header span {
                        display: block;
                        width: 55.5208333333333%; /* 533 / 960 */
                        float: left;
                        text-align: right;
                        font-size: 1.0625em; /* 17 / 16 */
                        color: #404040;
                        font-family: "DemingEPRegular", "Georgia", serif;
                        padding-top: 31px;
                        letter-spacing: -0.03em;
                    }
                    .cards header mark {
                        display: block;
                        background: none;
                        color: black;
                        width: 42.3958333333333%; /* 407 / 960 */
                        float: right;
                        font-size: 3.75em; /* 60 / 16 */
                        font-family: "LavanderiaRegular", "Georgia", serif;                 
                    }

            .card-prologue {
                border-bottom: 1px solid #c5c5c5;
                padding-bottom: 38px;
                margin-bottom: 40px;
            }
                    .card-prologue-integrated {
                        border-bottom: none;
                        padding-bottom: 0;
                        margin-bottom: 35px;
                    }
                    .card-welcome {
                        width: 30.2083333333333%; /* 290 / 960 */
                        float: left;
                        font-size: 0.75em; /* 13 / 16 */ /* ...then arbitrarily fudged */
                        line-height: 1.35;
                        color: #2f2f2f;
                    }
                            .card-welcome em,
                            .card-welcome .pub {
                                font-style: normal;
                                font-family: "OpenSansItalic", "Arial", sans-serif;
                            }
                            .card-welcome .instruction {
                                background: none;
                                font-style: normal;
                                font-family: "OpenSansBold", "Arial", sans-serif;
                            }

                    .card-disclaimer {
                        width: 65.1041666666667%; /* 625 / 960 */
                        float: right;
                        background: #cacaca;
                        background: rgba(0,0,0,0.1);
                        padding: 10px 0 13px;
                    }
                            .card-disclaimer-inner {
                                margin: 0 20px 0 25px; /* leaving an effective interior of 580 */
                            }
                            .card-disclaimer .thumb {
                                display: block;
                                float: left;
                                width: 22.7586206896552%; /* 132 / 580 */
                            }
                                    .card-disclaimer .thumb img {
                                        display: block;
                                        max-width: 100%;
                                    }
                            
                            .card-disclaimer .prose {
                                width: 71.7241379310345%; /* 416 / 580 */
                                float: right;
                                padding: 11px 0 10px;
                            }
                                    .card-disclaimer .prose h3 {
                                        font-family: "DemingEPRegular", "Georgia", serif;
                                        font-size: 1.125em; /* 18 / 16 */
                                        line-height: 1.15;
                                        margin-bottom: 6px;
                                        color: #727272;
                                        text-shadow: 0 1px 0 rgba(255,255,255,0.5);
                                    }
                                    .card-disclaimer .prose p {
                                        color: #3d3d3d;
                                        font-size: 0.6875em; /* 11 / 16 */
                                        line-height: 1.4;
                                    }
                                    
                            
                            
                            .card-disclaimer-detail {
                                border: 1px solid rgba(0,0,0,0.25);
                                overflow: hidden;
                                box-shadow: 0 2px 4px rgba(0,0,0,0.4);
                            }
                                    .card-disclaimer-detail .thumb {
                                        float: none;
                                        display: none;
                                    }
                                    .card-disclaimer-detail .prose {
                                        width: 100%;
                                        float: none;
                                    }
                                    .card-disclaimer-detail .prose em {
                                        font-style: normal;
                                        font-family: "OpenSansBoldItalic", "Arial", sans-serif;
                                    }
                                    .card-disclaimer-detail .prose strong {
                                        font-weight: normal;
                                        font-family: "OpenSansBold", "Arial", sans-serif;
                                    }
                                    .card-disclaimer-detail .prose h3 {
                                        margin-bottom: 9px;
                                    }
                                    .card-disclaimer-detail .prose p {
                                        color: rgba(0,0,0,0.9);
                                        text-shadow: 0 1px 0 rgba(255,255,255,0.3);
                                    }

                                    .card-disclaimer-say            { background: rgba(188,139,0,0.3);      }
                                    .card-disclaimer-say .prose h3  { color: #523d0f;                       }
                                    .card-disclaimer-ret            { background: rgba(88,153,174,0.27);    }
                                    .card-disclaimer-ret .prose h3  { color: #073d51;                       }
                                    .card-disclaimer-rbct           { background: rgba(161,71,82,0.3);      }
                                    .card-disclaimer-rbct .prose h3 { color: #50181e;                       }
                                    .card-disclaimer-emt            { background: rgba(110,168,10,0.3);     }
                                    .card-disclaimer-emt .prose h3  { color: #364a1a;                       }
                            
                                  
                                    /* --------------------------------------------------------------------------------------------------- */
                                    @media screen and (max-width: 985px) {

                                        .cards header span {
                                            padding-top: 35px;
                                            font-size: 0.8em; /* had been 1.06... */
                                        }
                                        .cards header mark {
                                            padding-top: 10px;
                                            font-size: 3em; /* had been 3.75 */      
                                        }

                                    }
                                    /* --------------------------------------------------------------------------------------------------- */  
                                    /* --------------------------------------------------------------------------------------------------- */
                                    @media screen and (max-width: 760px) {

                                        .cards header {
                                            background-position:
                                                left 36px,
                                                right 36px,
                                                left 36px;
                                        }
                                        .cards header span {
                                            width: 100%;
                                            padding-top: 0;
                                            text-align: center;
                                            float: none;
                                            margin-bottom: 6px;
                                            font-size: 0.7em;
                                            background:
                                                url(i/foreword-vert-divider.png) repeat-x left 5px,
                                                url(i/foreword-vert-divider.png) repeat-x left 8px;
                                        }
                                        .cards header mark {
                                            width: 100%;
                                            text-align: center;
                                            float: none;
                                            padding-top: 0;
                                            font-size: 3.3em;
                                        }

                                    }
                                    /* --------------------------------------------------------------------------------------------------- */  
                                    /* --------------------------------------------------------------------------------------------------- */
                                    @media screen and (max-width: 400px) {

                                        .cards header {
                                            background-position:
                                                left 26px,
                                                right 26px,
                                                left 26px;
                                        }
                                        .cards header span {
                                            font-size: 0.6em;
                                            background-position:
                                                left 5px,
                                                left 7px;
                                        }
                                        .cards header mark {
                                            font-size: 2.75em;
                                        }

                                    }
                                    /* --------------------------------------------------------------------------------------------------- */  
                                    /* --------------------------------------------------------------------------------------------------- */
                                    @media screen and (max-width: 700px) {

                                        .card-welcome,
                                        .card-disclaimer {
                                            float: none;
                                            width: 100%;
                                        }
                                                .card-welcome {
                                                    margin-bottom: 20px;
                                                }

                                    }
                                    /* --------------------------------------------------------------------------------------------------- */
                                    /* --------------------------------------------------------------------------------------------------- */
                                    @media screen and (max-width: 500px) {

                                        .card-disclaimer .thumb {
                                            width: 35%;
                                            margin-left: -9%;
                                        }

                                    }
                                    /* --------------------------------------------------------------------------------------------------- */
                                    /* --------------------------------------------------------------------------------------------------- */
                                    @media screen and (max-width: 350px) {

                                        .card-disclaimer .prose {
                                            padding-top: 7px;
                                        }
                                        .card-disclaimer .thumb {
                                            width: 41%;
                                            margin-left: -14%;
                                        }

                                    }
                                    /* --------------------------------------------------------------------------------------------------- */







            .card-spread {
            }
                    .card-spread figure {
                        width: 23.0208333333333%; /* 221 / 960 */
                        margin-right: 2.6041666666667%; /* 25 / 960 */
                        float: left;
                        cursor: pointer;
                    }
                            .card-spread .emt {
                                float: right;
                                margin-right: 0;
                            }
                            .card-spread figure figcaption {
                                display: none;
                            }
                            .card-spread figure div {
                                padding-bottom: 10px;
                                padding-bottom: 4.5%; /* (arbitrary fuzziness of) 10 / 319 */
                                background: url(i/cards-shadow.png) no-repeat center bottom;
                                background-size: 100%;
                            }
                                    .card-spread figure b {
                                        display: block;
                                        background: white;
                                        padding: 4.1095890410959%; /* 9 / 219 */
                                        border: 1px solid #c1c1c1;
                                    }
                                            .card-spread figure b:hover         { border-color: rgba(0,0,0,0.75);   }

                                            .card-spread .say b.active          { box-shadow: 0 0 10px #bc8b00;   }
                                            .card-spread .ret b.active          { box-shadow: 0 0 10px #39859d;   }
                                            .card-spread .rbct b.active         { box-shadow: 0 0 10px #ae4a5a;   }
                                            .card-spread .emt b.active          { box-shadow: 0 0 10px #6eb030;   }

                                            .card-spread figure img {
                                                display: block;
                                                max-width: 100%;
                                            }

                                            /* --------------------------------------------------------------------------------------------------- */
                                            @media screen and (max-width: 800px) {

                                                        .card-prologue {
                                                            padding-bottom: 15px;
                                                            margin-bottom: 20px;
                                                        }                                                        
                                                        .card-prologue-integrated {
                                                            border-bottom: none;
                                                            padding-bottom: 0;
                                                            margin-bottom: 25px;
                                                        }

                                            }
                                            /* --------------------------------------------------------------------------------------------------- */
                                            /* --------------------------------------------------------------------------------------------------- */
                                            @media screen and (max-width: 700px) {

                                                        .card-prologue,
                                                        .card-prologue-integrated {
                                                            padding-bottom: 0;
                                                            border-bottom: none;
                                                            margin-bottom: 20px;
                                                        }

                                            }
                                            /* --------------------------------------------------------------------------------------------------- */
                                            /* --------------------------------------------------------------------------------------------------- */
                                            @media screen and (max-width: 500px) {

                                                    .cards {
                                                        padding-bottom: 70px;
                                                    }
                                                    .card-spread figure {
                                                        width: 47.5%;
                                                        margin: 0 0 13px 0;
                                                    }
                                                            .card-spread .say       { float: left; }
                                                            .card-spread .ret       { float: right; }
                                                            .card-spread .rbct      { float: left; }
                                                            .card-spread .emt       { float: right; }

                                            }
                                            /* --------------------------------------------------------------------------------------------------- */
                                            

                                            










/* ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */
/* ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */
/* ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */
/* ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */

/* --------------------------------------------------------------------------------------------------------
   APPENDIX
----------------------------------------------------------------------------------------------------------- */

    .appendix {
        background: url(i/foreword-vert-divider.png) repeat-y center top;
        border-top: 1px solid #434343;
        box-shadow: inset 0 6px 0 rgba(0,0,0,0.3);
        padding-bottom: 80px;
    }
            .appendix .col {
                overflow: hidden;
            }
            .col-parables,
            .col-further {
                width: 47.6041666666667%; /* 457 / 960 */
            }
            .col-parables {
                float: left;
            }
            .col-further {
                float: right;
            }
            
            .appendix header,
            .graphs header {
                background: url(i/global-banners-2x.png) no-repeat center top;
                background-size: 262px 1086px;
                height: 121px; /* 199 */
                padding-top: 78px;
                text-align: center;
                margin-bottom: 40px;
            }
                    .graphs header {
                        margin-bottom: 50px;
                    }
                    .appendix .col-further header,
                    .graphs .col-cross header {
                        background-position: center -204px;
                    }
                    .appendix header em,
                    .graphs header em {
                        font-style: normal;
                        display: block;
                        color: black;
                        font-size: 0.6875em; /* 11 / 16 */
                        font-family: "DemingEPRegular", "Georgia", serif;
                        letter-spacing: -0.06em;
                        margin-bottom: 5px;
                    }
                    .appendix header h2,
                    .graphs header h2 {
                        font-size: 3.3125em; /* 53 / 16 */
                        font-family: "LavanderiaRegular", "Georgia", serif;
                        color: #d5006e;
                        white-space: nowrap;
                    }
                            .appendix .col-further header h2,
                            .graphs .col-cross header h2 {
                                color: #005b7f;
                            }
                    

                    .appendix .author {
                        margin-bottom: 35px; /* arbitary */
                        padding-top: 14px;
                    }
                            .appendix .author b {
                                display: block;
                                float: right;
                                width: 34.7921225382932%; /* 159 / 457 */
                                padding-top: 2px;
                            }
                                    .appendix .author b img {
                                        display: block;
                                        max-width: 100%;
                                    }

                            .appendix .author figcaption {
                                float: left;
                                width: 61.4879649890591%; /* 281 / 457 */
                                color: #37859f;
                                font-size: 0.8125em; /* 13 / 16 */
                                font-family: "OpenSansItalic", "Arial", sans-serif;
                            }
                                    .appendix .author a {
                                        color: #37859f;
                                        color: #D5006E;
                                        color: #005778;
                                        font-family: "OpenSansBoldItalic", "Arial", sans-serif;
                                    }
                                            .appendix .author a:hover {
                                                text-decoration: underline;
                                            }

                    
                    .appendix .parable {
                        margin-bottom: 27px;
                    }
                            .appendix .parable b {
                                display: block;
                                float: left;
                                width: 34.7921225382932%; /* 159 / 457 */
                                padding-top: 16px;
                            }
                                    .appendix .parable b img {
                                        display: block;
                                        max-width: 100%;
                                    }
                            
                            .appendix .parable figcaption {
                                width: 63.8949671772429%; /* 292 / 457 */
                                float: right;
                                background: url(i/opening-quote-glyph-2x.png) no-repeat;
                                background-size: 100px 80px;
                                padding: 15px 0 0;
                                color: #2f2f2f;
                                font-size: 0.6875em; /* 11 / 16 */
                                line-height: 1.36;
                            }
                                    .appendix .parable figcaption blockquote {
                                        margin-left: 9px;
                                    }
                                    .appendix .parable figcaption blockquote cite {
                                        display: block;
                                        font-family: "OpenSansBoldItalic", "Arial", sans-serif;
                                        text-transform: uppercase;
                                        padding-top: 7px;
                                    }
                                            .appendix .parable figcaption blockquote cite a {
                                                color: #D5006E;
                                            }
                                            .appendix .parable figcaption blockquote cite a:hover {
                                                text-decoration: underline;
                                            }



                            /* --------------------------------------------------------------------------------------------------- */
                            @media screen and (max-width: 767px) {
                                .appendix,
                                .graphs {
                                    padding-bottom: 20px;
                                    background: none;
                                }
                                        .appendix .constrain,
                                        .graphs .constrain {
                                            width: 100%;
                                        }
                                        .appendix .airbag-b,
                                        .graphs .airbag-b {
                                            border-top: 1px solid #434343;
                                            box-shadow: inset 0 6px 0 rgba(0,0,0,0.3);
                                        }
                                        .col-parables,
                                        .col-further,
                                        .col-cross,
                                        .col-slope {
                                            width: 90%;
                                            margin: 0 auto;
                                            float: none;
                                        }
                                        .col-parables,
                                        .col-cross {
                                            margin-bottom: 30px;
                                        }
                                        .col-cross,
                                        .col-slope {
                                            padding-bottom: 25px;
                                        }
                            }
                            @media screen and (min-width: 768px) and (max-width: 820px) {
                                .appendix header h2 {
                                    font-size: 3em;
                                    padding-top: 4px;
                                }
                            }
                            @media screen and (min-width: 865px) and (max-width: 976px) {
                                .graphs header h2 {
                                    font-size: 2.9em;
                                    padding-top: 6px;
                                }
                            }
                            @media screen and (min-width: 768px) and (max-width: 864px) {
                                .graphs header em {
                                    font-size: 0.6em; /* had been 0.6875 */
                                }
                                .graphs header h2 {
                                    font-size: 2.6em;
                                    padding-top: 7px;
                                }
                            }
                            @media screen and (min-width: 431px) and (max-width: 479px) {
                                .graphs header h2 {
                                    font-size: 2.9em;
                                    padding-top: 6px;
                                }
                            }
                            @media screen and (max-width: 430px) {
                                .appendix header em,
                                .graphs header em {
                                    font-size: 0.59em;
                                    margin-bottom: 14px;
                                }
                                .appendix header h2 {
                                    font-size: 2.45em; /* had been 3.3125em */
                                    text-shadow: 0 6px 0px rgba(0,0,0,0.13);
                                }
                                .graphs header h2 {
                                    font-size: 2.3em;
                                    text-shadow: 0 6px 0px rgba(0,0,0,0.13);
                                }
                            }
                            /* --------------------------------------------------------------------------------------------------- */


















/* ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */
/* ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */
/* ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */
/* ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */

/* --------------------------------------------------------------------------------------------------------
   AFTERWORD
----------------------------------------------------------------------------------------------------------- */

    .afterword {
        border-top: 1px solid black;
        box-shadow: inset 0 6px 0 rgba(0,0,0,0.3);
        background: #7a7a7a url(i/afterword-texture.jpg) repeat;
        min-height: 400px;
        padding-bottom: 197px;
        color: black;
    }
            .afterword h2 {
                text-align: center;
                border-bottom: 1px solid rgba(255,255,255,0.35);
                color: white;
                font-size: 1.25em; /* 20 / 16 */
                font-family: "OpenSansItalic", "Arial", sans-serif;
                padding: 60px 0 36px;
                margin-bottom: 37px;
                text-shadow: 0 1px 1px rgba(0,0,0,0.4);
            }
            .afterword .cols {
                width: 100%;
                font-size: 0.875em; /* 14 / 16 */
                line-height: 1.55;
                font-family: "OpenSansItalic", "Arial", sans-serif;
                background:
                    url(i/afterword-vert-divider.png) repeat-y 67.6% top,
                    url(i/afterword-vert-divider.png) repeat-y 32.6% top;
            }
                    .afterword aside {
                        float: left;
                        width: 30%; /* 290 / 960 */
                        margin-right: 5%;
                    }
                    .afterword p {
                        margin-bottom: 1.1em;
                        text-shadow: 0 1px 0 rgba(255,255,255,0.2);
                    }
                    .afterword p span {
                        padding: 0 2px;
                    }
                    .afterword p mark {
                        font-family: "OpenSansBoldItalic", "Arial", sans-serif;
                        background: none;
                    }
                    .afterword p a {
                        color: #00487f;
                        font-family: "OpenSansBoldItalic", "Arial", sans-serif;
                    }
                            .afterword p a:hover {
                                color: #6b0e04;
                                text-decoration: underline;
                            }

                    .afterword .contact {
                        float: right;
                        margin-right: 0;
                    }
                            .afterword .contact ul {
                            }
                                    .afterword .contact li {
                                        margin-bottom: 15px;
                                    }
                                    .afterword .contact a {
                                        display: block;
                                        background: rgba(0,0,0,0.5);
                                        box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
                                        border-radius: 12px;
                                        height: 47px; /* 64 */
                                        padding: 17px 0 0 0;
                                        overflow: hidden;
                                    }
                                            .afterword .contact a:hover {
                                                background-color: rgba(3,84,107,0.8);
                                                box-shadow: inset 0 1px 7px rgba(0,0,0,0.6);
                                            }
                                            .afterword .contact a b {
                                                display: block;
                                                margin: 0 auto;
                                                height: 30px;
                                                background: url(i/afterword-social-icons-2x.png) no-repeat;
                                                background-size: 290px 285px;
                                                text-indent: -9999px;
                                                overflow: hidden;
                                            }
                                                    .afterword .contact .twi a b        { background-position: center -44px; }
                                                    .afterword .contact .ema a b        { background-position: center -124px; }
                                                    .afterword .contact .web a b        { background-position: center -202px; }

                                                    /* --------------------------------------------------------------------------------------------------- */
                                                    @media screen and (max-width: 767px) {
                                                        .afterword {
                                                            padding-bottom: 90px;   
                                                        }
                                                                .afterword header {
                                                                    padding-top: 45px;
                                                                }
                                                                .afterword .cols {
                                                                    background: none;
                                                                }
                                                                .afterword aside {
                                                                    float: none;
                                                                    width: 100%;
                                                                    padding-bottom: 10px;
                                                                    border-bottom: 1px solid rgba(0,0,0,0.25);
                                                                    margin: 0 0 25px;
                                                                }
                                                                .afterword aside:last-child {
                                                                    border-bottom: none;
                                                                    margin-bottom: 0;
                                                                }
                                                    }
                                                    /* --------------------------------------------------------------------------------------------------- */