/* ===== Base ===== */
html { height: auto !important; /* force as google translate tries to change this */ }
body {
    font-family: "Noto Sans", sans-serif;
    color: #444;
    background: #fef7e1;
    position: relative;
}
html, body {
    overflow-x: hidden;
}
body:before {
    content: "";
    background: -webkit-linear-gradient(top, rgba(254, 192, 33, 0.3), rgba(254, 192, 33, 0.6));
    background: linear-gradient(to bottom, rgba(254, 192, 33, 0.3), rgba(254, 192, 33, 0.6));
    position: absolute;
    z-index: -1;
    top: -250px;
    left: -200px;
    right: -200px;
    height: 600px;
    -webkit-transform: rotate(-18deg);
            transform: rotate(-18deg);
}

h1, h2 {
    font-family: "Bungee Shade", sans-serif;
}
h1, h2, h3, a {
    color: #62493c;
}
p {
    line-height: 1.3;
}
hr {
    border: none;
    border-top: 1px solid #62493c;
    width: 80%;
    margin: 15px auto;
}
img {
    max-width: 100%;
}
a { cursor: pointer; }

/* code blocks */
code {
    white-space: pre-wrap;
}

/* quotes */
blockquote { position: relative; font-style: italic; }
blockquote:before {
    font-family: FontAwesome;
    content: "\f10d";
    position: absolute;
    top: 0px;
    left: -30px;
}

/* highlight text */
::-moz-selection {
    background-color: #fec021;
}
::selection {
    background-color: #fec021;
}

/* top level lists */
main > ol { margin-bottom: 3em; }

/* sub lists */
ol ul { list-style-type: disc; }
ol ul > li { margin: 1em 0; }
ol ul ul > li { margin: .4em 0; }

/* forms */
select,
input[type="text"],
input[type="email"],
.button {
    background: #FFF;
    padding: .5em;
    border: 1px solid #62493c;
    border-radius: 5px;

    /* prevent causing sidescroll */
    max-width: 100%;
}
select:hover,
input[type="text"]:hover,
input[type="email"]:hover,
.button:hover {
    border-color: #000;
}

/* ===== Layout ===== */
/* outer layout & theme */
.container {
    max-width: 1100px;
    margin: 0 auto;
}
.header {
    text-align: center;
}
.header h1 {
    margin: 15px;
}
.header a {
    text-decoration: none;
}
.nav {
    padding-top: 15px;
    text-align: center;
}
.nav a {
    color: #62493c;
    display: inline-block;
}
.nav a:hover {
    color: #222;
}
@media screen and (min-width: 48em) {
    .header {
        text-align: left;
    }
    .middle {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    .main,
    .sidebar {
        /* fix flex issue where main area appears slightly off screen in Safari 8 and before */
        -webkit-box-flex: 1;
    }

    .main {
        width: 70%;
    }
    .sidebar {
        width: 30%;
    }
    .nav {
        float: right;
        padding-top: 0;
        padding-right: 15px;
    }
}
.ssowl {
    text-align: center;
}
.ssowl img {
    width: 200px;
    -webkit-transition: -webkit-transform 2s;
    transition: -webkit-transform 2s;
    transition: transform 2s;
    transition: transform 2s, -webkit-transform 2s;
    -webkit-user-drag: none;
    user-drag: none;
}
.ssowl:active img {
    -webkit-transition: -webkit-transform 10s;
    transition: -webkit-transform 10s;
    transition: transform 10s;
    transition: transform 10s, -webkit-transform 10s;
    -webkit-transform: rotate3d(1, 1, 1, 3600deg);
            transform: rotate3d(1, 1, 1, 3600deg);
}

.main {}
footer {
    text-align: center;
}


/* ===== Modules ===== */

/* simple blocks */
.ssowl,
.block {
    margin: 15px;
}
.block {
    padding: 15px;
    overflow: auto;
    word-wrap: break-word;
    background: #FFF;
    box-shadow: 0 1px 2px #62493c;
}

/* toggle section */
.toggle-section {
    float: right;
    font-size: small;
    cursor: pointer;
}
.toggle-hidden-section {
    font-size: medium;
    color: #444;
}

/* buttons */
.button {
    background: #62493c;
    color: #FFF;
    cursor: pointer;
    margin-top: 15px;
}
.button:hover {
    background: #222;
}

/* filters */
.filters {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
}
.filter-block {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    padding: 0 10px;
}
.filter-block label {
    font-size: small;
}
.filter-block select {
    width: 100%;
}

/* hide the filters when no-js */
.no-js .filters,
.no-js .guide-introduction,
.no-js .toggle-section { display: none;  }


/* ===== Print ===== */
@media print {

    /* put headings back to same font as body as it'll print easier */
    h1, h2 {
        font-family: "Noto Sans", sans-serif;
    }

    /* hide a few unmeeded areas */
    .print-hidden,
    .sidebar,
    .filters,
    .nav,
    .footer,
    .skiptranslate,
    .addthis_inline_share_toolbox { display: none; }

    .block {
        /* remove shadow areas */
        box-shadow: none;
    }

    /* process outline / contents */
    /* on print/pdf, make these links look more like titles */
    .process-outline a {
        color: inherit;
        text-decoration: inherit;
    }

    /* show external links */
    a[target="_blank"][href]:after {
        content: " (" attr(href) ")";
    }
}