body {
    margin: 0;
    font-family: Roboto, Helvetica, sans-serif;
    background: #303030;
}

::selection {
    background: #ccff90;
    color: #333;
}
::-moz-selection {
    background: #ccff90;
    color: #333;
}

header {
    margin: 0;
    padding: 12px 0 8px 0;
    border-bottom: 1px solid #303030;

    font-size: 14pt;

    background: #212121;
    color: #9B9B9B; /* 70% white on #212121 */

    box-shadow: 0 0 8px #0E0E0E;
}
header div {
    max-width: 960px;
    margin: 0 auto;
    font-weight: 200;
}
header p { margin: 0; }
header ul {
    margin: 0;
    list-style-type: none;
    text-transform: uppercase;
}
header li {
    display: inline-block;
    margin-left: 16px;
}
header a {
    text-decoration: none;
}
#headerLeft p { font-weight: 100; }

main {
    max-width: 960px;
    margin: 32px auto;
    color: #ddd;
}
main>.card {
    box-sizing: border-box;
    max-width: 100%;
    margin-top: 8px;
    margin-bottom: 8px;
}
main>img, main>p>img {
    max-width: 100%;
}

main h1, main h2, main h3, main h4 {
    font-weight: 200;
    margin-top: .5em;
    margin-bottom: .5em;
}
main h1 {
    font-size: 20pt;
}
main h1:after {
    content: "";
    margin-top: 8px;
    display: block;
}
main h1:after, main>hr {
    border: 0;
    border-top: 1px solid #202020;
    border-bottom: 1px solid #404040;
}

main kbd {
    font-size: 1.1em;
    padding: 1px 3px;
    /*background: #3c3c3c;
    border-radius: 4px;*/
}

main p:first-letter {
    margin-left: 2em;
}

main ul {
    list-style-type: none;
    padding: 0;
    margin-top: .5em;
    margin-bottom: .5em;
}
main>ul.showcase>li:before {
    content:"";
}
main ul.showcase a {
    display: block;
    padding: 4px;
    border-bottom: 1px solid #444;
    text-decoration: none;
}
main ul.showcase a:hover, main ul.showcase a:focus {
    background: #333;
}

main blockquote {
    margin-left: 40px;
}

main>img {
    display: block;
    margin: 0 auto;
    padding: 0 !important;
}

main table {
    border-collapse: collapse;
}
main .card td {
    border: 1px solid #515151;
}

main>ul {
    list-style: none;
}
main>ul li {
    position: relative;
}
main>ul li:before {
    content:  "—";
    position: absolute;
    left:     10px;
    top:      0px;
}

main>ul>li p {
    margin-top: 4px;
    margin-bottom: 4px;
}
main>ul>li li {
    margin-left: 24px;
}

main>blockquote {
    margin-left: 36px;
    border-left: 3px solid #01579b;
    padding-left: 16px;
}

a {
    transition: all .2s ease;
    outline: 0;
}
a:link, a:visited {
    color: #b3e5fc;
}
a:link:hover, a:link:focus, a:visited:hover, a:visited:focus {
    color: #4fc3f7;
}
a[href^="#"] {
    text-decoration: none;
    border-bottom: 1px dashed;
}

a.active {
    color: #ccff90;
}
a.active:hover, a.active:focus {
    color: #b2ff59;
}

a[name] {
    position: relative;
}
a[name]:before {
    content: "§ ";
    color: #666;
    position: absolute;
    left: -1em;
}

a.github {
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAA3NCSVQICAjb4U/gAAAACXBIWXMAAAsTAAALEwEAmpwYAAABelBMVEUAAAAeHh4kGBghISEkGxsiIhkkHR0iHhojHR0hHhshHhshHxwiHBwhHhwhHR0iHRshHRsiHhwhHhwhHBwiHRwhHhsiHBwgHRwiHhshHRwgHhohHBsiHhoiHBsgHhwiHBogHRwiHhoiHBogHBogHhwiHhwiHhwiHhwiHhwkIB4lIR8lIiAnIyEoJCIpJSMrJyUsKCYsKScyLiw1MTA2MjA3MzE5NTM7ODY8ODc/Ozk/PDpFQUBJRkRLR0ZMSUhWU1FZVlRcWVhpZmVqZ2ZraGdta2lubGpvbWtwbWxzcG90cnF2dHJ9e3mBf36CgH+DgYCFg4GOjIuQjo2Vk5Khn56qqaitq6q0srK3trW6uLi8u7q+vbzCwcHDwsLEw8LFxMPGxcTJyMjLysrOzczR0NDV1dTX1tbZ2Njd3dzi4eHk5OPm5eXo5+fo6Ojq6urs7Ovv7u7v7+/x8fHz8/P09PP19PT39/f5+fn6+vr7+/v8+/v8/Pz+/v7////ALuZ5AAAAKHRSTlMAERUXHB4jQ09TVFphZGl3enyQmaOnq626vtPV5ejq7/L29/r7/P3+NYU4BAAAAVRJREFUGBlNwQdbUnEcx9EfDrBSnLivC7UPApnmptQscWGlmWV7D3elQtr3vfsPb/fhHLMr4fo2rz/e2VpbaaXCLfw32FRhgepeSvRcM18dRampySRFUSuqxkmufTyXCu+zCeBmlTnhXiDzVb5PU0B3uZm1AHd/KnAwDTSahYHbP7T9aPd8/+Die25HX5IQL7N6YFNa5lYahlM8lnJA1NogcSit4nsifQOazYN70t4QvuFf0jh0WD8sSC8IfJDmoMvikJVeEfgs3QfPOmFeOkriGzmTMtBurTBSkDbwbUnHCYhZLfD87Onpy4ejMLb0TtIWUGOVg5ApvHlw8WcUZuScTEBfyKwJyGlh7A5OQfq7CDSYWUUPsJ5/+wwnr/wK4IXMuY4z+3oX5/dOBhiIWFGUf9I4aZyBG+ar6qaEF7FAeWMcX19DyEqVRZs7urz2WE3IrlwCAOdroG2YSxUAAAAASUVORK5CYII=");
	background-repeat: no-repeat;
	background-position: left center;
	min-height: 32px;
}

kbd.annotation {
    color: #BBB529;
}

.f-l { float: left; }
.f-r { float: right; }
.clear { clear: both; }
.card, main>img {
    background: #424242;
    border: 1px solid #515151;
    border-radius: 3px;
    display: inline-block;
    box-shadow: 0 0 15px #222;
    padding: 10px;
    max-width: 100%;
}

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

    header div {
        margin: 0 8px;
    }
    
    main h1 span {
        margin: 0 16px;
        display: block;
    }
    main>div, main>p, main>ul, main>pre, main>form, main>img, main>iframe, main>h2, main>h3 {
        margin-left: 16px;
        margin-right: 16px;
        /*max-width: calc(100% - 32px) !important; нахера я это сделал? */
    }
    main ul.showcase li a {
       padding: 6px 16px;
    }
    main blockquote {
        margin-left: 56px;
    }
    
    main>ul.showcase {
        margin: 0;
    }
}

/** crutch */
#vk_comments, #vkwidget1 {
    width: 100% !important;
}