:root 
{
    --light-color: #AFCFEF;
    --medium-color: #6F8FAF;
    --dark-color: #2F4F6F;
}

*
{
	font-family: verdana,arial,helvetica;
	color: #666;	
	padding: 0px;
	margin: 0px;
	border: 0px;
}

html
{
	overflow-y: scroll;
}

body
{
	font-size: 100%; 
}

a 
{
	text-decoration: underline; 
	font-weight: bold;
	font-size: 14pt; 
}

a.button-high, a.button-low, a.button-selected, a.button-error
{
	padding-left: 4px;
	padding-right: 4px;
	padding-top: 2px;
	padding-bottom: 3px;
	text-decoration: none;
	text-align: center;
	border-radius: 5px;
	font-weight: bold;
	font-size: 14pt; 
}
a.button-high
{
	color: #fff; 
	border: 3px solid var(--light-color); 
	background-color: var(--medium-color);
}
a.button-low
{
	color: #666; 
	border: 3px solid var(--medium-color); 
	background-color: #fff;
}
a.button-selected
{
	color: var(--medium-color); 
	border: 3px solid var(--light-color); 
	background-color: #fff;
}
a.button-error
{
	color: #fff; 
	border: 3px solid #f33e3e; 
	background-color: #d31e1e;
}


a.toggleOn, a.toggleOff
{
	color: #fff;
	padding-left: 4px;
	padding-right: 4px;
	padding-top: 2px;
	padding-bottom: 3px;
	text-decoration: none;
	text-align: center;
	border-radius: 3px;
	font-weight: bold;
	font-size: 14pt; 
}
a.toggleOn
{
	border: 2px solid #030; 
	background-color: #070;
} 
a.toggleOff
{
	border: 2px solid #300; 
	background-color: #700;
} 
a.highFlash
{
	border-color: var(--light-color); 
}

a.toggleNeutral, a.toggleGood, a.toggleBad
{
    color: #fff;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 26px;
    padding-bottom: 10px;
    text-decoration: none;
    text-align: center;
    border-radius: 3px;
    font-weight: bold;
    font-size: 14pt;
    height: 50px;
}
a.toggleNeutral
{
    border: 2px solid #999;
    background-color: #fff;
}
a.toggleGood
{
    border: 2px solid #3c6800;
    background-color: #7ca82b;
}
a.toggleBad
{
    border: 2px solid #930000;
    background-color: #d31e1e;
}
a.toggleBad i, a.toggleGood i
{
    color: white;
}

a.actionItem, a.actionItemDisabled
{
    color: #fff;
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 5px;
    padding-bottom: 6px;
    text-decoration: none;
    text-align: center;
    border-radius: 3px;
    font-weight: bold;
    border: 2px solid var(--dark-color);
    background-color: var(--medium-color);
    font-size: 18pt;
}
a.actionItemDisabled
{
	color: #fff;
	border: 1px solid #ccc; 
	background-color: #eee;
	font-weight: bold;
	pointer-events: none;
} 

.small-panel
{
	padding-top: 4px;
	padding-bottom: 4px;
	padding-left: 6px;
	padding-right: 6px;
	border-radius: 3px;
	color: White;
	display: ineline-block;
}
.cool-green
{
	background-color: #7ca82b !important;
}
.cool-amber
{
	background-color: #ef8535 !important;
}
.cool-red
{
	background-color: #d31e1e !important;
}
.cool-blue
{
	background-color: #6a7f9e !important;
}
.cool-grey
{
	background-color: #666 !important;
}
.cool-light-green
{
	background-color: #f0fff0 !important;
}
.cool-light-red
{
	background-color: #fff0f0 !important;
}


select
{
	color: #fff;
	padding-left: 12px;
	padding-right: 12px;
	padding-top: 5px;
	padding-bottom: 6px;
	text-align: center;
	border-radius: 3px;
	font-weight: bold;
    border: 2px solid var(--dark-color);
    background-color: var(--medium-color);
}
option
{
	font-size: 16pt; 
	color: Black;
	background-color: White;
}

input[type='text'], input[type='password'], input[type='email']
{
    border: 2px solid var(--dark-color);
	border-radius: 3px;
	padding: 3px;
}

input[type='checkbox']
{
	margin-right: 8px;
}

.lowkey
{
	color: #999;
}

.tabSearch
{
	padding: 3px;
	border: solid 1px #b0b0b0;
	font-size: 22px;
	color: Black;
	background-color: White;
	width: 200px;
	background: white url('../images/search.png') no-repeat right center;
	margin-top: 8px;
}

h2 
{ 
	font-size: 18pt; 
}

#topBar
{
	background-color: var(--dark-color);
	height: 50px;
	line-height: 50px;
}

#topBarLeft
{
	padding-top: 4px;
	padding-left: 6px;
	vertical-align: middle;
	line-height: 20px;
    xtext-shadow:  2px 2px 8px #999;
	float: left;
}
#topBarLeft b
{
	color: #fff;
}
#topBarLeft a
{
    font-size: 20px;
    font-weight: 700;
    color: #f5f5f5;
	text-decoration: none;
    font-family: 'Courier New', 'Roboto', Arial, sans-serif;
}

#topBarRight
{
	float: right;
	padding-right: 10px;
	text-align: right;
	color: #ccc;
}

#contentBar
{
	background-color: #fff;
    margin: 0 auto;
}

#contentBarInner
{
	padding-top: 10px;
	padding-left: 6px;
	padding-right: 6px;
}

div.toolbarLarge
{
	border: solid 1px #ddd;
	height: 50px;
	line-height: 50px;
	background-color: #f0f0f0;
	padding-left: 8px;
	padding-right: 8px;
	overflow: hidden;
}

table.masterLayout
{
	border-spacing: 0px;
	width: 100%;
}

table.masterLayout th
{
	padding-left:6px;
	padding-right:6px;
	color: #fff;
	background-color: #6a7f9e;
}

table.masterLayout tr
{
	background: #f7f7f7;
	padding-top: 2px;
	height: 55px;
}

table.masterLayout td
{
	border-bottom: solid 1px #e0e0e0;
	padding-left:6px;
	padding-right:6px;
}

table.masterLayout td.link
{
	border-bottom: solid 1px #e0e0e0;
	border-top: solid 1px white;
	padding-left:6px;
	padding-right:6px;
	cursor: pointer;
}
table.masterLayout td.link:hover
{
	filter: alpha(opacity:55);
	KHTMLOpacity: 0.55;
	MozOpacity: 0.55;
	opacity: 0.55;
}

table.masterLayout td.grey
{
	border-bottom: solid 1px #f0f0f0;
	border-top: solid 1px #f0f0f0;
	background-color: #f0f0f0;
	padding-left:6px;
	padding-right:6px;
}

table.masterLayout td.header
{
	background: url(../images/fade3.png) repeat-x;
	border-top: solid 0px white;
}

table.masterLayout td.headerc
{
	background: url(../images/fade3.png) repeat-x;
	border-top: solid 0px white;
	vertical-align: middle;
	text-align: center;
}

table.masterLayout td.headerLink
{
	background: url(../images/fade3.png) repeat-x;
	border-top: solid 0px white;
	cursor: pointer;
}
table.masterLayout td.headerLink:hover
{
	filter: alpha(opacity:55);
	KHTMLOpacity: 0.55;
	MozOpacity: 0.55;
	opacity: 0.55;
}
table.masterLayout td.h2
{
	height: 32px !important;
	height: 30px;
}

.tabheader
{
}

.tabtitle
{
	border-left: solid 1px #DDDDDD;
	border-top: solid 1px #DDDDDD;
	border-right: solid 1px #DDDDDD;
	font-size: 18px;
	font-weight: bold;
	padding: 2px 5px 4px 5px;
	background-color: #F0F0F0;
}

.tabtitle i
{
	padding-top: 4px;
	padding-right: 10px;
	font-size: 12px;
	float: right;
}

.tabid
{
	font-size: 18px;
	float: right;
}

.tabrealid
{
	padding-top: 4px;
	padding-right: 10px;
	font-size: 12px;
	float: right;
	color: #aaa;
}

.tabartist
{
	border-left: solid 1px #DDDDDD;
	border-bottom: solid 1px #DDDDDD;
	border-right: solid 1px #DDDDDD;
	font-size: 12px;
	background-color: #F7F7F7;
	padding: 3px 5px 5px 5px;
}

.tabver
{
	float: right;
	color: #999;
}

.tabtable
{
	padding: 0px;
	margin-left: 15px;
	border: 0px;
	border-collapse: collapse;
overflow: hidden; /* fix for Firefox */
break-inside: avoid-column;
-webkit-column-break-inside: avoid;
}
.chorus .tabtable, .dynamics .tabtable, .dynamics .chordlisttable, .chorus .lyrictable, .dynamics .lyrictable
{
	margin-left: 0px;
}

.chordlisttable
{
	padding: 0px;
	border: 0px;
	margin-left: 15px;
}

.tabtable td
{
}

.lyrictable
{
	margin-left: 15px;
	margin-top: 3px;
	padding: 0px;
	border: 0px;
	border-collapse: collapse;
}

.tabcomment, .isotabcomment
{
	padding-top: 0px;
	padding-bottom: 0px;
	color: #222;
	margin: 0px;
	font-size: 12px;
	font-weight: bold;
}

.isotabcomment
{
	color: #900
}

.tabindextitle
{
	color: Black;
}

p.guitarcomment
{
	margin: 0px;
	font-size: 12px;
}

.chordcomment
{
	font-size: 12px;
	color: #666;	
}
.ghostnote
{
	font-size: inherit;
    color: #999;
}

td.chord
{
	padding-top: 5px;
	color: Blue;
	font-size: 12px;
}
td.chordcompact
{
	padding-top: 3px;
	color: Blue;
	font-size: 12px;
}

td.chordtab
{
	font-family: Courier New;
	color: Blue;
	font-size: 12px;
}

td.lyricfixed
{
	font-family: Courier New;
	color: #444;
	font-size: 12px;
}
td.chordfixed
{
	font-family: Courier New;
	padding-top: 5px;
	color: Blue;
	font-size: 12px;
}

td.keyBar
{
	border: solid 1px #666;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	color: Blue;
	font-size: 12px;
}

td.altBar
{
	border: solid 1px #bbb;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	color: Blue;
	font-size: 12px;
}

td.comBar
{
	border: solid 1px #fff;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	font-size: 12px;
}

span.barpart
{
	color: Blue;
	font-size: 12px;
	display: block;
	float: left;
}
span.barpartsep
{
	color: #999;
	display: block;
	float: left;
}

td.chordlist
{
	padding-top: 5px;
	font-size: 12px;
}

td.lyric
{
	color: Black;
	font-size: 12px;
	white-space: nowrap;
}

td.lyricchorus
{
	color: #444;
	font-size: 12px;
	white-space: nowrap;
}

td.lyricoverlay
{
	font-size: 12px;
	font-style: italic;
	white-space: nowrap;
}

td.lyrictab
{
	font-family: Courier New;
	color: #444;
	font-size: 12px;
	white-space: nowrap;
}

td.lyricfixed
{
	font-family: Courier New;
	color: #444;
	font-size: 12px;
	white-space: nowrap;
}
td.chordfixed
{
	font-family: Courier New;
	padding-top: 5px;
	color: Blue;
	font-size: 12px;
	white-space: nowrap;
}

span.bvocal
{
	font-size: 12px;
	color: #cc5500;
}

span.dvocal
{
	font-size: 12px;
	color: #cc0004;
}

table.tabgrid
{
	border-spacing: 0;
	font-size: 12px;
}
table.tabgrid tbody
{
	font-size: inherit;
}
table.tabgrid tr
{
	font-size: inherit;
}
table.tabgrid tr td
{
	color: #000;
	font-family: Courier New;
	background: url(../images/tabcon.gif) no-repeat center;
	vertical-align: middle;
	font-size: inherit;
}

table.tabgrid td.tl
{
	background: url(../images/tabtop.gif) no-repeat left;
}

table.tabgrid td.tr
{
	background: url(../images/tabtop.gif) no-repeat right;
}

table.tabgrid td.ml
{
	background: url(../images/tabmid.gif) no-repeat left;
}

table.tabgrid td.mr
{
	background: url(../images/tabmid.gif) no-repeat right;
}

table.tabgrid td.bl
{
	background: url(../images/tabbot.gif) no-repeat left;
}

table.tabgrid td.br
{
	background: url(../images/tabbot.gif) no-repeat right;
}

table.tabgrid td.text
{
	background: none;
}

table.tabgrid td.text-light
{
	color: #999;
	background: none;
}

.chorusOuter { padding-bottom: 6px; border-left: solid 1px #ddd; background-color: #f7f7f7; }
.chorus { padding-left: 14px; background-color: #f7f7f7; }
.loud1 { padding-left: 14px; border-left: solid 1px #e00000; }
.loud2 { padding-left: 13px; border-left: solid 2px #c70000; }
.loud3 { padding-left: 12px; border-left: solid 3px #b00000; }
.loud4 { padding-left: 11px; border-left: solid 4px #970000; }
.loud5 { padding-left: 10px; border-left: solid 5px #800000; }
.quiet1 { padding-left: 14px; border-left: solid 1px #00e000; }
.quiet2 { padding-left: 13px; border-left: solid 2px #00c700; }
.quiet3 { padding-left: 12px; border-left: solid 3px #00b000; }
.quiet4 { padding-left: 11px; border-left: solid 4px #009700; }
.quiet5 { padding-left: 10px; border-left: solid 5px #008000; }

table.tabholder
{
	width: 100%;
}

	table.tabholder table
{
}

table.tabholder td
{
	vertical-align: top;
}

table.tabholder table td.c1
{
	width: 10%;
	vertical-align: top;
}

table.tabholder table td.c2
{
	width: 90%;
	vertical-align: top;
}

div.bmenu
{
	position: absolute;
	z-index: 10;
	opacity: 0.7;
}

div.bmenu a
{
    display: block;
	color: #fff;
	text-decoration: none;
	border: solid 1px #666;
	border-radius: 3px;
	width: 30px;
	height: 30px;
	background-color: #eee;
}

#tabpopup
{
	position: absolute; 
	display: none; 
	border: solid 1px #ddd; 
	background-color: #eee;
	z-index: 9;
}

#tabloading
{
	text-align: center;
	padding-top: 100px;
	color: #999;
}

#tabcontent
{
	visibility: hidden;
	padding-left: 10px;
	padding-right: 10px;
	display: inline-block;
}

table.input
{
	font-size: 14pt; 
}

table.input th
{
	background-color: #ddd;
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: left;
}

table.input td
{
	padding-top: 10px;
	padding-bottom: 10px;
	background-color: #eee;
}

table.input td.prompt
{
	text-align: right;
	padding-right: 10px;
}

table.input td.buttons
{
	background-color: #ddd;
	padding-top: 14px;
	padding-bottom: 14px;
}

table.layout tr
{
    height: 60px;
    line-height: 60px;
}

table.layout tr.tall
{
    height: 80px;
    line-height: 80px;
}

table.layout td
{
	zzpadding-top: 10px;
	xpadding-bottom: 10px;
}

table.layout td, table.layout td input, table.layout td select, table.layout td option
{
	font-size: 18pt; 
}

table.input th
{
	font-size: 22pt; 
	font-weight: bold;
}
table.input td, table.input td input, table.input td select, table.input td option
{
	font-size: 18pt; 
}

.tabgridex
{
	width: 100%;
	height: 100%;
	background-color: #050505;
	position: absolute;
	overflow: auto;
}

.tabgridex a
{
	width: 100%;
	height: 100%;
	line-height: 150%;
	display: inline-block;
	text-align: center;
	vertical-align: middle;
	color: white;
	text-decoration: none;
	border-radius: 9px;
	border: solid 4px;
	xmargin: 4px;
}

.tabgridex td
{
	height: 10%;
	width: 12.5%;
	xpadding: 4px;
}

.tabgridex tr
{
	xpadding: 4px;
	xheight: 100%;
	xbackground-color: blue;
	
}

.tabpage
{
    position: absolute;
    left: 0;
    xtransition: all 0.3s ease-out;	
    background-color: #fff;
}

.inactive_page 
{
    display: none; 
    xleft: 100%;
}

.active_page
{
    display: block;
    xleft: -100%;
}

div.iconBar
{
	xbackground-color: Red;
	height: 17px;
	line-height: 17px;
}
div#statusBar
{
	float: left; 
	padding-right: 8px;
	height: 50px;
	line-height: 50px;
}
div.statusBarInner
{
}
span.statusLow,span.statusHigh,span.errorLow,span.errorHigh
{
    padding-right: 8px;
	font-size: 18px;
}
span.statusLow, span.statusLow i
{
    color: var(--medium-color);
}
span.statusHigh, span.statusHigh i
{
    color: var(--light-color);
}
span.errorLow, span.errorLow i
{
    color: var(--medium-color);
}
span.errorHigh, span.errorHigh i
{
    color: #9a0000;
}

div#menuPage
{
    position: absolute;
    left: 0;
	background: rgba(0,0,0,0.7);
    width: 100%;
    height: 100%;
    display: table;
}

div#menuPage div
{
	display: table-cell;
	vertical-align: middle;
}
div#menuPage div div
{
	margin: auto;
	width: 70%;
	display: block;
}

div#menuPage a
{
	font-weight: normal;
	text-align: left;
	border-top: solid 1px #ccc;
	padding-top: 16px;
	padding-left: 16px;
	padding-right: 8px;
	padding-bottom: 16px;
	text-decoration: none;
	display: block;
	color: #666;
	background-color: #f7f7f7;
	font-size: 16pt; 
}

.media-frame
{
	margin-top: 16px;
	width: 100%;
	height: 300px;
}
.xmedia-frame:after
{
	clear: both;
}

div.info
{
	font-size: 18pt; 
	line-height: 26pt;
	padding-bottom: 14px;
}
div.info div
{
	padding-top: 8px;
	padding-bottom: 8px;
}

div.subheader
{
	padding: 16px;
	border-bottom: solid 1px #ddd;
	background-color: #f0f0f0;
}