html {
    background: #fff;
}

body {
    font-family: arial, helvetica, sans-serif;
    padding: 0;
    margin: 0;
}

article,
aside,
figcaption,
figure,
footer,
header,
main,
nav,
section {
    display: block;
}

#container,
.container {
    margin: 0 auto;
    max-width: 980px;
    width: 100%;
}

li {
    margin-bottom: .6%;
}

a {
    color: #d1242b;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}


/* Contain floats: h5bp.com/q */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }


/* Page Header
----------------------------------------------- */
header[role="banner"] {

}

.series,
.title {
    text-align: center;
}

.series {
    background: #d1242b;
    font-family: "Trebuchet MS", Verdana, sans-serif;
    font-size: 1em;
    font-weight: bold;
    letter-spacing: 3px;
    margin: 0;
    padding: .75% 0;
    text-transform: uppercase;
    word-spacing: 3px;
}

.series span {
    color: #fff;
}

.title {
    font-family: Verdana, sans-serif;
    font-size: 1.8em;
    margin: 0;
    white-space: nowrap;
}

.title a {
    color: #000;
    text-decoration: none;
}

.title a:hover {
    text-shadow: 0 2px 20px #666;
}

.title span {
    color: #d1242b;
}

.title small {
    font-size: .5em;
    display: block;
}

.authors {
    display: none;
    font-family: "Trebuchet MS", Verdana, sans-serif;
    font-size: .825em;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
}

.authors span {
    color: #d1242b;
    margin: 0 1%;
}

div#masthead {
    background: #eee;
    border: 1px solid #000;
    border-top: none;
    padding: 1% 2%;
}


/* Page Footer
----------------------------------------------- */
footer[role="contentinfo"] {
    clear: both;
    margin-top: 5%;
}

.copyright {
    background: #000;
    color: #fff;
    letter-spacing: 1px;
    margin: .5em 0;
    padding: 1% 0;
    text-align: center;
    width: 100%; /* for ie7 */
}

#masthead,
div[role="main"],
main {
    padding: .1% 2%;
}


/* MAIN
----------------------------------------------- */

/* :::: Content Area :::: */
div[role="main"],
main {
    min-height: 33em;
    padding-right: 0;
    padding-bottom: 2em;
    padding: 0 2.5% 2.5% 5%;
}

.intro {
    font-size: 1em;
    margin-top: .5em;
}

.note {
    background: #eee;
    padding: 1% 4%;
    font-size: .875em;
}

.note time {
    font-size: .75em;
}

.note ins {
    display: block;
    border-top: 1px solid #666;
    text-decoration: none;
}

.topics li {
    margin-bottom: .875em;
}

/* :::: Download button :::: */
.btn {
    margin: 3% 5% 5% 1.5%;
}

.btn a {
    background: #444;
    color: #fff;
    margin-right: 1.75%;
    padding: 2% 3%;

    -webkit-border-radius: 12px; /* Saf3-4, iOS 1-3.2, Android <e;1.6 */
    -moz-border-radius: 12px; /* FF1-3.6 */
    border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */

    -webkit-box-shadow: inset 0px 0px 6px #666; /* Saf3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
    -moz-box-shadow: inset 0px 0px 6px #666; /* FF3.5 - 3.6 */
    box-shadow: inset 0px 0px 6px #666; /* Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5 */

    -webkit-box-shadow: 0px 2px 4px #333; /* Saf3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
    -moz-box-shadow: 0px 2px 4px #333; /* FF3.5 - 3.6 */
    box-shadow: 0px 2px 4px #333; /* Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5 */
}

.btn span {
    display: block;
    margin: .825em 0 0 .6em;
}

body .btn a:hover {
    background: #d1242b;
    color: yellow;
    text-decoration: none;
}


/* SIDEBAR
----------------------------------------------- */
.sidebar {
    background: #d1242b;
    color: #eee;
    padding: .4% 2% 2%;
    margin: 0;
}

.sidebar,
div[role="main"],
main {
    margin-top: 2%;
}

.sidebar li {
    font-size: 1.2em;
    letter-spacing: 1px;
    font-size: 1em;
    letter-spacing: 1px;
    text-align: center;
}

.sidebar a {
    color: #fff;
    text-decoration: none;
}

.sidebar a:hover {
    color: yellow;
    text-shadow: 0 5px 15px #000;
}

.sidebar .viewing,
.sidebar .viewing a {
    color: yellow;
}

.sidebar img {
    border: 1px solid #000;
    margin-top: 10%;
    width: 100%;
    height: auto;
    max-width: 160px;
    display: none;
}

#nav ul,
.nav ul {
    padding-left: 0;
}

div[role="main"] > h1:first-child,
main > h1:first-child,
body.examples .toc h1,
body.page-errata h1,
.entry h1 {
    margin-top: 1.25%;
}


/* GENERAL TOPIC PAGES
----------------------------------------------- */
.entry h2 {
    font-size: 1.125em;
    margin: 1.2em 0 .25em;
}

.entry h2 + p,
.entry h2 + ul {
    margin-top: 0;
}

.entry p {
    line-height: 1.3;
}


/* TABLE OF CONTENTS
----------------------------------------------- */
h1,
.toc h1 {
    border-bottom: 1px solid #d1242b;
    color: #333;
    font-family: Verdana, sans-serif;
    font-size: 1.25em; /* px */
    font-weight: normal;
    margin-top: 4%;
    padding-bottom: 0.25em;
}

.toc h2 {
    font-size: 1em;
    margin: 2.5% 0 1%;
}

.toc h2 + ol {
    margin-top: 0;
}

.toc a {
    text-decoration: none;
}

.toc a:hover {
    text-decoration: underline;
}

.toc ol {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}

.toc li {
    clear: both;
    font-size: .875em;
    list-style: disc;
    margin-left: 7%;
}

.toc .contents-at-glance li {
    padding-left: 0;
    font-size: .825em;
    list-style: none;
    margin-left: 0;
}

.toc li span,
.toc h2 span {
    color: #000;
    display: inline;
    float: left;
    font-weight: bold;
    min-width: 14%;
    padding-right: 2%;
}

.toc h2 span.space,
.toc .contents-at-glance .space {
    display: none;
}


/* CODE EXAMPLES
----------------------------------------------- */
.code .note {
    font-size: .875em;
    margin-left: 3%;
    padding: 1% 2%;
}

.code .note li {
    font-size: inherit;
    margin-bottom: 1.5%;
    margin-left: 0;
}

.code h1 + header {
    border-bottom: 1px solid #999;
    padding-bottom: 1em;
}

.code header .note {
    margin-left: 0;
}

.chapters {
    overflow: auto;
}

.code .chapters li {
    border-right: 1px solid #999;
    float: left;
    clear: none;
    margin: 0 0 1%;
    padding: 0 1.5%;
    list-style: none;
    font-size: .825em;
    white-space: nowrap;
}

.code .chapters li:last-child {
    border: none;
}

.code li {
    list-style: disc;
    margin-bottom: 4%;
    margin-left: 8%;
    padding-left: 0;
}

.code li p {
    font-size: .875em; /* 14px/16px */
    margin: .5em 0;
    font-weight: normal;
}

.code li .note-about-file {
    margin-bottom: 1em;
}

.code .special {
    margin-top: 2%;
}

.special em {
    font-weight: bold;
    font-style: normal;
}

.code li span {
    color: #333;
    min-width: 110px;
    font-weight: normal;
}

.code li a {
    margin-left: 1%;
}

.code li a + a {
    margin-left: 0;
}


/* APPENDIX TABLES
----------------------------------------------- */
table {
    margin: 3% 0;
}

caption {
    border-top: 1px solid #d1242b;
    font-weight: bold;
    padding: 1% 0;
    font-size: .925em;
}

caption span {
    color: #d1242b;
    margin-right: 1%;
    text-transform: uppercase;
}

th+th {
    text-align: left;
}

th+th+th {
    min-width: 8%;
    text-align: center;
}

td[colspan="2"]+td+td,
td+td+td+td {
    text-align: center;
}

th {
    font-weight: bold;
    font-size: .875em;
}

th,
td {
    border-bottom: 1px solid #999;
    padding: 1% .75%;
}

th p,
td p {
    font-size: .75em;
    margin: 0;
}

th p {
    font-size: .925em;
}

.empty {
    width: 3.5%;
}

td[colspan="2"] p {
    font-size: .875em;
}

td span {
    font-weight: bold;
}

.tables-summary li {
    font-size: .875em;
    list-style: disc;
    margin-bottom: 2%;
}

.footnote {
    margin-top: -1%;
}

/* Appendix B: CSS Reference */
#appendix-b th {
    text-align: left;
}

#b4-css3-gradients td+td+td {
    width: 20%;
}

#b5-media-queries .col-1 {
    width: 25%;
}

#b2-selectors-combinators th+th+th,
#b2-selectors-combinators td+td+td {
    text-align: center;
}


/* ERRATA
----------------------------------------------- */
.errata {
    background: #eee;
    margin-bottom: 1.25em;
    padding: .5em 1em;
}

.errata h2 {
    font-size: 1.05em;
}

.errata .added {
    font-size: .8125em;
    font-style: italic;
    margin-top: 1.75em;
}


/* ========================================================== */
/* ======== Media Queries for Various Viewport Sizes ======== */
/* ========================================================== */

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

    .intro {
        font-size: 1.2em;
        margin-top: 1em;
    }

    .title {
        font-size: 2em;
    }

    th p,
    td p {
        font-size: .8125em;
    }

    .btn span {
        display: inline;
        margin: 0;
    }

    .toc .contents-at-glance .space {
        display: inline;
        min-width: 15.5%;
    }

}


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

    /* ::: Masthead ::: */
    .title {
        float: left;
        font-size: 2em;
        margin: 0;
    }

    .title small {
        display: inline;
        font-size: .5em;
        margin-left: 2%;
        position: relative;
        top: -.3em;
    }

    .authors {
        float: right;
        text-align: left;
        display: block;
    }

    h1,
    .toc h1 {
        font-size: 2.25em;
    }

    /* ::: Nav ::: */
    .sidebar,
    div[role="main"],
    main {
        margin-top: 4%;
    }

    .sidebar {
        background: #d1242b;
        color: #eee;
        padding: .5% 2% 2%;
    }

    .sidebar img {
        display: block;
    }

    #nav,
    .nav {
        float: left;
        min-width: 170px;
        width: 16%;
    }

    .sidebar li {
        font-size: 1.2em;
        margin-bottom: 6%;
        text-align: left;
    }

    .sidebar li span {
        display: block;
    }

    /* ::: Content :::; */
    div[role="main"],
    main {
        float: left;
        min-height: 33em;
        padding-right: 0;
        padding-bottom: 2em;
        width: 65%; /* 74% */
        padding: 0 2.5% 2.5% 5%;
    }

    .code .note {
        margin-left: 14%;
    }

    .code .note li {
        list-style: disc;
        padding-left: 0;
    }

    .code li {
        font-size: .875em;
        margin-left: 16%;
        margin-bottom: 2%;
    }

    .code .topics li {
        list-style: disc;
        padding-left: 0;
        margin-left: 16%;
    }

    .toc.code li span {
        min-width: 110px;
    }

    .code li p {
        margin: .75% 0;
    }

    .toc h2 {
        font-size: 1.125em;
    }

    .toc .contents-at-glance li,
    .toc li {
        font-size: 1em;
    }

    .toc li {
        padding-left: 14%;
        list-style: none;
        margin-left: 0;
    }

    .toc li span,
    .toc h2 span {
        float: left;
        min-width: 12%;
    }

    .toc h2 span.space {
        display: inline;
        min-width: 12%;
    }

    .toc .contents-at-glance .space {
        min-width: 17%;
    }

    caption,
    th,
    .note {
        font-size: 1em;
    }

}


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

    /* ::: Content :::; */
    div[role="main"],
    main {
        width: 70%;
    }

    .toc .contents-at-glance .space {
        min-width: 12%;
    }

}