/* Web fonts */
@import url(//fonts.googleapis.com/css?family=Droid+Sans:bold|Droid+Serif:regular,italic|Cousine:regular,bold,italic);

@font-face {
    font-family: "icons";
    src: url("icon/icons-4.eot");
    src: url("icon/icons-4.eot?#iefix") format("embedded-opentype"),
            url("icon/icons-4.svg#icons") format("svg"),
            url("icon/icons-4.woff") format("woff"),
            url("icon/icons-4.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

/* Reset */
html, body, section, nav, article, aside, h1, h2, h3, h4, h5, h6, hgroup,
header, footer, address, p, hr, pre, blockquote, ol, ul, li, dl, dt, dd,
figure, figcaption, div, a, em, strong, small, s, cite, q, dfn, abbr, time,
code, var, samp, kbd, sub, sup, i, b, mark, ruby, rt, rp, bdi, bdo, span, ins,
del, img, iframe, embed, object, video, audio, canvas, table, caption, tbody,
thead, tfoot, tr, td, th, form, fieldset, legend, label, input, button,
select, optgroup, option, textarea, keygen, output, progress, meter, details,
summary, command, menu {
    margin: 0;
    border: 0;
    padding: 0;
    font-family: inherit;
    font-weight: inherit;
    font-style: inherit;
    font-size: 1em;
    line-height: inherit;
    color: inherit;
}

a, a:hover, a:active, a:link {
    text-decoration: none;
}

body {
    margin: 0 24px;
    background: #eae8e8 url(bg4.jpg) repeat-y fixed top center;
    font: 15px/24px "Droid Serif", Georgia, Utopia, Palatino,
            "Palatino Linotype", "URW Palladio L", "Linux Libertine", serif;
    color: #0a0808;
}

.f {
    margin: 72px 12px;
}

.f>.publication-date {
    position: relative;
    display: block;
    margin: 0 auto;
    max-width: 648px;
}

.f>.publication-date>span {
    position: absolute;
    display: block;
    top: -6px;
    left: -100px;
    border-radius: 32px;
    -moz-border-radius: 32px;
    padding: 12px 0;
    width: 64px;
    height: 40px;
    background: #345164;
    box-shadow: -1px -1px #fff,
        -1px 1px #fff,
        1px 1px #fff,
        1px -1px #fff,
        0 0 8px #000;
    -moz-box-shadow: -1px -1px #fff,
        -1px 1px #fff,
        1px 1px #fff,
        1px -1px #fff,
        0 0 8px #000;
    font-size: 12px;
    line-height: 20px;
    color: #fff;
    text-align: center;
}

.f>.publication-date>span>.year {
    font-size: 16px;
}

.f>.publication-date>span, h1, h2 {
    font-family: "Droid Sans", Helvetica, "Nimbus Sans L", Tahoma, sans-serif;
    font-weight: bold;
}

.f section {
    margin-top: 24px;
    margin-bottom: 24px;
}

.f section section {
    margin-top: 12px;
    margin-bottom: 12px;
}

.f h1,
.f h2,
.f h3,
.f h4,
.f h5,
.f h6,
.f p,
.f pre,
.f img,
.f .download,
.f .flash,
.f .app,
.f ul,
.f ol {
    display: block;
    margin: 12px auto;
}

.f h1,
.f h2,
.f h3,
.f h4,
.f h5,
.f h6,
.f p,
.f pre {
    padding: 0 4px;
    max-width: 648px;
}

.ie6 .f h1,
.ie6 .f h2,
.ie6 .f h3,
.ie6 .f h4,
.ie6 .f h5,
.ie6 .f h6,
.ie6 .f p,
.ie6 .f pre {
    width: 648px;
}

.f .download {
    position: relative;
    -moz-transition-property: background-position, background-size, box-shadow;
    -moz-transition-duration: 0.2s;
    -webkit-transition-property: background-position, background-size, box-shadow;
    -webkit-transition-duration: 0.2s;
    transition-property: background-position, background-size, box-shadow;
    transition-duration: 0.2s;
    max-width: 268px;
    margin-top: 24px;
    margin-bottom: 24px;
    border: 1px solid;
    border-color: #295fcc #214da6 #193c80 #214da6;
    border-radius: 4px;
    padding: 5px 61px 5px 5px;
    background-color: #295fcc;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjMiLz4KICAgIDxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAiLz4KICAgIDxzdG9wIG9mZnNldD0iNTElIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMDEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjMiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==),
            url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzgwODA4MCIgc3RvcC1vcGFjaXR5PSIwLjAzIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);;
    background-image: -moz-linear-gradient(top, rgba(255,255,255,0.3), rgba(255,255,255,0) 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.3)),
            -moz-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,0.03) 50%, rgba(255,255,255,0) 50%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.3)), color-stop(50%,rgba(255,255,255,0)), color-stop(50%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.3))),
            -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,0.03)), color-stop(50%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,0)));
    background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.3), rgba(255,255,255,0) 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.3))
            -webkit-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,0.03) 50%, rgba(255,255,255,0) 50%);
    background-image: linear-gradient(to bottom, rgba(255,255,255,0.3), rgba(255,255,255,0) 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.3)),
            linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.03) 50%, rgba(255,255,255,0) 50%);
    background-repeat: repeat-x;
    background-size: 100% 200%, 100% 100%;
    background-position: 0 50%, 0 0;
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.2), inset 0 0 0 rgba(0,0,0,0),
            0 0 0 rgba(0,68,204,0), 1px 1px 1px rgba(0,0,0,0.25);
    font-family: "Droid Sans", Helvetica, "Nimbus Sans L", Tahoma, sans-serif;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
}

.ie6 .f .download {
    width: 268px;
}

.ie-lt9 .f .download {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4dffffff', endColorstr='#4d000000',GradientType=0);
}

.f .download:hover {
    background-position: 0 0, 0 0;
    background-size: 100% 150%, 100% 100%;
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.2), inset 0 0 0 rgba(0,0,0,0),
            0 0 12px rgba(0,68,204,1), 1px 1px 2px rgba(0,0,0,0.25);
}

.f .download:active {
    padding: 6px 60px 4px 6px;
    background-image: -moz-linear-gradient(top, rgba(0,0,0,0) 50%, rgba(0,0,0,0.2)),
        -moz-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,0.03) 50%, rgba(255,255,255,0) 50%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(50%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.2))),
            -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,0.03)), color-stop(50%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,0)));
    background-image: -webkit-linear-gradient(top, rgba(0,0,0,0) 50%, rgba(0,0,0,0.2)),
            -webkit-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,0.03) 50%, rgba(255,255,255,0) 50%);
    background-image: linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,0,0,0.2)),
            linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.03) 50%, rgba(255,255,255,0) 50%);
    background-position: 0 0, 0 0;
    background-size: 100% 150%, 100% 100%;
    box-shadow: inset 1px 1px 2px rgba(0,0,0,0.2), inset -1px -1px 1px rgba(0,0,0,0.1),
            0 0 8px rgba(0,68,204,1), 1px 1px 1px rgba(0,0,0,0.1);
}

.f .download .title,
.f .download .description {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 30px;
}

.f .download:before,
.f .download .description:before {
    font-family: icons;
    font-style: normal;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    line-height: 1;
    speak: none;
}

.f .download:before {
    float: right;
    margin: 8px -48px 8px 8px;
    font-size: 32px;
    content: "\e000";
}

.f .download .description:before {
    display: inline-block;
    margin-left: -22px;
    width: 22px;
    font-size: 16px;
}

.f .download.platform-linux .description:before {
    content: "\e001";
}

.f .download.platform-mac .description:before {
    content: "\e002";
}

.f .download.platform-android .description:before {
    content: "\e003";
}

.f .download.platform-windows .description:before {
    content: "\e004";
}

.f .download.platform-c64 .description:before {
    content: "\e005";
}

.f .app {
    background: #fff;
}

.f ul,
.f ol {
    padding-left: 24px;
}

.f ul,
.f ol {
    max-width: 632px;
}

.ie6 .f ul,
.ie6 .f ol {
    width: 632px;
}

.f ul {
    list-style-type: disc;
}

.f ol {
    list-style-type: decimal;
}

.f h1 {
    font-size: 32px;
    line-height: 48px;
    text-shadow: 1px 1px rgba(255,255,255,0.5),
            1px 1px 1px rgba(0,0,0,0.5);
}

.f h2 {
    margin-top: 24px;
    text-shadow: 1px 1px rgba(255,255,255,0.25);
}

.f h3,
.f h4,
.f h5,
.f h6 {
    max-width: 600px;
    padding-left: 28px;
    padding-right: 28px;
    font-style: italic;
    font-weight: bold;
}

.ie6 .f h3,
.ie6 .f h4,
.ie6 .f h5,
.ie6 .f h6 {
    width: 600px;
}

.f p {
    text-align: justify;
}

.f p.c {
    margin-top: -12px;
}

.f p.c,
.f p.l2 {
    text-indent: 24px;
}

.f p.last:after {
    content: url('last-box.png');
}

.f em,
.f dfn {
    font-style: italic;
}

.f strong {
    font-weight: bold;
}

.f s {
    text-decoration: line-through;
}

.f p a,
.f pre a {
    color: #0A0896;
}

.f p a:visited,
.f pre a:visited {
    color: #960894;
}

.f p a:hover,
.f p a:active,
.f pre a:hover,
.f pre a:active {
    text-decoration: underline;
}

.f code {
    font: 13px Cousine, Consolas, Menlo, "DejaVu Sans Mono",
            "Bitstream Vera Sans Mono", Monaco, monospace;
}

.f img {
    max-width: 816px;
    height: auto;
}

.f p code {
    margin: 0 2px;
    border: 1px solid #8c8a8a;
    padding: 3px 4px 2px 4px;
    background: #f2f0f0;
    line-height: 0;
}

.f pre.code {
    max-width: 648px;
    outline: 1px solid #8c8a8a;
    padding: 18px 21px;
    overflow: auto;
    background: #f2f0f0;
    line-height: 18px;
}

.ie6 .f pre.code {
    width: 648px;
}

.f.contains-wide-code pre.code {
    max-width: 816px;
}

.ie6 .f.contains-wide-code pre.code {
    width: 816px;
}

.f var {
    color: #980808;
    font-weight: bold;
}

.prettyprint .str { color: #0a9608; }
.prettyprint .kwd { color: #0a0896; font-weight: bold; }
.prettyprint .com { color: #980808; font-style: italic; }
.prettyprint .typ { color: #960894; font-weight: bold; }
.prettyprint .lit { color: #0a7474; }
.prettyprint .pun { color: #767408; }
.prettyprint .pln { color: #0a0808; }
.prettyprint .tag { color: #0a0896; font-weight: bold; }
.prettyprint .atn { color: #960894; }
.prettyprint .atv { color: #960894; }
.prettyprint .dec { color: #0a9608; }

footer.f {
    margin: 12px 12px 48px 12px;
    text-shadow: 0 1px #fff;
}

.about-me {
    display: block;
    max-width: 486px;
    min-height: 120px;
    margin-left: auto;
    margin-right: auto;
    border : 1px solid #000;
    padding-left: 144px;
    padding-right: 24px;
    background: #fff url(avatar.jpg) no-repeat;
    background-image: -webkit-gradient(linear, left top, left bottom,
            from(transparent), to(rgba(0, 0, 0, 0.1))), url(avatar.jpg);
    background-image: -moz-linear-gradient(transparent, rgba(0, 0, 0, 0.1)),
            url(avatar.jpg);
    background-image: -o-linear-gradient(transparent, rgba(0, 0, 0, 0.1)),
            url(avatar.jpg);
    background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.1)),
            url(avatar.jpg);
}

.ie6 .about-me {
    width: 486px;
    height: 120px;
}

footer .about-me {
    border-bottom-right-radius: 12px;
    border-bottom-left-radius: 12px;
}

header .about-me {
    border-top-right-radius: 12px;
    border-top-left-radius: 12px;
}

.site-links,
.copyright {
    overflow: hidden;
}

.f .site-links a,
.f .site-links a:hover,
.f .site-links a:visited {
    color: #000;
}

small {
    float: right;
    font-size: 12px;
    opacity: 0.75;
}

.index h1 {
    display: none;
}

.index header {
    margin: 72px 12px 0 12px;
}

.index .site-links a {
    display: inline;
    display: inline-block;
    width: 16%;
    text-align: center;
}

.index .site-links .site-link-divider {
    display: inline;
    display: inline-block;
    width: 5%;
    text-align: center;
}

.index .splash {
    position: relative;
    display: block;
    margin: 12px auto;
    max-width: 752px;
    height: 480px;
    border: 1px solid #000;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.ie6.index .splash {
    width: 752px;
}