/*****************/
/* TOOLBOX MENU  */
/*****************/

.toolbox_menu {
  width: 745px;
  height: 21px;
  text-align: right;
  background: url(img/menu_list.png);
  background-color: #555;
  padding-left: 15px;
  margin-top: 0px; /*14px*/
}
.menuitem {
  margin: 0px;
  padding: 2px 6px;
  margin-top: 1px;
  float: left;
  color: #fff;
  font-size: 0.8em;
  cursor: default;
}
.menubox {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 220px;
  overflow: hidden;
}
.menubox_content {
  background: url(img/appbox_right.png) top right repeat-y;
  padding-right: 6px;
}
.menubox_bottom {
  height: 10px;
  background: url(img/appbox_bottom.png) top right;
}
.menuchoice {
  background-color: #fef6ec;
  padding: 6px 12px;
  border-bottom: 1px solid #9a774f;
  cursor: default;
  color: #553b1c;
}
.menuchoice:hover {
  /*background: #fff;*/
  color: #000;
}
.small_up {
  width: 1px;
  border-bottom: 15px solid #553b1c;
  border-left: 7px solid #fef6ec;
  border-right: 7px solid #fef6ec;
  border-top: 0px solid #fef6ec;
}
.small_down {
  width: 1px;
  border-top: 15px solid #553b1c;
  border-left: 7px solid #fef6ec;
  border-right: 7px solid #fef6ec;
  border-bottom: 0px solid #fef6ec;
}
.guitar_tuner {
  width: 25px;
  padding-top: 6px;
  text-align: center;
  float: left;
}
#sequence {
  padding-left: 10px;
  padding-top: 10px;
}
/*
.menuitem input.button
{
	border: 1px solid #9A774F;
	background: #603200;
	font-size: 15pt;
	color: #fff;
}
*/
/**************/
/* PANEL      */
/**************/

.panel {
  border-top: 1px solid #9a774f;
  border-left: 1px solid #9a774f;
  border-right: 1px solid #dbb990;
  border-bottom: 1px solid #dbb990;
}
.panel_inner {
  border-top: 1px solid #dbb990;
  border-left: 1px solid #dbb990;
  border-right: 1px solid #9a774f;
  border-bottom: 1px solid #9a774f;
  background: #c5a47d;
  text-align: center;
  padding-top: 5px;
  padding-bottom: 5px;
}
/*
.panel_lite
{
	border-top: 1px solid #9A774F;
	border-left: 1px solid #9A774F;
}
.panel_lite .panel_inner
{
	border-top: 1px solid #DBB990;
	border-left: 1px solid #DBB990;
	background: #C5A47D;
	text-align: center;
	padding-top: 5px;
	padding-bottom: 4px;
}*/

/************************/
/* APPLICATION LAYOUT   */
/************************/
/* colorscheme:
#211506
#553B1C
#8A4A00
button:
	#8E4D00
	#603200
#C5A47D
	#DBB990
	#9A774F
#FAEEE0
#FEF6EC
*/

#application {
  position: relative;
  width: 760px;
  height: 585px;
  overflow: hidden;
  background-color: #fef6ec;
  color: #553b1c;
}
#controlbox {
  width: 150px;
  margin: 0 0;
}
#space_panel {
  height: 259px;
  width: 148px;
}
#speedbox {
  width: 148px;
  height: 20px;
}
#soundcontrol {
  width: 148px;
  height: 25px;
}
#startstop {
  width: 100px;
  float: left;
  padding-bottom: 1px;
}
#shufflerepeat {
  width: 46px;
  float: left;
  padding-bottom: 5px;
}
#canvas {
  background: #fef6ec;
  padding-top: 142px;
  padding-left: 7px;
  overflow: hidden;
}
#chordcontrol {
  width: 760px;
  float: left;
  padding-top: 8px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 9px;
}
#app_shadow_top {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 760px;
  height: 10px;
  background: url(img/app_top.png) no-repeat;
}
#app_shadow_left {
  position: absolute;
  top: 10px;
  left: 0px;
  width: 6px;
  height: 565px;
  background: url(img/app_middle.png) repeat-y;
}
#app_shadow_right {
  position: absolute;
  top: 10px;
  left: 754px;
  width: 6px;
  height: 565px;
  background: url(img/app_middle.png) repeat-y top right;
}
#app_shadow_bottom {
  position: absolute;
  top: 575px;
  left: 0px;
  width: 760px;
  height: 10px;
  background: url(img/app_bottom.png) no-repeat;
}

/*************************/
/* CONTROLBOX DETAILS    */
/*************************/

#controlbox select {
  color: #000;
  background: #fef6ec;
  border-top: 1px solid #9a774f;
  border-left: 1px solid #9a774f;
  border-right: 1px solid #dbb990;
  border-bottom: 1px solid #dbb990;
}
#chord_hold {
  position: absolute;
  top: 184px;
  left: 10px;
  width: 130px;
}
#chord_hold .panel_inner {
  padding: 16px 0px;
  font-weight: 900;
  font-size: 2.2em;
  background: #fef6ec;
  color: #000;
  font-family: times-new-roman, times, serif;
}
#mute {
  width: 26px;
  height: 24px;
  display: inline-block;
  background: url(img/mute.png);
}
#volume {
  width: 75px;
  height: 25px;
  display: inline-block;
  background: url(img/volume_active.png) bottom left no-repeat;
}
#volume div {
  width: 42px;
  height: 25px;
  background: url(img/volume_active.png) top left no-repeat;
  margin: 0 0;
}
#startbutton {
  height: 50px;
  width: 50px;
  display: inline-block;
  background: url(img/startstop.png) 100% 0 no-repeat;
  cursor: default;
}
#stopbutton {
  height: 40px;
  width: 40px;
  margin-right: 2px;
  margin-bottom: 4px;
  display: inline-block;
  background: url(img/stopbutton.png) 100% 0 no-repeat;
  cursor: default;
}
#shuffle {
  width: 40px;
  height: 22px;
  background: url(img/shuffle.png);
  margin-bottom: 2px;
}
#repeat {
  width: 30px;
  height: 26px;
  background: url(img/repeat.png);
}

/**************************/
/* SCROLLBOX for chords   */
/**************************/

#chorddisplay {
  width: 395px;
  height: 260px;
  float: left;
  background: url(img/chord_display_bg.png);
}
.rel {
  position: relative;
}
.chord {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 130px;
  width: 395px;
  font-family: times-new-roman, times, serif;
  font-size: 4em;
  text-align: center;
  color: black;
}
#activation_line {
  position: absolute;
  top: 178px;
  left: 38px;
  width: 318px;
  height: 24px;
  background: #fff url(img/activation_line.png);
  opacity: 0;
}

/********************/
/* CHORDCONTROL     */
/********************/

#chordcontrol {
  padding-left: 10px;
  padding-top: 8px;
  padding-bottom: 10px;
}
#chordcontrol .panel {
  float: left;
}
#chordcontrol select {
  width: 160px;
  height: 165px;
  color: #000;
  background: #fef6ec; /*553B1C*/
  border-top: 1px solid #9a774f;
  border-left: 1px solid #9a774f;
  border-right: 1px solid #dbb990;
  border-bottom: 1px solid #dbb990;
}
#chordcontrols {
  padding-top: 0px;
  padding-left: 10px;
  padding-right: 10px;
}
.panel#buttonbox {
  margin-left: 20px;
}

/***************************/
/* CHORDCONTROL DETAILS    */
/***************************/

.arrow_button {
  width: 34px;
  height: 22px;
  background: url(img/arrow_left_button.png) left top no-repeat;
  cursor: default;
}
#arrow_right {
  background-image: url(img/arrow_right_button.png);
}
.vert_arrow_button {
  width: 19px;
  height: 27px;
  margin-top: 4px;
  margin-bottom: 4px;
  background: url(img/arrow_up_button.png) left top no-repeat;
}
#arrow_down {
  background-image: url(img/arrow_down_button.png);
}
.arrow_button:active,
.vert_arrow_button:active,
.trans_button:active {
  background-position: left bottom;
}
.trans_button {
  width: 21px;
  height: 21px;
  margin-top: 2px;
  margin-bottom: 2px;
  background: url(img/trans_up_button.png) left top no-repeat;
}
#trans_down {
  background-image: url(img/trans_down_button.png);
}
#buttonbox .panel_inner {
  padding: 8px 30px;
}
#bC,
#bD,
#bE,
#bF,
#bG,
#bA,
#bB,
#bCiss,
#bDiss,
#bFiss,
#bGiss,
#bBb,
#bDb,
#bEb,
#bGb,
#bAb,
#bAiss {
  width: 31px;
}
#b,
#bm,
#bsus2,
#bsus4,
#b7,
#bm7,
#bmaj7,
#baug,
#bdim,
#bdim7,
#b2,
#b6 {
  width: 56px;
}
#save_list {
  width: 21px;
  height: 21px;
  margin-top: 134px;
  margin-bottom: 2px;
  background: url(img/save_button.png) left top no-repeat;
}

/***************************/
/* LIST LINK               */
/***************************/

#list_link_box {
  position: absolute;
  top: 650px;
  left: 60px;
  width: 646px;
  border: 3px solid black;
}
.close_x {
  width: 21px;
  height: 21px;
  background: url(img/close_x.png) left top no-repeat;
}
#close_list_link {
  position: absolute;
  top: 3px;
  left: 618px;
}

/********************/
/* BUTTON           */
/********************/

a.button {
  background: transparent url("img/button_right.png") no-repeat top right;
  display: block;
  float: left;
  height: 20px;
  padding-right: 3px; /* sliding doors padding */
  cursor: default;
  color: #fff;
}

a.button span {
  background: transparent url("img/button_left.png") no-repeat;
  display: block;
  line-height: 14px;
  padding: 2px 0 4px 3px;
  text-align: center;
}

a.button:active {
  background-position: bottom right;
  outline: none; /* hide dotted outline in Firefox */
}

a.button:active span {
  background-position: bottom left;
  padding: 3px 0 3px 3px; /* push text down 1px */
}

/************/
/* KEYBOARD */
/************/

#p_tab {
  position: absolute;
  top: -22px;
  left: -22px;
  border: 0px;
}
#p_content {
  background: #fef6ec;
  padding-top: 40px;
  padding-bottom: 18px;
  padding-left: 94px;
  padding-right: 67px;
}
#p_toggle {
  position: absolute;
  top: 137px;
  left: 560px;
  width: 16px;
  height: 16px;
  background-image: url(img/toggle.png);
}
#piano {
  width: 421px;
  height: 100px;
  position: relative;
}
.key {
  width: 19px;
  height: 98px;
  border: 1px solid #777;
  background-color: white;
  color: gray;
  display: inline-block;
  border-radius: 0 0 2px 2px;
}
.key_b {
  width: 11px;
  height: 62px;
  border: 1px solid gray;
  background-color: black;
  display: block;
  border-radius: 0 0 3px 3px;
}
#key1 {
  position: absolute;
  left: 0px;
}
#key3 {
  position: absolute;
  left: 20px;
}
#key5 {
  position: absolute;
  left: 40px;
}
#key6 {
  position: absolute;
  left: 60px;
}
#key8 {
  position: absolute;
  left: 80px;
}
#key10 {
  position: absolute;
  left: 100px;
}
#key12 {
  position: absolute;
  left: 120px;
}
#key13 {
  position: absolute;
  left: 140px;
}
#key15 {
  position: absolute;
  left: 160px;
}
#key17 {
  position: absolute;
  left: 180px;
}
#key18 {
  position: absolute;
  left: 200px;
}
#key20 {
  position: absolute;
  left: 220px;
}
#key22 {
  position: absolute;
  left: 240px;
}
#key24 {
  position: absolute;
  left: 260px;
}
#key25 {
  position: absolute;
  left: 280px;
}
#key27 {
  position: absolute;
  left: 300px;
}
#key29 {
  position: absolute;
  left: 320px;
}
#key30 {
  position: absolute;
  left: 340px;
}
#key32 {
  position: absolute;
  left: 360px;
}
#key34 {
  position: absolute;
  left: 380px;
}
#key36 {
  position: absolute;
  left: 400px;
}
#key2 {
  position: absolute;
  left: 12px;
}
#key4 {
  position: absolute;
  left: 36px;
}
#key7 {
  position: absolute;
  left: 72px;
}
#key9 {
  position: absolute;
  left: 94px;
}
#key11 {
  position: absolute;
  left: 116px;
}
#key14 {
  position: absolute;
  left: 152px;
}
#key16 {
  position: absolute;
  left: 176px;
}
#key19 {
  position: absolute;
  left: 212px;
}
#key21 {
  position: absolute;
  left: 234px;
}
#key23 {
  position: absolute;
  left: 256px;
}
#key26 {
  position: absolute;
  left: 292px;
}
#key28 {
  position: absolute;
  left: 316px;
}
#key31 {
  position: absolute;
  left: 352px;
}
#key33 {
  position: absolute;
  left: 374px;
}
#key35 {
  position: absolute;
  left: 396px;
}
.key_label {
  width: 19px;
  height: 20px;
  border: 0px;
  color: gray;
  position: absolute;
  top: 77px;
  display: none;
}

/************/
/* GUITAR   */
/************/

#g_tab {
  position: absolute;
  top: -22px;
  left: 562px;
  border: 0px;
}
#g_content {
  background: #fef6ec;
  padding-top: 32px;
  padding-bottom: 6px;
  padding-left: 32px;
  padding-right: 40px;
}
#g_toggle {
  position: absolute;
  top: 400px;
  left: 9px;
  width: 16px;
  height: 16px;
  background: url(img/toggle.png) top right;
}
.fret {
  position: relative;
  height: 40px;
  width: 132px;
  background: url(img/guitar_parts.png) bottom left no-repeat;
}
.fret_inlay {
  position: relative;
  height: 40px;
  width: 132px;
  background: url(img/guitar_parts.png) bottom right no-repeat;
}
#fret_top {
  height: 24px;
  background-position: top left;
}
.marker {
  position: absolute;
  top: 10px;
  width: 17px;
  height: 17px;
  background: url(img/marker1.png) top left;
}
#mark11,
#mark21,
#mark31,
#mark41,
#mark51,
#mark61,
#mark71,
#mark81,
#mark91 {
  left: 113px;
}
#mark12,
#mark22,
#mark32,
#mark42,
#mark52,
#mark62,
#mark72,
#mark82,
#mark92 {
  left: 91px;
}
#mark13,
#mark23,
#mark33,
#mark43,
#mark53,
#mark63,
#mark73,
#mark83,
#mark93 {
  left: 69px;
}
#mark14,
#mark24,
#mark34,
#mark44,
#mark54,
#mark64,
#mark74,
#mark84,
#mark94 {
  left: 47px;
}
#mark15,
#mark25,
#mark35,
#mark45,
#mark55,
#mark65,
#mark75,
#mark85,
#mark95 {
  left: 25px;
}
#mark16,
#mark26,
#mark36,
#mark46,
#mark56,
#mark66,
#mark76,
#mark86,
#mark96 {
  left: 3px;
}
.label {
  position: absolute;
  top: 28px;
  width: 17px;
  height: 10px;
  font-size: 0.7em;
  line-height: 10px;
  color: #000;
  background: url(img/g_label_bg.png);
  display: none;
}
#label01 {
  top: 5px;
  left: 113px;
}
#label02 {
  top: 5px;
  left: 91px;
}
#label03 {
  top: 5px;
  left: 69px;
}
#label04 {
  top: 5px;
  left: 47px;
}
#label05 {
  top: 5px;
  left: 25px;
}
#label06 {
  top: 5px;
  left: 3px;
}
#label11,
#label21,
#label31,
#label41,
#label51,
#label61,
#label71,
#label81,
#label91 {
  left: 113px;
}
#label12,
#label22,
#label32,
#label42,
#label52,
#label62,
#label72,
#label82,
#label92 {
  left: 91px;
}
#label13,
#label23,
#label33,
#label43,
#label53,
#label63,
#label73,
#label83,
#label93 {
  left: 69px;
}
#label14,
#label24,
#label34,
#label44,
#label54,
#label64,
#label74,
#label84,
#label94 {
  left: 47px;
}
#label15,
#label25,
#label35,
#label45,
#label55,
#label65,
#label75,
#label85,
#label95 {
  left: 25px;
}
#label16,
#label26,
#label36,
#label46,
#label56,
#label66,
#label76,
#label86,
#label96 {
  left: 3px;
}