/*--------------------------------------------------
 *   ButtonCSS - ../game/css/button.css
 */
/*
 * This CSS file defines button styles for the initial play button and the in-game control buttons.
 *
 * The game engine can optionally scale the pixel value of "em", so ems are used in order to scale buttons to match the game's size. 
 */

/* This is the main menu play button */
.odd_squad_centigurps .menu-button {
	position: absolute;
	bottom: 2em;
	left: 15em;
	margin-left: -5em;
	width: 10em;
	height: 2.5em;
	text-align: center;
	cursor: pointer;
	background: url('../i/buttons.png') 0 66.667% no-repeat;
	background-size: 150% 400%;
	line-height: 2.5em;
	color: white;
	font-family: arial;
	font-weight: bold;
	font-size: 3.5em;
	
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
}
.odd_squad_centigurps .menu-button:active {
    background: url('../i/buttons.png') 0 100% no-repeat;
    background-size: 150% 400%;
}

/* The following styles determine in-game buttons, all of which use game-button as their base style */
.odd_squad_centigurps .game-button {
	width: 15em;
	height: 15em;
	z-index: 10;
	position: absolute;
}

.odd_squad_centigurps .jump-button {
	background-image: url('../i/buttons.png');
	background-position: 20% 0;
	background-repeat: no-repeat;
	background-size: 600%;
	bottom: 1em;
	right: 1em;
}

.odd_squad_centigurps .jump-center-button {
	background-image: url('../i/buttons.png');
	background-position: 20% 0;
	background-repeat: no-repeat;
	background-size: 600%;
	bottom: 1em;
	right: 17em;
	z-index: 11;
}

.odd_squad_centigurps .jump-left-button {
	background-image: url('../i/buttons.png');
	background-position: 80% 0;
	background-repeat: no-repeat;
	background-size: 600%;
	bottom: 1em;
	right: 33em;
}

.odd_squad_centigurps .jump-right-button {
	background-image: url('../i/buttons.png');
	background-position: 100% 0;
	background-repeat: no-repeat;
	background-size: 600%;
	bottom: 1em;
	right: 1em;
}

.odd_squad_centigurps .go-left-button {
	background-image: url('../i/buttons.png');
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: 600%;
	bottom: 1em;
	left: 1em;
}

.odd_squad_centigurps .go-right-button {
	background-image: url('../i/buttons.png');
	background-position: 40% 0;
	background-repeat: no-repeat;
	background-size: 600%;
	bottom: 1em;
	left: 17em;
}


.odd_squad_centigurps .grabbox-button {
	background-image: url('../i/buttons.png');
	background-position: 100% 66.666%;
	background-repeat: no-repeat;
	background-size: 600%;
	bottom: 1em;
	right: 17em;
}

.odd_squad_centigurps .grabbox-left-button {
	background-image: url('../i/buttons.png');
	background-position: 100% 66.666%;
	background-repeat: no-repeat;
	background-size: 600%;
	bottom: 1em;
	right: 49em;
}

.odd_squad_centigurps .mute-button {
	background: url('../i/buttons.png') 60% 33.333% no-repeat;
	background-size: 600%;
	top: -8em;
	right: 1em;
	width: 7em;
	height: 7em;
	z-index: 10;
	position: absolute;
	cursor: pointer;
}

.odd_squad_centigurps .mute-button-muted {
	background: url('../i/buttons.png') 60% 0% no-repeat;
	background-size: 600%;
	top: -8em;
	right: 1em;
	width: 7em;
	height: 7em;
	z-index: 10;
	position: absolute;
	cursor: pointer;
}

/* Since mobile HTML5 audio does not generally support mute, this button only shows on desktop and is smaller than the other game-buttons */
.odd_squad_centigurps .mute-button.released {
	background: url('../i/buttons.png') 60% 33.333% no-repeat;
	background-size: 600%;
	top: -8em;
	right: 1em;
	width: 7em;
	height: 7em;
	z-index: 10;
	position: absolute;
	cursor: pointer;
}
.odd_squad_centigurps .mute-button.pressed {
	background: url('../i/buttons.png') 60% 33.333% no-repeat;
	background-size: 600%;
	top: -8em;
	right: 1em;
	width: 7em;
	height: 7em;
	z-index: 10;
	position: absolute;
	cursor: pointer;
}

.odd_squad_centigurps .reset-button {
	position:absolute;
	top:0px;
	left:0px;
	color:green;
}

/*--------------------------------------------------
 *   MainCSS - ../game/css/main.css
 */
/*
 * The following set styles for the the game's wrapper page.
 */

.odd_squad_centigurps {
	background: #000000;
	padding: 0;
	margin: 0;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    -o-text-size-adjust: none;
    text-size-adjust: none;
    overflow: visible;
    overflow-x: visible;
}

.odd_squad_centigurps * {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -moz-tap-highlight-color:    rgba(0, 0, 0, 0);
    -ms-tap-highlight-color:     rgba(0, 0, 0, 0);
    -o-tap-highlight-color:      rgba(0, 0, 0, 0);
    tap-highlight-color:         rgba(0, 0, 0, 0);


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

.odd_squad_centigurps canvas {
    image-rendering: optimizeSpeed;             // Older versions of FF
    image-rendering: -moz-crisp-edges;          // FF 6.0+
    image-rendering: -webkit-optimize-contrast; // Webkit
                                                //  (Safari now, Chrome soon)
    image-rendering: -o-crisp-edges;            // OS X & Windows Opera (12.02+)
    image-rendering: optimize-contrast;         // Possible future browsers.
    -ms-interpolation-mode: nearest-neighbor;   // IE
}

.odd_squad_centigurps ::selection{ background-color: transparent;}
.odd_squad_centigurps ::moz-selection{ background-color: transparent;}
.odd_squad_centigurps ::webkit-selection{ background-color: transparent;}

.odd_squad_centigurps *::selection,*::moz-selection,*::webkit-selection{}

.odd_squad_centigurps .toggle-full-screen {
    cursor: pointer;
    font-family: arial;
    background: rgba(0,0,0,0.2);
    border-bottom-left-radius: 1em;
    border-bottom-right-radius: 1em;
    width: 10em;
    font-size: 1em;
    color: #fff;
    line-height: 1.9em;
    text-align: center;
    margin: auto;
    position: relative;
}


@font-face {
    font-family: 'impact';
    src: url('../f/impact-webfont.eot');
    src: url('../f/impact-webfont.eot?#iefix') format('embedded-opentype'),
         url('../f/impact-webfont.woff') format('woff'),
         url('../f/impact-webfont.ttf') format('truetype'),
         url('../f/impact-webfont.svg#impactregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@import url("//hello.myf.net/count/2b7410");


@font-face {font-family: 'refrigerator-deluxe';src: url('../f/2B7410_0_0.eot');src: url('../f/2B7410_0_0.eot?#iefix') format('embedded-opentype'),url('../f/2B7410_0_0.woff') format('woff'),url('../f/2B7410_0_0.ttf') format('truetype');}
@font-face {font-family: 'RefrigeratorDeluxe-Light';src: url('../f/2B7410_1_0.eot');src: url('../f/2B7410_1_0.eot?#iefix') format('embedded-opentype'),url('../f/2B7410_1_0.woff') format('woff'),url('../f/2B7410_1_0.ttf') format('truetype');}
@font-face {font-family: 'RefrigeratorDeluxe-Bold';src: url('../f/2B7410_2_0.eot');src: url('../f/2B7410_2_0.eot?#iefix') format('embedded-opentype'),url('../f/2B7410_2_0.woff') format('woff'),url('../f/2B7410_2_0.ttf') format('truetype');}
@font-face {font-family: 'RefrigeratorDeluxe-Heavy';src: url('../f/2B7410_3_0.eot');src: url('../f/2B7410_3_0.eot?#iefix') format('embedded-opentype'),url('../f/2B7410_3_0.woff') format('woff'),url('../f/2B7410_3_0.ttf') format('truetype');}

.odd_squad_centigurps .loading-audio {
    background-image: url("../i/LoadingAudio.png");
    width:100%;
    height:100%;
    position:absolute;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 9999;
}

/*--------------------------------------------------
 *   GameCSS - ../game/css/game.css
 */
/* This is the primary game-play region of the page */
.odd_squad_centigurps #root {
	width:       100%;
    height:      100%;
    position:    absolute;    
    background-color: black;
}

.odd_squad_centigurps .menu-canvas {
    width:39%;
    height: 10%;
}


.odd_squad_centigurps #root.supports-mobile {
	width:       97%;
    height:      97%;
    /*left: 5%;
    top:10%;*/
    position:    absolute;
    background-color: black;
}

.odd_squad_centigurps #inner-root {
    left:        50%;
    top:         50%;
    position:    absolute;
}

/* This is the canvas used by the handler-render-createjs component */
.odd_squad_centigurps #inner-root canvas {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
/* We change the render area to leave room for touch controls */
.odd_squad_centigurps .supports-mobile #inner-root canvas {
    height: 77%;
    width: 77%;
    left: 12%;
    right:12%;
    position:absolute;
    margin:auto;
    padding:0;
}

.odd_squad_centigurps .supports-mobile #inner-root #BGDiv {
    height: 77%;
    width: 77%;
    position:absolute;
    margin:auto;
    padding:0;
    left: 12%;
}

.odd_squad_centigurps .supports-mobile #energy-canvas {
    height: 77%;
    width: 77%;
    position:absolute;
    margin:auto;
    padding:0;
    left: 12%;
}


.odd_squad_centigurps #inner-root .menu-canvas {
    width: 39%;
    height: 11%;
}

.odd_squad_centigurps .supports-mobile #level-fail-canvas {
    height: 77%;
    width: 77%;
    position:absolute;
    margin:auto;
    padding:0;
    left: 12%;
}

.odd_squad_centigurps .supports-mobile #subtitles-canvas {
    height: 77%;
    width: 77%;
    position:absolute;
    margin:auto;
    padding:0;
    left: 12%;
}

.odd_squad_centigurps .supports-mobile #star-screen-canvas {
    height: 77%;
    width: 77%;
    position:absolute;
    margin:auto;
    padding:0;
    left: 12%;
}

/* This is the opening screen div used by the handler-render-dom component */
.odd_squad_centigurps .title-screen {
	position: absolute;
    width: 100%;
    height: 100%;
    background: url(../i/title-screen.jpg) no-repeat;
    background-size: 100% 100%;
}

/* This is the "Loading..." text in the opening scene */
.odd_squad_centigurps .progress-bar {
    top: 100%;
    z-index:10000;
    position: absolute;
    text-align: center;
    width: 100%;
    margin-top: -1.85em;
    text-shadow: 0.1em 0.1em 0.1em #000;
    font-size:3em;
    color:white;
    font-family: 'refrigerator-deluxe';
}


.odd_squad_centigurps .progress-bar-bg {
    background:url(../i/Loading_Bar.png);
    background-size: 80%;
    width:0%;
    height:3em;
    bottom:0.5em;
    position: absolute;
}

.odd_squad_centigurps .play-game-button
{
    position:absolute;
    width:19.7%;
    height:23.2%;
    bottom:0%;
    right:9.5%;
    z-index:10000;
    background:url(../i/play-button.png) no-repeat;
    background-size: cover;
    cursor: pointer;
}

/*--------------------------------------------------
 *   GUI CSS - ../game/css/gui.css
 */
/*
 *  The in-game GUI (apart from buttons, defined in button.css)
 */

.odd_squad_centigurps .energy-bar {
	position:absolute;
	left:200px;
	bottom:0;
	width:690px;
	height:50px;
	background: url('../images/energybar/energy-bg.png') no-repeat;
	background-size: 100%;

}

.odd_squad_centigurps .energy-icon {
	position:absolute;
	left:170px;
	bottom:0;
	width:20px;
	height:60px;
	background: url('../images/energybar/lightning-bolt.png') no-repeat;
	background-size: 100%;
}

.odd_squad_centigurps .energy-canvas {
	position:absolute;
	left:200px;
	bottom:0;
	width:1024px;
	height:768px;
	pointer-events: none;
}

.odd_squad_centigurps .level-fail-canvas {
	pointer-events: none;
}

.odd_squad_centigurps .star-screen-canvas {
	pointer-events:none;
}

.odd_squad_centigurps .subtitles-canvas {
	pointer-events:none;
}

.odd_squad_centigurps .gurpCount {
	position:absolute;
	right:70px;
	top:30px;
	font-size: x-large;
	font-weight: bold;
	background-color: white;
}

.odd_squad_centigurps .clock {
    position:absolute;
    right:0px;
    top:0px;
    width:2.83em;
    height:2.9em;
    background-size: 100%;
    padding:0.1em;
    padding-left:1.75em;
    padding-top:0.3em;
    font-size: 4em;
    font-weight: bold;
    color:#c638db;
    text-shadow: 2px 2px 5px #000000;
    font-family: 'refrigerator-deluxe';
    background-image: url('../images/UI/TimerBG.png');
}

.odd_squad_centigurps .clockIcon {
	position:absolute;
	background-image: url("../images/UI/ClockIcon.png");
	right:115px;
	top:15px;
	width:33px;
	height:39px;
	font-size:0;
}

.odd_squad_centigurps .clockJuiceBox1 {
	position:absolute;
	background-image: url("../images/UI/JuiceBox1Active.png");
	width:30px;
	height:39px;
	right:110px;
	top:75px;
	font-size:0;
}

.odd_squad_centigurps .clockJuiceBox2 {
	position:absolute;
	background-image: url("../images/UI/JuiceBox2Active.png");
	width:30px;
	height:39px;
	right:67px;
	top:75px;
	font-size:0;
}

.odd_squad_centigurps .clockJuiceBox3 {
	position:absolute;
	background-image: url("../images/UI/JuiceBox3Active.png");
	width:30px;
	height:39px;
	right:25px;
	top:75px;
	font-size:0;
}

/*--------------------------------------------------
 *   FullScreenCSS - ../game/css/fullscreen.css
 */
/**
 * This CSS file is used by js/fullscreen.js to make the game appear full-screen.
 */

.odd_squad_centigurps #root.full-screen {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    padding: 0;
}

.odd_squad_centigurps .button-fullscreen {
background: url('../i/buttons.png') 80% 66.666% no-repeat;
background-size: 600%;
top: -8em;
left: 1em;
width: 7em;
height: 7em;
z-index: 10;
position: absolute;
cursor: pointer;
}

.odd_squad_centigurps .full-screen .button-fullscreen {
background: url('../i/buttons.png') 80% 100% no-repeat;
background-size: 600%;
top: -8em;
left: 1em;
width: 7em;
height: 7em;
z-index: 10;
position: absolute;
cursor: pointer;
}

.odd_squad_centigurps .button-level-select {
	background: url('../images/back_button.png');
    background-size: 100%;
	width: 8.625em;
	height: 8.025em;
	top: 0.5em;
	left: 0.5em;
	position:absolute;
    cursor:pointer;
}

/*--------------------------------------------------
 *   pageVideoCSS - ../game/css/pageVideo.css
 */

/*	Video element container		*/


.odd_squad_centigurps #videoPlayer {
	position:absolute;
	z-index:9999;
	background-color: black;
}

.odd_squad_centigurps #videoPlayer object{
        position: relative;
}


/*	Video controls		*/


.odd_squad_centigurps #controlRack div.scrubber-track,
.odd_squad_centigurps #controlRack div.scrubber-thumb,
.odd_squad_centigurps #controlRack div.prevVideo,
.odd_squad_centigurps #controlRack div.playPause,
.odd_squad_centigurps #controlRack div.nextVideo,
.odd_squad_centigurps #controlRack div.enterFullScreen
{
	display : inline-block;
	zoom : 1;
	cursor : pointer;
}


.odd_squad_centigurps #controlRack .controlsRow .playbackControls {
	display : inline-block;
	width : 80%;
	text-align : center;
}


/*	.scrubber holds both the scrubber (.scrubber-thumb) and the track it moves on (.scrubber-track)	*/


/*	Playlist	*/


/*	Container that PBS will auto-populate with video thumbs */
.odd_squad_centigurps #nowPlayingList {
	list-style : none;
	white-space : nowrap;
	margin : 0px;
	padding : 0px;
	height : 500px;
	display : block;
}

/*	PBS-populated element containing the video's thumbnail and text description */


.odd_squad_centigurps .video-info {
	position : absolute;
	top : 0px;
	left : 0px;
	padding : 5px 5px;
	width : 100%;
	color : #f0ffff;
	font-weight : bold;
	display : none;
}


.odd_squad_centigurps .browsePlaylistsBtn,
.odd_squad_centigurps .scrollPlaylist_up,
.odd_squad_centigurps .scrollPlaylist_down {
	cursor : pointer;
}




/*	Playlist Browser	*/


.odd_squad_centigurps .browserPlaylist {
	display : block;
	width : 100%;
}

.odd_squad_centigurps .browserPlayList .playlistTitleTile {
	display : inline-block;
	width : 100px;
	height : 90px;
	border : 1px solid white;
	vertical-align : top;
}

.odd_squad_centigurps .browserPlaylistWrapper {
	display : inline-block;
}


.odd_squad_centigurps .browserPlaylist .scrollPlaylist_left,
.odd_squad_centigurps .browserPlaylist .scrollPlaylist_right {
	display : inline-block;
	cursor : pointer;
}