@charset "utf-8";
/* CSS Document */

#play-overlay {
    display: none;
    background-color: #fff;
    opacity: 0.8;
    position: absolute;
    left: 0px;
    top: 0px;
    background-image: url(../images/play_overlay.png);
    background-repeat: no-repeat;
    width: 1000px;
    height: 600px;
    background-size: auto;
    background-position: center center;
    z-index: 1000;
}

.overlay-words {
    position: absolute;
    left: 410px;
    top: 360px;
    
    font-family: Arial,sans-serif;
    font-size: 24px;
    color: #333;
    font-weight: bold;
}

/*Loading screen elements*/
#loadingScreen{
	position: absolute;
	top: 0px;
	width: 1000px;
	height: 600px;
     z-index: 250;
	/*display:none;*/
}

#progressBar {
	position:absolute;
	top: 300px;
	left: 270px;
    width: 477px;
    height: 22px;
    border: 1px solid #111;
	border-radius: 25px;
    background-color: #292929;
}

#progressBar div {
	position:absolute;
	top: 0px;
	left: 0px;
    height: 100%;
    color: #fff;
    line-height: 22px;
    width: 0;
    border-radius: 25px;
    background-color: #0099ff;
}

#progressBar h1 {
	position: absolute;
	top: 20px;	
	left: 160px;
	color: #F0CB0D;
}
/* Main wrapper */
#pageWrap {
	position: relative;
	width: 1000px;
	height: 600px;
	margin: auto;
	overflow: hidden;
}
/* Window close button */
#close-button {
	position: absolute;
	right: 3px;
	top: -5px;
    z-index: 60;
	cursor: pointer;
}
/* Settings screen open button*/
#settings-button {
    position: absolute;
    top: 10px;
    left: 15px;
	cursor: pointer;
    z-index: 100;
}
/* Credits screen open button*/
#credits-button {
    position: absolute;
    top: 10px;
    left: 150px;
	cursor: pointer;
    z-index: 100;
}
/*Opening screen wrapper */
#opening-screen {
    posiiton: absolute;
	width: 1000px;
	height: 600px;
    z-index: 50;
/*    display: none;*/
}
#start-button {
    position: absolute;
    top: 310px;
    left: 620px;
	cursor: pointer;
    z-index: 100;
}
.start-screen {
    position: absolute;
    z-index: 50;
}

/*Left fish group on opening and ending screens****/
.character-group {
    position: absolute;
    z-index: 55;
    top: 180px;
    left: 50px;
}

.beats-opening-text {
    position: absolute;
    z-index: 55;
    top: 50px;
    left: 450px;
}

/***Animated fish styles*****/
.bubble {
    position: absolute;
    z-index: 500;
    width: 57px;
    height: 57px;
    left: 900px;
    top: 600px;
}

.bubble-sprite-01 {
     position: absolute;
    z-index: 500;
    width: 57px;
    height: 57px;
    background-image: url(../images/bubble-sprite-01.png);
    background-repeat: no-repeat;
    background-position: 0px 0px;
}

.bubble-sprite-02 {
     position: absolute;
    z-index: 500;
    width: 57px;
    height: 57px;
    background-image: url(../images/bubble-sprite-02.png);
    background-repeat: no-repeat;
    background-position: 0px 0px;
}

.fish-one-left-start {
    position: absolute;
    z-index: 50;
    width: 10%;
    left: 1000px;
    top: 70px;
}

.fish-one-right-start {
    position: absolute;
    z-index: 50;
    width: 8%;
    right: 1000px;
    top: 70px;
}

.fish-two-left-start {
    position: absolute;
    z-index: 50;
    width: 10%;
    left: 1000px;
    top: 220px;
}

.fish-two-right-start {
    position: absolute;
    z-index: 50;
    width: 8%;
    right: 1000px;
    top: 220px;
}

.fish-one-left-end {
    position: absolute;
    z-index: 50;
    width: 10%;
    left: 1000px;
    top: 70px;
}

.fish-one-right-end {
    position: absolute;
    z-index: 50;
    width: 8%;
    right: 1000px;
    top: 70px;
}

.fish-two-left-end {
    position: absolute;
    z-index: 50;
    width: 10%;
    left: 1000px;
    top: 220px;
}

.fish-two-right-end {
    position: absolute;
    z-index: 50;
    width: 8%;
    right: 1000px;
    top: 220px;
}

/********** Game Screen Assets **********/
/*Game assets wrapper */
#game-screen {
    position: absolute;
    top: 0px;
    left: 0px;
	width: inherit;
	height: inherit;
	display: none;
	background-image: url(../images/gameScreen.jpg);
}
/*Center Screen text styles*/
#question-text img {
	position: relative;
	display: block;
	margin: auto;
	top: 25px;
	left: 20px;
}
#question-text {
	display: none;
}

/*************Drummers styles***********/
/*Drummers wrapper*/
#drummers {
    position: absolute;
    z-index: 1;
    bottom: 2px;
}
/*Right drummer*/
.right-drummer {
	position: absolute;
/*    display:none;*/
	left: 730px;
	bottom: 9px;
    z-index: 1;
}
/*.right-drummer-right {
	position: absolute;
    display:none;
	left: 730px;
	bottom: 9px;
    z-index: 1;
}
.right-drummer-left {
	position: absolute;
   display:none;
	left: 730px;
	bottom: 9px;
    z-index: 1;
}*/
/*Left drummer*/
.hidden {
    display: none;
}
.left-drummer {
	position: absolute;
/*    display:none;*/
	left: 20px;
	bottom: -5px;
    z-index: 1;
}
/*.left-drummer-left {
	position: absolute;
	left: 20px;
	bottom: -5px;
    z-index: 1;
}
.left-drummer-right {
	position: absolute;
    display: none;
	left: 20px;
	bottom: -5px;
    z-index: 1;
}*/
/*Middle drummer*/
.middle-drummer {
	position: absolute;
	left: 335px;
	bottom: 0px;
     z-index: 1;
}
/*Left drummer select button*/
.left-button {
	position: absolute;
	top: 150px;
	left: 90px;
    z-index: 1;
	cursor: pointer;
    display: none;
}
/*Right drummer select button*/
.right-button {
	position: absolute;
	top: 150px;
	right: 65px;
    z-index: 1;
	cursor: pointer;
    display: none;
}

.left-button-block {
	position: absolute;
	top: 150px;
	left: 90px;
    z-index: 1;
	cursor: pointer;
    display: none;
}
/*Right drummer select button*/
.right-button-block {
	position: absolute;
	top: 150px;
	right: 65px;
    z-index: 1;
	cursor: pointer;
    display: none;
}
/*Button to play left drum audio*/
#left-play-bttn {
    position: absolute;
    left: 118px;
    bottom: 45px;
    z-index: 10;
    cursor: pointer;
    display: none;
}
.left-blocker {
    position: absolute;
    left: 118px;
    bottom: 45px;
    z-index: 12;
    cursor: pointer;
    display: none;
}
/*Button to play middle drum audio*/
#middle-play-bttn {
    position: absolute;
    left: 484px;
    bottom: 45px;
    z-index: 10;
    cursor: pointer;
    display: none;
}
/*Button to play right drum audio*/
#right-play-bttn {
    position: absolute;
    left: 808px;
    bottom: 45px;
    z-index: 10;
    cursor: pointer;
    display: none;
}

.right-blocker {
    position: absolute;
    left: 808px;
    bottom: 45px;
    z-index: 12;
    cursor: pointer;
    display: none;
}
/******* Feedback styles *********/
/*Feedback wrapper*/
#feedback {
    position: absolute;
    background-image: url(../images/correct-bg.png);
    top: 0px;
    left: 0px;
    width: inherit;
	height: inherit;
    z-index: 0;
    display: none;
}
/*Feedback close button*/
#close-feedback {
    position: relative;
    top: 70px;
    margin: auto;
    display: block;
    cursor: pointer;
}
/*Correct and Incorrect text container*/
#callout-text {
    position: relative;
    top: 50px;
    margin: auto;
    display: block;
}

/******* Settings screen styles *********/
/*Settings screen wrapper*/
#settings-screen {
    position: absolute;
    z-index: 100;
    bottom: -3px;
    right: 1000px;
/*    display: none;*/
}
/*language text label*/
#language-text {
    position: absolute;
    top: 220px;
    left: 140px
}
/*English radio button*/
#eng-button {
    position: absolute;
    top: 205px;
    left: 450px;
	cursor: pointer;
}
/*Spanish radio button*/
#spn-button {
    position: absolute;
    top: 205px;
    left: 680px;
	cursor: pointer;
}
/*Volume text label*/
#volume-tag {
    position: absolute;
    top: 340px;
    left: 192px;
}
#volume-bar {
	position: absolute;
    width: 315px;
	left: 455px;
	top: 352px;
    height: 22px;
    border: 1px solid #262261;
	border-radius: 25px;
    background-color: gray;
}
#volume-number-holder {
    position: absolute;
	font-size: 26px;
	color: #262261;
	font-weight:bold;
	 left: 330px;
	 top: 0px;  
}
#volume-fill {
    position:absolute;
	top: 0px;
	left: 0px;
    height: 100%;
    line-height: 22px;
    width: 0px;
    border-radius: 25px;
    background-color: #262261;
}
#vol-handle {
    position: absolute;
    top: -15px;
    left: 225px;
	cursor: pointer;
}
/*Settings screen close button*/
#settings-close {
    position: absolute;
    top: 60px;
    right: 45px;
	cursor: pointer;
}

/******** End game screen ********/
#end-game-screen {
    position: absolute;
    width: 1000px;
	height: 600px;
    top: 0px;
    left: 0px;
    z-index: 50;
    display: none;
}
.play-again {
   position: absolute;
    top: 310px;
    left: 620px;
	cursor: pointer;
    z-index: 100;
}

/******** Credits screen ********/
#credits-screen {
    position: absolute;
    z-index: 100;
    bottom: -3px;
    right: 1000px;
/*    display: none;*/
}
#credits-close {
    position: absolute;
    top: 80px;
    right: 65px;
	cursor: pointer;
}

#bubble-left {
    position: absolute;
    bottom: 20px;
    left: 50px;
}