/************ main layout ***************/
body{
	background-color: #000;
}
#centerDiv{
	background-color:#000;	
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	font-weight:bold;
    margin-bottom:40px;
}

/************ main layout ***************/

#alertBar{
	line-height:18px;
	background-color:#900;
	color:#fff;
	font-size:10px;
	font-weight:bold;
	padding:0px 10px;
}
#alertBar a{
	color:#fff;
	text-decoration:underline;
}
#alertBar a:hover{
	color:#fff;
}
#alertBar #alertJava{
	display:none;
}
.volume{
	height:12px;
	width:85px;
	background-image:url(../gfx/volume3.png);
	background-position:73px top;
	background-repeat: repeat-x;
	display:block;
}

/************ bpm column ************/
#bpmColumn{
	float:right;
	width:102px;
	background-color:#000;
	padding:10px 10px 10px 10px;
	color:#eee;
	text-align:center;
	font-size:10px;
}
#bpmColumn  a, #bpmColumn  input, #bpmColumn  .tapButton{
	color:#eee;
	font-weight:bold;
	text-align:center;
}
#bpmColumn input{
	width:95%;
	height:16px;
	line-height:16px;
	border:1px solid #222;
	background-color:#111;	
	font-size:12px;
	margin:5px 0px;
}	

#bpmColumn a.arrow{
	background-color:#222;
	display:block;
	float:left;
	line-height:24px;
	width:49px;
	height:24px;
	margin:1px 1px 10px 1px;
	font-size:16px;
}
#bpmColumn a.arrow:hover{
	background-color:#444;
}


#bpmColumn a.beat,#bpmColumn #tapResultDiv a{
	background-color:#111;
	display:block;
	float:left;
	line-height:32px;
	width:32px;
	height:32px;
	margin:1px;
	font-size:10px;
}
#bpmColumn a.beat:hover,#bpmColumn #tapResultDiv a:hover{
	background-color:#333;
}


#bpmColumn #tapResultDiv a,#bpmColumn #tapCancel,#bpmColumn #tapInfoDiv{
	visibility:hidden;
}
#bpmColumn #tapInfoDiv div.tapInfo{
	color:#aaa;
	display:block;
	float:left;
	padding:2px 0px;
	line-height:10px;
	width:32px;
	height:20px;
	margin:1px;
	background-color:#222;	
}
#bpmColumn #tapInfoDiv div.tapInfo3{
	margin-right:0px;
}

#bpmColumn #tapInfoDiv{
	width:102px;
}
#bpmColumn a.tapButton{
	color:#aaa;
	padding:5px 2px;
	display:block;
	float:left;
	width:96px;
	margin:1px;
	font-size:10px;
	background-color:#333;
}
#bpmColumn a.tapButton:hover{
	background-color:#222;
	color:#fff;
}

#bpmColumn a.tapButton.off .tap1{display:none;}
#bpmColumn a.tapButton.on .tap0{display:none;}
#bpmColumn a.tapButton.off .tap0{display:inline;}
#bpmColumn a.tapButton.on .tap1{display:inline;}


/************ bpm column ************/
/*********************** Left column ****************************/
#leftColumn{
	margin-right:122px;
	color:#eee;
}
.inst{
	width:32px;
	height:32px;
}

/***** Top controls *****/
#topControlsBar{
	text-align:right;	
	padding:10px;
}
#topControlsBar .volume{
	margin-top:5px;
}
#topControlsBar #busyInfo{
	visibility:hidden;
	color:#F00;
	float:left;
}


/***** Score *****/
#scoreContainer{
	padding:0px 20px;
	margin-bottom:30px;
}
#scoreContainer #scoreControls{
	margin-bottom:10px;
}
#scoreContainer #scoreControls a{
	margin-left:5px;
	text-decoration:none;
	border-bottom:1px dotted #fff;
	color:#eee;
}
#scoreContainer #scoreControls a:hover{
	border-bottom:1px solid #fff;
}
#scorePlayInfo{
    line-height:25px;
}
#scorePlayInfoText{
    color:#a96;font-variant:small-caps;font-size:14px;
    margin-right:20px;
}
#scoreContainer #scorePlayInfo a{
    background-color:#222;
    border:1px solid #5d5d5d;
    color:#ddd;
    display:none;
}
#scoreContainer #scorePlayInfo a:hover{
    border:1px solid #222;
    color:#fff;
}
#scoreContainer #scorePlayInfo a#pattern_share{
    padding:5px 5px 4px 25px;
    background: #222 url(/common/gfx/addthis13.png) 5px center no-repeat;
}
#scoreContainer #scorePlayInfo a#addToFav{
    padding:5px;
    display:none;
}
#scoreContainer a{
	text-decoration:none;
}
#scoreContainer table,#scoreContainer tr,#scoreContainer td{
	position:relative;
}
#scoreContainer tr{
	background:url(../gfx/scoreBack.png) left top repeat;
}
#scoreBegin{
	width:96px;
	height:32px;
	background:url(../gfx/scoreBegin.png) left top no-repeat;
}
#scoreEnd{
	width:53px;
	height:32px;
	background:url(../gfx/scoreEnd.png) left bottom no-repeat;
}

#scoreContainer .inst{
	z-index:10;
	position:relative;
	display:block;
	float:left;
	cursor:pointer;
}
#scoreContainer .inst0{ background:url(../gfx/inst0base.png) left top no-repeat;}
#scoreContainer .inst0:hover{ background:url(../gfx/inst0basehover.gif) left top no-repeat;}
#scoreContainer .inst1{ background:url(../gfx/inst1base.png) left top no-repeat;}
#scoreContainer .inst1:hover{ background:url(../gfx/inst1basehover.gif) left top no-repeat;}
#scoreContainer .inst2{ background:url(../gfx/inst2base.png) left top no-repeat;}
#scoreContainer .inst2:hover{ background:url(../gfx/inst2basehover.gif) left top no-repeat;}
#scoreContainer .inst3{ background:url(../gfx/inst3base.png) left top no-repeat;}
#scoreContainer .inst3:hover{ background:url(../gfx/inst3basehover.gif) left top no-repeat;}
#scoreContainer .inst4{ background:url(../gfx/inst4base.png) left top no-repeat;}
#scoreContainer .inst4:hover{ background:url(../gfx/inst4basehover.gif) left top no-repeat;}
#scoreContainer .inst5{ background:url(../gfx/inst5base.png) left top no-repeat;}
#scoreContainer .inst5:hover{ background:url(../gfx/inst5basehover.gif) left top no-repeat;}
#scoreContainer .inst6{ background:url(../gfx/inst6base.png) left top no-repeat;}
#scoreContainer .inst6:hover{ background:url(../gfx/inst6basehover.gif) left top no-repeat;}
#scoreContainer .inst7{ background:url(../gfx/inst7base.png) left top no-repeat;}
#scoreContainer .inst7:hover{ background:url(../gfx/inst7basehover.gif) left top no-repeat;}
#scoreContainer .instP{ background:url(../gfx/instPbase.png) left top no-repeat;}
#scoreContainer .instP:hover{background:url(../gfx/instPbasehover.gif) left top no-repeat;}

#scoreContainer .active0{ background:url(../gfx/inst0basecolor.gif) left top no-repeat;}
#scoreContainer .active1{ background:url(../gfx/inst1basecolor.gif) left top no-repeat;}
#scoreContainer .active2{ background:url(../gfx/inst2basecolor.gif) left top no-repeat;}
#scoreContainer .active3{ background:url(../gfx/inst3basecolor.gif) left top no-repeat;}
#scoreContainer .active4{ background:url(../gfx/inst4basecolor.gif) left top no-repeat;}
#scoreContainer .active5{ background:url(../gfx/inst5basecolor.gif) left top no-repeat;}
#scoreContainer .active6{ background:url(../gfx/inst6basecolor.gif) left top no-repeat;}
#scoreContainer .active7{ background:url(../gfx/inst7basecolor.gif) left top no-repeat;}
#scoreContainer .activeP{ background:url(../gfx/instPbasecolor.gif) left top no-repeat;}

.iconVer #scoreContainer .inst0{ background:url(../gfx/iconMbase.png) left top no-repeat;}
.iconVer #scoreContainer .inst0:hover{ background:url(../gfx/iconMbasehover.gif) left top no-repeat;}
.iconVer #scoreContainer .inst1{ background:url(../gfx/iconTbase.png) left top no-repeat;}
.iconVer #scoreContainer .inst1:hover{ background:url(../gfx/iconTbasehover.gif) left top no-repeat;}
.iconVer #scoreContainer .inst2{ background:url(../gfx/iconObase.png) left top no-repeat;}
.iconVer #scoreContainer .inst2:hover{ background:url(../gfx/iconObasehover.gif) left top no-repeat;}
.iconVer #scoreContainer .inst3{ background:url(../gfx/iconUbase.png) left top no-repeat;}
.iconVer #scoreContainer .inst3:hover{ background:url(../gfx/iconUbasehover.gif) left top no-repeat;}
.iconVer #scoreContainer .inst4{ background:url(../gfx/iconBbase.png) left top no-repeat;}
.iconVer #scoreContainer .inst4:hover{ background:url(../gfx/iconBbasehover.gif) left top no-repeat;}
.iconVer #scoreContainer .inst5{ background:url(../gfx/iconSbase.png) left top no-repeat;}
.iconVer #scoreContainer .inst5:hover{ background:url(../gfx/iconSbasehover.gif) left top no-repeat;}
.iconVer #scoreContainer .inst6{ background:url(../gfx/iconRbase.png) left top no-repeat;}
.iconVer #scoreContainer .inst6:hover{ background:url(../gfx/iconRbasehover.gif) left top no-repeat;}
.iconVer #scoreContainer .inst7{ background:url(../gfx/iconHbase.png) left top no-repeat;}
.iconVer #scoreContainer .inst7:hover{ background:url(../gfx/iconHbasehover.gif) left top no-repeat;}
.iconVer #scoreContainer .instP{ background:url(../gfx/instPbase.png) left top no-repeat;}
.iconVer #scoreContainer .instP:hover{background:url(../gfx/instPbasehover.gif) left top no-repeat;}

.iconVer #scoreContainer .active0{ background:url(../gfx/iconMbasecolor.gif) left top no-repeat;}
.iconVer #scoreContainer .active1{ background:url(../gfx/iconTbasecolor.gif) left top no-repeat;}
.iconVer #scoreContainer .active2{ background:url(../gfx/iconObasecolor.gif) left top no-repeat;}
.iconVer #scoreContainer .active3{ background:url(../gfx/iconUbasecolor.gif) left top no-repeat;}
.iconVer #scoreContainer .active4{ background:url(../gfx/iconBbasecolor.gif) left top no-repeat;}
.iconVer #scoreContainer .active5{ background:url(../gfx/iconSbasecolor.gif) left top no-repeat;}
.iconVer #scoreContainer .active6{ background:url(../gfx/iconRbasecolor.gif) left top no-repeat;}
.iconVer #scoreContainer .active7{ background:url(../gfx/iconHbasecolor.gif) left top no-repeat;}
.iconVer #scoreContainer .activeP{ background:url(../gfx/instPbasecolor.gif) left top no-repeat;}


/***** Score *****/

/***** instruments *****/
#instColumn{
	width:120px;	
	padding:0px 20px;
	float:left;
    z-index:100;
}
#instColumn .instBlock{
	margin-bottom:5px;
	display:block;
}
#instColumn .endBlock{
	height:3px;
	line-height:3px;
	font-size:1px;
	background-color:#050505;
	border-bottom:1px solid #222;
	border-top:1px solid #222;
}
#instColumn .label{
	text-align:center;
	background-color:#111;
	padding:0px 0px 1px 0px;
	border-top:1px solid #333;
}
#instColumn .volume{
	float:right;
	display:block;
	margin-top:11px;
}
#instColumn a.inst{
	margin-top:1px;
	position:relative;
	float:left;
	display:block;
}
#instColumn a.inst0{ background:url(../gfx/inst0.png) left top no-repeat;}
#instColumn a.inst0:hover{ background:url(../gfx/inst0hover.gif) left top no-repeat;}
#instColumn a.inst1{ background:url(../gfx/inst1.png) left top no-repeat;}
#instColumn a.inst1:hover{ background:url(../gfx/inst1hover.gif) left top no-repeat;}
#instColumn a.inst2{ background:url(../gfx/inst2.png) left top no-repeat;}
#instColumn a.inst2:hover{ background:url(../gfx/inst2hover.gif) left top no-repeat;}
#instColumn a.inst3{ background:url(../gfx/inst3.png) left top no-repeat;}
#instColumn a.inst3:hover{ background:url(../gfx/inst3hover.gif) left top no-repeat;}
#instColumn a.inst4{ background:url(../gfx/inst4.png) left top no-repeat;}
#instColumn a.inst4:hover{ background:url(../gfx/inst4hover.gif) left top no-repeat;}
#instColumn a.inst5{ background:url(../gfx/inst5.png) left top no-repeat;}
#instColumn a.inst5:hover{ background:url(../gfx/inst5hover.gif) left top no-repeat;}
#instColumn a.inst6{ background:url(../gfx/inst6.png) left top no-repeat;}
#instColumn a.inst6:hover{ background:url(../gfx/inst6hover.gif) left top no-repeat;}
#instColumn a.inst7{ background:url(../gfx/inst7.png) left top no-repeat;}
#instColumn a.inst7:hover{ background:url(../gfx/inst7hover.gif) left top no-repeat;}
#instColumn a.instP{ background:url(../gfx/instP.png) left top no-repeat;}
#instColumn a.instP:hover{ background:url(../gfx/instPhover.gif) left top no-repeat;}

.iconVer #instColumn a.inst0{ background:url(../gfx/iconM.png) left top no-repeat;}
.iconVer #instColumn a.inst0:hover{ background:url(../gfx/iconMhover.gif) left top no-repeat;}
.iconVer #instColumn a.inst1{ background:url(../gfx/iconT.png) left top no-repeat;}
.iconVer #instColumn a.inst1:hover{ background:url(../gfx/iconThover.gif) left top no-repeat;}
.iconVer #instColumn a.inst2{ background:url(../gfx/iconO.png) left top no-repeat;}
.iconVer #instColumn a.inst2:hover{ background:url(../gfx/iconOhover.gif) left top no-repeat;}
.iconVer #instColumn a.inst3{ background:url(../gfx/iconU.png) left top no-repeat;}
.iconVer #instColumn a.inst3:hover{ background:url(../gfx/iconUhover.gif) left top no-repeat;}
.iconVer #instColumn a.inst4{ background:url(../gfx/iconB.png) left top no-repeat;}
.iconVer #instColumn a.inst4:hover{ background:url(../gfx/iconBhover.gif) left top no-repeat;}
.iconVer #instColumn a.inst5{ background:url(../gfx/iconS.png) left top no-repeat;}
.iconVer #instColumn a.inst5:hover{ background:url(../gfx/iconShover.gif) left top no-repeat;}
.iconVer #instColumn a.inst6{ background:url(../gfx/iconR.png) left top no-repeat;}
.iconVer #instColumn a.inst6:hover{ background:url(../gfx/iconRhover.gif) left top no-repeat;}
.iconVer #instColumn a.inst7{ background:url(../gfx/iconH.png) left top no-repeat;}
.iconVer #instColumn a.inst7:hover{ background:url(../gfx/iconHhover.gif) left top no-repeat;}
.iconVer #instColumn a.instP{ background:url(../gfx/instP.png) left top no-repeat;}
.iconVer #instColumn a.instP:hover{ background:url(../gfx/instPhover.gif) left top no-repeat;}


/***** instruments *****/
/***** presets *****/
#startButtonBar{
	margin:20px 20px 20px 180px;	
	font-size:30px;
	line-height:30px;
	text-align:center;
    display:none;
}
#startButtonBar a{
	padding:0px 5px;
    margin:0px 10px;
	color:#000;
	background-color:#444;
	border:1px solid #555;
}
#startButtonBar a:hover{
	color:#fff;
	background-color:#333;
	border:1px solid #444;
}
#startButtonBar a #counterHint,#startButtonBar a:hover #counterVal{
    display:none;
}
#startButtonBar a:hover #counterHint,#startButtonBar a #counterVal{
    display:inline;
}

#presetsColumn{
	margin:0px 20px 0px 180px;	
	padding:10px 30px;
	background-color:#111;
	border:1px solid #222;
}
#presetsColumn .separator{
	margin:5px 0px;
	height:0px;
	line-height:0px;
	font-size:0px;
	border-top:1px solid #222;
}
#presetsColumn .important{
	color:#f00;
}

#presetsColumn a.important{
	color:#f00;
	text-decoration:underline;
}
#presetsColumn a.important:hover{
	color:#f00;
	text-decoration:none;
}
#presetsColumn a.ulink{
	color:#fff;
	text-decoration:underline;
}
#presetsColumn a.ulink:hover{
	color:#fff;
	text-decoration:none;
}

#presetsColumn a.simple{
	color:#fff;
	text-decoration:underline;
}
#presetsColumn a.simple:hover{
	color:#fff;
	text-decoration:none;
}

#presetsColumn ul
{
	margin-top:5px;
	margin-bottom:5px;
	list-style:square;
}

div.patitem a.remove{
    color:#fff;
    background:#444;
    float:right;
    padding:0px 4px;
    margin-left:10px;
    position:relative;
}
div.patitem a.remove:hover{
    color:#000;
    background:#fff;
}

div.patitem a.dlink{
    color:#33c;
	border-bottom:1px dotted #33c;
    float:right;    
    position:relative;
}
div.patitem a.dlink:hover{
    color:#33c;
	border-bottom:1px solid #33c;
}

div.patitem a.label{
    color:#aaa;
}
div.patitem a.label:hover{
    color:#fff;
}

div.patitem{
	margin:2px 0px 2px 5px;
	padding-left:10px;
	display:block;
	color:#eee;
	border-left: 12px solid #555;
}
div.patitem:hover{
	color:#eee;
	border-left: 12px solid #777;
}


#patternTabs{
    text-align:center;
    margin:10px -31px;
    background:#222;
}
#patternTabs a{
    color:#ddd;		
    padding:10px 20px;
    margin:8px 0px;
    line-height:30px;
}
#patternTabs a:hover{
    color:#fff;
    background:#111;
}

#patternsSearch input.searchCtrl{
    width:50%;
    background:#000;
    border:1px solid #444;
    color:#fff;
    font-weight:bold;
    text-align:center;
    height:16px;
}
#patternsSearch a.searchCtrl{
    color:#bbb;
    background:#222;
    padding:4px 20px 2px 20px;
    margin:4px 10px 2px 10px;
    height:18px;
}
#patternsSearch a.searchCtrl:hover{
    color:#fff;
    background:#000;
}
.pageControls{
    text-align:center;
}
.pageControls span{
    color:#fff;
    font-weight:bold;
}
.pageControls a, .pageControls span{
    padding:0px 10px;
    margin:0px 1px;
}
.pageControls a{
    color:#bbb;
    background:#222;
}
.pageControls a:hover{
    color:#fff;
    background:#111;
}

/***** presets *****/

#visualisationColumn{
	margin-left:588px;
}

/*********** Left column ************/

/*********** visualisation screen ************/
#visualisationScreen{
    display:none;
    background:black;
	font-family:Verdana, Arial, Helvetica, sans-serif;
    font-weight:bold;
    position:absolute;
    height:100%;
    width:100%;
}

.visualControlButton{
    position:absolute;
    top:0px;
    width:10px;
    height:11px;
    padding:4px 5px;
    font-size:10px;
    color:#000;
	background-color:#666;
    text-align:center;
    border-color:#666;
	border-style:none solid solid solid;
	border-width:0px 1px 1px 1px;
}

.visualControlButton:hover{
	background-color:#444;
	border-color: #555;
    color:#fff;
}

#visualControlHint{
    position:absolute;
    bottom:0px;
    left:0px;
    padding:4px 7px;
    font-size:10px;
    color:#777;
    text-align:left;
}
#visualControlExit{
    right:0px;
}
#visualControlHelp{
    right:23px;
}
#visualControlNext{
    right:46px;
}
#visualControlPrev{
    right:69px;
}
#visualControlHelp .vcInfo{
    display:none;
    padding:20px;
    text-align:left;
}
#visualControlHelp:active{
    width:auto;
    height:auto;
	background-color:#444;
    border-color:#555;
    color:#fff;
}
#visualControlHelp:active .vcInfo{
    display:block;
}
 
#visual1{
    position:absolute;
    width:100%;
    height:100%;
    display:none;
}
#visual1 table{
    position:absolute;
}

#visual1 span{
	color:#000;
	background-color:#444;
	border:1px solid #555;
    font-size:150px;
    line-height:350px;
    padding:50px;
}

#visual2{
    position:absolute;
    width:100%;
    height:100%;
    display:none;
}
#visual2 table{
    position:absolute;
}
#visual2 span{
	color:#fff;
	border:1px solid #fff;
    font-size:150px;
    line-height:350px;
    padding:50px;
	background:url(../gfx/visual2bgO.gif) left top repeat;
}

#visual2 span.first{
	background:url(../gfx/visual2bg1.gif) left top repeat;
}