@charset "utf-8";

.gv {display:inline-block; overflow:hidden; background-repeat: no-repeat;}

.hide { display:none; }
.show { display: block; }

#debugMenu {
	position:absolute;
	top: 10px;
	left: 400px;
	display:none;
}
.btnWhiteTextGrayShadow {
    width: 100%;
    text-align: center;
    font-size: 27px;
    line-height: 49px;
    color: white;
    font-weight: 400;
    font-weight: 400;
	text-shadow: 2px 2px 1px #919191;
}
.btnWhiteTextIconLeft {
    width: 150px;
    text-align: left;
    font-size: 21px;
    line-height: 59px;
    color: white;
    font-weight: 400;
    padding: 0 0 0 103px;
}
.blackTextTitle1 {
    text-align: center;
    font-size: 30px;
    line-height: 33px;
    color: black;
    font-weight: 900;
}
.blackTextNormal1 {
    width: 100%;
    text-align: center;
    font-size: 20px;
    line-height: 25px;
    color: black;
    font-weight: 400;
}
.btnLineHeight1 {
    line-height: 82px;
}

.score-value-pts {  }
.pts-text {  }

/* Title screen style */
#titleScreen 
{ 
	width: 853px; 
	height: 480px;
	z-index: 100;
}

#titleScreen #btn_setting {
	position: absolute;
    bottom: 20px;
	left:20px;
	z-index: 20;
}

#titleScreen #btn_play {
	position: absolute;
    bottom: 25px;
    left: 500px;
}
/* END Title screen style */



/*RESULT SCREEN*/

#resultScreen {
	width: 853px; 
	height: 480px;
	z-index: 600;
}

.img-flashSentry {
	position:absolute;
	left:10px;
	bottom:0px;
}

.firstText, .secondText, .thirdText { position: relative; width: 80%; text-align: center; left: 10%; font-size: 1.2rem; font-weight: 600; line-height: 23px;
	-webkit-transform: rotate(-2deg);
	-ms-transform: rotate(-2deg); 
	transform: rotate(-2deg); 
}
.thirdText { font-weight: 500; margin-top: 5px; }

.bubbleTextContainer { position: absolute; left: 50%; top: 43%; width: 80%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);  
	transform: translate(-50%, -50%); 
}

#bubble01 {
	display: block;
	position: absolute;
	left: 60px;
	top: 10px;
	z-index: 100;
}

#bubble02 {
	display:none;
	position:absolute;
    left: 143px;
    top: 19px;
	z-index:100;
}

#btn_restart
{
	position:absolute;
    right: 266px;
    bottom: 20px;
}

#btn_confirm
{
    position: absolute;
    top: 355px;
    left: 590px;
}

.results-group {
	position:absolute;
	right:91px;
	top:0px;
	width: 384px;
    height: 368px;
}
.fx-results-ray {
	position: absolute;
    right: 0px;
    top: -36px;
    z-index: -1;
}

#resultScreen .leftStar {
    position: absolute;
    left: 26px;
    top: 114px;
}

#resultScreen .middleStar {
    position: absolute;
    left: 111px;
    top: 45px;
}

#resultScreen .rightStar {
    position: absolute;
    left: 261px;
    top: 115px;
}


#commentsContainer
{
    position: absolute;
    top: 215px;
	left: 25px;
	width: 350px;
	text-align:center;
}

#comments {
	color: white;
    font-size: 1.8em;
    font-weight: bolder;
    text-shadow: 0px 4px 0px rgba(169,82,186,0.25);
}

#scoreContainer
{
    position: absolute;
    top: 265px;
	left: 25px;
	width: 350px;
	text-align:center;
}


#currentScore {
	position: absolute;
    width: 200px;
    left: 50%;
    margin-left: -100px;
    top: 5px;
    color: white;
}

#resultScreen .label {
	position: relative;
	right: 15px;
	width: 50%;
	text-align: right;
}

#resultScreen .currentPTS {
	width: 100%;
    position: absolute;
    left: calc( 50% + 15px );
    top: -1px;
	font-style: italic;
	text-align: left;
	font-size: 1rem;
}
#resultScreen .currentPTS .score-value-pts { font-size: 1.5em; }
#resultScreen .currentPTS .pts-text {  }

#resultScreen .img-results-separator {
    position: absolute;
    left: 10px;
    top: 40px;
}

#resultScreen #totalScore {
	position: absolute;
    width: 200px;
    top: 53px;
    left: 50%;
    margin-left: -100px;
    color: white;
    font-weight: 700;
}
 
.gift {
    position: absolute;
    top: 45%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

/* END RESULT SCREEN */



/*  MUSIC SELECTION SCREEN */


#mss_btn_back {
	position:absolute;
    left: 18px;
    top: 17px;
	z-index: 20;
}

#score_container {
	position: absolute;
    right: 28px;
    top: 25px;
    z-index: 21;
    color: white;
}

#mss_totalScore {
	text-align: right;
    position: absolute;
    font-weight: 700;
    display: block;
    width: 157px;
    top: 3px;
    text-shadow: 0px 3px rgba(0, 0, 0, 0.4);
	right: 10px;
    color: white;
}

#mss_scoreCount { 
	display: block; position: absolute; width: 154px; top: 30px; text-align: right; 
	font-style: italic; font-weight: 800; text-shadow: 0px 3px rgba(0, 0, 0, 0.4);
}
#mss_scoreCount .score-value-pts { font-size: 1.7rem; }
#mss_scoreCount .pts-text { font-size: 1.1rem; }

#mss_star_container { position: absolute; left: 50%; bottom: 10px; z-index: 20; text-align: center;
	-webkit-transform: translate(-50%, 0);
	-ms-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
}
#mss_star_container .mss-star { position: relative; display: inline-block; }

#mss_highScore { position: absolute; top: 15px; left: 0; width: 100%; text-align: center; }
#mss_highScore .text-label { position: absolute; width: 100%; top: 0; left: 0px; font-size: 1.1em; font-weight: 700; font-style: italic; color: white; }
#mss_highScore .text-score { position: absolute; width: 100%; top: 28px; left: 0px; font-size: 1.1em; font-weight: 700; color: white; }
#mss_highScore .text-score .pts-text { font-size: 0.75em;  }

#musicSelectionScreen .seperator {
	top: 340px;
	left: 249px;
}

#musicSelectionScreen .seperator02 {
	position:absolute;
    left: 249px;
	top: 403px;  
}

.SelectionDiskName {
	position: absolute;
    left: 261px;
    top: 344px;
    color: white;
    width: 340px;
    text-align: center;
    font-size: 1em;
    font-weight: bolder;
    font-style: italic;
    line-height: 26px;
}
.SelectionDiskName .album-name { font-size: 0.8em; font-weight: 500; }

.unselectSong {
    position: relative;
    left: 10%;
    top: -138px;
	color: white;
    width: 80%;
    text-align: center;
    font-size: 0.85em;
    font-weight: bolder;
    font-style: italic;
    line-height: 23px;
	opacity: 0.75;
    z-index: 21;
}
.unselectSong .album-name { font-size: 0.8em; font-weight: 500; }

#musicSelectionScreen 
{ 
	width: 853px; 
	height: 480px;
	z-index: 200;
}

#musicSelectionScreen #mss_btn_previous {
	position:absolute;
	top:200px;
	left:30px;
	z-index:1000;
	-webkit-transform: translate3d(0px,0px,1px);
	transform: translate3d(0px,0px,1px);
}

#musicSelectionScreen #mss_btn_next {
	position:absolute;
	top: 200px;
    left: 783px;
	z-index:1000;
	-webkit-transform: translate3d(0px,0px,1px);
	transform: translate3d(0px,0px,1px);
}

#musicSelectionScreen .owl-carousel {
	width: 853px;
    height: 429px;
	position: absolute;
	top: 89px;
}

#musicSelectionScreen #mss_btn_play {
	position:absolute;
	left: 650px;
	bottom: 25px;
	z-index:1000;
}

#musicSelectionScreen #mss_btn_play_lock {
	position:absolute;
	left: 650px;
	bottom: 25px;
	z-index:1000;	
}

#musicSelectionScreen #mss_btn_setting {
	position: absolute;
    bottom: 20px;
	left:20px;
	z-index: 20;
}

#musicSelectionScreen .owl-carousel .center {
	width:308px;
	height:429px;
}

#musicSelectionScreen .owl-carousel .center .item .ponyImage{
	background-size: 308px 429px;
	width:308px;
	height:429px;
	position:relative;
	right:20px;
}

.musicItem {
	width:140px;
	height:140px;
	position:relative;
	z-index:400;
	background-size: 140px 140px;
	left:65px;
	top:40px;
}

#musicSelectionScreen .icn-characterlock {
    left: 100px;
    top: 63px;
    -webkit-transform: scale(0.5);
	-ms-transform: scale(0.5);
	transform: scale(0.5);
}

#musicSelectionScreen .owl-carousel .center .item .icn-characterlock {
	left:105px;
	top: 69px;
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform:scale(1.0);
}

.ptsNeeded {
	position:relative;
    top: -224px;
	font-size:1.3em;
	color: white;
    font-weight: bolder;
	width: 100%;
    text-align: center;
    z-index: 400;
	font-style: italic;
	text-shadow: 2px 2px 1px #000;
}

.pts {
	position:relative;
	left:0px;
	top:0px;
	font-size:0.6em;
	color: white;
    font-weight: bolder;
}

#musicSelectionScreen .owl-carousel .center .item .musicItem{
	background-size: 210px 210px;
	width:210px;
	height:210px;
	position:relative;	
	top:31px;
	left:35px;
}

.music01Unlocked {
	background-image:url("../assets/html/img/resizable/img-song-unlocked-01.png");
}

.music01Locked {
	background-image:url("../assets/html/img/resizable/img-song-locked-01.png");
}

.music02Unlocked {
	background-image:url("../assets/html/img/resizable/img-song-unlocked-02.png");
}

.music02Locked {
	background-image:url("../assets/html/img/resizable/img-song-locked-02.png");
}

.music03Unlocked {
	background-image:url("../assets/html/img/resizable/img-song-unlocked-03.png");
}

.music03Locked {
	background-image:url("../assets/html/img/resizable/img-song-locked-03.png");
}

.music04Unlocked {
	background-image:url("../assets/html/img/resizable/img-song-unlocked-04.png");
}

.music04Locked {
	background-image:url("../assets/html/img/resizable/img-song-locked-04.png");
}

.music05Unlocked {
	background-image:url("../assets/html/img/resizable/img-song-unlocked-05.png");
}

.music05Locked {
	background-image:url("../assets/html/img/resizable/img-song-locked-05.png");
}



.disk01Unlocked {
	background-image:url("../assets/html/img/resizable/img-song-unlocked-01vinyl.png");
}

.disk01Locked {
	background-image:url("../assets/html/img/resizable/img-song-locked-01vinyl.png");
}

.disk02Unlocked {
	background-image:url("../assets/html/img/resizable/img-song-unlocked-02vinyl.png");
}

.disk02Locked {
	background-image:url("../assets/html/img/resizable/img-song-locked-02vinyl.png");
}

.disk03Unlocked {
	background-image:url("../assets/html/img/resizable/img-song-unlocked-03vinyl.png");
}

.disk03Locked {
	background-image:url("../assets/html/img/resizable/img-song-locked-03vinyl.png");
}

.disk04Unlocked {
	background-image:url("../assets/html/img/resizable/img-song-unlocked-04vinyl.png");
}

.disk04Locked {
	background-image:url("../assets/html/img/resizable/img-song-locked-04vinyl.png");
}

.disk05Unlocked {
	background-image:url("../assets/html/img/resizable/img-song-unlocked-05vinyl.png");
}

.disk05Locked {
	background-image:url("../assets/html/img/resizable/img-song-locked-05vinyl.png");
}

/* END MUSIC SELECTION SCREEN */

/* Selection screen style */

#selectionScreen .star {
	position: relative;
    left: 55px;
    bottom: -47px;
    z-index: 500;
    -webkit-transform: scale(0.60);
	-ms-transform: scale(0.60);
    transform: scale(0.60);
}

#viewsContainer #musicSelectionScreen .btn-next-over {
	left: 780px;
    top: 193px;
}

#viewsContainer #musicSelectionScreen .btn-prev-over {
	left: 25px;
    top: 193px;
}

#viewsContainer #selectionScreen .btn-next-over {
	left: 780px;
    top: 193px;
}

#viewsContainer #selectionScreen .btn-prev-over {
	left: 25px;
    top: 193px;
}


#selectionScreen .star span {
    position: relative;
    color: white;
    font-size: 1.5em;
    font-weight: bolder;
    left: 60px;
    top: 8px;
}

#selectionScreen .owl-carousel .center .item .star {
    position: relative;
    left: 43px;
    bottom: 110px;
    z-index: 500;
    -webkit-transform: scale(1.0);
	-ms-transform: scale(1.0);
	transform: scale(1.0);
}

#selectionScreen .owl-carousel .center .item .star span {
    position: relative;
    color: white;
    font-size: 1.5em;
    font-weight: bolder;
    left: 66px;
    top: 8px;
}

#selectionScreen 
{ 
	width: 853px; 
	height: 480px;
	z-index: 200;
}

#star_container {
	position:absolute;
	right: 34px;
	top: 25px;
	z-index:20;
}

#starCount {
	color: white;
    position: relative;
    left: 55px;
    top: 11px;
    font-size: 1.5em;
    text-shadow: 0px 3px rgba(0,0,0, 0.5);
    font-weight: 800;
}

.seperator {
	position:absolute;
    left: 229px;
    top: 379px;
}


.SelectionPonyName {
    position: absolute;
    width: 400px;
    text-align: center;
    left: 216px;
	top: 386px;
    font-weight: bolder;
    color: white;
    font-size: 1.6em;
	z-index:21;
	text-shadow: 
	-2px -2px 0 #865FBC,
	2px -2px 0 #865FBC,
	-2px 2px 0 #865FBC,
	2px 2px 0 #865FBC;
}

.SelectionPonyNameShadow {
    position: absolute;
    width: 400px;
    text-align: center;
    left: 216px;
    top: 390px;
    font-weight: bolder;
    color: #46217B;
    font-size: 1.6em;
	z-index:20;
	text-shadow: 
	-1.5px -1.5px 0 #46217B,
	1.5px -1.5px 0 #46217B,
	-1.5px 1.5px 0 #46217B,
	1.5px 1.5px 0 #46217B;
}

#selectionScreen #btn_previous {
	position:absolute;
	top:200px;
	left:30px;
	z-index:1000;
	-webkit-transform: translate3d(0px,0px,1px);
	transform: translate3d(0px,0px,1px);
}

#selectionScreen #btn_next {
	position:absolute;
	top: 200px;
    left: 783px;
	z-index:1000;
	-webkit-transform: translate3d(0px,0px,1px);
	transform: translate3d(0px,0px,1px);
}

#selectionScreen #btn_setting {
	position: absolute;
    bottom: 20px;
	left:20px;
	z-index: 20;
}

#selectionScreen #btn_play {
	position:absolute;
	left: 650px;
	bottom: 25px;
	z-index:1000;
}

#selectionScreen #btn_play_lock {
	position:absolute;
	left: 650px;
	bottom: 25px;
	z-index:1000;	
}

#selectionScreen .owl-carousel {
    width: 700px;
    height: 429px;
    position: absolute;
    left: 72px;
    top: 2px;
}

.mask-selection-left {
	position:absolute;
	left:0px;
	top:0px;
	z-index:10;
}

.mask-selection-right {
	position:absolute;
	right:-2px;
	top:0px;
	z-index:10;
}

.item {
	width: 100%;
	height: 321.75px;
}

.icn-characterlock {
	position:absolute;
	z-index:500;
    left: 71px;
    top: 180px;
    -webkit-transform: scale(0.5);
	-ms-transform: scale(0.5);
	transform:scale(0.5);
	/*width:59.25px;
	height:68.25px;
	background-size: 59.25px 68.25px;*/
}

#selectionScreen .owl-carousel .center .item .icn-characterlock {
	left: 75px;
    top: 170px;
    -webkit-transform: scale(1.0);
	-ms-transform: scale(1.0);
	transform:scale(1.0);
	/*width:67px;
	height:91px;
	background-size: 67px 91px;*/
}
	
.ponyImage {
	position:relative;
	z-index:400;
    background-size: 196.35px 273.5px;
    width: 196.35px;
    height: 273.5px;
	top: 102px;
}

#musicSelectionScreen .owl-carousel .center .disk {
	width: 176px;
    height: 176px;
    position: relative;
    bottom: 230px;
    left: 64px;
    background-size: 176px 176px;
}

#musicSelectionScreen .disk {
    width: 110px;
    height: 176px;
    position: relative;
    bottom: 80px;
    left: 84px;
    background-size: 110px 110px;
    background-repeat: no-repeat;
}

#musicSelectionScreen .owl-carousel .owl-stage-outer  {
    overflow: visible;
}

#selectionScreen .owl-carousel .owl-stage-outer  {
    overflow: visible;
}

#selectionScreen .owl-carousel .center {
	width:308px;
	height:429px;
}

#selectionScreen .owl-carousel .center .item .ponyImage{
	background-size: 308px 429px;
	width:308px;
	height:429px;
	position:relative;
	right: 55px;
	top: 0px;
}

.twilightsparkleunlocked {
	background-image: url("../assets/html/img/resizable/img-character-unlocked-twilightsparkle.png");
}

.twilightsparklelocked {
	background-image: url("../assets/html/img/resizable/img-character-locked-twilightsparkle.png");
}

.applejacklocked {
	background-image: url("../assets/html/img/resizable/img-character-locked-applejack.png");
}

.applejackunlocked {
	background-image: url("../assets/html/img/resizable/img-character-unlocked-applejack.png");
}

.fluttershylocked {
	background-image: url("../assets/html/img/resizable/img-character-locked-fluttershy.png");
}

.fluttershyunlocked {
	background-image: url("../assets/html/img/resizable/img-character-unlocked-fluttershy.png");
}

.pinkipielocked {
	background-image: url("../assets/html/img/resizable/img-character-locked-pinkipie.png");
}

.pinkipieunlocked {
	background-image: url("../assets/html/img/resizable/img-character-unlocked-pinkipie.png");
}

.rainbowdashlocked {
	background-image: url("../assets/html/img/resizable/img-character-locked-rainbowdash.png");
}

.rainbowdashunlocked {
	background-image: url("../assets/html/img/resizable/img-character-unlocked-rainbowdash.png");
}

.raritylocked {
	background-image: url("../assets/html/img/resizable/img-character-locked-rarity.png");
}

.rarityunlocked {
	background-image: url("../assets/html/img/resizable/img-character-unlocked-rarity.png");
}
		


/* END Selection screen style */


/* HUD SCREEN */


/* Game Hud Style */
#gameHud { 
	width: 853px; 
	height: 480px;
	z-index: 500;
}

#btn_left
{
	position:absolute;
	right:184px;
	bottom: 97px;
	opacity: 0;
}

#btn_middle
{
	position:absolute;
	right: 118px;
    bottom: 106px;
	opacity: 0;
}

#btn_right
{
	position:absolute;
    right: 22px;
    bottom: 97px;
	opacity: 0;
}

.img-gauge {
	position:absolute;
	right:5px;
	bottom:0px;
}

#star01 {
	position:relative;
	left:28px;
	top:16px;
}

#star02 {
	position:relative;
	left: 41px;
    top: 3px;
}

#star03 {
	position:relative;
    left: 58px;
    top: 16px;
}

#pointerContainer {
	position:relative;
    left: 50%;
	margin-left:-100px;
    top: -85px;
	width:200px;
	height:200px;
}

.img-pointer {
	position:relative;
    left: 50%;
    margin-left: -20px;
    top: 29px;
}

.pauseButtonWrapper {
	position: absolute;
    top: 20px;
    left: 20px;
}

.musicButtonWrapper {
	position: absolute;
    top: 20px;
    left: 20px;
}
.musicButtonWrapper #btn_music_off{
	display:none;
}

.spacer {
	clear:both;
}

.img-support-score {
	position: absolute;
    left: 423px;
    bottom: 10px;
    color: white;
}

#multiplier {
	text-align: right;
   	position: absolute;
   	right: -5px;
   	top: -7px;
   	text-shadow: 0px 3px rgba(0,0,0,0.3);
}

.xMult {
	font-size: 1.5em;
    font-weight: 800;
    position: relative;
    right: 10px;
}

.multi {
	font-size: 2em;
    font-weight: 800;
    position: relative;
    right: 10px;
}

#gh-scoreCount {
	font-size: 0.8em;
    text-align: right;
    position: absolute;
    right: 5px;
    top: 46px;
	font-weight: 400;
	text-shadow: 0px 2px rgba(0,0,0,0.2);
}

#gh-scoreCount .score-value-pts { font-size: 1.2em; }
#gh-scoreCount .pts-text { font-size: 0.7em; position: relative; left: 0px; }

/* Trivia Question */
#triviaQuestionOverlay {
	width:854px;
	height:480px;
    display:none;
}

#triviaQuestionOverlay .quizTitle {
    position: absolute;
    top: 12px;
    left: 75px;
    text-align: center;
    text-shadow: 0px 3px 0px black;
    color: white;
    z-index: 10;
    width: 512px;
    height: 50px;
    font-size: 1.6em;
    font-weight: bolder;
}

#triviaQuestionOverlay .img-sunsetshimmer {
    position: absolute;
    left: 0px;
    bottom: 0px;
    z-index: 100;
}

#triviaQuestionOverlay .icn-good {
    position: absolute;
    left: 303px;
    bottom: -3px;
	display: none;
}

#triviaQuestionOverlay .icn-wrong {
    position: absolute;
    left: 306px;
    bottom: -3px;
	display:none;
}

.background_black {
	position:absolute;
	left:0px;
	top:0px;
    background-color:#000000;
	opacity:0.7;
	width:854px;
	height:480px;
}

.img-quizpopup {
    position: absolute;
    top: 42px;
    left: 50px;
    z-index: 10;
    -webkit-transform-origin: 0% 100%;
	-ms-transform-origin: 0% 100%;
	transform-origin: 0% 100%;
}

#question {
	position:relative;
	z-index:15;
	left:100px;
	top: 89px;
	-webkit-transform: rotate(2deg);
	-ms-transform: rotate(2deg);
	transform: rotate(2deg);
	text-align: center;
    width: 448px;
	font-weight: bolder;
	height:100px;
}

#answer01 {
	text-align:center;
	position:relative;
	z-index:15;
    top: 104px;
    left: 128px;
}

/* Fix answer button height */
.btn-answer01-down { height: 80px; }

#gameHud #triviaQuestionOverlay .label {
    position: relative;
    left: 4px;
    top: 7px;
    -webkit-transform: rotate(2deg);
	-ms-transform: rotate(2deg);
    transform: rotate(2deg);
    color: white;
    display: table-cell;
    vertical-align: middle;
    line-height: normal;
    height: 62px;
    width: 380px;
}

#answer02 {
	text-align:center;
	position:relative;
	z-index:15;
    top: 107px;
    left: 125px;
}

#answer03 {
	text-align:center;
	position:relative;
	z-index:15;
    top: 108px;
    left: 122px;
}

.currentScoreWrapper {
	position:absolute;
	left: 20px;
	top:400px;
	width: 300px;
}

.current-score {
	color:#FFFFFF;
	width:50%;
	float:left;
}

.score-value {
	color:#FFFFFF;
	width:40%;
	float:right;
}

/* Trivia Question Timer */
#triviaQuestionTimer {
	width:58px;
	height:387px;
	position: absolute;
	top: 84px;
    left: 594px;
	z-index: 100;
	overflow: hidden;
	-webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
}
#triviaQuestionTimer .timer-back-gradient, 
#triviaQuestionTimer .timer-back-white {
	width:49px;
	height:375px;
    display:block;
	position: absolute;
}
#triviaQuestionTimer .timer-back-gradient {
	top: 4px;
    left: 4px;
	z-index: 10;
	background: url(../assets/html/img/timer_back_gradient.png) no-repeat;
}
#triviaQuestionTimer .timer-back-white {
	top: -365px;
    left: 7px;
	z-index: 15;
	background: url(../assets/html/img/timer_back_white.png) no-repeat;
}
#triviaQuestionTimer .timer-front {
	top: 0px;
	left:0px;
	z-index: 20;
	width:58px;
	height:387px;
	position: absolute;
	background: url(../assets/html/img/timer_front.png) no-repeat;
}


/*  END HUD SCREEN MISC */

/* SETTING SCREEN */

#settingScreen .btn-next-over {
	left: 795px;
    top: 105px;
}

#settingScreen .btn-prev-over {
	left: 35px;
    top: 105px;
}

#settingScreen {
	width: 853px; 
	height: 480px;
	z-index: 1000;
}

#viewsContainer #settingScreen .btn-close-down{
	top:13px;
}

#settingScreen #btn_close {
	position:absolute;
	right:10px;
	top:10px;
}

#settingScreen #btn_setting
{
    position: absolute;
    left: 42px;
    z-index: 10;
    top: 36px;
}

#settingScreen #btn_tutorial
{
	position: absolute;
    left: 335px;
    z-index: 10;
    top: 36px;
}

#settingScreen #settingScreenSelected .selected
{
	top: 33px;
}

.tab-separator-settings
{
	position: absolute;
	top:80px;
	left:0;
}

.tab-separator-tutorial
{
	position: absolute;
	top:100px;
	left:-2px;	
}

#settingMenu
{
	position: absolute;
	top:145px;
	left:-16px;
}

#tutorialMenu
{
	position: absolute;
	top:145px;
	left:-16px;
	width: 100%;
}

#settingScreen #settingScreenSelected .selected .settingLabel
{
	opacity: 1;
}

.settingLabel
{
	position:absolute;
	width:100%;
	top: 23px;
    color: white;
	text-align:center;
	display:block;
	font-weight: 700;
	font-size: 26px;
	opacity: 0.5;
}

/*.bottomBar {
	position:relative;
	z-index:30;
}*/

.img-djpon3 {
	position:absolute;
	left:0px;
	bottom:0px;
}

#sfx_container {
	position: absolute;
	left: 391px;
	top: 0px;
	width: 210px;
}

#music_container {
	position: absolute;
	left: 618px;
	top: 0px;
	width: 210px;
}

#settingScreen .icon {
    position: absolute;
    left: 43px;
    top: 75px;
}
#settingScreen .icon.btn-sfx-up,
#settingScreen .icon.btn-sfx-over,
#settingScreen .icon.btn-sfx-down,
#settingScreen .icon.btn-music-up,
#settingScreen .icon.btn-music-over,
#settingScreen .icon.btn-music-down {
	top: 67px;
}

.setting_sound_label {
    position: absolute;
    width: 100%;
    top: 0;
    left: 50%;
    color: #fff;
    text-align: center;
    font-weight: 700;
    -webkit-transform: translate(-50%, 0);
	-ms-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
}



#settingScreen #btn_home {
    position: absolute;
    right: 267px;
    bottom: 20px;
}

#settingScreen #btn_replay {
    position: absolute;
    right: 26px;
    bottom: 24px;
}


.tutoText
{
	font-weight: 700;
	font-size: 22px;
    text-align: left;
	color: #FFFFFF;
    position: absolute;
    top: 135px;
    left: 390px;
	width: 380px;
	-webkit-transform: translate(0, -50%);
	-ms-transform: translate(0, -50%);
	transform: translate(0, -50%);
}

#tutorialCarousel
{
	position: absolute;
	top: 0;
	left: 0;
}

#tutorialCarousel .owl-item .item, #tutorialCarousel .owl-item .item
{
   height: 390px;
}

#tutorialCarousel .owl-controls .owl-dot span, #tutorialCarousel .owl-controls .owl-dot span
{
    display: block;
    width: 17px;
    height: 17px;
    margin: 5px 6px;
	background: url(../assets/html/img/icn-caroussel-empty.png) no-repeat;
    /*background: #9e0b25;*/
}

#tutorialCarousel .owl-controls .owl-dot, #tutorialCarousel .owl-controls .owl-dot
{
    display: inline-block;
}

#tutorialCarousel .owl-controls .owl-dot.active span, #tutorialCarousel .owl-controls .owl-dot.active span
{
	
	background: url(../assets/html/img/icn-caroussel-filled.png ) no-repeat;
	/*background: white;*/
}

#tutorialCarousel .owl-controls, #tutorialCarousel .owl-controls
{
    position: absolute;
    top: 275px;
    left: 16px;
    width: 853px;
}

#btnCarouselPrevious
{
    position: absolute;
    left: 40px;
    top: 110px;
	z-index:50;
}

#btnCarouselNext
{
    position: absolute;
    left: 800px;
    top: 110px;
	z-index:50;
}

#tuto_slide_1, #tuto_slide_2, #tuto_slide_8
{
    position: absolute;
    top: 0px;
    left: 85px;	
}

#tuto_slide_3
{
    position: absolute;
    top: -5px;
    left: 65px;	
}

#tuto_slide_4
{
    position: absolute;
    top: -10px;
    left: 85px;		
}

#tuto_slide_5
{
    position: absolute;
    top: 10px;
    left: 85px;		
}

#tuto_slide_6
{
    position: absolute;
    top: 28px;
    left: 85px;
}

#tuto_slide_7
{
    position: absolute;
    top: -10px;
    left: 100px;		
}

#slider_sfx, #slider_music
{
	position: absolute;
	top: -12px;
	left: 475px;
}

.sliderBorder
{
    position: absolute;
    top: -5px;
    left: 247px;
    width: 263px;
    height: 33px;
    border-style: solid;
    border-width: 2px;
    border-color: white;
    border-radius: 10px;
	overflow:hidden;
}

#sliderSfxBkg
{
    position: absolute;
    top: 0px;
    left: 0px;
	background: url(../assets/html/img/sliderBackground.png);
	height: 36px;
	width: 1px;
}

#sliderMusicBkg
{
    position: absolute;
    top: 0px;
    left: 0px;
	background: url(../assets/html/img/sliderBackground.png);
	height: 36px;
	width: 1px;
}

.slider {
	background-color: #431852;
    border-style: solid;
    border-width: 2px;
    border-color: white;
    width: 263px;
    height: 33px;
    position: absolute;
    top: -5px;
    left: 247px;
    border-radius: 10px;
}

.knob {
    position: relative;
    top: -11px;
    left: -5px;
}

/* END SETTING SCREEN*/

/* REWARD SCREEN */

#rewardScreen {
	width: 853px; 
	height: 480px;
	z-index: 1000;
}

.characterUnlock {
	position: relative;
    bottom: 36px;
}

#rewardScreen .music {
    position: relative;
    top: 130px;
    left: 107px;
    width: 207px;
    height: 209px;
}

#rewardScreen .fx-ray, #rewardScreen .fx-ray-2, #rewardScreen .fx-stars, #rewardScreen .character { position: absolute; }
#rewardScreen .fx-ray, #rewardScreen .fx-ray-2, #rewardScreen .fx-stars { top: 240px; left: 200px;
	-webkit-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}
#rewardScreen .character { top: 43px; left: 40px; }

.ponyImageFullSize { width: 308px; height: 429px; }

.unlockText.name {
	position: absolute;
    right: 50px;
    top: 60px;
    width: 430px;
    color: #FFFFFF;
    font-size: 1.8em;
    font-weight: bolder;
    text-align: center;
    line-height: 1.3;
    text-shadow: 0px 3px 1px rgba(166,55,160,0.25);
}

#rewardScreen #btn_play {
    position: absolute;
    bottom: 55px;
    left: 505px;
}

/* END REWARD SCREEN */