html, button, input, select, textarea {
    color: #222
}

body {
    font-size: 1em;
    line-height: 1.4
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none
}

::selection {
    background: #b3d4fc;
    text-shadow: none
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0
}

img {
    vertical-align: middle
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0
}

textarea {
    resize: vertical
}

.chromeframe {
    margin: .2em 0;
    background: #ccc;
    color: #000;
    padding: .2em 0
}

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%
}

.hidden {
    display: none !important;
    visibility: hidden
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px
}

.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto
}

.invisible {
    visibility: hidden
}

.clearfix:before, .clearfix:after {
    content: " ";
    display: table
}

.clearfix:after {
    clear: both
}

.clearfix {
    *zoom: 1
}

@media print {
    * {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important
    }

    a, a:visited {
        text-decoration: underline
    }

    a[href]:after {
        content: " (" attr(href) ")"
    }

    abbr[title]:after {
        content: " (" attr(title) ")"
    }

    .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after {
        content: ""
    }

    pre, blockquote {
        border: 1px solid #999;
        page-break-inside: avoid
    }

    thead {
        display: table-header-group
    }

    tr, img {
        page-break-inside: avoid
    }

    img {
        max-width: 100% !important
    }

    @page {
        margin: .5cm
    }

    p, h2, h3 {
        orphans: 3;
        widows: 3
    }

    h2, h3 {
        page-break-after: avoid
    }
}

html, body {
    margin: 0;
    padding: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    background: url('../images/backgroundPattern.jpg?v=1') #fef6d1 center top
}

* {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

:focus, a:focus {
    outline: none
}

::-moz-focus-inner {
    border: 0
}

body.loading.clientEnabled #siteLoader {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background: url('../images/loader.gif?v=1') no-repeat center center;
    z-index: 999
}

#frame {
    min-height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

#localHeadband {
    background-color: #f8f8f8;
    border-bottom: 4px solid #eaeaea;
    width: 100%;
    height: 40px;
    position: absolute;
    z-index: 1
}

h1, h2 {
    font-family: 'Nunito', sans-serif;
    font-weight: 700
}

h1 {
    font-size: 300%;
    margin: 0 0 40px;
    color: #df7644;
    padding: 30px 0 0
}

h2 {
    color: #87399a;
    font-size: 180%;
    padding: 0;
    margin: 0
}

article {
    min-height: 440px;
    background: url('../images/contentBackground.jpg?v=1') center top #f0fcf4;
    overflow: hidden
}

#borderBottom, #borderTop {
    width: 100%;
    height: 10px;
    position: relative
}

#borderTop {
    background: url('../images/contentBorderTop.png?v=1') center top repeat-x;
    margin-bottom: -4px
}

#borderBottom {
    background: url('../images/contentBorderBottom.png?v=1') center bottom repeat-x;
    margin-top: -4px;
    margin-bottom: 15px
}

#content {
    line-height: 160%;
    font-size: 100%;
    color: #406ebb;
    padding: 25px 0 40px
}

#content p {
    font-size: 120%;
    line-height: 1.6;
    padding: 0
}

article #contentWrapper {
    min-height: 440px
}

article.loading #contentWrapper {
    background: url('../images/contentLoader.gif?v=1') center center no-repeat
}

header.main, footer.main, .contentContainer {
    width: 100%;
    max-width: 1150px;
    margin: 0 auto
}

header.main, footer.main, .copyright .contentContainer {
    max-width: 880px
}

#home .contentContainer {
    width: 880px
}

header.main {
    margin-top: 44px
}

a {
    color: #338dcc
}

.touch a:active, .no-touch a:hover {
    text-decoration: none
}

nav.main ul {
    padding: 0;
    margin: 0;
    float: left
}

nav.main ul li {
    float: left;
    height: 100px
}

nav.main a {
    display: block
}

footer.main .activitiesNav a, footer.main .aboutNav a, nav.main .videosNav a, nav.main .gamesNav a, nav.main .adventuresNav a {
    height: 100px;
    display: block;
    background: url('../images/icons.png?v=1') no-repeat 0 0;
    padding: 0;
    overflow: hidden;
    text-indent: -9999px;
    margin: 0 auto
}

nav.main .videosNav a {
    width: 105px;
    background-position: -225px 0
}

nav.main .videosNav a.selected, .touch nav.main .videoNav a:active, .no-touch nav.main .videosNav a:hover, nav.main .videosNav a.highlighted {
    background-position: -225px -100px
}

nav.main .gamesNav a {
    background-position: -120px 0;
    width: 105px
}

nav.main .gamesNav a.selected, .touch nav.main .gamesNav a:active, .no-touch nav.main .gamesNav a:hover, nav.main .gamesNav a.highlighted {
    background-position: -120px -100px
}

nav.main .adventuresNav a {
    background-position: 0 0;
    width: 120px
}

nav.main .adventuresNav a.selected, .touch nav.main .adventuresNav a:active, .no-touch nav.main .adventuresNav a:hover, nav.main .adventuresNav a.highlighted {
    background-position: 0 -100px
}

footer.main .activitiesNav a {
    width: 105px;
    background-position: -425px 0
}

footer.main .activitiesNav a.selected, .touch footer.main .activitiesNav a:active, .no-touch footer.main .activitiesNav a:hover {
    background-position: -425px -100px
}

footer.main .aboutNav a {
    width: 105px;
    background-position: -320px 0
}

footer.main .aboutNav a.selected, .touch footer.main .aboutNav a:active, .no-touch footer.main .aboutNav a:hover {
    background-position: -320px -100px
}

nav.main ul {
    float: left;
    height: 100px;
    list-style: none
}

nav.main .logo {
    float: left;
    width: 248px;
    padding-top: 30px;
    margin-left: 25px;
    margin-right: 217px;
    height: 70px
}

nav.main .logo img {
    width: 100%;
    height: auto
}

nav.main .brand {
    width: 60px;
    padding-top: 20px;
    display: block;
    height: 80px;
    float: left;
    text-align: center
}

nav.main .brand img {
    width: 60px;
    height: 60px
}

footer.main {
    color: #3761ab;
    text-align: center;
    z-index: 10;
    padding-bottom: 85px
}

.copyright {
    height: 70px;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    font-size: 80%;
    background: url('../images/footerBackground.png?v=1') repeat-x center top;
    z-index: 11;
    color: #fff;
    padding: 25px 0 0
}

.copyright a {
    color: #fdfcbb
}

.copyright .createdBy {
    font-weight: bold
}

.copyright .siteMap {
    font-size: 130%;
    margin-bottom: 5px;
    display: block;
    text-align: center
}

.copyrightProducer {
    float: left;
    margin: 0 20px 0 140px;
    text-align: right;
    display: block;
    width: 140px
}

.copyrightProducer .frc img {
    
}

.copyrightContent {
    float: left;
    text-align: left
}

.footerNav div {
    max-width: 120px;
    width: 50%;
    margin: 0;
    display: inline-block
}

footer.main p {
    padding: 0;
    margin: 0
}

.funding {
    text-align: center;
    margin: 0 0 15px 0;
    color: #426eb7
}

.doeInfo {
    color: #c4652f;
    font-size: 75%
}

.footerNav {
    display: inline-block;
    width: 260px
}

.fundingLogos {
    text-align: center;
    margin: auto;
    padding-bottom: 10px
}

.fundingLogos a {
    margin: 0 5px;
    text-decoration: none
}

#moreApps {
    text-align: left;
    text-indent: -100%;
    background-image: url('../images/appBanner_wide.png');
    background-size: 100%;
    background-repeat: no-repeat;
    display: inline-block;
    width: 596px;
    height: 78px;
    overflow: hidden;
    margin-bottom: 15px
}

.footerInfo {
    display: inline-block;
    width: 85%;
    min-height: 144px;
    margin-bottom: 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 15px 20px;
    background-color: #fffcea;
    border: 3px solid #f3d7a7;
    border-radius: 12px
}

.borderimage .footerInfo {
    text-align: left;
    margin-bottom: 20px;
    padding: 0;
    border: 20px solid;
    background-color: transparent;
    border-radius: 0;
    border-image: url('../images/fundingBackground.png?v=1') 20 fill stretch;
    -webkit-border-image: url('../images/fundingBackground.png?v=1') 20 stretch;
    -moz-border-image: url('../images/fundingBackground.png?v=1') 20 fill stretch;
    -ms-border-image: url('../images/fundingBackground.png?v=1') 20 fill stretch;
    -o-border-image: url('../images/fundingBackground.png?v=1') 20 fill stretch
}

.localization {
    padding-bottom: 10px;
    margin-bottom: 15px;
    text-align: center;
    font-size: 110%;
    color: #df7644;
    border-bottom: 2px solid #f3d9ab
}

.localization img {
    opacity: .6;
    filter: alpha(opacity=60);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60)
}

img.screenshot {
    float: left;
    margin-right: 20px;
    margin-bottom: 10px;
    border: 2px solid #dea748
}

#buildTime {
    text-align: center;
    font-size: 90%;
    color: #998;
    bottom: 0;
    right: 0;
    position: fixed;
    z-index: 100;
    padding: 4px 8px;
    background-color: #fff8dd
}

#rockBox {
    position: absolute;
    width: 78px;
    height: 420px;
    padding: 0 5px 0 8px;
    right: 0;
    top: 100px;
    z-index: 10;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #4abfa8;
    border: 3px solid #047983;
    border-right: 0;
    z-index: 100
}

.borderimage #rockBox {
    padding: 0 5px 0 5px;
    border: 10px solid;
    border-right: 0;
    background-color: transparent;
    border-radius: 0;
    border-image: url('../images/rockBox.png?v=1') 10 0 10 10 fill stretch;
    -webkit-border-image: url('../images/rockBox.png?v=1') 10 0 10 10 stretch;
    -moz-border-image: url('../images/rockBox.png?v=1') 10 0 10 10 fill stretch;
    -ms-border-image: url('../images/rockBox.png?v=1') 10 0 10 10 fill stretch;
    -o-border-image: url('../images/rockBox.png?v=1') 10 0 10 10 fill stretch
}

.no-canvas #rockBox {
    height: 204px
}

#rockBox .rock, #rockBox h3 {
    background-image: url('../images/rocks.png?v=1');
    width: 60px;
    height: 48px;
    display: block;
    margin: 0 0 5px
}

#rockBox h3 {
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    height: 19px;
    background-position: 0 -398px;
    padding: 0;
    margin-top: 5px;
    width: 59px
}

#rockBox .rock.lumpyGreenSponge {
    background-position: 0 -336px
}

#rockBox .rock.greenSpiky {
    background-position: 0 -192px
}

#rockBox .rock.swirlyRedSquare {
    background-position: 0 -288px
}

#rockBox .rock.mossyIsle {
    background-position: 0 -144px
}

#rockBox .rock.purpleGeode {
    background-position: 0 -240px
}

#rockBox .rock.blueCatRock {
    background-position: 0 -48px
}

#rockBox .rock.blueTriCrystal {
    background-position: 0 -96px
}

#rockBox .rock.bubble {
    background-position: 0 -432px
}

#rockBox .rock.camelFood {
    background-position: 0 -480px
}

#rockBox .rock.pinkFrosting {
    background-position: 0 -528px
}

#rockBox .rock.chicken {
    background-position: 0 -576px
}

#rockBox .rock.purpleZigzag {
    background-position: 0 -624px
}

#rockBox .rock.coal {
    background-position: 0 -672px
}

#rockBox .rock.foxMarble {
    background-position: 0 -720px
}

#rockBox .rock.shinySilver {
    background-position: 0 -768px
}

.no-canvas #rockBox #rock4, .no-canvas #rockBox #rock5, .no-canvas #rockBox #rock6, .no-canvas #rockBox #rock7 {
    display: none
}

.borderimage #rockBox.highlighted {
    zoom: 1.1;
    top: 75px
}

#background {
    background-image: url('../images/backgrounds/activities_bg.png?v=1');
    background-repeat: no-repeat;
    background-position: bottom center
}

#games #background {
    background-image: url('../images/backgrounds/games_bg_top.png?v=1'), url('../images/backgrounds/games_bg.png?v=1');
    background-position: top center, bottom center
}

#videos #background {
    background-image: url('../images/backgrounds/videos_bg.png?v=1')
}

#adventures #background {
    background-image: url('../images/backgrounds/adventures_bg.png?v=1')
}

#home #background {
    background-image: url('../images/backgrounds/home_bg.png?v=1')
}

#rockUnlocked {
    z-index: 9001;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.6);
    cursor: pointer
}

#rockUnlocked img {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

#rockUnlocked .newRock {
    z-index: 2
}

@media (max-width: 599px) {
    #rockUnlocked .newRock {
        width: 90px;
        height: 72px
    }
}

#rockUnlocked .background {
    z-index: 1
}

#rockUnlocked #rockUnlockedAudio {
    visibility: hidden;
    width: 1px;
    height: 1px;
    position: absolute
}

.fancyBorder {
    border: 20px solid #436eb6;
    border-radius: 15px;
    background: #436eb6;
    box-sizing: border-box
}

.borderimage .fancyBorder {
    border: 20px solid;
    background-color: transparent;
    border-radius: 0;
    border-image: url('../images/fancyBorder.png?v=1') 20 fill stretch;
    -webkit-border-image: url('../images/fancyBorder.png?v=1') 20 stretch;
    -moz-border-image: url('../images/fancyBorder.png?v=1') 20 fill stretch;
    -ms-border-image: url('../images/fancyBorder.png?v=1') 20 fill stretch;
    -o-border-image: url('../images/fancyBorder.png?v=1') 20 fill stretch
}

.fancyLoader {
    display: none;
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    margin: -45px 0 0 -45px
}

.loading .fancyLoader {
    display: block
}

img, embed, object, video {
    max-width: 100%
}

video, object, embed, button {
    outline: none;
    border: none
}

button {
    cursor: pointer;
    vertical-align: middle
}

button img {
    vertical-align: middle;
    height: 1.2em
}

#playerWrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden
}

#videoFrame {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 60px;
    overflow: hidden
}

#videoPlayer {
    width: 100% !important;
    height: 100% !important;
    display: block;
    position: relative;
    z-index: 0
}

.scrubber {
    position: absolute;
    left: 85px;
    right: 115px;
    bottom: 22px;
    display: inline-block;
    zoom: 1;
    *display: inline;
    cursor: pointer
}

.scrubber-track {
    width: 100%;
    height: 12px;
    background-color: #3d6cbd;
    border: 3px solid #29267b;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 10px;
    display: inline-block;
    zoom: 1;
    *display: inline;
    vertical-align: middle;
    text-align: left
}

.scrubber-track.disabled-control, .loading .scrubber-track {
    border-color: #85929f;
    background-color: #bbd1d7;
    cursor: default !important
}

.scrubber-thumb {
    width: 30px;
    height: 28px;
    background: url('../images/buttons.png?v=1') transparent no-repeat -180px -184px;
    position: relative !important;
    top: -11px
}

.no-touch .scrubber-thumb:hover {
    background-position: -180px -212px
}

.scrubber-thumb:active {
    background-position: -180px -240px
}

.scrubber-thumb.disabled-control, .loading .scrubber-thumb {
    background-position: -180px -268px
}

#controlRack {
    height: 50px;
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0
}

#controlRack .playPause, #controlRack .captions {
    padding: 0;
    position: absolute;
    display: block;
    bottom: 10px;
    background: url('../images/buttons.png?v=1') transparent no-repeat
}

#controlRack .playPause {
    left: 10px;
    width: 55px;
    height: 45px
}

#controlRack .captions {
    width: 90px;
    right: 10px;
    height: 46px
}

#controlRack button {
    display: block
}

#controlRack button img.spacer {
    width: 100%;
    height: 100%;
    position: absolute
}

.loading .scrubber, .loading button, .disabled-control {
    cursor: default !important
}

.videoLoader {
    display: none;
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    margin: -8px 0 0 -64px
}

.loading .videoLoader {
    display: block
}

#controlRack .captions {
    background-position: 0 0
}

.no-touch #controlRack .captions:hover {
    background-position: 0 -92px
}

#controlRack .captions:active {
    background-position: 0 -184px
}

#controlRack .captions.disabled-control, .loading #controlRack .captions {
    background-position: -320px -184px
}

#controlRack .captions.captions-on {
    background-position: 0 -46px
}

.no-touch #controlRack .captions.captions-on:hover {
    background-position: 0 -138px
}

#controlRack .captions.captions-on:active {
    background-position: 0 -230px
}

#controlRack .playPause {
    background-position: -265px -184px
}

.no-touch #controlRack .playPause:hover {
    background-position: -265px -230px
}

#controlRack .playPause:active {
    background-position: -265px -276px
}

#controlRack .playPause.disabled-control, .loading #controlRack .playPause {
    background-position: -265px -323px
}

#controlRack .playPause.playing {
    background-position: -210px -184px
}

.no-touch #controlRack .playPause.playing:hover {
    background-position: -210px -230px
}

#controlRack .playPause.playing:active {
    background-position: -210px -276px
}

#controlRack .playPause.playing.disabled-control, .loading #controlRack .playPause.playing {
    background-position: -210px -323px
}

.contentList {
    margin: 0 auto 10px;
    width: 85%;
    position: relative
}

.contentList ul {
    list-style: none;
    margin: 0;
    padding: 0;
    height: 100%;
    position: relative;
    text-align: center
}

.contentList li {
    position: relative;
    color: #fff;
    display: inline-block;
    margin: 6px
}

.contentList li img {
    width: 174px;
    height: 107px
}

.contentList.largeThumbnails li img {
    width: 274px;
    height: 177px
}

.contentList ul {
    padding: 0;
    margin: 0;
    list-style: none
}

.contentList a .label {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: #416fb7;
    color: #fff;
    font-family: 'Nunito', sans-serif;
    font-size: 125%;
    padding: 3px 12px 5px 10px;
    border-top-right-radius: 6px
}

.no-touch .contentList a:hover .label {
    background-color: #3de3bb
}

.thumbnail, .thumbnails a {
    display: block;
    margin: 0 auto;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    border-radius: 12px;
    border: 4px solid #292979;
    background-color: #292979;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.borderimage .thumbnails a, .borderimage .thumbnail {
    border: 10px solid;
    background-color: transparent;
    border-image: url('../images/thumbnailBorder.png?v=1') 10 fill stretch;
    -webkit-border-image: url('../images/thumbnailBorder.png?v=1') 10 stretch;
    -moz-border-image: url('../images/thumbnailBorder.png?v=1') 10 fill stretch;
    -ms-border-image: url('../images/thumbnailBorder.png?v=1') 10 fill stretch;
    -o-border-image: url('../images/thumbnailBorder.png?v=1') 10 fill stretch;
    border-radius: 0
}

.thumbnails a.current, .thumbnails a:active, .no-touch .thumbnails a:hover, .selected .thumbnail, .thumbnail:active, .no-touch .thumbnail:hover {
    border-color: #0099a0;
    background-color: #0099a0
}

.borderimage .thumbnails a.current, .borderimage .thumbnails a:active, .no-touch.borderimage .thumbnails a:hover, .borderimage .selected .thumbnail, .borderimage .thumbnail:active, .no-touch.borderimage .thumbnail:hover {
    background-color: transparent;
    border-image: url('../images/thumbnailBorderActive.png?v=1') 10 fill stretch
}

.thumbnails a img {
    display: block;
    margin: 0 auto;
    border-radius: 6px;
    border: 4px solid #3f6eba
}

.borderimage .thumbnails a img {
    border: none
}

.thumbnails a.current img, .thumbnails a:active img, .no-touch .thumbnails a:hover img {
    border-color: #2fe4bb
}

.thumbnails a.disabled {
    cursor: default;
    border-color: #8692a0;
    background-color: #bbd1d7
}

.borderimage .thumbnails a.disabled {
    cursor: default;
    border-color: transparent;
    background-color: transparent
}

.thumbnails a.disabled img {
    border-color: #bbd1d7;
    opacity: .5
}

.borderimage .thumbnails a.disabled img {
    border-color: transparent;
    opacity: .5
}

.thumbnails.small a {
    width: 170px;
    height: 110px
}

.thumbnails.small a {
    height: 113px
}

.thumbnails.small a img {
    width: 154px;
    height: 94px
}

.characters, .about-nav {
    list-style: none;
    margin: 0;
    padding: 0
}

.about-nav li, .characters li {
    display: inline-block
}

.characters, .about-nav {
    width: 815px;
    margin: 0 auto;
    text-align: center
}

.about-nav {
    margin-bottom: 15px
}

.about-nav a, .about-nav a span {
    width: 190px;
    height: 62px;
    margin: 0 auto;
    display: block;
    text-align: center;
    background: url('../images/about/buttons.png?v=1') no-repeat 0 0
}

.about-nav a span {
    text-indent: -9999em
}

.about-nav a.selected, .no-touch .about-nav a:hover {
    background-position: 0 -62px
}

.about-nav a:active {
    background-position: 0 -124px
}

.about-nav a.overview span {
    background-position: -190px 0
}

.about-nav a.learning-goals span {
    background-position: -190px -62px
}

.about-nav a.characters span {
    background-position: -190px -124px
}

.about-nav a.credits span {
    background-position: -190px -186px
}

.about-nav a.overview:active span {
    background-position: -380px 0
}

.about-nav a.learning-goals:active span {
    background-position: -380px -62px
}

.about-nav a.characters:active span {
    background-position: -380px -124px
}

.about-nav a.credits:active span {
    background-position: -380px -186px
}

.characters a {
    margin: 0 auto 10px
}

.characters a img {
    width: 238px;
    height: 134px;
    display: block
}

img.character {
    float: right;
    margin: 0 20px 20px;
    padding: 10px
}

.aboutContent {
    background: url('../images/about/background.jpg?v=1') #fff;
    padding: 10px 20px;
    min-height: 300px;
    border-radius: 10px
}

div.col1, div.col2 {
    width: 48%;
    display: block;
    float: left;
    text-align: center
}

div.col1 {
    margin: 0 2% 0 0
}

div.col2 {
    margin: 0 0 0 2%
}

@media all and (max-width: 1100px) {
    .about-nav {
        width: 725px
    }

    .about-nav a {
        zoom: .95;
        -moz-transform: scale(.95);
        -webkit-transform: scale(.95)
    }

    .characters {
        width: 85%
    }
}

@media all and (max-width: 874px) {
    .about-nav {
        width: 400px
    }

    .about-nav li {
        margin-bottom: 5px
    }

    .about-nav a {
        zoom: 1;
        -moz-transform: scale(1);
        -webkit-transform: scale(1)
    }
}

@media all and (max-width: 599px) {
    .aboutContent {
        background: none;
        padding: 0
    }

    div.col1, div.col2 {
        width: 100%;
        float: none;
        margin: 0
    }
}

body.hasPlayer #frame header.main, body.hasPlayer #frame #borderTop, body.hasPlayer #frame #borderBottom, body.hasPlayer #frame article, body.hasPlayer #frame #rockBox, body.hasPlayer #frame footer.main .footerNav {
    display: none !important;
    visibility: hidden;
    overflow: hidden
}

body.hasPlayer #frame footer.main {
    position: relative
}

body.hasPlayer #frame footer.main .footerInfo {
    width: 100%
}

.playerFrame {
    width: 100%;
    overflow: hidden;
    margin-top: 38px;
    text-align: center
}

.playerFrame.loading .playerResponsive {
    background: url('../images/fancyLoader.gif?v=1') no-repeat center center;
    background-color: #436eb6 !important
}

.playerBranding {
    float: left;
    width: 250px
}

.playerBranding img {
    float: left
}

.playerBranding .brand {
    width: 50px;
    height: 50px;
    margin-right: 20px
}

.playerBranding .logo {
    width: 180px
}

#games-list li a {
    border-image: url('../images/thumbnailBorderPurple.png?v=1') 10 fill stretch;
    -webkit-border-image: url('../images/thumbnailBorderPurple.png?v=1') 10 stretch;
    -moz-border-image: url('../images/thumbnailBorderPurple.png?v=1') 10 fill stretch;
    -ms-border-image: url('../images/thumbnailBorderPurple.png?v=1') 10 fill stretch;
    -o-border-image: url('../images/thumbnailBorderPurple.png?v=1') 10 fill stretch;
}

#games-list li a.storybook {
    border-image: url('../images/thumbnailBorder.png?v=1') 10 fill stretch;
    -webkit-border-image: url('../images/thumbnailBorder.png?v=1') 10 stretch;
    -moz-border-image: url('../images/thumbnailBorder.png?v=1') 10 fill stretch;
    -ms-border-image: url('../images/thumbnailBorder.png?v=1') 10 fill stretch;
    -o-border-image: url('../images/thumbnailBorder.png?v=1') 10 fill stretch;
}

#games-list ul li a:hover {
    border-image: url('../images/thumbnailBorderActive.png?v=1') 10 fill stretch;
    -webkit-border-image: url('../images/thumbnailBorderActive.png?v=1') 10 stretch;
    -moz-border-image: url('../images/thumbnailBorderActive.png?v=1') 10 fill stretch;
    -ms-border-image: url('../images/thumbnailBorderActive.png?v=1') 10 fill stretch;
    -o-border-image: url('../images/thumbnailBorderActive.png?v=1') 10 fill stretch;
}

#games-list li a:before {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 30px;
    height: 30px;
    background-image: url('../images/games/icon-game.png');
    background-position: center top;
    background-repeat: no-repeat;
}

#games-list a.storybook:before {
    background-image: url('../images/games/icon-storybook.png');
}

#games-list li a:hover:before {
    background-position: center bottom;
}

#gameControls.playerControls {
    height: 50px;
    padding: 24px 10px 0;
    text-align: right
}

#gameControls.playerControls button, #gameControls.playerControls a.button {
    text-decoration: none;
    display: inline-block;
    text-indent: -200%;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    height: 46px;
    background-image: url('../images/buttons.png?v=1');
    cursor: pointer;
    margin: 0 5px;
    border: none;
    background-color: transparent;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

#adventureControls.playerControls {
    height: 50px;
    padding: 24px 10px 0
}

#adventureControls.playerControls button, #adventureControls.playerControls a.button {
    text-decoration: none;
    display: inline-block;
    text-indent: -300%;
    white-space: nowrap;
    overflow: hidden;
    height: 46px;
    background-image: url('../images/buttons.png?v=1');
    cursor: pointer;
    display: block;
    margin: 0 5px;
    float: right;
    border: none;
    background-color: transparent;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

#closeButton {
    background-position: -180px 0;
    width: 49px
}

.no-touch #closeButton:hover {
    background-position: -180px -92px
}

#closeButton:active, .no-touch #closeButton:active {
    background-position: -180px -46px
}

#soundButton {
    background-position: -90px 0;
    width: 90px
}

#soundButton.unmuted {
    background-position: -90px -46px
}

.no-touch #soundButton:hover {
    background-position: -90px -92px
}

#soundButton:active, .no-touch #soundButton:active {
    background-position: -90px -184px
}

.no-touch #soundButton.unmuted:hover {
    background-position: -90px -138px
}

#soundButton.unmuted:active {
    background-position: -90px -230px
}

#captionsButton {
    width: 90px
}

#captionsButton.unmuted {
    background-position: 0 -46px
}

.no-touch #captionsButton:hover {
    background-position: 0 -92px
}

#captionsButton:active, .no-touch #captionsButton:active {
    background-position: 0 -184px
}

.no-touch #captionsButton.unmuted:hover {
    background-position: 0 -138px
}

#captionsButton.unmuted:active {
    background-position: 0 -230px
}

#gameControls #helpButton, #adventureControls #helpButton {
    width: 140px;
    height: 60px;
    background-position: 0 -460px;
    margin-top: -14px
}

.no-touch #gameControls #helpButton:hover, .no-touch #adventureControls #helpButton:hover {
    background-position: -140px -460px
}

#gameControls #helpButton:active, #adventureControls #helpButton:active, .no-touch #gameControls #helpButton:active, .no-touch #adventureControls #helpButton:active {
    background-position: -280px -460px
}

#gameControls #helpButton.disabled, #adventureControls #helpButton.disabled, #gameControls #helpButton.disabled:hover, #adventureControls #helpButton.disabled:hover {
    background-position: -420px -460px;
    cursor: default
}

#gameControls #moreGamesButton {
    width: 135px;
    height: 55px;
    background-image: url('../images/MoreGamesButton.png?v=1');
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: top;
    margin-top: -11px
}

.no-touch #gameControls #moreGamesButton:hover {
    background-position: center
}

#gameControls #moreGamesButton:active, .no-touch #gameControls #moreGamesButton:active {
    background-position: bottom
}

.playerContainer {
    max-width: 1150px;
    display: block;
    padding: 0 15px;
    margin: 0 auto 15px
}

.playerResponsive {
    width: 100%;
    background-color: #436eb6
}

.playerResponsiveChild {
    width: 100%;
    padding-top: 53.33333333%;
    position: relative
}

iframe.gamePlayer {
    border: 0;
    background: transparent;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%
}

@media all and (max-width: 874px) {
    #gameControls.playerControls button, #adventureControls.playerControls button, #gameControls.playerControls a.button, #adventureControls.playerControls a.button {
        margin: 0 1px
    }
}

@media all and (max-width: 767px) {
    #gameControls.playerControls {
        text-align: center
    }

    #gameControls.playerControls .playerBranding {
        display: none
    }

    #gameControls.playerControls button, #gameControls.playerControls a.button {
        margin: 0 5px
    }
}

@media all and (max-width: 599px) {
    .playerContainer {
        padding: 0
    }

    .playerResponsive {
        background-color: transparent
    }

    #gameControls.playerControls, #adventureControls.playerControls {
        padding: 5px 0 0;
        height: 40px;
        width: auto
    }

    #gameControls.playerControls button, #adventureControls.playerControls button, #gameControls.playerControls a.button, #adventureControls.playerControls a.button, #gameControls.playerControls #moreGamesButton, #adventureControls.playerControls #moreGamesButton {
        text-align: center;
        padding: 4px 0;
        margin: 0;
        border-left: 0;
        border-top: 0;
        height: 40px;
        max-width: none;
        background-image: none;
        background: #87399a;
        text-indent: 0;
        font-family: "Nunito", Helvetica, sans-serif;
        font-weight: 700;
        color: #fff8dd;
        border: 1px solid #6c236e;
        border-bottom-width: 2px;
        border-top-width: 0
    }

    #gameControls.playerControls button:active, #adventureControls.playerControls button:active, #gameControls.playerControls a.button:active, #adventureControls.playerControls a.button:active, #gameControls.playerControls #moreGamesButton:active, #adventureControls.playerControls #moreGamesButton:active, .no-touch #gameControls.playerControls button:hover, .no-touch #adventureControls.playerControls button:hover, .no-touch #gameControls.playerControls a.button:hover, .no-touch #adventureControls.playerControls a.button:hover, .no-touch #gameControls.playerControls #moreGamesButton:hover, .no-touch #adventureControls.playerControls #moreGamesButton:hover {
        background: #41d8b8;
        border-color: #1a8387
    }

    #gameControls.playerControls #moreGamesButton {
        width: 30%
    }

    #gameControls.playerControls #helpButton, #gameControls.playerControls #captionsButton, #gameControls.playerControls #soundButton {
        width: 20%
    }
}

@media all and (max-width: 399px) {
    #gameControls.playerControls {
        font-size: 12px
    }
}

@media all and (max-width: 279px) {
    #gameControls.playerControls {
        font-size: 10px
    }
}

.homePromos {
    width: 325px;
    float: right
}

.homePromos a {
    width: 100%;
    height: 200px;
    margin: 0
}

.homePromos img, .homePromos a img {
    width: 320px;
    height: 200px;
    margin: 0
}

.homePromos ul {
    list-style: none;
    padding: 0;
    margin: 0
}

.homePromos li {
    margin-bottom: 0
}

.homePromos li:first-child {
    margin-bottom: 10px
}

#animationsContainer {
    width: 550px;
    height: 388px;
    position: relative;
    pointer-events: none;
    margin: -12px 0 0 13px
}

#animationsContainer img {
    position: absolute;
    left: 244px;
    top: 144px
}

#animations {
    width: 100%;
    height: 100%;
    position: absolute;
    outline: 0
}

@media all and (max-width: 1100px) {
    #animationsContainer {
        margin-left: -57px
    }
}

@media all and (max-width: 874px) {
    #animationsContainer {
        display: none
    }
}

@media all and (max-width: 599px) {
    .homePromos {
        width: 325px;
        float: none;
        margin: 0 auto
    }
}

#videos .contentContainer {
    width: 880px
}

#videos .fancyBorder {
    width: 100%
}

.video-categories {
    text-align: center;
    margin-bottom: 10px
}

.video-categories button, .video-categories button span {
    background: url('../images/videoPlayer/videoButtons.png?v=1') no-repeat transparent;
    width: 168px;
    height: 50px;
    padding: 0
}

.video-categories button.selected, .video-categories button:hover {
    background-position: 0 -50px
}

.video-categories button:active {
    background-position: 0 -100px
}

.video-categories button span {
    text-indent: -9999em;
    display: block
}

#category-all span {
    background-position: -168px 0
}

#category-episodes span {
    background-position: -168px -50px
}

#category-clips span {
    background-position: -168px -100px
}

#category-music span {
    background-position: -168px -150px
}

#category-math-bath span {
    background-position: -168px -200px
}

#category-all:active span {
    background-position: -336px 0
}

#category-episodes:active span {
    background-position: -336px -50px
}

#category-clips:active span {
    background-position: -336px -100px
}

#category-music:active span {
    background-position: -336px -150px
}

#category-math-bath:active span {
    background-position: -336px -200px
}

.playlist {
    float: left;
    width: 186px;
    text-align: center;
    margin: 0 10px 0 0
}

#videoContainer {
    float: left;
    width: 684px;
    height: 472px
}

.playlist button {
    border: 0;
    background: url('../images/buttons.png?v=1') no-repeat;
    width: 90px;
    height: 46px;
    text-indent: -9999em;
    margin: 8px 0;
    overflow: hidden
}

.playlist .prevPage {
    background-position: 0 -276px
}

.playlist .nextPage {
    background-position: -90px -276px
}

.playlist .prevPage:hover {
    background-position: 0 -322px
}

.playlist .nextPage:hover {
    background-position: -90px -322px
}

.playlist .prevPage:active {
    background-position: 0 -368px
}

.playlist .nextPage:active {
    background-position: -90px -368px
}

.playlist .prevPage.disabled {
    background-position: 0 -415px
}

.playlist .nextPage.disabled {
    background-position: -90px -415px
}

#videoPlaylistWrapper {
    width: 100%;
    overflow: hidden;
    height: 408px;
    position: relative
}

#videoPlaylistWrapper ul#videoPlaylist {
    margin: 0;
    padding: 0;
    width: 100%;
    list-style: none;
    display: block;
    position: absolute !important
}

.playlist.loading #videoPlaylist, .playlist.loading button {
    visibility: hidden
}

#videoPlaylist li {
    height: 113px;
    margin-bottom: 6px
}

.videoPlaylistItem .new-label {
    width: 40px;
    height: 40px;
    position: absolute;
    right: 0;
    z-index: 100;
    display: none
}

.videoPlaylistItem.new-video .new-label, .videoPlaylistItem.episode .fullep-label {
    display: block
}

.videoPlaylistItem .fullep-label {
    background-color: rgba(0, 0, 0, 0.5);
    bottom: 1.5em;
    color: #fff;
    font-weight: bold;
    display: block;
    text-align: center;
    padding: .2em 0;
    position: relative;
    z-index: 99;
    display: none
}

.videoPlaylistItem .thumbnail {
    width: 170px;
    height: 110px;
    position: absolute
}

.borderimage .videoPlaylistItem .thumbnail {
    height: 113px
}

.videoPlaylistItem img.googlethumbnail {
    margin: 0 auto;
    width: 154px;
    height: 94px;
    border-radius: 5px
}

.borderimage .videoPlaylistItem img.googlethumbnail {
    height: 92px
}

.videoPlaylistItem .video-info {
    background-color: #36d9b8;
    color: #fff;
    font-size: 80%;
    position: absolute;
    z-index: 101;
    width: 150px;
    padding: 3px 0;
    pointer-events: none;
    margin: 10px;
    line-height: 1.2;
    opacity: 0;
    filter: alpha(opacity=0)
}

.videoPlaylistItem:hover .video-info {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transition: all .2s linear
}

.video-duration {
    color: #0b999f
}

.video-duration:before {
    content: "("
}

.video-duration:after {
    content: ")"
}

#videoPlaylist-iScrollContainer {
    height: 100%
}

#videoPlaylist-iScrollContainer .appendingIndicator-container {
    color: #ff9545;
    text-align: center;
    padding: 10px 0
}

#videoPlaylist-iScrollContainer .appendingIndicator-container .appending-indicator {
    display: inline-block;
    zoom: 1;
    *display: inline;
    margin: 0 10px 0 0;
    vertical-align: middle
}

#videoPlaylist-iScrollContainer .appendingIndicator-container span {
    margin-right: 5px
}

#videoPlaylist-iScrollContainer .scrollbarV {
    float: right;
    height: 100%;
    width: 10px;
    margin-right: 3px;
    position: relative;
    z-index: 100
}

#videoPlaylist-iScrollContainer .scrollbarV div {
    background: #df7645;
    border-radius: 10px
}

#videoPlaylist .showmoreVideos {
    background: none repeat scroll 0 0 #4ad8b9;
    color: #fff;
    font-weight: bold;
    padding: 12px 0;
    text-align: center;
    text-transform: uppercase;
    height: auto;
    width: 170px;
    border-radius: 6px
}

.loading-indicator, .appending-indicator {
    margin: 20px auto
}

@media all and (max-width: 1100px) {
    #videoContainer {
        width: 552px
    }

    .playlist {
        margin: 0
    }
}

@media all and (max-width: 874px) {
    #videoContainer {
        width: 384px
    }
}

@media all and (max-width: 599px) {
    #videoContainer {
        width: auto;
        left: 186px;
        right: 0;
        position: absolute
    }

    #videoFrame {
        background-color: #436eb6
    }
}

.nextActivity, .saveActivity {
    background: url('../images/buttons.png?v=1') no-repeat;
    border: 0;
    padding: 0;
    margin: 0 5px;
    width: 120px;
    height: 46px;
    text-decoration: none;
    display: block;
    float: left;
    overflow: hidden
}

.activityButtons .spacer {
    width: 120px;
    height: 46px;
    background: transparent
}

.saveActivity {
    background-position: -568px 0
}

.no-touch .saveActivity:hover {
    background-position: -568px -46px
}

.saveActivity:active {
    background-position: -568px -92px
}

.nextActivity {
    background-position: -568px -184px
}

.no-touch .nextActivity:hover {
    background-position: -568px -230px
}

.nextActivity:active {
    background-position: -568px -276px
}

.activity {
    position: relative
}

.activity .title {
    color: #fff;
    font-family: 'Nunito', sans-serif;
    font-size: 200%;
    padding: 5px 0 15px;
    text-align: center
}

.activity .cover img {
    width: 100%
}

.activityButtons {
    z-index: 1000;
    position: absolute;
    bottom: 8%;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 260px
}

@media all and (max-width: 599px) {
    .activity .title {
        color: #416fb7;
        font-size: 150%
    }

    .activity img {
        width: 100%
    }
}

#adventureFrame.titleLoading #adventureLoader {
    display: block
}

#adventureFrame.titleLoading #adventurePlaylistContainer {
    visibility: hidden
}

#adventureFrame #adventureLoader {
    display: none
}

#adventureFrame #adventurePlaylistContainer {
    visibility: visible
}

#adventureFrame #adventureTitleContainer {
    display: block
}

#adventureFrame.game #adventureTitleContainer, #adventureFrame.video #adventureTitleContainer, #adventureFrame.activity #adventureTitleContainer {
    display: none
}

#adventureFrame #adventureGameContainer, #adventureFrame #adventureVideoContainer, #adventureFrame #adventureActivityContainer {
    display: none
}

#adventureFrame #soundButton, #adventureFrame #captionsButton, #adventureFrame #helpButton {
    visibility: hidden
}

#adventureFrame.game #adventureGameContainer, #adventureFrame.video #adventureVideoContainer, #adventureFrame.activity #adventureActivityContainer {
    display: block
}

#adventureFrame.game #soundButton, #adventureFrame.game #captionsButton, #adventureFrame.game #helpButton {
    visibility: visible
}

.adventureContent {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 0
}

#adventurePlaylist {
    width: 100%;
    height: 135px;
    background-color: #3f6eba;
    position: absolute;
    z-index: 100;
    bottom: 0;
    pointer-events: all;
    overflow: hidden
}

#adventurePlaylist ul {
    list-style: none;
    margin: 15px 0 0 0;
    padding: 0;
    position: absolute;
    left: 0;
    white-space: nowrap
}

#adventurePlaylist li {
    display: inline-block;
    margin: 0;
    width: 180px
}

#adventurePlaylist a .icon {
    display: block;
    position: absolute;
    left: -3px;
    bottom: -2px;
    width: 38px;
    height: 38px;
    text-indent: -9999em;
    background: url('../images/adventureIcons.png?v=1') no-repeat 0 0
}

#adventurePlaylist a .video.icon {
    background-position: 0 0
}

#adventurePlaylist a:active .video.icon, #adventurePlaylist a.current .video.icon, .no-touch #adventurePlaylist a:hover .video.icon {
    background-position: 0 -38px
}

#adventurePlaylist a .game.icon {
    background-position: -38px 0
}

#adventurePlaylist a:active .game.icon, #adventurePlaylist a.current .game.icon, .no-touch #adventurePlaylist a:hover .game.icon {
    background-position: -38px -38px
}

#adventurePlaylist a .activity.icon {
    background-position: -76px 0
}

#adventurePlaylist a:active .activity.icon, #adventurePlaylist a.current .activity.icon, .no-touch #adventurePlaylist a:hover .activity.icon {
    background-position: -76px -38px
}

#adventurePlaylist a.game {
    border-color: #5f1d59;
    background-color: #9c3bb4
}

#adventurePlaylist a.game img {
    border-color: #9c3bb4
}

#adventurePlaylist a.video {
    border-color: #29267b;
    background-color: #5489df
}

#adventurePlaylist a.video img {
    border-color: #5489df
}

#adventurePlaylist a.activity {
    border-color: #0c4f54;
    background-color: #37d6df
}

#adventurePlaylist a.activity img {
    border-color: #37d6df
}

#adventurePlaylist a:active, .no-touch #adventurePlaylist a:hover, #adventurePlaylist a.current {
    border-color: #4dffd8;
    background-color: #fff
}

#adventurePlaylist a:active img, .no-touch #adventurePlaylist a:hover img, #adventurePlaylist a.current img {
    border-color: #fff
}

.borderimage #adventurePlaylist a {
    background-color: transparent;
    border-color: transparent
}

.borderimage #adventurePlaylist a.game {
    border-image: url('../images/adventureGame.png?v=1') 10 fill stretch;
    -webkit-border-image: url('../images/adventureGame.png?v=1') 10 stretch;
    -moz-border-image: url('../images/adventureGame.png?v=1') 10 fill stretch;
    -ms-border-image: url('../images/adventureGame.png?v=1') 10 fill stretch;
    -o-border-image: url('../images/adventureGame.png?v=1') 10 fill stretch
}

.borderimage #adventurePlaylist a.video {
    border-image: url('../images/adventureVideo.png?v=1') 10 fill stretch;
    -webkit-border-image: url('../images/adventureVideo.png?v=1') 10 stretch;
    -moz-border-image: url('../images/adventureVideo.png?v=1') 10 fill stretch;
    -ms-border-image: url('../images/adventureVideo.png?v=1') 10 fill stretch;
    -o-border-image: url('../images/adventureVideo.png?v=1') 10 fill stretch
}

.borderimage #adventurePlaylist a.activity {
    border-image: url('../images/adventureActivity.png?v=1') 10 fill stretch;
    -webkit-border-image: url('../images/adventureActivity.png?v=1') 10 stretch;
    -moz-border-image: url('../images/adventureActivity.png?v=1') 10 fill stretch;
    -ms-border-image: url('../images/adventureActivity.png?v=1') 10 fill stretch;
    -o-border-image: url('../images/adventureActivity.png?v=1') 10 fill stretch
}

.borderimage #adventurePlaylist a:active, .borderimage #adventurePlaylist a.current, .no-touch .borderimage #adventurePlaylist a:hover {
    border-image: url('../images/adventureActive.png?v=1') 10 fill stretch;
    -webkit-border-image: url('../images/adventureActive.png?v=1') 10 stretch;
    -moz-border-image: url('../images/adventureActive.png?v=1') 10 fill stretch;
    -ms-border-image: url('../images/adventureActive.png?v=1') 10 fill stretch;
    -o-border-image: url('../images/adventureActive.png?v=1') 10 fill stretch
}

#activityTitle, #adventureTitle {
    margin: 0 auto;
    display: block;
    height: auto;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

#adventureLoader {
    display: block;
    position: absolute;
    left: 50%;
    top: 75%;
    margin: -7px 0 0 -64px;
    opacity: .7
}

#catAnimation {
    width: 187px;
    height: 220px;
    position: absolute;
    z-index: 102;
    background: url('../images/catAnimation.png?v=1') no-repeat 0 0;
    top: 100%;
    left: 50%;
    margin: -180px 0 0 -93px;
    pointer-events: none
}

#adventurePlaylistContainer {
    pointer-events: none;
    position: absolute;
    z-index: 100;
    width: 100%;
    bottom: 0
}

#togglePlaylist {
    position: absolute;
    left: 50%;
    top: 100%;
    margin: -15px 0 0 -45px;
    z-index: 101;
    border: 0;
    background: url('../images/buttons.png?v=1') no-repeat;
    background-color: transparent;
    width: 90px;
    height: 46px;
    text-indent: -9999em;
    pointer-events: all;
    background-position: -477px 0
}

#togglePlaylist.active {
    background-position: -477px -184px;
    margin-top: -170px
}

.no-touch #togglePlaylist:hover {
    background-position: -477px -46px
}

.no-touch #togglePlaylist.active:hover {
    background-position: -477px -230px
}

#togglePlaylist:active {
    background-position: -477px -92px
}

#togglePlaylist.active:active {
    background-position: -477px -276px
}

#togglePlaylist.disabled {
    background-position: -477px -138px
}

#togglePlaylist.active.disabled {
    background-position: -477px -323px
}

@media all and (max-width: 874px) {
    #adventureFrame {
        width: 100%
    }
}

@media all and (max-width: 599px) {
    #adventureFrame {
        top: 44px
    }

    #adventurePlaylistContainer {
        margin: 0
    }

    #adventureContent #controlRack {
        bottom: 0
    }

    #adventures .footerInfo .localization {
        margin-top: 20px
    }
}

form, form * {
    -webkit-touch-callout: default;
    -webkit-user-select: all;
    -khtml-user-select: all;
    -moz-user-select: all;
    -ms-user-select: all;
    user-select: all
}

.admin {
    max-width: 1200px;
    border: 0;
    margin: 0 auto;
    border-radius: 0;
    background: transparent
}

.admin header {
    margin: 0;
    width: auto
}

.formContainer {
    border-radius: 10px;
    border: 2px solid #a9b6b3;
    background: #e3ebe8;
    margin: 0 auto 20px
}

.formContainer form {
    border-top: 2px solid #fff;
    padding: 30px;
    border-radius: 10px
}

.loginForm {
    width: 400px
}

.admin nav {
    width: 200px;
    padding-right: 0
}

.adminContent {
    margin-left: 200px
}

.adminContent h1 {
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    padding: 0;
    margin: 0 0 20px;
    font-size: 250%;
    line-height: 1
}

.admin nav ul {
    list-style: none;
    padding: 10px;
    margin: 0 20px 0 0;
    background-color: #2a9bca;
    border: 1px solid #0b446c;
    border-bottom-width: 2px;
    border-radius: 8px
}

.admin nav ul.custom {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: 1px solid #0b446c;
    margin-bottom: 0
}

.admin nav ul.builtIn {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top-color: #90bedf
}

.admin nav a {
    text-decoration: none;
    display: block;
    color: #fff;
    padding: 5px;
    border-radius: 4px;
    margin: 2px 0;
    border-top: 1px solid #2a9bca;
    border-bottom: 1px solid #2a9bca;
    overflow: hidden
}

.admin nav aed, .admin nav a:hover {
    background-color: #0b446c;
    border-top-color: #08283f;
    border-bottom-color: #90bedf
}

.admin header {
    text-align: right;
    padding: 5px 10px
}

a.adminBack {
    display: block;
    margin-bottom: 20px;
    font-size: 120%
}

form textarea {
    min-height: 100px
}

.admin .date, .admin textarea, .admin select, .admin .password, .admin .text {
    color: #333;
    font-size: 120%;
    padding: 7px;
    border: 1px solid #bbb;
    border-top-width: 2px;
    margin-bottom: 5px;
    background-color: #fff;
    border-radius: 5px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none
}

form select {
    background-image: url('../images/arrow.png?v=1');
    background-repeat: no-repeat;
    background-position: center right
}

.admin .button, .admin .submit, .admin .clear {
    background-color: #2a9bca;
    color: #fff !important;
    border: 1px solid #0b446c;
    border-bottom-width: 2px
}

.admin .button.small, .admin .submit.small, .admin .clear.small {
    font-size: 100%;
    padding: 6px 20px
}

.admin .button:hover, .admin .submit:hover, .admin .clear:hover {
    background-color: #ae2a48;
    border-color: #751a2d
}

form textarea.disabled, .admin .button.disabled, .admin .submit.disabled, .admin .clear.disabled {
    color: #4a5e62 !important;
    background-color: #b7bfc0 !important;
    border-color: #5d747e !important;
    cursor: default
}

form textarea:hover, form select:hover, form .password:hover, form .text:hover, form .select:hover, input.over {
    background-color: #ffc
}

form input.error {
    color: #4f1111;
    background-color: #ff7575 !important;
    border-color: #4f1111 !important
}

form input.disabled {
    color: #4a5e62 !important;
    background-color: #b7bfc0 !important;
    border-color: #5d747e !important;
    cursor: default
}

.optional {
    background-color: #eee
}

legend {
    margin-bottom: 20px;
    text-align: center;
    font-size: 120%
}

.formRow {
    min-height: 35px
}

.formRow label {
    float: left;
    display: block;
    width: 30%;
    padding-top: 6px;
    color: #999;
    font-size: 16px
}

.formButtons {
    padding: 10px 10px 0;
    text-align: center
}

.forgotError, .forgotSuccess, .tempPassword {
    text-align: center
}

.tempPassword {
    font-size: 140%;
    font-weight: bold
}

.forgotError {
    color: #c00;
    font-weight: bold
}

.forgotError, .forgotSuccess {
    padding-top: 20px
}

.loginForm .forgot {
    padding-top: 10px
}

.loginForm .forgot, .loginForm .remember {
    text-align: center;
    font-size: 90%
}

.formRow {
    margin-bottom: 5px
}

ul.formError, ul.formError a {
    color: #c00 !important
}

ul.formError a, ul.formSuccess a {
    font-weight: bold
}

ul.formSuccess, ul.formSuccess a {
    color: #06c !important
}

ul.formError, ul.formSuccess {
    padding: 0 0 0 20px;
    margin: 0 0 20px;
    font-weight: 700;
    line-height: 120%;
    list-style: disc
}

table {
    width: 100%;
    background: #fff;
    border: 1px solid #999;
    border-radius: 5px;
    margin-bottom: 15px
}

tfoot td, th {
    background-color: #ccc;
    color: #999;
    padding: 4px;
    border-bottom: 1px solid #999
}

tfoot td {
    text-align: center
}

tfoot td a {
    text-decoration: underline;
    color: #333;
    cursor: pointer
}

tfoot td a:hover {
    text-decoration: none
}

th span {
    display: none
}

tbody tr td {
    padding: 4px;
    border-bottom: 1px solid #ccc;
    color: #666
}

tbody tr:last-child td {
    border-color: #999
}

tbody tr:nth-child(2n) td {
    background-color: #eee
}

tbody tr:nth-child(2n+1) td {
    background-color: #fff
}

tbody tr.over td {
    background-color: #fffdbe
}

tbody tr.selected td {
    background-color: #ffdbab
}

tbody tr.selected.over td {
    background-color: #fcdfb9
}

.configUpdate form:not(:first-child) {
    border: 0
}

.configUpdate ul.formError, .configUpdate ul.formSuccess {
    margin-bottom: 10px
}

.configUpdate form {
    padding: 10px;
    margin: 0
}

.configUpdate .formRow {
    margin-bottom: 0
}

.configUpdate label, .configUpdate .text, .configUpdate .submit, .configUpdate .button {
    float: left;
    margin: 0 !important;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.configUpdate .text {
    width: 45%;
    font-size: 100%;
    overflow: hidden
}

.configUpdate label {
    width: 30%
}

.configUpdate .submit, .configUpdate .button {
    width: 11%;
    padding: 8px 0 !important;
    margin: 0 0 0 1% !important;
    font-size: 100% !important
}

.formScheduleRemove .start, .formScheduleRemove .stop, .formScheduleRemove .position {
    text-align: center;
    width: 20%
}

.formScheduleRemove .scheduleId {
    width: 30px;
    text-align: center
}

ul.reorderItems {
    list-style-type: none;
    margin: 0 0 15px;
    padding: 0;
    width: 100%
}

ul.reorderItems li {
    float: left;
    width: 50%;
    cursor: move
}

ul.videoItems {
    list-style: none;
    padding: 0;
    margin: 0 0 15px
}

ul.videoItems li {
    width: 100%;
    float: none
}

.reorderItem {
    margin: 5px
}

.reorderItem form {
    padding: 20px
}

.reorderItem .name {
    width: 70%;
    float: left;
    white-space: nowrap;
    overflow: hidden;
    padding-top: 5px;
    color: #999;
    font-size: 120%
}

.reorderItem .editForm {
    float: right
}

.reorderItem .editForm button {
    width: 100%
}

.videoItems .reorderItem form {
    padding: 10px
}

.videoItems .reorderItem .name {
    width: 80%
}

.videoItems .reorderItem .editForm {
    width: 20%
}

.reorderItemHighlight {
    background-color: transparent;
    line-height: 1em;
    border-radius: 10px;
    border: 1px dotted #999;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height: 96px
}

ul.adventureItems {
    list-style: none;
    padding: 5px 0;
    margin: 0;
    float: left;
    width: 50%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow: auto;
    height: 400px;
    background-color: #a9b6b3
}

ul.adventureItems li {
    position: relative;
    margin: 3px 5px;
    background-color: #fff;
    border-radius: 5px;
    padding: 5px 15px;
    font-size: 90%;
    color: #333;
    cursor: move
}

ul.adventureItems li input {
    margin-right: 10px
}

ul.adventureItems li .label {
    font-size: 70%;
    position: absolute;
    text-transform: uppercase;
    color: #fff;
    top: 0;
    right: 5px;
    padding: 0 10px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px
}

ul.adventureItems li:hover {
    background-color: #ffc
}

ul.adventureItems li.unreleased {
    opacity: .6
}

ul.adventureItems li.game {
    background-color: #eefffe
}

ul.adventureItems li.game .label {
    background-color: #9ed4d2
}

ul.adventureItems li.video {
    background-color: #fdebff
}

ul.adventureItems li.video .label {
    background-color: #deb9e2
}

ul.adventureItems li.activity {
    background-color: #fce5c2
}

ul.adventureItems li.activity .label {
    background-color: #eac68d
}

ul.allItems .gameOptions {
    display: none
}

.adventureItemHighlight {
    background-color: transparent !important;
    border: 1px dotted #999 !important;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height: 38px
}

ul.currentItems li {
    border-color: #999
}

.items h3 {
    float: left;
    width: 50%;
    padding: 10px 0 0;
    margin: 0 0 15px;
    text-align: center;
    color: #999
}

.toggleAdd {
    margin-bottom: 20px
}

.assetChecker .overview {
    font-size: 150%;
    padding: 40px 0;
    border-radius: 10px;
    border: 2px solid #a9b6b3;
    background: #e3ebe8;
    margin-bottom: 20px
}

.assetChecker .overview div {
    width: 50%;
    margin: 0 auto;
    padding: 10px;
    color: #2a9bca;
    font-family: 'Nunito', sans-serif
}

.assetChecker .overview .total {
    font-weight: bold;
    float: right;
    background-color: #2a9bca;
    border-radius: 25px;
    color: #fff;
    padding: 5px;
    font-size: 80%;
    min-width: 50px;
    text-align: center;
    display: block;
    margin-top: -5px
}

.assetChecker .overview .failed {
    color: #c00
}

.assetChecker .overview .failed .total {
    background-color: #c00
}

.failedFiles {
    margin-bottom: 20px
}

.failedFiles .file {
    padding: 5px 5px 5px 100px;
    background-color: #fff;
    border-radius: 10px;
    margin-bottom: 8px;
    position: relative;
    line-height: 1.2;
    width: 100%
}

.failedFiles .type {
    width: 70px;
    background-color: #a00;
    color: #fff;
    padding: 14px 10px 0;
    text-align: center;
    text-transform: uppercase;
    font-size: 80%;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0
}

.failedFiles .name {
    font-weight: 700;
    color: #c00
}

.failedFiles .path {
    font-size: 80%;
    color: #999
}

@media all and (max-width: 1100px) {
    header.main, footer.main, #videos .contentContainer, #home .contentContainer {
        width: 738px;
        padding-right: 15px;
        padding-left: 15px
    }

    nav.main .logo {
        margin-right: 75px
    }

    .copyrightProducer {
        margin-left: 70px
    }

    #buildTime {
        display: none
    }

    .footerNav {
        height: 105px;
        width: 100%;
        text-align: center
    }
}

@media all and (max-width: 874px) {
    header.main, footer.main, #videos .contentContainer, #home .contentContainer {
        width: 570px
    }

    nav.main .brand {
        width: 60px
    }

    nav.main .logo {
        margin-left: 15px;
        margin-right: 0;
        width: 165px;
        padding-top: 40px;
        height: 60px
    }

    .copyrightProducer {
        margin-left: 10px;
        margin-right: 10px;
        width: 120px
    }

    .funding {
        font-size: 90%
    }

    .playerBranding {
        width: 200px
    }

    .playerControls .logo {
        width: 150px
    }

    .playerControls .brand {
        width: 40px;
        height: 40px;
        margin-right: 10px
    }

    #frame {
        padding-top: 0
    }
}

@media all and (max-width: 724px) {
    .copyrightProducer {
        display: none
    }

    .copyrightContent {
        text-align: center;
        float: none
    }

    .borderimage .footerInfo, .footerInfo {
        border-image: none;
        -webkit-border-image: none;
        -moz-border-image: none;
        -ms-border-image: none;
        -o-border-image: none;
        border: 0;
        border-radius: 0;
        border-top: 3px solid #f5d7a5;
        background-image: none;
        background-color: #fffceb;
        margin-bottom: 0;
        padding: 20px;
        width: 100%
    }

    body.hasPlayer footer.main .footerNav {
        display: none
    }

    .copyright {
        height: auto;
        width: auto;
        position: relative;
        padding: 25px 10px 10px;
        font-size: 70%
    }

    footer.main {
        width: 100%;
        padding: 0
    }

    footer.main .activitiesNav, footer.main .aboutNav {
        display: inline-block;
        float: none
    }

    footer.main .activitiesNav a, footer.main .aboutNav a {
        float: none
    }

    .footerNav div {
        float: none
    }

    .borderimage #rockBox, #rockBox, .no-flash #rockBox, .no-canvas #rockBox {
        position: relative;
        width: 100%;
        height: auto;
        top: 0;
        padding: 10px 10px 0 10px;
        background-color: #4abfa8;
        border: none;
        border-top: solid #276963 4px;
        background-image: none;
        border-image: none;
        -webkit-border-image: none;
        -moz-border-image: none;
        -ms-border-image: none;
        -o-border-image: none
    }

    #rockBox h3 {
        height: 48px;
        background-position: 0 -385px;
        float: left
    }

    #rockBox .rock {
        float: left
    }

    #borderBottom {
        margin-bottom: 0
    }
}

@media all and (max-width: 639px) {
    #moreApps {
        background-image: url('../images/appBanner_short.png');
        background-position: center center;
        width: 96%;
        height: 84px;
        max-width: 348px
    }
}

@media all and (max-width: 599px) {
    header.main, footer.main, #videos .contentContainer, #home .contentContainer {
        width: 100%;
        padding: 0
    }

    header {
        overflow: hidden
    }

    h1 {
        padding: 20px 20px 0;
        font-size: 200%
    }

    h2 {
        font-size: 130%;
        padding: 0 20px
    }

    #content p {
        padding: 0 20px;
        font-size: 110%
    }

    nav.main {
        text-align: center
    }

    nav.main ul {
        float: left;
        display: block;
        width: 100%
    }

    nav.main .brand {
        float: none;
        display: inline-block;
        height: auto;
        margin: 15px 10px 15px 0;
        padding: 0
    }

    nav.main .logo {
        float: none;
        display: inline-block;
        width: 248px;
        height: auto;
        padding: 0;
        margin: 0
    }

    article #contentWrapper {
        min-height: 0
    }

    article {
        margin-bottom: 0;
        min-height: 0
    }

    #background {
        background-image: none !important
    }

    #frame {
        min-height: none;
        width: auto
    }

    #adventureControls #helpButton, #gameControls #helpButton {
        width: 14%;
        margin-top: 0;
        height: 40px
    }

    #adventureControls #helpButton.disabled, #gameControls #helpButton.disabled {
        background-color: #bed2d7;
        border-color: #8997a0
    }

    #adventureControls #soundButton, #adventureControls #captionsButton {
        width: 38%
    }

    #closeButton {
        border-right: 0;
        width: 10%
    }

    .playerBranding {
        display: none
    }

    .playerFrame {
        padding: 0;
        top: 44px
    }

    nav.main ul {
        width: 100%;
        margin: 0;
        padding: 0;
        height: auto
    }

    nav.main ul li {
        width: 33.33%;
        height: auto
    }

    .fancyBorder {
        border: none !important;
        background: #436eb6
    }

    #rockUnlocked {
        margin: 0 auto
    }

    img.character {
        width: 40%
    }
}