/* ===[ Index Page ]=== */

.checklist {
    padding-top: 25px;
    border-top: 1px dotted #808487;
    border-top: 1px dotted rgba(255, 255, 255, .25);
    *zoom: 1;
}

    .checklist li {
        list-style: none;
        *zoom: 1;
        padding-left: 30px;
        background: url(../img/check.svg) no-repeat left center;
    }

.no-inlinesvg .checklist li { background: url(../img/check.png) no-repeat left center }

#nav { margin: 50px 0; }

.lt-ie8 #nav { zoom: 1; }

    #nav ul li {
        display: block;
        float: left;
        width: 25%;
        margin: 0;
        padding: 0;
    }

        #nav ul li a {
            display: block;
            text-align: center;
            padding: 20px 0;
            -moz-border-radius: 0;
            -webkit-border-radius: 0;
            border-radius: 0;
            font-size: 20px;
            -moz-transition: none;
            -webkit-transition: none;
            -o-transition: none;
            -ms-transition: none;
            transition: none;
        }

.lt-ie8 #nav ul li a { zoom: 1; }

.lt-ie8 #nav ul li { width: 24.9% }

#nav ul li a { border-left: none }

#nav ul li:first-child a {
    border-left: 1px solid #f1f1f1;
    border-left-color: rgba(0, 0, 0, .05);
}

#nav ul li:first-child a:hover {
    border-left-color: #e9e9e9;
    border-left-color: rgba(0, 0, 0, .08);
}

#nav ul li a span {
    font-weight: normal;
    font-size: 16px;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0);
    color: #999;
    display: inline-block;
    margin-top: 6px;
    cursor: pointer;
}

#nav ul li:first-child a {
    -moz-border-radius: 5px 0 0 5px;
    -webkit-border-radius: 5px 0 0 5px;
    border-radius: 5px 0 0 5px;
}

#nav ul li:last-child a {
    -moz-border-radius: 0 5px 5px 0;
    -webkit-border-radius: 0 5px 5px 0;
    border-radius: 0 5px 5px 0;
}

#nav ul li a.active span,
#nav ul li a:active span {
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .8);
}

#pages,
#info { position: relative; }

    #pages > li,
    #info > div {
        list-style: none;
        opacity: 0;
        position: absolute;
        padding: 0;
        top: -9999em;
        height: 0;
        width: 0;
        left: -9999em;
        -webkit-transform: translateX(100px);
        -moz-transform: translateX(100px);
        -o-transform: translateX(100px);
        -ms-transform: translateX(100px);
        transform: translateX(100px);
    }

    .lt-ie8 #pages > li { zoom: 1; }

    #pages > li.active,
    #info > div.active {
        position: relative;
        height: auto;
        width: auto;
        top: 0;
        left: 0;
        opacity: 1;
        -webkit-transform: none;
        -moz-transform: none;
        -o-transform: none;
        -ms-transform: none;
        transform: none;
        -webkit-transition-property: -webkit-transform, opacity;
        -webkit-transition-duration : .4s;
        -webkit-transition-easing: ease-in-out;
        -moz-transition-property: -moz-transform, opacity;
        -moz-transition-duration : .4s;
        -moz-transition-easing: ease-in-out;
        -o-transition-property: -o-transform, opacity;
        -o-transition-duration : .4s;
        -o-transition-easing: ease-in-out;
        -ms-transition-property: -ms-transform, opacity;
        -ms-transition-duration : .4s;
        -ms-transition-easing: ease-in-out;
        transition-property: transform, opacity;
        transition-duration : .4s;
        transition-easing: ease-in-out;
    }

    #pages > li > ol > li,
    #pages > li > ul > li {
        color: #afafaf;
        padding: 30px 0 10px;
        border-top: 1px solid #fff;
        border-bottom: 1px dotted #c6c8c9;
        border-bottom: 1px dotted rgba(0, 0, 0, .15);
    }

    .lt-ie8 #pages > li > ol > li,
    .lt-ie8 #pages > li > ul > li { zoom: 1; }

    #pages > li > ol > li:last-child,
    #pages > li > ul > li:last-child { border-bottom: none }

    #pages > li > ol > li.last-child,
    #pages > li > ul > li.last-child { border-bottom: none }

    #pages > li > ol > li,
    #pages > li > ul > li { list-style-type: none }

.reg-list { margin-bottom: 15px; }

.reg-list li { color: #4b4f57; padding: 6px 0; }

.reg-list li:first-child { padding-top: 0; }

#changelog li { list-style-type: none; }


/* ===[ Demo Page ]=== */

#legend {
    border-top: 1px dotted #808487;
    border-top: 1px dotted rgba(255, 255, 255, .25);
    padding-top: 15px;
}

#legend li {
    list-style-type: none;
    font-weight: bold;
}

#legend li .bobble { position: static; }

.translist { padding-top: 25px }

    .translist li {
        list-style: none;
        display: block;
        float: left;
        width: 50%;
        *width: 49.9%;
    }

        .translist li a { position: relative }

.bobble-key,
.bobble-js,
.bobble-css,
.bobble-3d {
    font-weight: bold;
    position: absolute;
    font-size: 10px;
    background: #74bd79;
    border-radius: 2px;
    top: -8px;
    padding: 3px;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
    color: #fff!important;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 1px 0 rgba(255, 255, 255, .2) inset;
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 1px 0 rgba(255, 255, 255, .2) inset;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 1px 0 rgba(255, 255, 255, .2) inset;
}

.bobble-js { right: -13px }
.bobble-3d { right: -15px }
.bobble-css { right: -21px }

.bobble-key.unsupported,
.bobble-js.unsupported,
.bobble-css.unsupported,
.bobble-3d.unsupported { background: #C4544E }


/* ===[ Demo 2 Page ]=== */

#info > div {
    -webkit-transform: translateY(100px);
    -moz-transform: translateX(100px);
    -o-transform: translateX(100px);
    -ms-transform: translateX(100px);
    transform: translateX(100px);
}

#info > div p {
    color: #fff;
    text-shadow: 0 -1px 0 #000;
}

#info > div p:first-of-type,
#info > div p.first-of-type {
    padding-top: 25px;
    border-top: 1px dotted #808487;
    border-top: 1px dotted rgba(255, 255, 255, .25);
}

#info > div.active {
    -webkit-transition-duration : .8s;
    -moz-transition-duration : .8s;
    -o-transition-duration : .8s;
    -ms-transition-duration : .8s;
    transition-duration : .8s;
}


/* ===[ Media queries ]=== */

@media screen and (max-width: 1024px) {
    .rs-wrap {
        margin: 0 auto;
        float: none;
    }

    h1.title { font-size: 47px }

    h1.title,
    #top-buttons { padding: 40px 0 }

    .section-1,
    .section-2 {
        width: 100%;
        margin: 0;
    }

        .section-1 .checklist li {
            display: inline-block;
            width: 50%;
            *width: 45%;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            float: left;
        }

        .section-1 .checklist li:nth-child(odd) {
            width: 44%;
            margin-right: 5%;
        }

    .section-1 {
        padding: 0 0 25px 0;
        border-bottom: 1px dotted #c6c8c9;
        border-bottom: 1px dotted rgba(0, 0, 0, .15);
    }

    .section-2 {
        border-top: 1px dotted #808487;
        border-top: 1px dotted rgba(255, 255, 255, .25);
        padding: 39px 0 0 0;
    }

    .translist li { width: 33.3% }
}

@media screen and (max-width: 768px) {
    h1.title { font-size: 41px }

    h1.title,
    #top-buttons { padding: 30px 0 }

        #top-buttons > a { font-size: 17px }

    h2 { font-size: 26px }

    .divide { margin-bottom: 12px }

    #footer { padding: 20px 0 }
}

@media screen and (max-width: 640px) {
    #nav ul li { width: 50% }

    .lt-ie8 #nav ul li { width: 49.9% }

    #top-buttons,
    h1.title {
        float: none;
        clear: both;
    }

    h1.title { padding-bottom: 0 }

    #top-buttons { padding-top: 20px }

        #top-buttons > a {
            width: 50%;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

    h1.title { text-align: center }

    #nav ul li a {
        border-color: #f1f1f1;
        border-color: rgba(0, 0, 0, .05);
    }

    #nav ul li:first-child a {
        -webkit-border-radius: 5px 0 0 0;
        -moz-border-radius: 5px 0 0 0;
        border-radius: 5px 0 0 0;
    }

    #nav ul li:nth-child(2) a,
    #nav ul li.nav-2 a {
        -webkit-border-radius: 0 5px 0 0;
        -moz-border-radius: 0 5px 0 0;
        border-radius: 0 5px 0 0;
    }

    #nav ul li:nth-child(3) a,
    #nav ul li.nav-3 a {
        border-top: none;
        border-left: 1px solid #f1f1f1;
        border-left-color: rgba(0, 0, 0, .05);
        -webkit-border-radius: 0 0 0 5px;
        -moz-border-radius: 0 0 0 5px;
        border-radius: 0 0 0 5px;
    }

    #nav ul li:last-child a,
    #nav ul li.nav-4 a {
        border-top: none;
        -webkit-border-radius: 0 0 5px 0;
        -moz-border-radius: 0 0 5px 0;
        border-radius: 0 0 5px 0;
    }
}

@media screen and (max-width: 480px) {
    .rs-slide-bg { padding: 5px!important; }

    .rs-thumb-wrap > a { padding: 2px!important; }

    .translist li { width: 50%; *width: 49.9%;  }

    .rs-caption { opacity: 0!important; }
}

@media screen and (max-width: 320px) {
    h1.title { font-size: 38px; }

    .checklist li {
        width: 100%!important;
        margin-right: 0!important;
    }
}