/*  ©2016 Marcel Kostelník */
*{
	margin:0;
	padding:0;
}

html, body{
	display: table;
}
body{
	font-family: Georgia, "Times New Roman", Times, serif;	
	
}

.btn{
	font-family:Verdana, Geneva, sans-serif;
	padding:15px;
	background-color: #CDDDBD;
	font-weight:bold;
	cursor:pointer;
}

.btn:hover{
	background-color: #B1CA99;
}


#content {
	padding:2em;
}

#content  h2,p{
	margin: 1em 0 1em 0;
}




/* header */

header{
	padding:15px;
	
}

header nav{
	overflow:hidden;
	padding-bottom:.4em;
	
}
header nav a{
	float:left;
	display:block;
	padding:  5px;
	text-decoration:none;
	color:#666;
}
header nav a:hover{
	background-color:#EBEBEB
}

header H1, 
header p {
	padding:.4em;
}

header #author {
	font-weight:bold;
	font-style: italic;
	font-size: large;
	
}


header #controlBar{
	overflow:hidden;
	padding:15px 0 15px 0;
}




header #controlBar .btn{
	float: left;
}







/* partiture */
#partiture{
	position:relative;
	
}
#partiture #btnAddPart{
	position:absolute;
	bottom:-47px;
	left:128px;
	
}
#partiture #btnAddTakt{
	position:absolute;
	right:-108px;
	
}

#partiture .part {
	position:relative;
	height:225px;
	white-space:nowrap;
	
}
#partiture .part.current {
	background-color:#FFC
}

#partiture .part .title {
	display:inline-block;
	width:128px;
	height:100%;
	background-color:#FFF;
	border-right:solid 1px black;
}
#partiture .part .title p {
	margin:15px;
	font-style: italic;
	font-weight: bold;
	white-space:normal;
	
	
}
#partiture .part .setting {
	display:inline-block;
	width:356px;
	height:100%;
	background-image: url(img/osnova_1.png);
	background-repeat: repeat-x;
	
	
}
#partiture .part .setting .taktType {
	display:inline-block;
	height:100%;
	width:31px;
	margin-left:5px;
}
#partiture .part .setting .taktType .taktNoteNum {
	width:31px;
	height:50%;
	position:absolute;
	top:0px;
	background-repeat: no-repeat;
	background-position: center bottom;	
}
#partiture .part .setting .taktType .taktNoteVal {
	width:31px;
	height:50%;
	position:absolute;
	bottom:0px;
	background-repeat: no-repeat;
	background-position: center top;	
}
.num2{
	background-image: url(img/num2.png);
}
.num3{
	background-image: url(img/num3.png);
}
.num4{
	background-image: url(img/num4.png);
}
.num5{
	background-image: url(img/num5.png);
}
.num6{
	background-image: url(img/num6.png);
}
.num7{
	background-image: url(img/num7.png);
}
.num8{
	background-image: url(img/num8.png);
}


#partiture .part .setting .key{
	background-repeat: no-repeat;
	display:inline-block;
	height:100%;
	padding-left: 60px;
}
#partiture .part .setting .key.g {
	background-image: url(img/key_g.png);
	background-position: 5px 54px;
	
}
#partiture .part .setting .key.f {
	background-image: url(img/key_f.png);
	background-position: 5px 80px;
}

#partiture .part .setting .sign {
	display:inline-block;
	height:100%;
}
#partiture .part .setting .sign div {
	display:inline-block;
	width:	18px;
	height:100%;
}
#partiture .part .x {
	width:14px;
	background-image: url(img/x.png);
	background-repeat: no-repeat;
}




#partiture .part .setting .sign.g  .x.c {
	background-position: 0px 85px;
}
#partiture .part .setting .sign.g  .x.d {
	background-position: 0px 78px;
}
#partiture .part .setting .sign.g  .x.e {
	background-position: 0px 70px;
}
#partiture .part .setting .sign.g  .x.f {
	background-position: 0px 62px;
}
#partiture .part .setting .sign.g  .x.g {
	background-position: 0px 55px;
}
#partiture .part .setting .sign.g  .x.a {
	background-position: 0px 102px;
}
#partiture .part .setting .sign.g  .x.h {
	background-position: 0px 94px;
	
}

#partiture .part .setting .sign.f  .x.c {
	background-position: 0px 101px;
}
#partiture .part .setting .sign.f  .x.d {
	background-position: 0px 94px;
}
#partiture .part .setting .sign.f  .x.e {
	background-position: 0px 86px;
}
#partiture .part .setting .sign.f  .x.f {
	background-position: 0px 78px;
}
#partiture .part .setting .sign.f  .x.g {
	background-position: 0px 70px;
}
#partiture .part .setting .sign.f .x.a {
	background-position: 0px 62px;
}
#partiture .part .setting .sign.f .x.h {
	background-position: 0px 54px;
}


#partiture .part .b {
	width:14px;
	background-image: url(img/b.png);
	background-repeat: no-repeat;
}

#partiture .part .setting .sign.g  .b.c {
	background-position: 0px 82px;
}
#partiture .part .setting .sign.g  .b.d {
	background-position: 0px 75px;
}
#partiture .part .setting .sign.g  .b.e {
	background-position: 0px 66px;
}
#partiture .part .setting .sign.g  .b.f {
	background-position: 0px 114px;
}
#partiture .part .setting .sign.g  .b.g {
	background-position: 0px 107px;
}
#partiture .part .setting .sign.g  .b.a {
	background-position: 0px 99px;
}
#partiture .part .setting .sign.g  .b.h {
	background-position: 0px 91px;
	
}

#partiture .part .setting .sign.f  .b.c {
	background-position: 0px 98px;
}
#partiture .part .setting .sign.f  .b.d {
	background-position: 0px 90px;
}
#partiture .part .setting .sign.f  .b.e {
	background-position: 0px 81px;
}
#partiture .part .setting .sign.f  .b.f {
	background-position: 0px 130px;
}
#partiture .part .setting .sign.f  .b.g {
	background-position: 0px 122px;
}
#partiture .part .setting .sign.f .b.a {
	background-position: 0px 113px;
}
#partiture .part .setting .sign.f .b.h {
	background-position: 0px 107px;
}



#partiture .part .takt{
	position:relative;
	display:inline-block;
	/*width:255px;*/
	height:100%;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #666;
	background-image: url(img/osnova_1.png);
	background-repeat: repeat-x;
	
 }
#partiture .takt.current {
	background-color:#FF9
}
#partiture .takt .control {
	position:absolute;
	
	
	
}
 
#partiture .part .takt .note{
	position:absolute;
	
	height:15px;
	background-repeat: no-repeat;
}
#partiture .part .takt .note .posuvky{
	height:40px;
	width:50px;
	top:-9px;
	left:-50px;
	position:absolute;
	white-space:nowrap;
	text-align: right;
}

#partiture .part .takt .note .posuvky .x,
#partiture .part .takt .note .posuvky .o,
#partiture .part .takt .note .posuvky .b
{
	height:100%;
	
	display:inline-block;
}

#partiture .part .o {
	width:12px;
	background-image: url(img/o.png);
	background-repeat: no-repeat;
}

#partiture .part .takt .note .line{
	position:absolute;
	
	left:50%;
	height:2px;
	width:28px;
	background-color:#000;
	transform: translate(-50%,-50%);
}
#partiture .part .takt .note.n_1_1 .line{
	width:40px;
}


#partiture .part .takt .note .leg{
	position:absolute;
	height:60px;
	width:1px;
	background-color:#000;
}
#partiture .part .takt .note .leg.left{
	top:9px;
	left:0;
	
}
#partiture .part .takt .note .leg.right{
	bottom:8px;
	right:0;
	
}



.n{
	width:21px;
	background-image: url(img/n.png);
}

.n_1_1{
	background-image: url(img/n_1_1.png);
	width:30px;
}
.n_1_2{
	width:21px;
	background-image: url(img/n_1_2.png);
}
.n_1_3{
	width:21px;
	background-image: url(img/n_1_3.png);
}

.n_1_4{
	width:21px;
	background-image: url(img/n_1_4.png);
}
.n_1_5{
	width:21px;
	background-image: url(img/n_1_5.png);
}
.n_1_6{
	width:21px;
	background-image: url(img/n_1_6.png);
}
.n_1_8{
	width:16px;
	background-image: url(img/n_1_8.png);
	background-position: center;
}

.n_1_12{
	width:16px;
	background-image: url(img/n_1_12.png);
	background-position: center;
}

.n_1_16{
	width:12px;
	background-image: url(img/n_1_16.png);
	background-position: center;
}
 

 
.n_1_32{
	width:8px;
	background-image: url(img/n_1_32.png);
	background-position: center;
}
 
 
#partiture .part .takt .note .predlzenie{
	position:absolute;
	height:16px;
	width:50px;
	left:21px;
	
}
#partiture .part .takt .note .predlzenie .bodka{
	background-image: url(img/bodka.png);
	background-repeat: no-repeat;
	background-position: center center;	
	height:100%;
	width:8px;
	display:inline-block;
}
 
.cursor {
	position:absolute;
	background-color: rgba(255,0,0,0.2);
}

@media screen and (max-width: 640px) {
	body {
		
	
	}
}