/* The State of Queensland (Department of Education and Training) */
/*Overall frame that includes player body and lyrics display slide*/
#frame {
	width:700px;
	height:450px;
	margin:auto;
}

body {
	background-color: white;
	overflow: hidden;
}

/*Player body*/
#playerBody {
	width:300px;
	height:100%;
	position:absolute;
	background-image: url(../assets/images/monkeys_tree.png);
	background-repeat: no-repeat;
}

#videoScreen {
	width:208px;
	height:158px;
	position: relative;
	top: 120px;
	left: 40px;
	float:left;
}

#timerFrame {
	position:relative;
	top:294px;
	left:-167px;
	width:65px;
	text-align: center;
	font-family: 'alarm_clockregular';
	font-size:17pt;
	cursor: default;
	float:left;
}

#btnHover {
	position: relative;
	width: 50px;
	top: 230px;
	left: -15px;	
	visibility: hidden;
	float:left;
}

#playTxt, #stopTxt, #pauseTxt, #volTxt {
	font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;	
	position: absolute;	
	font-size: 14px;
	color: white;	
}

/*To adjust the text display - look nicer*/
#pauseTxt {
	left:-5px;
}

/*To adjust the text display - look nicer*/
#volTxt {
	left: -10px;
}

/*Panel that hold play, pause, stop, volume buttons*/
#ctrlPanel {
	width:120px;
	height:120px;
	position:relative;
	left:146px;
	top:122px;
	float: left;
	/*disable highlight / background on touch on iPad*/
	-webkit-tap-highlight-color: transparent;
}

#btnPlay{
	position:absolute;
	top:45px;
	left:5px;
	background-image: url(../assets/images/playicon.png);
	background-repeat: no-repeat;
	width:40px;
	height:40px;
}

#btnPlay.hover:hover{
	background-image: url(../assets/images/playicon_hover.png);	
	background-repeat:no-repeat;
	cursor: pointer;
}

#btnPause {
	position:absolute;
	top:10px;
	left:40px;
	width:41px;
	height:41px;
	background-image: url(../assets/images/pauseicon.png);
	background-repeat: no-repeat;
}

#btnPause.hover:hover {
	background-image: url(../assets/images/pauseicon_hover.png);
	background-repeat: no-repeat;
	cursor: pointer;
}

#btnStop {
	position:absolute;
	top:45px;
	right:5px;
	background-image: url(../assets/images/stopbtn.png);
	background-repeat: no-repeat;
	width:41px;
	height:41px;
}

#btnStop.hover:hover {
	background-image: url(../assets/images/stopbtn_hover.png);
	background-repeat: no-repeat;
	cursor: pointer;
}

#btnVol {
	position:absolute;
	top:80px;
	left:40px;
	background-image: url(../assets/images/volume0.png);
	background-repeat: no-repeat;
	width:41px;
	height:41px;
}

#btnVol.hover:hover {
	background-image: url(../assets/images/volume_hover.png);
	cursor: pointer;
}

.btnTxtPrint.hover:hover {
	cursor: pointer;
}

#btnTxtDisplay {
	position:relative;
	left:-80px;
	top:235px;
	width:45px;
	height:27px;
	float:left;
	background-image: url(../assets/images/text.png);
	background-repeat: no-repeat;
}

#btnTxtDisplay.hover:hover {
	background-image:url(../assets/images/text_hover.png);
	background-repeat: no-repeat;
	cursor: pointer;
}

#btnPrint {
	position:relative;
	left:-72px;
	top:228px;
	width:45px;
	height:27px;
	float:left;
	background-image:url(../assets/images/print.png);
	background-repeat: no-repeat;
}

#btnPrint.hover:hover {
	background-image:url(../assets/images/print_hover.png);
	background-repeat: no-repeat;
	cursor: pointer;
}

/*Background and border for text display - lyrics*/
#displayTxt {
	display:none;
	position: relative;
	left: 280px;
	top: -215px;
	border: 5px solid #CCCC99;
	border-radius: 0px 10px 10px 0px;
	padding: 5px 5px 5px 15px;
	width: 380px;
	height: 270px;
	overflow: scroll;
	overflow-x:hidden; 
	background: -webkit-radial-gradient(circle,#C3F6F6,#A5D8D8);
	background: -o-radial-gradient(circle,#C3F6F6,#A5D8D8);
	background: -moz-radial-gradient(circle,#C3F6F6,#A5D8D8);
	background: radial-gradient(circle,#C3F6F6,#A5D8D8);
	color: #336666;
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;			
}

#displayTxt.hover:hover {
	cursor: default;
}

#copyright {
	width: 700px;
	margin-left:auto;
	margin-right:auto;
	font-size: 13px;
	font-family:Helvetica, Arial, sans-serif;	
}

.noSelect {
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}