body {
	margin:0px;
	display: block;
	font-family: sans-serif;
}

.main {
	width: 100%;
	background-color: #eee;
}

.aside {
	float:right;
}

@keyframes pulse {
  0% {
    color: red;
  }

  100% {
    color: black;
  }
}

@-webkit-keyframes pulse {
  0% {
    color: red;
  }

  100% {
    color: black;
  }
}

@-moz-keyframes pulse {
  0% {
    color: red;
  }

  100% {
    color: black;
  }
}

.warn {
  animation-name: pulse;
  animation-duration: 1s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  -webkit-animation-name: pulse;
  -webkit-animation-duration: 1s;
  -webkit-animation-direction: alternate;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-name: pulse;
  -moz-animation-duration: 1s;
  -moz-animation-direction: alternate;
  -moz-animation-iteration-count: infinite;
}

.banner {
 	width: 100%;
	height: 150px;
	background: #ddd;
}

.content {
	position:absolute; 
	top: 50px;
	z-index: 0;
	width: 100%;
	display: table;
}

.right {
	position: absolute;
	top: 0px;
	right: 0px;
	width: 300px;
	vertical-align: top;
	display: table-cell;
}

.left {
	vertical-align: top;
	display: table-cell;
}

.menu {
	position:fixed;
	top:0px;
	z-index: 1;
	left:0px;
	display: block;
	width: 100%;
	height: 50px;
	line-height: 30px;
	background: cornflowerblue;
}

.menu .item {
	font-size: 20px;
	padding-left: 10px;
	padding-right: 10px;
	border-right: 1px solid white;
}

.menu .item a {
	color: black;
	text-decoration: none;
}

.right.pinned {
	position:fixed;
	top:30px;
	right:0px;
	border-left: 10px solid cornflowerblue;
	border-right: 10px solid cornflowerblue;
	border-bottom: 10px solid cornflowerblue;
}

/*
.sec_v, .sec_c {
	margin-bottom: 12px;
	margin-top: 12px;
	padding: 3px;
}
*/

.sec_t {
	font-family: monospace;
}

.sec_c {
	background-color: #fcffbe;
	border-left: 2px solid black;
	padding-left: 10px;
}

/* .sec_v {
	border: 1px solid #ccc;
}
*/

table.index thead tr {
/*	background-color: #ccc; */
	font-weight: bold;
	border-top: 2px solid #444;
	border-bottom: 2px solid #444;
}

table.index {
	font-size: 12pt;
	width:100%;
	border-collapse: collapse;
}

table.index tr {
	border-bottom: 1px solid #ccc;
}

table.index td {
	padding-left: 5px;
	padding-right: 5px;
}

table.index col.title {
	width: 35%;
}

table.index col.subtitle {
	width: 40%;
}

table.index a {
	text-decoration: none;
}

/*
table.index tr:nth-child(even)  {
	background-color:#ddd;
}
*/

.section table {
	border-collapse: collapse;
}

/* .section:not(.inline) td {
	vertical-align: top;
} */

.chords {
	color: blue;
}

.inline .chords img {
	margin-right: -13px;
}

.inline td {
	vertical-align: bottom;
}

div.title {
	font-size: 180%;
	margin-bottom: 5px;
}

div.subtitle {
	font-size: 125%;
	margin-bottom: 5px;
}
div.subtitle img {
	padding:2px 3px 2px 0px;
}

div.graph {
	max-width: 50%;
	float:right;
	max-height:200px;
}

div.break {
	padding-top: 1em;
}

.graph img {
	display: block;
	margin-left: auto;
	margin-right: auto; 
	max-width: 100%;
	max-height: 100%;
}

.right .header {
	text-align: center;
	background-color: #ccc;
}

.headersettings {
	position:fixed;
	top:0px;
	right:0px;
	z-index:2;
}

@media screen and (min-width: 640px) {
	.main {
		padding: 8px;
	}

	#video {
		position:fixed;
		top:8px;
		right:8px;
		z-index:2;
		width: 300px;
	}

	.songlayout {
		margin-right: 324px;
	}
}

.headersettings.withvideo {
	right: 320px;
}

table.settings {
	border-collapse: collapse;
	border-spacing: 0px;
}

table.settings td, table.settings tr {
	margin: 0px;
	padding: 0px;
}

.settings form {
	margin: 0px;
}

img.uke {
	height: 18px;
	vertical-align: bottom;
	margin-right: 2px;
}

#lyrics.inline .lyrics-chords {
	display: none;
}

#lyrics.above .lyrics-text chord {
	display: none;
}

#lyrics {
	white-space: nowrap;
}

#lyrics td {
	page-break-inside: avoid;
	vertical-align: bottom;
}

.disclaimer {

}

.sec_comment {
	white-space: normal;
}

.sec_notes {
	white-space: normal;
}

.sec_comment td {
	color: red;
	font-weight: bold;
}

chord {
	color: blue;
}

.above chord {
	margin-right: 5px;
}

.intune .transpose {
	display:none;
/*	visibility: hidden; */
}

.listrow:not(.active) span.link {
	text-decoration: underline; color: blue; cursor: hand;
}

.container {
	background: white;
	box-shadow: 0px 3px 10px #999;
	border-radius:5px;
	padding: 10px;
	margin-bottom: 10px;
}

#index {
	margin-left: 5%;
	margin-right: 5%;
}

#song .highlight {
	background: yellow;
}

#lyrics{
	clear: both;
}

.clearfloat {
	clear: both;
}

#lyrics table {
/*	font-size:11pt; */
	border-collapse: collapse;
	page-break-inside: avoid;
}

#lyrics table td {
	padding:0px;
}

.sortable thead td.ascending:after {
	font-size: 9pt;
	content: '\00a0\25BC';
}

.sortable thead td.descending:after {
	font-size: 9pt;
	content: '\00a0\25B2';
}

.above .hyphenated {
	width: 100%;
}

.hyphenated {
	display: inline-block;
	display: -webkit-inline-flex;
	display: -moz-inline-flex;
	display: -ms-inline-flex;
	display: inline-flex;
	-webkit-flex-direction: row;
	-moz-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
}

.hyphenated:after {
	content: '';
	margin: auto;
	border-bottom: 1px solid black;
	-webkit-flex-grow: 1;
	-moz-flex-grow: 1;
	-ms-flex-grow: 1;
	flex-grow: 1;
}

.sortable col.highlight {
	background-color: #FFFFAD;
}

.chordlist {
	border-top: 3px solid #ccc;
	border-bottom: 3px solid #ccc;
	padding:5px;
}

.rtitle {
	float:right;
}

#recordControls {
	display:none;
}