@charset UTF-8;

/* Fonts */

@font-face{
    font-family: "gill";
    src: 
	url("font/GillSansMT.woff") format("opentype"),
	url("font/GillSansMT.woff") format("woff"),
	url("font/GillSansMT.otf") format("embedded-opentype"),
    url("font/GillSansMT.svg") format("svg"),
	url("font/GillSansMT.ttf") format("truetype"),
	url("font/GillSansMT.eot") format("truetype");
}

/* General */

body
{
	background:#e2ded3;
	font-family:"gill", GsansRegular, Verdana, "Lucida Grande", sans-serif;
	font-size:18px;
	line-height:20px;
	width:100%;
	margin:0;
	padding:0
}

h1,h2,h3,h4,h5,h6
{
	font-family:"gill", GsansRegular, Verdana, "Lucida Grande", sans-serif;
	font-weight:400
}

h1
{
	font-size:30px;
	line-height:30px;
	color:#60ac5a;
	margin:12px 0
}

h3
{
	font-size:20px;
	margin:0
}

h4
{
	font-size:18px;
	margin:0
}

h5
{
	font-size:16px;
	margin:0
}

h6
{
	font-size:12px;
	margin:0
}

#header{
	display:block;
	position:relative;
	width:100%;
	height:50px;
	background:#008b5d;
	overflow:hidden
}

#form_select
{
	margin:0px;
}

#pieceselect
{
      border: 0 !important;  /*Removes border*/
      -webkit-appearance: none;  /*Removes default chrome and safari style*/
      -moz-appearance: none; /* Removes Default Firefox style*/
	  background: url('images/dropdown_arrow.png') no-repeat;  /*Adds background-image*/
      background-position:0;  /*Position of the background-image*/
      width: 500px; /*Width of select dropdown to give space for arrow image*/
	  height: 40px;
	  text-indent: 0.01px; /* Removes default arrow from firefox*/
      text-overflow: "";  /*Removes default arrow from firefox*/
      /*My custom style for fonts*/
      color: #000;
	  font-family:"gill", GsansRegular, Verdana, "Lucida Grande", sans-serif;
	  font-size:14px;
}

select::-ms-expand 
{ 
	display: none; 
}

select:focus 
{ 
	outline:0; 
}


/* DIVs for index */

#external
{
	position: relative;
	margin-left:auto;
	margin-right:auto;
	margin-top:5px;
	width:1000px;
	height:700px;
	background-color:#e2ded3;
}

#internal
{
	position: absolute;
	left:35px;
	right:35px;
	height:650px;
	background-color:#fcf5eb;
}

#tutorial
{
	position: absolute;
	top:0px;
	right:35px;
	width:185px;
	height:70px;
	padding:0px;
	padding-top:10px;
	background-color:#e2ded3;
	text-align:center;
}

#goto
{
	position: absolute;
	top:575px;
	right:35px;
	width:270px;
	padding-top:10px;
	height:30px;
	padding:0px;
	padding-top:10px;
	background-color:#e2ded3;
	text-align:center;
}

#violetdiv
{
	position: absolute;
	top:105px;
	left:35px;
	right:35px;
	height:10px;
	background-color:#9c95c9;
}

#step1
{
	font-family:"gill", GsansRegular, Verdana, "Lucida Grande", sans-serif;
	position: absolute;
	top:190px;
	left:35px;
	width:785px;
	height:30px;
	padding-left:20px;
	padding-top:10px;
	background-color:#fee600;
	color:#000;
}

#step1select
{
	font-family:"gill", GsansRegular, Verdana, "Lucida Grande", sans-serif;
	position: absolute;
	top:190px;
	left:310px;
	width:500px;
	height:30px;
	background-color:#fee600;
	color:#000;
}

#step2
{
	font-family:"gill", GsansRegular, Verdana, "Lucida Grande", sans-serif;
	position: absolute;
	top:320px;
	left:35px;
	width:250px;
	height:30px;
	padding-left:20px;
	padding-top:10px;
	background-color:#fdb813;
	color:#000;
}

#num_instruments_1
{
	position: absolute;
	top:300px;
	left:360px;
	width:86px;
	height:84px;
}

#num_instruments_2
{
	position: absolute;
	top:300px;
	left:485px;
	width:86px;
	height:84px;
}

#step3
{
	font-family:"gill", GsansRegular, Verdana, "Lucida Grande", sans-serif;
	position: absolute;
	top:460px;
	left:35px;
	width:250px;
	height:30px;
	padding-left:20px;
	padding-top:10px;
	background-color:#ed6b06;
	color:#000;
}

#instrument_f
{
	position: absolute;
	top:430px;
	left:345px;
	width:106px;
	height:106px;
}

#instrument_k
{
	position: absolute;
	top:430px;
	left:470px;
	width:106px;
	height:106px;
}

#instrument_g
{
	position: absolute;
	top:430px;
	left:595px;
	width:106px;
	height:106px;
}

#pearsonbar
{
	position: absolute;
	height:50px;
	width:1000px;
	bottom:0px;
	background-color:#008b5e;
	background:url(images/pearsonbar.png);
}

a#submit_button
{
	color: #000;
	text-decoration: none;
}

a#submit_button:hover
{
	color: #FFF;
}


/* DIVs for player */

#div_small_notes
{
	position: absolute;
	top:25px;
	left:175px;
	width:26px;
	height:26px;
	background-image:url(images/small_notes.png);
}

#div_swap_horizontal
{
	position: absolute;
	top:245px;
	left:483px;
	width:35px;
	height:35px;
	background-image:url(images/swap_horizontal.png);
}

#title
{
	position: absolute;
	top:30px;
	left:210px;
	font-family:"gill", GsansRegular, Verdana, "Lucida Grande", sans-serif;
	font-size:24px;
}

#composer
{
	position: absolute;
	top:55px;
	left:210px;
	font-family:"gill", GsansRegular, Verdana, "Lucida Grande", sans-serif;
	font-size:16px;
}

#div_anim_1
{
	position: absolute;
	top:130px;
	left:65px;
	width:400px;
	height:270px;
	background-image:url("images/guitar.png");
	background-repeat:no-repeat;
}

#div_anim_2
{
	position: absolute;
	top:130px;
	right:65px;
	width:400px;
	height:270px;
	background-image:url("images/flute.png");
	background-repeat:no-repeat;
}

#div_anim_1up
{
	position: absolute;
	top:130px;
	left:65px;
	width:400px;
	height:270px;
	background-image:url("images/keyboard_black.png");
	background-repeat:no-repeat;
}

#div_anim_2up
{
	position: absolute;
	top:130px;
	right:65px;
	width:400px;
	height:270px;
	background-image:url("images/keyboard_black.png");
	background-repeat:no-repeat;
}

#canvas_anim_1, #canvas_anim_2
{
	width:400px;
	height:270px;
}

#div_video
{
	position: absolute;
	top:130px;
	right:65px;
	width:400px;
	height:270px;
	background-image:url(images/placeholder_video.png);
}

#div_score
{
	position: absolute;
	top:420px;
	left:65px;
	right:65px;
	height:120px;
}

#div_controls
{
	position: absolute;
	top:550px;
	left:35px;
	right:35px;
	height:100px;
}

#div_metronome
{
	position: absolute;
	top:57px;
	left:30px;
	width:32px;
	height:32px;
	background-image:url(images/icon_metronome.png);
	background-repeat:no-repeat;
}

#div_barmetronome
{
	position: absolute;
	top:64px;
	left:70px;
	width:220px;
	height:20px;
	background-image:url(images/icon_bar.png);
	background-repeat:no-repeat;
}

#div_speaker
{
	position: absolute;
	top:10px;
	left:30px;
	width:32px;
	height:32px;
	background-image:url(images/icon_speaker.png);
	background-repeat:no-repeat;
}

#div_barspeaker
{
	position: absolute;
	top:18px;
	left:70px;
	width:220px;
	height:20px;
	background-image:url(images/icon_bar.png);
	background-repeat:no-repeat;
}

#div_volumeup
{
	position: absolute;
	top:18px;
	left:262px;
	width:20px;
	height:20px;
}

#div_volumedown
{
	position: absolute;
	top:18px;
	left:77px;
	width:20px;
	height:20px;
}

#div_bpmup
{
	position: absolute;
	top:64px;
	left:262px;
	width:20px;
	height:20px;
}

#div_bpmdown
{
	position: absolute;
	top:64px;
	left:77px;
	width:20px;
	height:20px;
}

#div_volumestick
{
	position: absolute;
	top:20px;
	left:240px;
	width:15px;
	height:16px;
	background-image:url(images/stick.png);
	background-repeat:no-repeat;
}

#div_bpmstick
{
	position: absolute;
	top:65px;
	left:240px;
	width:15px;
	height:16px;
	background-image:url(images/stick.png);
	background-repeat:no-repeat;
}

#div_page1, #div_page2, #div_page3, #div_page4, #div_page5, #div_page6, #div_page7, #div_page8, #div_page9, #div_page10, #div_page11
{
	position: absolute;
	top:35px;
	right:30px;
	width:32px;
	height:32px;
	background-repeat:no-repeat;
}

#playpause
{
	position: absolute;
	top:16px;
	left:439px;
	width:65px;
	height:65px;
	background-image:url(images/b_play.png);
	background-repeat:no-repeat;
}

#prevPage
{
	position: absolute;
	top:21px;
	left:380px;
	width:53px;
	height:53px;
	background-image:url(images/b_rew_out.png);
	background-repeat:no-repeat;
}

#nextPage
{
	position: absolute;
	top:21px;
	left:510px;
	width:53px;
	height:53px;
	background-image:url(images/b_fw_out.png);
	background-repeat:no-repeat;
}


#sanddiv
{
	position: absolute;
	top:540px;
	left:35px;
	right:35px;
	height:10px;
	background-color:#e2ded3;
}

#small_instruments
{
	position: absolute;
	top:0px;
	right:35px;
	width:250px;
	height:70px;
	padding-top:10px;
	background-color:#e2ded3;
	text-align:center;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}

#instrument_f_small
{
	position: absolute;
	top:7px;
	left:740px;
	width:60px;
	height:60px;
}

#instrument_k_small
{
	position: absolute;
	top:7px;
	left:809px;
	width:60px;
	height:60px;
}

#instrument_g_small
{
	position: absolute;
	top:7px;
	left:875px;
	width:60px;
	height:60px;
}

img
{
	border:0px;
}

#helpdiv
{
	position: absolute;
	top:116px;
	left:35px;
	right:35px;
	width: 858px;
	font-family:"gill", GsansRegular, Verdana, "Lucida Grande", sans-serif;
	font-size:14px;
}

#internal_help
{
	position: absolute;
	left:35px;
	right:35px;
	height:1800px;
	background-color:#fcf5eb;
}

#external_help
{
	position: relative;
	margin-left:auto;
	margin-right:auto;
	margin-top:5px;
	width:1000px;
	height:1850px;
	background-color:#e2ded3;
}

#pearsonbar_help
{
	position: absolute;
	height:50px;
	width:1000px;
	bottom:0px;
	background-color:#008b5e;
	background:url(images/pearsonbar.png);
}