/*
CSS file for demo.html.
*/

body {
	font-family: Helvetica, swiss;
}
h3 {
	text-align: center;
}
label {
	width: 200px;
}
td {
	padding: 5px;
}
option {
	background-color: #eee;
	border: 1px solid grey;
	padding: 3px;
	margin: 2px;
}

#ui {
	display: flex;
	width: 100%;
	margin-bottom: 20px;
}

#left-box, #right-box {
	display: inline-block;
}

#left-box {
	width: 40%;
}

#right-box {
	width: 60%;
	display:flex;
	padding-left: 20px;
}

#songs {
   height: 10em;
   width: calc(100% - 10px);
   margin: 5px;
}

#songs:focus {
	outline: none;
}

.song-name {
	margin: 2px;
	padding: 3px;
	border: 1px solid black;
	background-color: rgba(0, 0, 0, 0.1);
	text-overflow: ellipsis;
	overflow: hidden;
	cursor: pointer;
}

.song-name > input {
    margin-right: 5px;
}

.song-columns>div {
	display: inline-block;
	position:relative;
	float:left;
	padding:5px;
}

.song {
	page-break-after:auto;
	page-break-inside: avoid;
	padding:5px;
	width: 100%;
}

.song:last-of-type {
	page-break-after:avoid;
}

.song:empty {
	display: none;
}

.song.container {
	padding-bottom: 20px;
	border-bottom: 1px solid grey;
	width: 100%;
	font-kerning: normal;
}

.song >div {
	padding-bottom: 10px;
}

.song .chords {
	font-size:24pt;
	page-break-inside: avoid;
}

.song .text {
	font-size: 13pt;
	margin-bottom: 10px;
}

.song .header {
	display: flex;
	width: 100%;
}

.song .header>div {
	flex: 1 1 auto;
	text-align: center;
	vertical-align: bottom;
}

.song .header>div:first-child, .song .header>div:last-child {
	flex: 0 0 auto;
}

#page {
	/* Let us assume A4 format for now */
	width: 21cm;
	margin-left: auto;
	margin-right: auto;
	background:floralwhite;
	border: 1px solid #ccc;
	-webkit-box-shadow: 10px 10px 5px 0px rgba(204,198,204,1);
	-moz-box-shadow: 10px 10px 5px 0px rgba(204,198,204,1);
	box-shadow: 10px 10px 5px 0px rgba(204,198,204,1);	
    padding: 10mm 10mm 10mm 20mm;
}

@media print {
	#ui {
		display: none;
	}

	#page {
		width: inherit;
		height: inherit;
		border: none;
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;	
		padding: 0;
	}
}