@font-face {
    font-family: 'drseusslight';
    src: url("https://cms-tc.pbskids.org/cithwebsite/resources/fonts/drsel-webfont.woff2") format('woff2'),
         url("https://cms-tc.pbskids.org/cithwebsite/resources/fonts/drsel-webfont.woff") format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'drseussbold';
    src: url("https://cms-tc.pbskids.org/cithwebsite/resources/fonts/drsb-webfont.woff2") format('woff2'),
         url("https://cms-tc.pbskids.org/cithwebsite/resources/fonts/drsb-webfont.woff") format('woff');
    font-weight: normal;
    font-style: normal;
}

body {
    background-color: #9ef;
    font-family: "Lucida Sans",Verdana,Geneva,Helvetica,Arial,Tahoma,sans-serif;
    font-size: 1em;
    color:#3F829F;
    line-height:1.5;
	margin: 0px;
	padding: 0px;
    text-align:center;
    margin-left:auto;
    margin-right:auto;

    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    text-size-adjust: none;
}

a:link, #sitemap li > span {cursor: pointer; text-decoration: none; color: #229bc3;}
a:visited {text-decoration: none; color: #229bc3;}
a:active, #sitemap li > span:active {text-decoration: none; color: #0a489d;}
a:hover, #sitemap li > span:hover {text-decoration: underline; color: #0a489d;}

a img {border: 0px;}

/* HTML5 block-level reset for enhanced structural tag support in older browsers */
header, footer, section, aside, nav, article, figure, main {
	display: block;
	padding: 0;
	margin: 0;
}

/*
 * Main sections' size rules
 */
header, main, nav, footer {
	margin: auto;
	min-width: 18em;
}


/*
 * HEADER
 */
header#site-header {
	height: 10em;
	font-size: 1em;
	text-align: left;
	position: relative;
	z-index: 1;
}

.ready header#site-header {
	opacity: 1;
}

.small-site header#site-header, .medium-site header#site-header {
	font-size: 0.6em;
}

#pbs-kids-logo img {
    width: 7%;
    margin: 1em 1em 1em 3%;
    max-width: 5em;
}

.medium-site #pbs-kids-logo img, .small-site #pbs-kids-logo img {
    width: 5em;
}

#cithkalat-logo img {
    width: 30%;
    vertical-align: top;
    margin: 0;
    max-width: 20em;
}

.medium-site #cithkalat-logo img, .small-site #cithkalat-logo img {
    width: 20em;
}

aside#sponsors {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 1em;
    font-family: drseusslight;
    padding: 0.5em;
    color: #00516a;
    text-shadow: 0 0 0.2em #fff, 0 0 0.2em #fff, 0 0 0.2em #fff, 0 0 0.2em #fff;
}

aside#sponsors > span {
    font-size: 1.3em;
    padding-right: 0.3em;
}

.small-site aside#sponsors, .medium-site aside#sponsors {
	background: rgba(0,0,0,0.2);
	height: 3.6em;
	width: 100%;
	text-align: right;
	padding: 1em;
}

aside#sponsors ul {
    display: inline-block;
    margin: 0;
    padding: 0;
    vertical-align: top;
}

aside#sponsors li {
    display: inline-block;
    margin: 0 0.4em;
}

aside#sponsors a {
	cursor: pointer;
}

aside#sponsors img {
	max-width: 90px;
	max-height: 48px;
}

.small-site aside#sponsors img, .medium-site aside#sponsors img {
	max-width: 55px;
	max-height: 29px;
}

/*
 * NAVIGATION
 */
#site-navigation {
    background-image: url("https://cms-tc.pbskids.org/cithwebsite/resources/images/css/bg-nav.png");
    background-repeat: no-repeat;
    background-size: 130% 50%;
    background-position: 50% 100%;
	position: relative;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.large-site #site-navigation {
    background-size: 100% 50%;
}

#site-navigation ul {
    margin: 0;
    padding: 0;
}

#site-navigation li {
    display: inline-block;
    margin: 0 -0.2em;
    width: 23%;
    max-width: 8em;
    vertical-align: bottom;
}

#site-navigation li a {
    display: block;
    height: 0;
    padding-bottom: 98%;
    width: 100%;
    background-repeat: no-repeat;
    background-image: url("https://cms-tc.pbskids.org/cithwebsite/resources/images/css/navigation-english.png");
    background-size: 250%;
    white-space: nowrap;
    text-decoration: none;
    color: transparent;
    font-size: 0.1em;
}

#site-navigation li a.español {
    background-image: url("https://cms-tc.pbskids.org/cithwebsite/resources/images/css/navigation-spanish.png");
    background-size: 250%;
}

.button-boing:hover {
    -webkit-transform: scale(1.1, 1.1);
    -moz-transform: scale(1.1, 1.1);
    -ms-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1);
}

#site-navigation .button-boing:hover {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    transform: none;
}

#site-navigation li.extra-wide {max-width: 10em; width: 26%}
#site-navigation li.extra-wide a {background-size: 200%; padding-bottom: 76%;}

#nav-chars         {background-position:    0%  99%;}
#nav-chars:hover   {background-position:    0%  100%;}
#nav-chars.active-nav-item,
#nav-chars:active  {background-position:  100%  100%;}

#site-navigation li a#nav-games        {background-position:  8.5% 24%; padding-bottom: 75%;}
#site-navigation li a#nav-games:hover  {background-position:  8.5% 25%;}
#site-navigation li a#nav-games.active-nav-item,
#site-navigation li a#nav-games:active {background-position: 91.5% 25%;}

#site-navigation li a#nav-juegos        {background-position:  8.5% 24%; padding-bottom: 75%;}
#site-navigation li a#nav-juegos:hover  {background-position:  8.5% 25%;}
#site-navigation li a#nav-juegos.active-nav-item,
#site-navigation li a#nav-juegos:active {background-position: 91.5% 25%;}

#nav-video         {background-position:  8.5% 45%;}
#nav-video:hover   {background-position:  8.5% 46%;}
#nav-video.active-nav-item,
#nav-video:active  {background-position: 91.5% 46%;}

#nav-vídeo         {background-position:  8.5% 45%;}
#nav-vídeo:hover   {background-position:  8.5% 46%;}
#nav-vídeo.active-nav-item,
#nav-vídeo:active  {background-position: 91.5% 46%;}

#nav-print         {background-position:  8.5% 72%;}
#nav-print:hover   {background-position:  8.5% 73%;}
#nav-print.active-nav-item,
#nav-print:active  {background-position: 91.5% 73%;}

#site-navigation li a#nav-build            {background-image: url("https://cms-tc.pbskids.org/cithwebsite/resources/images/css/nav-build.png"); background-size: 100%; background-position: 50% 50%;}
#site-navigation li a#nav-build:hover      {background-image: url("https://cms-tc.pbskids.org/cithwebsite/resources/images/css/nav-build.png"); background-size: 100%; background-position: 50% 120%;}
#site-navigation li a#nav-build.active-nav-item,
#site-navigation li a#nav-build:active     {background-image: url("https://cms-tc.pbskids.org/cithwebsite/resources/images/css/nav-build-highlight.png"); background-size: 100%; background-position: 50% 120%;}

#site-navigation li a#nav-construir        {background-image: url("https://cms-tc.pbskids.org/cithwebsite/resources/images/css/nav-construir.png"); background-size: 100%; background-position: 50% 50%;}
#site-navigation li a#nav-construir:hover  {background-image: url("https://cms-tc.pbskids.org/cithwebsite/resources/images/css/nav-construir.png"); background-size: 100%; background-position: 50% 120%;}
#site-navigation li a#nav-construir.active-nav-item,
#site-navigation li a#nav-construir:active {background-image: url("https://cms-tc.pbskids.org/cithwebsite/resources/images/css/nav-construir-highlight.png"); background-size: 100%; background-position: 50% 120%;}

#site-navigation li.req-flash {display: none;}
#site-navigation li.req-mobile {display: none;}
#site-navigation li.req-desktop {display: none;}
.supports-flash #site-navigation li.req-flash {display: inline-block;}
.mobile-device #site-navigation li.req-mobile {display: inline-block;}
.desktop #site-navigation li.req-desktop {display: inline-block;}

#language-toggle > span {
    display: block;
    text-decoration: none;
    color: transparent;
    cursor: pointer;
    background-image: url("https://cms-tc.pbskids.org/cithwebsite/resources/images/css/navigation-english.png");
    background-size: 270%;
    background-position: 10% 0%;
    padding-bottom: 48%;
    font-size: 0.1em;
}
.in-english #site-navigation li.español,
.en-español #site-navigation li.english,
.in-english #site-navigation li > .español,
.en-español #site-navigation li > .english,
.in-english #language-toggle > span.español,
.en-español #language-toggle > span.english,
.in-english #sitemap li.español,
.en-español #sitemap li.english,
.in-english #sitemap li > .español,
.en-español #sitemap li > .english {
    display: none;
}

#language-toggle > span:hover   {background-position:   10% 0.25%;}
#language-toggle > span:active  {background-position: 89.5% 0.25%;}
#language-toggle > span.español {background-image: url("https://cms-tc.pbskids.org/cithwebsite/resources/images/css/navigation-spanish.png");}

li#language-toggle {
    max-width: 7em;
    width: 21%;
}

/**
 * MAIN SECTION
 */
main {
    min-height: 300px;
    position: relative;
    visibility: hidden;
    opacity: 0.01;

    -webkit-transition: opacity 0.5s linear;
    -moz-transition: opacity 0.5s linear;
    -ms-transition: opacity 0.5s linear;
    transition: opacity 0.5s linear;
}

.ready main {
    visibility: visible;
    opacity: 1;
}

main.content-overflow {
    position: static;
}

main.full-screen {
    height: 100% !important;
    width: 100%;
    background: black;
    position: absolute;
    top: 0;
    z-index: 10001;
}

main > object, main > embed, main > iframe {
    outline: medium none;
    border-image: url("https://cms-tc.pbskids.org/cithwebsite/resources/images/css/game-border.png") 6 stretch;
    border-width: 6px;
    border-style: outset;
    -webkit-transform-origin: center center;
    -moz-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
}

h1 {
    font-family: drseusslight;
    margin: 0 0 0.2em 0;
}

/*
 * Game Options
 */

.game-aside {
    position: absolute;
    z-index: 1;
}

.game-aside > div {
    width: 3em;
    height: 3.05em;
    float: right;
}
.game-aside > div > div {
    width: 100%;
    height: 100%;
}
.game-aside.stacked > div {
    float: none;
}
.game-aside .toggle {
    cursor: pointer;
    background-image: url("https://cms-tc.pbskids.org/cithwebsite/resources/images/css/game-buttons.png");
    background-size: 200%;
}
.medium-site .game-aside > div {width: 2em; height: 2.03em;}
.small-site .game-aside > div {width: 2em; height: 2.03em;}

#toggle-sound.muted {background-position: 0 0;}
#toggle-sound {background-position: 100% 0;}
#toggle-fullscreen {background-position: 100% 33.333%;}
.full-screen #toggle-fullscreen {background-position: 0 33.333%;}
#toggle-cc {background-position: 0 66.667%;}
#toggle-cc.unmuted {background-position: 100% 66.667%;}
#exit-game {background-position: 0 100%;}
#exit-game:active {background-position: 100% 100%;}

.game-aside > div.disabled {
    cursor: default;
}

/*
 * Footer
 */

footer {
    background-color: #FFE246;
    color: #333;
}

ul#sitemap {
	clear: both;
	padding: 1em;
	margin: 0;
	display: block;
    font-size: 0.9em;
    text-align: center;
    box-sizing: border-box;
}

ul#sitemap li {
    list-style-type: none;
    display: inline;
    white-space: nowrap;
}

ul#sitemap li:before {
content: " | ";
}

ul#sitemap li:first-child:before, ul#sitemap li#privacy-policy:before {
content: none;
}

#logoholder {
    text-align:center;
    margin: 0;
    padding: 1em;
}

#logos {
    margin: 1em;
    background: rgba(204, 102, 51, 0.15);
    border-radius: 2em;
}
#logos img {
    height: 4em;
    margin: 0.2em 1em;
}
#logos img#random-house-logo { /* To prevent bounds-break on vertical phones. */
    height: auto;
    width: 21.2em;
    max-width: 90%;
}
#logos > div {
    text-align: center;
    margin: 2em;
    display: inline-block;
    vertical-align: middle;
    font-weight: bolder;
    font-size: 0.7em;
}
div#pbskids-lab {
    margin: 0 2em;
}
#pbskids-lab img {
    height: 6em;
}

.tvtimes, .tvtimes:link, .tv-times:visited {
    display: block;
    text-decoration: none;
    color: transparent;
    cursor: pointer;
    background-image: url("https://cms-tc.pbskids.org/cithwebsite/resources/images/css/navigation-english.png");
    background-size: 250%;
    width: 150px;
    height: 67px;
    line-height: 30px;
    font-size: 0.1em;
    background-position: 9% 12%;
}
.tvtimes:active, .tvtimes:hover {color: transparent; background-position: 92% 12%;}
.tvtimes.español {background-image: url("https://cms-tc.pbskids.org/cithwebsite/resources/images/css/navigation-spanish.png");}

.in-english .tvtimes.español,
.en-español .tvtimes.english {
    display: none;
}


#privacy-policy {
    font-weight: bold;
    font-size: 1.1em;
    padding: 0 2em;
}


#topnav{ position:relative; width:100%; text-align:center; margin-left:auto; margin-right:auto;}

#lablogo { position:absolute; width:140px; height:140px; left:0; top:0; z-index:2; }

#copyright {
    text-align: center;
    font-size: 0.8em;
    padding: 1em 2em;
}

#copyright .trademark {
    margin-bottom: 1em;
}

.large-site #copyright .trademark {
    float: left;
    max-width: 32%;
    text-align: right;
    border-right: 2px solid #333;
    padding-right: 2em;
    box-sizing: border-box;
    margin-bottom: 0;
}

.large-site #copyright .agreement {
    padding-left: 2em;
    float: right;
    max-width: 68%;
    box-sizing: border-box;
    text-align: left;
}

hr {
    width: 30%;
    margin: auto;
    border: none;
    border-bottom: 2px solid #333;
    border-left: 2px solid transparent;
    border-right: 2px solid transparent;
    box-sizing: border-box;
}

/**
 * GAME PROGRESS BAR
 */
.game-loader {
    position: absolute;
    color: #fff;
    font-size: 2.5em;
    width: 30%;
    padding-bottom: 8%;
    left: 35%;
    top: 30%;
}
    
.game-loader > img {
    top: 0;
    position: absolute;
    left: 0;
    width: 100%;
}
    
.game-loader > div {
    background: #FFE28A;
    position: absolute;
    top: 39%;
    left: 9%;
    width: 67%;
    height: 19%;
    }
    
#loading-bar {
    width: 0%;
    height: 100%;
    background: #FC0335;
}