@import '//fonts.googleapis.com/css?family=Lato:400,400italic|Arvo:700,400,400italic';

.home .logo-wrapper {
    height: auto;
}

.home .logo-wrapper h1 {
    font-weight: 700;
    font-size: 100px;
    line-height: 100%;
    letter-spacing: -3px;
    color: #F14E32;

    margin: 30px 0 0 0;
    text-align: center;
}

.home .logo-wrapper h2 {
    font-weight: 400;
    font-size: 20px;

    color: #9A9994;

    margin: 0 auto 30px auto;
    text-align: center;
    max-width: 450px;
    border: 0;
    padding: 0;
}

@media (max-width: 600px) {
    .home .logo-wrapper h1 {
        font-size: 50px;
        letter-spacing: -2px;
    }

    .home .logo-wrapper h2 {
        font-size: 12px;
    }
}

.home .nav {
    text-align: center;
}

.home .nav ul {
    display: inline-block;
}

.home .nav li.download {
    float: none;
}

.home .content,
.home .footer {
    text-align: center;
}

body {
    background: url("img/bg.jpg") repeat scroll 0 0 #Ffffff;
    font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    line-height: 1.5;
    color: #4E443C;
    text-shadow: 0 1px 0 rgba(255,255,255, 0.75);
    margin: 0;
}
#wrapper {
    width: 100%;
}
.logo-wrapper {
    position: relative;
    min-width: 600px;
    height: 80px;
    background: url("img/bg.jpg") repeat scroll 0 0 #ffffff;
}
.stage-wrapper {
    background: url("img/bg-glow.png") #ffffff;
    min-width: 600px;
    position: relative;
}
.nav-wrapper {
    background-color: #fff;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
    min-width: 600px;
    position: relative;
}
.content-wrapper {
    padding-bottom: 30px;
}
.home .content-wrapper {
    padding-top: 20px;
}
.footer-wrapper {
    padding: 10px 0;
    background: #fdfdf6;
    border-top: 1px solid #E2E0D8;
    border-bottom: 1px solid #E2E0D8;
    font-family: 'Arvo','Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: small;
}
.footer-wrapper a {
    color: #4E443C;
    text-decoration: none;
}
.footer-wrapper a:hover {
    text-decoration: underline;
}
.logo,
.nav,
.stage,
.content,
.footer {
    position: relative;
    max-width: 600px;
    margin: auto;
}
.stage {
    padding: 35px 0;
}
.nav {
    padding: 10px 0;
}
.version {
    font-family: 'Arvo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: normal;
    font-size: 13px;
    color: #9A9994;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75), 0 0 30px rgba(255, 255, 255, 0.75);
    position: absolute;
    top: 38px;
    right: 0;
    font-style: italic;
    opacity: .5;
}
.title {
    line-height: 80px;
    margin: 0;
    font-family: 'Arvo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 36px;
    text-decoration: none;
    color: #F14E32;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75), 0 0 30px rgba(255, 255, 255, 0.75);
    letter-spacing: -1px;
    float: left;
}
.title .small {
    font-weight:normal;
    font-size: 16px;
    line-height: 16px;
    color: #9A9994;
    letter-spacing: 0px;
}
.nav ul {
    list-style:none;
    padding: 0;
    margin: 0;
}
.nav li {
    display: inline-block;
}
.nav li.download {
    float:right;
}
.nav a {
    display: block;
    text-decoration: none;
    font-family: 'Arvo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight:bold;
    font-size: 14px;
    color: #fff;
    text-shadow: 0 1px 0 rgba(0,0,0, 0.15);
    border-radius: 6px;
    padding: 5px 15px;
    background: #4E443C;
    box-shadow: rgba(255,255,255, 0.75) 0 1px 0;
}
.nav a:hover {
    background-color: #9A9994;
    box-shadow: rgba(255,255,255, 0.75) 0 1px 0, rgba(0,0,0, 0.15) 0 1px 3px inset;
}
.nav li.download a {
    background-color: #F14E32;
}
.nav li.download-zip a {
    padding-left: 47px;
    background: #6B7985 url(../img/icon-zip.png) 10px 4px no-repeat;
}
.nav li.download-tar-gz a {
    padding-left: 47px;
    background: #6B7985 url(../img/icon-tar-gz.png) 10px 4px no-repeat;
    margin-right: 2px;
}
.nav li.download a:hover {
    background-color: #9A9994;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Arvo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: bold;
    color: #4E443C;
    position: relative; /* For nested anchors */
}
h2 {
    border-top: 1px solid #E2E0D8;
    padding-top: 20px;
}
h2, h2 a {
    color: #F14E32;
}
h3, h3 a {
    color: #0388A6;
}
.anchor {
    bottom: 7%;
    cursor: pointer;
    display: block;
    left: 0;
    margin-left: -25px;
    padding-left: 25px;
    position: absolute;
    top: 0;
}
.anchor > * {
    display: none;
}
.anchor > *:before {
    content: '§';
    font-weight: normal;
    font-size: smaller;
    color: #9A9994;
}
*:hover> .anchor > * {
    bottom: 0;
    cursor: pointer;
    display: block;
    left: 0;
    position: absolute;
}
a {
    color: #0388A6;
}
hr {
    background: transparent url(img/hr.png) 0 0 repeat-x;
    border: 0 none;
    color: #ccc;
    height: 4px;
    margin: 30px 0 1em 0;
    padding: 0;
}
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

@media (max-width: 808px) {
    .logo-wrapper,
    .stage-wrapper,
    .nav-wrapper,
    .content-wrapper,
    .footer-wrapper {
        min-width: 0;
        padding-left: 20px;
        padding-right: 20px;
    }

    .title {
        text-align: center;
        display: block;
        float: none;
    }

    .title .small {
        display: none;
    }

    .version {
        top: 5px;
        font-size: 70%;
    }

    .nav {
        text-align: center;
    }

    .nav ul {
        display: inline-block;
    }

    .nav li.download {
        float: none;
    }
}

@media (max-width: 620px) {
    .nav li {
        float: none;
        display: block;
        margin-bottom: 5px;
    }

    .nav li:last-child {
        margin-bottom: 0;
    }
}

/**/

pre {
    background-color: #F9F9F9;
    font-size: 14px;
    line-height: 19px;
    overflow: auto;
    padding: 12px 15px;
    margin: 0;
    color: #333;
    box-shadow: 0 0 2px #E2E0D8;
    border-radius: 3px;
}

.highlight:before {
    font-family: 'Arvo','Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #9A9994;
    font-size: x-small;
    text-align: right;
    display: block;
    padding-right: 5px;
    padding-bottom: 2px;
    margin-top: -1.5em;
}

.highlight-html:before {
    content: 'HTML';
}

.highlight-javascript:before {
    content: 'JavaScript';
}

.highlight-css:before {
    content: 'CSS';
}

.hll { background-color: #ffffcc }
.c { color: #999988; font-style: italic } /* Comment */
.err { color: #a61717; background-color: #e3d2d2 } /* Error */
.k { color: #000000; /* font-weight: bold */ } /* Keyword */
.o { color: #000000; /* font-weight: bold */ } /* Operator */
.cm { color: #999988; font-style: italic } /* Comment.Multiline */
.cp { color: #999999; /* font-weight: bold */; font-style: italic } /* Comment.Preproc */
.c1 { color: #999988; font-style: italic } /* Comment.Single */
.cs { color: #999999; /* font-weight: bold */; font-style: italic } /* Comment.Special */
.gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
.ge { color: #000000; font-style: italic } /* Generic.Emph */
.gr { color: #aa0000 } /* Generic.Error */
.gh { color: #999999 } /* Generic.Heading */
.gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
.go { color: #888888 } /* Generic.Output */
.gp { color: #555555 } /* Generic.Prompt */
.gs { /* font-weight: bold */ } /* Generic.Strong */
.gu { color: #aaaaaa } /* Generic.Subheading */
.gt { color: #aa0000 } /* Generic.Traceback */
.kc { color: #000000; /* font-weight: bold */ } /* Keyword.Constant */
.kd { color: #000000; /* font-weight: bold */ } /* Keyword.Declaration */
.kn { color: #000000; /* font-weight: bold */ } /* Keyword.Namespace */
.kp { color: #000000; /* font-weight: bold */ } /* Keyword.Pseudo */
.kr { color: #000000; /* font-weight: bold */ } /* Keyword.Reserved */
.kt { color: #0388A6; /* font-weight: bold */ } /* Keyword.Type */
.m { color: #009999 } /* Literal.Number */
.s { color: #F14E32 } /* Literal.String */
.na { color: #008080 } /* Name.Attribute */
.nb { color: #0086B3 } /* Name.Builtin */
.nc { color: #0388A6; /* font-weight: bold */ } /* Name.Class */
.no { color: #008080 } /* Name.Constant */
.nd { color: #3c5d5d; /* font-weight: bold */ } /* Name.Decorator */
.ni { color: #800080 } /* Name.Entity */
.ne { color: #990000; /* font-weight: bold */ } /* Name.Exception */
.nf { color: #990000; /* font-weight: bold */ } /* Name.Function */
.nl { color: #990000; /* font-weight: bold */ } /* Name.Label */
.nn { color: #555555 } /* Name.Namespace */
.nt { color: #000080 } /* Name.Tag */
.nv { color: #008080 } /* Name.Variable */
.ow { color: #000000; /* font-weight: bold */ } /* Operator.Word */
.w { color: #bbbbbb } /* Text.Whitespace */
.mf { color: #009999 } /* Literal.Number.Float */
.mh { color: #009999 } /* Literal.Number.Hex */
.mi { color: #009999 } /* Literal.Number.Integer */
.mo { color: #009999 } /* Literal.Number.Oct */
.sb { color: #F14E32 } /* Literal.String.Backtick */
.sc { color: #F14E32 } /* Literal.String.Char */
.sd { color: #F14E32 } /* Literal.String.Doc */
.s2 { color: #F14E32 } /* Literal.String.Double */
.se { color: #F14E32 } /* Literal.String.Escape */
.sh { color: #F14E32 } /* Literal.String.Heredoc */
.si { color: #F14E32 } /* Literal.String.Interpol */
.sx { color: #F14E32 } /* Literal.String.Other */
.sr { color: #009926 } /* Literal.String.Regex */
.s1 { color: #F14E32 } /* Literal.String.Single */
.ss { color: #990073 } /* Literal.String.Symbol */
.bp { color: #999999 } /* Name.Builtin.Pseudo */
.vc { color: #008080 } /* Name.Variable.Class */
.vg { color: #008080 } /* Name.Variable.Global */
.vi { color: #008080 } /* Name.Variable.Instance */
.il { color: #009999 } /* Literal.Number.Integer.Long */

/* jCarousel */

.jcarousel-wrapper {
    position: relative;
    border: 10px solid #fff;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    -webkit-box-shadow: 0 0 2px #fff;
    -moz-box-shadow: 0 0 2px #fff;
    box-shadow: 0 0 2px #fff;
}

@media (max-width: 600px) {
    .jcarousel-wrapper {
        border: 5px solid #fff;
    }
}

.jcarousel-wrapper .photo-credits {
    position: absolute;
    right: 15px;
    bottom: 0;
    font-size: 13px;
    color: #fff;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
    opacity: .66;
}

.jcarousel-wrapper .photo-credits a {
    color: #fff;
}

/** Carousel **/

.jcarousel {
    position: relative;
    overflow: hidden;
}

.jcarousel ul {
    width: 20000em;
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}

.jcarousel li {
    float: left;
}

.jcarousel img {
    display: block;
    max-width: 100%;
    height: auto !important;
}

/** Carousel Controls **/

.jcarousel-control-prev,
.jcarousel-control-next {
    position: absolute;
    top: 50%;
    margin-top: -55px;
    width: 50px;
    height: 50px;
    text-align: center;
    background: #16c1bd;
    color: #fff;
    text-decoration: none;
    text-shadow: 0 0 0px #000;
    font: 70px/40px Arial, sans-serif;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 40px;
    -webkit-box-shadow: 0 0 4px #fff;
    -moz-box-shadow: 0 0 4px #fff;
    box-shadow: 0 0 4px #fff;
}

@media (max-width: 480px) {
    .jcarousel-control-prev,
    .jcarousel-control-next {
        margin-top: -20px;
        width: 20px;
        height: 20px;
        border-radius: 20px;
        font: 16px/18px Arial, sans-serif;
    }
}

.jcarousel-control-prev {
    left: -60px;
}

.jcarousel-control-next {
    right: -60px;
}

.jcarousel-control-prev:hover span,
.jcarousel-control-next:hover span {
    display: block;
}

.jcarousel-control-prev.inactive,
.jcarousel-control-next.inactive {
    opacity: .25;
    cursor: default;
}

/** Carousel Pagination **/

.jcarousel-pagination {
    position: absolute;
    bottom: 10px;
    left: 50%;

    margin: 0;
    margin-left: -22px;
}

@media (max-width: 620px) {
    .jcarousel-pagination {
        bottom: -35px;
    }
}

.jcarousel-pagination a {
    text-decoration: none;
    display: inline-block;

    font-size: 11px;
    height: 10px;
    width: 10px;
    line-height: 10px;

    background: #fff;
    color: #4E443C;
    border-radius: 10px;
    text-indent: -9999px;

    margin-right: 7px;

    -webkit-box-shadow: 0 0 2px #fff;
    -moz-box-shadow: 0 0 2px #4E443C;
    box-shadow: 0 0 2px #4E443C;
}

.jcarousel-pagination a.active {
    background: #16c1bd;
    color: #4E443C;
    opacity: 1;

    -webkit-box-shadow: 0 0 2px #F0EFE7;
    -moz-box-shadow: 0 0 2px #F0EFE7;
    box-shadow: 0 0 2px #F0EFE7;
}