Board Thread:PBS Kids/@comment-31322722-20171012225821/@comment-31322722-20171012231208

And I have the css codes for PBS KIDS Halloween mode.

Part 1:

/* Headband override */ body.polaroid-halloween-theme div#headband-container, body.polaroid-halloween-theme div#headband-container #parents-message-bar .parents-message .more-toggle{ background-color: #ff991f; }

body.polaroid-halloween-theme div#headband-container .headband-nav{ background-color: #ffab46; }

body.polaroid-halloween-theme div#headband-container a, body.polaroid-halloween-theme div#headband-container .headband-nav .nav-item a, body.polaroid-halloween-theme div#headband-container #parents-message-bar .parents-message, body.polaroid-halloween-theme div#headband-container #headband-user-block { color: #d24405; }

body.polaroid-halloween-theme div#headband-container #parents-message-bar .for-parents-badge, body.polaroid-halloween-theme div#headband-container #parents-message-bar #squished-headband-toggle{ background-color: #d24405; border-color: #b03a06; }

body.polaroid-halloween-theme div#headband-container #parents-message-bar .parents-bar-bookmarks ul li .parents-bar-bookmark{ background-color: #ffab46; }

body.polaroid-halloween-theme #headband-container .headband-nav .nav-item.settings button[data-action=settings-trigger]{ background-image: url('../images/halloween-bar-settings.svg'); background-position: 50% 50% !important; }

.no-svg body.polaroid-halloween-theme #headband-container .headband-nav .nav-item.settings button[data-action=settings-trigger]{ background-image: url('../images/halloween-bar-settings.png'); }

/* Hompage Color Overrides */

.polaroid-halloween-theme{ background: #ff8a00; }

body.polaroid-halloween-theme .nav-buttons .phat-button, body.polaroid-halloween-theme .scroll-arrow.phat-button{ border-color: #3f0e68; background-color: #513993; }

body.polaroid-halloween-theme .nav-buttons .phat-button.tall{ padding: 0; }

body.polaroid-halloween-theme .nav-buttons .phat-button em{ padding: 20px 0 16px; border-bottom: 10px solid #3f0e68; margin-bottom: -10px; }

body.polaroid-halloween-theme .nav-buttons .phat-button.hovered em { border-bottom-width: 6px; }

body.polaroid-halloween-theme .nav-buttons .phat-button.tapped em, body.polaroid-halloween-theme .nav-buttons .phat-button.clicked em { border-bottom-width: 0px; }

body.polaroid-halloween-theme .nav-buttons .phat-button em:after{

}

body.polaroid-halloween-theme .theme-section .nav-buttons .phat-button:after{ width: 808px; height: 588px; pointer-events: none; }

body.polaroid-halloween-theme .theme-section .phat-button.left:after{ background: url('../images/halloween-web-left.png') left bottom no-repeat; left: -350px; }

body.polaroid-halloween-theme .theme-section .phat-button.right:after{ background: url('../images/halloween-web-right.png') left bottom no-repeat; right: -350px; }

@media only screen and (max-width: 775px){ body.polaroid-halloween-theme .theme-section .nav-buttons .phat-button:after{ width: 606px; bottom: 0px; }	body.polaroid-halloween-theme .theme-section .phat-button.right:after{ background-position: right bottom; right: -320px; }   body.polaroid-halloween-theme .theme-section .phat-button.left:after{ left: -320px; } }

body.polaroid-halloween-theme .grid-tabs .panel-head.toggle-flag.active, body.polaroid-halloween-theme .sub .grid-tabs .phat-button.show-all{ background-color: #ff8a00; }

body.polaroid-halloween-theme .sub .grid-tabs .phat-button.show-all{ border-color: #ec6705; }

body.polaroid-halloween-theme .grid-tabs .panel-head.toggle-flag.active:after{ border-top-color: #ff8a00; }

.polaroid-halloween-theme .theme-section #theme-stage .theme-mini-wrapper{ display: none; }

@media only screen and (max-width: 601px) { .polaroid-halloween-theme .theme-section #theme-stage .theme-mini-wrapper { display: block; } }

.polaroid-halloween-theme .brand { min-width: 100px; }

@media only screen and (min-width: 1600px) { .polaroid-halloween-theme .brand{ } }

.polaroid-halloween-theme .theme-section #theme-stage #change-up-controls{ top: 15%; }

.polaroid-halloween-theme #polaroid-theme-stage .snap-stage{ overflow: hidden; position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; }

.polaroid-halloween-theme #camera-svg{ position: absolute; width: 85px; height: 117px; left: 50%; margin-left: -42.5px; top: 50%; margin-top: -175px;

transform: scale(1.6); -ms-transform: scale(1.6); -webkit-transform: scale(1.6);

pointer-events: all; }

.polaroid-halloween-theme #camera-svg:hover{ cursor: pointer; }

.polaroid-halloween-theme #flash-svg{ position: absolute; z-index: 1; width: 400px; height: 400px; left: 50%; top: 50%; margin-left: -200px; margin-top: -260px;

display: none; }

.polaroid-halloween-theme #flash-svg.visible{ display: block; }

.polaroid-halloween-theme #camera-svg-stage > svg{ position: absolute; }

.polaroid-halloween-theme #theme-stage .theme-big-active .theme-fallback{ width: 100%; min-width: 600px; max-width: 950px; height: 400px; margin: 75px auto 0; position: relative; }

.polaroid-halloween-theme #theme-stage.static-mode .theme-big-active .theme-fallback{ display: block; }

.polaroid-halloween-theme #theme-stage.static-mode .theme-big-active .max-wrapper > svg{ display: none; }

.polaroid-halloween-theme .theme-fallback #fallback-headshots{ position: relative; width: 100%; height: 100%; }

.polaroid-halloween-theme .theme-fallback #fallback-headshots .headshot{ width: 215px; height: 215px; border: 30px solid #ffffff; position: absolute; top: 14px; background-color: #f41971; }

.polaroid-halloween-theme .theme-fallback #fallback-headshots .headshot .show-link{ display: block; width: 100%; height: 100%; }

.polaroid-halloween-theme .theme-fallback #fallback-headshots .headshot .show-link .show-title{ display:none; }

.polaroid-halloween-theme .theme-fallback #fallback-headshots .headshot .show-link .show-graphic{ width: 100%; height: 100%; }

.polaroid-halloween-theme .theme-fallback #fallback-headshots #headshot-two{ left: 50%; margin-left: -137.5px; background-color: #ffe000; }

.polaroid-halloween-theme .theme-fallback #fallback-headshots #headshot-three{ right: 0; background-color: #822778; }

/* Camera Specific Styles */ .polaroid-halloween-theme #camera-button{ transform: translateY(10px); -webkit-transform: translateY(10px); }

.polaroid-halloween-theme #camera-arrow{ stroke-width: 1; display: none; }

.polaroid-halloween-theme #camera-arrow{ stroke: #ff8a00; }

.polaroid-halloween-theme #camera-arrow.bouncing{ display: block;

animation:        arrow-bounce .75s linear infinite; -webkit-animation: arrow-bounce .75s linear infinite; }

@-webkit-keyframes arrow-bounce { 0% {	    transform: translateY(10px); -webkit-transform: translateY(10px); }	 80% {	   transform: translateY(0); -webkit-transform: translateY(0); }   100% {	    transform: translateY(10px); -webkit-transform: translateY(10px); } }

@keyframes arrow-bounce { 0% {	    transform: translateY(10px); -ms-transform: translateY(10px); }	 80% {	   transform: translateY(0); -ms-transform: translateY(0); }   100% {	    transform: translateY(10px); -ms-transform: translateY(10px); } }

/* Swap to static version */ @media only screen and (max-width: 601px) { .polaroid-halloween-theme .theme-section #theme-stage img.theme-mini-static{ margin-top: 15px; min-width: 400px; max-width: 450px; margin-left: 125px; }	.polaroid-halloween-theme .brand { min-width: 82px; }	#change-up-controls{ display: none; } }

@media only screen and (max-width: 525px) { .polaroid-halloween-theme .theme-section #theme-stage img.theme-mini-static{ margin-left: 70px; }	}

@media only screen and (max-width: 480px) { .polaroid-halloween-theme .theme-section #theme-stage img.theme-mini-static{ margin-top: 8px; margin-left: -22px; }	}

@media only screen and (max-width: 400px) { .polaroid-halloween-theme .theme-section #theme-stage img.theme-mini-static{ margin-top: 15px; }	}

@media only screen and (max-width: 360px) { .polaroid-halloween-theme .theme-section #theme-stage img.theme-mini-static{ margin-left: -80px; margin-top: 25px; }	}

@media only screen and (max-width: 1025px) { .polaroid-halloween-theme #camera-svg{ transform: scale(1.3); -ms-transform: scale(1.3); -webkit-transform: scale(1.3); top: 55%; } }

@media only screen and (max-width: 775px) { .polaroid-halloween-theme #camera-svg{ top: 40%; } }

@media only screen and (max-height: 680px) and (max-width: 825px) and (min-width: 602px) { .polaroid-halloween-theme .scroll-panel.theme-section { min-height: 356px; }   .polaroid-halloween-theme #camera-svg{ transform: scale(1.2); -ms-transform: scale(1.2); -webkit-transform: scale(1.2); top: 60%; } }

@media only screen and (max-height: 715px) and (max-width: 1025px) and (min-width: 826px) { .polaroid-halloween-theme .scroll-panel.theme-section { min-height: 440px; } }

@media only screen and (max-height: 730px) and (min-width: 1025px) and (max-width: 1230px){ .polaroid-halloween-theme .scroll-panel.theme-section { min-height: 480px; } }

@media only screen and (max-height: 730px) and (min-width: 1231px) and (max-width: 1381px){

.polaroid-halloween-theme .scroll-panel.theme-section { min-height: 515px; } }

@media only screen and (min-height: 841px) and (max-width: 850px){ }

@media only screen and (max-height: 840px) and (min-width: 1382px){ .polaroid-halloween-theme .scroll-panel.theme-section { min-height: 555px; } }

@media only screen and (max-height: 888px) and (max-width: 775px) and (min-width: 602px){ .polaroid-halloween-theme .scroll-panel.theme-section { height: 635px !important; } }

@media only screen and (min-height: 1100px) and (min-width: 1382px){ }

display: none; }
 * 1) no-flash-version,
 * 2) full-version{

.has-flash #full-version, .no-flash #no-flash-version{ display: block; }