/* Template - CSS */
/* The State of Queensland (Department of Education and Training) */


*:not(input){
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
	cursor: default;
	
}

html {
   background-color: white;
}

body {
	background-color: white;
	margin:0px; padding: 0px;
}

main {
	/*IE*/
	display:block;
}

footer {
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
}

video{
  max-width: 90%;
  height: auto;
  margin: 0px auto;	
  max-height: 90%;
  width: auto;
  display: block;
  min-height: 200px;
}

audio{
  margin: 0px auto;	
  max-height: 90%;
  display: block;
}

#TheCanvas{
   width: 760px;
   background-color: #999999;	
   position: relative;
   margin: 0px auto;
}

#GraphicHeader img{
   display: block;
   margin-bottom: 0px;
   z-index:2000;
   position: relative;	
}

#OrangeBoxes{
	float: left;
	margin-left: 2%;
	margin-right: 2%;
	width: 40%;
	padding: 2%;
}

#OtherSongs{
	float: left;
	margin-left: 2%;
	margin-right: 2%;
	width: 40%;
	padding: 2%;
}

#OtherSongs, #OrangeBoxes {
	background-color: #666666;
	border-radius: 5px;
	margin-top: 20px;
	margin-bottom: 20px;
}

.clear{
   clear: both;	
}

#TitleBar{
   background-color: #666666;
   padding: 10px 10px 10px 20px; 
   margin-top: 0px;	
}

.BoxTitle, #TitleBar{
   font-family: "Century Gothic","Apple Gothic",AppleGothic,"URW Gothic L","Avant Garde",Futura, Arial, Helvetica, sans-serif;
   font-size: 18px;
   color: white;	
}

.BoxTitle{
padding-bottom: 8px;	
}

.PopupInfoBox{
	font-family: Arial, Helvetica, sans-serif;
   border: 4px solid #FF9900;
   border-radius: 20px;
   background-color: #999999;
   color: white;	
   padding: 30px;
   z-index: 500;
}

.PopupInfoBox .title{
	font-family: Arial, Helvetica, sans-serif;
   font-size: 16px;
   text-align: center;
   color: white;	
}

.PopupInfoBox .big-orange-button{
	border: 2px solid #F46E00;
	background-color: #EDA848;
	border-radius: 8px;
	font-size: 12px;
	text-align:center;
	padding: 10px;
	margin-right: 10px;
	width: 60px;
	height: 60px;
	display: inline-block;
	box-shadow: 3px 3px 6px #666666; 
	cursor: pointer;
	
	
	
	
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#eab562+0,ee881f+50,f27700+53,f27700+100 */
background: #eab562; /* Old browsers */
background: -moz-linear-gradient(top,  #eab562 0%, #ee881f 50%, #f27700 53%, #f27700 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #eab562 0%,#ee881f 50%,#f27700 53%,#f27700 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #eab562 0%,#ee881f 50%,#f27700 53%,#f27700 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eab562', endColorstr='#f27700',GradientType=0 ); /* IE6-9 */

}

.PopupInfoBox .big-orange-button a{
   display: block;
   width: 100%;
   height: 100%;
   text-decoration: none;
   color: white;
   cursor: pointer;	
}

.PopupInfoBox .big-orange-button:last-child{
	margin-right: 0px;
}

.PopupInfoBox{
    position: absolute;
	top: 180px;
	left: 50%;
	margin-left: -30%;
	width: 50%;	
	text-align: center;
	box-shadow: 5px 5px 10px #000000;
	min-height: 128px;
}

.PopupInfoBox .title{
    padding-bottom: 20px;	
}

.PopupInfoBox .close-button{
	float: right;
	margin-top: -20px;
	margin-right: -20px;
	cursor: pointer;
	color: white;
	font-weight: bold;
	font-size: 16px;
	border: 1px solid #0037d1;
	width: 20px;
	border-radius: 10px;
	box-shadow: 3px 3px 5px #666666;
	
	
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,0037d1+100 */
background: #ffffff; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover,  #ffffff 0%, #0037d1 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover,  #ffffff 0%,#0037d1 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center,  #ffffff 0%,#0037d1 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#0037d1',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}

body.IsDeskTop .PopupInfoBox .close-button:hover{
	
	color: white;
	font-weight: bold;
	border: 1px solid #f27700;
	
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#eab562+0,ee881f+86,f27700+98 */
background: #eab562; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover,  #eab562 0%, #ee881f 86%, #f27700 98%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover,  #eab562 0%,#ee881f 86%,#f27700 98%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center,  #eab562 0%,#ee881f 86%,#f27700 98%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eab562', endColorstr='#f27700',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}

.OrangeButton{
	
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: white;
	border: 2px solid #F46E00;
	background-color: #EDA848;
	border-radius: 5px;
	font-size: 18px;
	text-align:center;
	padding: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
	width: 42px;
	height: 32px;
	display: inline-block;
	cursor: pointer;
	
	
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#eab562+0,ee881f+50,f27700+53,f27700+100 */
background: #eab562; /* Old browsers */
background: -moz-linear-gradient(top,  #eab562 0%, #ee881f 50%, #f27700 53%, #f27700 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #eab562 0%,#ee881f 50%,#f27700 53%,#f27700 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #eab562 0%,#ee881f 50%,#f27700 53%,#f27700 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eab562', endColorstr='#f27700',GradientType=0 ); /* IE6-9 */
}

.BlueButton{
	
	
	color: white;
	border: 1px solid #0512c6;
	width: 96%;
	margin-bottom: 5px;
	border-radius: 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	letter-spacing: 0.02em;
	padding: 2%;
	font-size: 11px;
	text-align: center;
	cursor: pointer;
	
	
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#3bb1cf+1,345088+63,374a83+92,000000+100 */
background: #3bb1cf; /* Old browsers */
background: -moz-linear-gradient(top,  #3bb1cf 1%, #345088 63%, #374a83 92%, #000000 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #3bb1cf 1%,#345088 63%,#374a83 92%,#000000 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #3bb1cf 1%,#345088 63%,#374a83 92%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3bb1cf', endColorstr='#000000',GradientType=0 ); /* IE6-9 */

	
}


#TheAudioPlayer{
    position: absolute;
	top: 180px;
	left: 50%;
	margin-left: -30%;
	width: 50%;	
	text-align: center;
	box-shadow: 5px 5px 10px #000000;
	font-family: Arial, Helvetica, sans-serif;
    border: 4px solid #FF9900;
    border-radius: 20px;
    background-color: #999999;
    color: white;	
    padding: 30px;
	min-height: 128px;
	z-index: 1000;
	display: flex;
    flex-direction: column;
    justify-content: center;
}

#TheAudioPlayerBgInner, .overlay{
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0px;
   left: 0px;
   background-color: #000000;
   opacity: 0.2;	
   z-index: 100;
}

#TheAudioPlayer audio{
  margin: 0px auto;	
}

#TheAudioPlayer .title{
    padding-bottom: 20px;	
}

#TheAudioPlayer .close-button{
	position: absolute;
	right: 0px;
	top:0px;
	margin-top: 10px;
	margin-right: 10px;
	cursor: pointer;
	color: white;
	font-weight: bold;
	font-size: 16px;
	border: 1px solid #0037d1;
	width: 20px;
	border-radius: 10px;
	box-shadow: 3px 3px 5px #666666;
	
	
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,0037d1+100 */
background: #ffffff; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover,  #ffffff 0%, #0037d1 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover,  #ffffff 0%,#0037d1 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center,  #ffffff 0%,#0037d1 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#0037d1',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}

body.IsDeskTop #TheAudioPlayer .close-button:hover{
	
	color: white;
	font-weight: bold;
	border: 1px solid #f27700;
	
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#eab562+0,ee881f+86,f27700+98 */
background: #eab562; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover,  #eab562 0%, #ee881f 86%, #f27700 98%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover,  #eab562 0%,#ee881f 86%,#f27700 98%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center,  #eab562 0%,#ee881f 86%,#f27700 98%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eab562', endColorstr='#f27700',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}



#TheVideoPlayer{
    position: absolute;
	top: 60px;
	left: 0;
	width: 692px;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
    border: 4px solid #FF9900;
    background-color: #999999;
    color: white;	
    padding: 30px;
	z-index: 1000;
	display: flex;
    flex-direction: column;
    justify-content: center;
}

#TheVideoPlayer audio{
  margin: 0px auto;	
  width:auto;
  max-width: 90%;
}

#TheVideoPlayer .title{
    padding-bottom: 20px;	
}

#TheVideoPlayer .close-button{
	position: absolute;
	right: 0px;
	top:0px;
	margin-top: 10px;
	margin-right: 10px;
	cursor: pointer;
	color: white;
	font-weight: bold;
	font-size: 16px;
	border: 1px solid #0037d1;
	width: 20px;
	border-radius: 10px;
	box-shadow: 3px 3px 5px #666666;
	
	
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,0037d1+100 */
background: #ffffff; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover,  #ffffff 0%, #0037d1 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover,  #ffffff 0%,#0037d1 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center,  #ffffff 0%,#0037d1 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#0037d1',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}

body.IsDeskTop #TheVideoPlayer .close-button:hover{
	
	color: white;
	font-weight: bold;
	border: 1px solid #f27700;
	
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#eab562+0,ee881f+86,f27700+98 */
background: #eab562; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover,  #eab562 0%, #ee881f 86%, #f27700 98%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover,  #eab562 0%,#ee881f 86%,#f27700 98%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center,  #eab562 0%,#ee881f 86%,#f27700 98%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eab562', endColorstr='#f27700',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}


audio, video{
   cursor: pointer;	
}