/*****************/
/* 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;
}
#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: 4.0em;
	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.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: 5px;
}
.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: 144px;
	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 black;
    background-color: white;
    color: gray;
	display: inline-block;
}
.key_b
{
    width: 11px;
    height: 62px;
    border: 1px solid gray;
    background-color: black;
	display: block;
}
#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; }