body {
	min-height: 100%;
	font-family:Arial;
	background: #233f63;
    padding: 0;
    margin: 0;
}
a {
  color: #467;
  text-decoration: none;
  padding: 5px 7px;
  	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;

}
.chord
{
    position: absolute;
    margin-top: -15px;
}
.verse-chords
{
    position: relative;
    line-height: 2;
}

.back-btn
{
    font-size: 8px; font-weight: bold; color: #fff; background: rgba(0, 255, 200, 0.4); padding: 12px 16px; display: inline-block;
}
.back-btn:hover, .back-btn:focus
{
    color: #fff; background: rgba(0, 255, 200, 0.2); padding: 12px 16px; display: inline-block;
}
a:hover{
	background: rgba(0, 255, 200, 0.4);
		-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;

}
#modal {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	min-height: 100%;
	background: rgba(35, 63, 99, 0.95);
	display: none;
}
#modal .inner {
	width: 100%;
	background: #fff;
	min-height: 50px;
	margin: 0;
	padding: 20px;
	box-shadow: 0 5px 30px rgba(0,20,30,.5);
}
h1 {
	text-align: center;
	color: #fff;
	max-width: 600px;
	margin: 80px auto 50px auto;
}
.content {
	color: #555;
	margin: 5px auto;
	max-width: 600px;
	background: #fff;
	padding: 30px 40px;
	box-shadow: 0 0 7px rgba(0,0,0,.6);
}
.content h2 {
	margin-top: 0;
	text-align: center;
}
.content h3 {
	text-align: center;
}
.download_list {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 300px;
}
.download_list li {
	margin: 0;
	padding: 0;
}
.download_list a, .songs-list a {
	text-decoration: none;
	color: #205976;
	display: inline-block;
	background: #ffffff;
	margin: .5px;
	text-align: center;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
    font-size: 10px;
    padding: 12px 5px;
}
.download_list a:hover, .songs-list a:hover {
	background: rgba(0, 255, 200, 0.4);
}
.embed-responsive.embed-responsive-16by9 {
	padding-bottom: 56.25%;
}
.embed-responsive {
	position: relative;
	display: block;
	height: 0;
	padding: 0;
	overflow: hidden;
}
.embed-responsive .embed-responsive-item, .embed-responsive embed, .embed-responsive iframe, .embed-responsive object, .embed-responsive video {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.song-text {
	display: block;
	font-size: 14px;
	font-family: Monaco, Courier;
	margin: 0 auto;
	white-space: pre-wrap;
}
.song-text h2 {
	margin: 0;
	text-align: left;
}
.song-text h2 small {
	display: inline;
	font-size: 12px;
}
.songs-list ul {
	text-align: center;
	margin: 0;
	padding: 0;
	list-style: none;
}
.songs-list ul li {
	margin: 0;
	overflow: hidden;
	font-size: 12px;
    border-bottom: 1px solid rgba(0,0,0, 0.1);
}
.songs-list ul li .title
{
    padding: 10px 3px;
}
.songs-list ul li>div
{
	float: left;
}
.songs-list ul li>a
{
	float: right;
}
.songs-list a {
	font-size: 10px;
	text-transform: uppercase;}
.songs-list ul li+ li {
	border-top: none;
}


table.chords
    {
        font-size: 1.2rem;
    }
table.chords td.chord-td
    {
        min-width: 40px;
        text-align: center;
        border: 1px solid rgba(0,0,0,.1);
    }
table.chords td.barline-td
    {
        width: 0;
        border-left:2px solid #000;
    }
table.chords td.repeat-left
    {
        width: 0;
        border-left: 6px double #000;
    }
table.chords td.repeat-left:after, td.repeat-right:before
    {
        content: ":";
    }
table.chords td.repeat-right
    {
        width: 0;
        border-right: 6px double #000;;
    }
h3
    {
        margin: 20px 0 0 0;
        font-size: 1rem;
    }
h3 strong
    {
        border-radius: 100%;
        background: #000;
        color: #fff;
        padding: 5px 10px;
        display: inline-block;
    }

.drumchart
    {
        
    }
.drumchart .row
    {
        margin: 0;
    }
.drumchart .col-md-2.header
    {
        text-align: center;
        text-transform: uppercase;
        font-size: .8rem;
    }
.drumchart .form, .drumchart .bars
    {
        font-size: 1.4rem;
        font-weight: bold;
        font-family: 'Teko', sans-serif;
    }
.drumchart .col-header
    {
        font-size: .6rem;
    }
.drumchart .col-md-2
    {
        padding: 0;
        margin-bottom: 20px;
    }
.drumchart .col-md-2>div
    {
        height: 40px;
        border: 1px solid rgba(0,0,0,1);
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
    }
.drumchart .col-end>div
{
    border-right: 8px double rgba(0,0,0,1);
}