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;
}

#app {
    visibility: hidden;
    margin: auto;
    position: absolute;
    width: 1100px;
    font-size: 55px;
    
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
}

#app.wide-screen {
    height: 550px;
    margin-left: 5%;
}

#app.narrow-screen {
    height: 1815px;
    margin-left: 1%;
}

#player {
    width: 1100px;
    position: relative;
    top: 11px;
    z-index: 2;
    bottom: 27px;
    margin: 0;
    left: 0;
}

.wide-screen #player {
    position: absolute;

    -webkit-transform-origin: 50% 0;
    -moz-transform-origin: 50% 0;
    -ms-transform-origin: 50% 0;
    transform-origin: 50% 0;

    -webkit-transform: scale(0.6, 0.6);
    -moz-transform: scale(0.6, 0.6);
    -ms-transform: scale(0.6, 0.6);
    transform: scale(0.6, 0.6);
}

#player .frame {
    background:#FFF;
    border:solid 8px #FFF;
    border-radius: 16px;
    height: 682px;
}

#player #video-player {
    width: 1084px;
    height: 609px;
    padding: 0 0 0 0;
    background:#000;
    display: block;
}

#player .timer-remaining{
    color:#AECECE;
    font-size: 44px;
    font-family: Arial, sans-serif;
    width: 12%;
    margin-right: 2%;
    text-align: right;
    display: inline-block;
}

#player .scrubber{
    width: 73%;
    display: inline-block;
    margin: 9px 0;
    cursor: pointer;
}

#player .scrubber .scrubber-track{
    width: 100%;
    height: 5px;
    margin: 0;
    background-color:#AECECE;
    display:inline-block;
    vertical-align:middle;
    text-align:left;
}

#player .scrubber .scrubber-thumb{
    width: 66px;
    height: 66px;
    background:#FFF;
    border: solid 4px #AECECE;
    border-radius: 33px;
    position:relative !important;
    top: -35px;
    padding: 0;
}

#player #controlrack{
    margin:6px auto 0px;
    padding-bottom: 11px;
    text-align:center;
}

#player #controlrack span {
    padding-bottom: 10px;
    display:inline-block;
    border-radius:32px 32px  20px 20px;
}

#player #controlrack span.down{
    top: 10px;
    position:relative;
    padding-bottom: 0px;
}

.previous button {
    background-image: url(../media/images/videos_arrow.png);
    background-size: 200% 200%;
    background-repeat: no-repeat;
    width: 230px;
    height: 127px;
    padding: 0;
    background-color: transparent;
    color: transparent;
}

.next button {
    background-image: url(../media/images/videos_arrow.png);
    background-size: 200% 200%;
    background-repeat: no-repeat;
    width: 230px;
    height: 127px;
    padding: 0;
    background-color: transparent;
    color: transparent;
    background-position: 0 100%;
}

.previous button:active {
    background-position: 100% 0;
}

.next button:active {
    background-position: 100% 100%;
}

.play-pause button {
    background-image: url(../media/images/videos_play.png);
    background-size: 200%;
    background-repeat: no-repeat;
    background-position: 0 0;
    width: 343px;
    height: 127px;
    padding: 0;
    background-color: transparent;
    color: transparent;
}

.play-pause button:active {
    background-position: 100% 0;
}

.play-pause.playing button {
    background-position: 0 100%;
}

.play-pause.playing button:active {
    background-position: 100% 100%;
}

#captions-button{
    background-image: url(../media/images/videos_cc.png);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    width: 129px;
    height: 127px;
    padding: 0;
    background-color: transparent;
    color: transparent;
}

#captions-button:active {
    background-position: 100% 0;
}



div#main_content {
    height: 480px;
}

#playlist-wrapper, #group-wrapper {
    background: #FFF;
    position: relative;
    margin: 72px 7px 0 7px;
    font-size: 36px;
    vertical-align: top;
    left: 0;
    display: inline-block;
    top:  auto;
    bottom:  0;
    border-radius: 35px;
    overflow: hidden;
    width: 500px;
}

.wide-screen #playlist-wrapper, .wide-screen #group-wrapper {
    position: absolute;
    top: -20px;
    
    -webkit-transform: scale(0.46, 0.46);
    -moz-transform: scale(0.46, 0.46);
    -ms-transform: scale(0.46, 0.46);
    transform: scale(0.46, 0.46);
}

#playlist-wrapper {
    border: 21px solid #E87E21;
    width: 458px;
    height: 694px;

    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
}

#group-wrapper {
    background-color: #E87E21;
    height: auto;
    left: auto;
    right: 0;
    height: 736px;

    -webkit-transform-origin: 100% 0;
    -moz-transform-origin: 100% 0;
    -ms-transform-origin: 100% 0;
    transform-origin: 100% 0;
}

#group-wrapper li {
    background-image: url(../media/images/video_categories.png);
    background-size: 200% 500%;
    color: transparent;
    width: 429px;
    height: 132px;
    margin: 11px auto;
    border-radius: 30px;
    cursor: pointer;
}

#group-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

#clips                                    {background-position: 0    0;}
#clips:active, #clips.selected             {background-position: 100% 0;}
#discoveries                              {background-position: 0    25%;}
#discoveries:active, #discoveries.selected {background-position: 100% 25%;}
#music                                    {background-position: 0    50%;}
#music:active, #music.selected             {background-position: 100% 50%;}
#episodes                                 {background-position: 0    75%;}
#episodes:active, #episodes.selected       {background-position: 100% 75%;}
#all                                      {background-position: 0    100%;}
#all:active, #all.selected                 {background-position: 100% 100%;}

#now-playing-list-iScrollContainer{
  height: 100%;
}

#now-playing-list {
    width: 458px;
    margin: 0;
    padding: 0;
    background: #E87E21;
}

#now-playing-list .playlistItem{
    width: auto;
    padding: 16px 0 16px 16px;
    margin: 0;
    list-style: none;
    color: #fff;
    text-shadow: 0 0 9px #618704;
    font-size: 32px;
    cursor: pointer;
    overflow: hidden;
    clear: both;

    background: #cfdb34; /* Old browsers */
    background: -moz-linear-gradient(top, #cfdb34 0%, #a8b40d 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cfdb34), color-stop(100%,#a8b40d)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #cfdb34 0%,#a8b40d 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #cfdb34 0%,#a8b40d 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #cfdb34 0%,#a8b40d 100%); /* IE10+ */
    background: linear-gradient(to bottom, #cfdb34 0%,#a8b40d 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cfdb34', endColorstr='#a8b40d',GradientType=0 ); /* IE6-9 */
}

#now-playing-list .playlistItem:nth-child(odd) {
    background: #88ae2b; /* Old browsers */
    background: -moz-linear-gradient(top, #88ae2b 0%, #618704 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#88ae2b), color-stop(100%,#618704)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #88ae2b 0%,#618704 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #88ae2b 0%,#618704 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #88ae2b 0%,#618704 100%); /* IE10+ */
    background: linear-gradient(to bottom, #88ae2b 0%,#618704 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#88ae2b', endColorstr='#618704',GradientType=0 ); /* IE6-9 */
}

#now-playing-list .playlistItem:hover, #now-playing-list .playlistItem.selected {
    background: #ffef3d;
    background: -moz-linear-gradient(top, #ffef3d 0%, #d8c816 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffef3d), color-stop(100%,#d8c816));
    background: -webkit-linear-gradient(top, #ffef3d 0%,#d8c816 100%);
    background: -o-linear-gradient(top, #ffef3d 0%,#d8c816 100%);
    background: -ms-linear-gradient(top, #ffef3d 0%,#d8c816 100%);
    background: linear-gradient(to bottom, #ffef3d 0%,#d8c816 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffef3d', endColorstr='#d8c816',GradientType=0 );
}

.playlistItem .thumb-container{
    float: left;
    overflow: hidden;
    width: 154px;
    height: 118px;
}

.playlistItem .thumbnailkidsgodefault{
    width: 154px;
    height: 118px;
    border:0;
    vertical-align: top;
    background: #333;
    display: block;
}

.playlistItem .new-label,
.playlistItem .fullep-label
{
    display:none;
}

.playlistItem.new-video .new-label{
    display: inline-block;
    width: 60px;
    height: 60px;
    margin-bottom: -60px;
    float: right;
    position: relative;
}

.playlistItem.episode .fullep-label{
    background-color: #3899FF;
    bottom: 36px;
    color: #FFF;
    font-weight: bold;
    font-size: 23px;
    display: block;
    text-align: center;
    padding: 5px 0;
    position: relative;
}

.playlistItem .video-info {
    width: 269px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    float: left;
    padding-left: 12px;
    text-align: left;
}

.video-title {
    font-weight: bold;
}

.video-info .expiration{
    font-size: 26px;
    color: #ED6A42;
}


#now-playing-list .showmore-videos{
    background: none repeat scroll 0 0 #FF9537;
    color: #FFFFFF;
    font-weight: bold;
    padding: 12px 0;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
}


#now-playing-list-iScrollContainer .loading-indicator,
#now-playing-list-iScrollContainer .appending-indicator
{
    width:50px;
    height:50px;
    display:none;
    margin:20px auto;
}

#now-playing-list-iScrollContainer .appendingIndicator-container{
    color: #FF9545;
    text-align: center;
    padding:10px 0;
}

#now-playing-list-iScrollContainer .appendingIndicator-container .appending-indicator{
    display:inline-block;
    margin: 0 10px 0 0;
    vertical-align: middle;
}

#now-playing-list-iScrollContainer .appendingIndicator-container span{
    margin-right:5px;
}

#now-playing-list-iScrollContainer .scrollbarV {
    display: none;
}

#no-results-message{
    color: #6E8988;
    display: none;
    text-align: center;
    width: 90%;
    text-transform: uppercase;
    margin: 0 auto;
}

#no-results-message p{
    margin:1em 0;
}

#no-results-message a{
    color: #6E8988;
}


#scroll-up, #scroll-down {
    width: 100%;
    height: 60px;
    background: #FFCD3F;
    color: #FF7E1F;
    line-height: 36px;
    cursor: pointer;
    position: absolute;
    z-index: 1;
    box-shadow: 0 7px 6px rgba(0,0,0,0.4);
    display: none;

    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#scroll-down {
    bottom: 0;
    box-shadow: 0 -7px 6px rgba(0,0,0,0.4);
}

#scroll-up:hover, #scroll-down:hover {
    background: #FFFA99;
}

.scroll-arrow {
    background-image: url(../media/images/video-scroll-arrow.png);
    background-size: 100% 200%;
    background-repeat: no-repeat;
    width: 70px;
    height: 51px;
    left: 50%;
    position: absolute;
    margin-left: -35px;
    margin-top: 3px;
}

#scroll-up:hover .scroll-arrow,
#scroll-down:hover .scroll-arrow {
    background-position: 0 100%;
}

.scroll-arrow.up {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);

}