html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%; 
	font-family: Arial, Helvetica, sans-serif;
}

p {
  margin-top:0;
  margin-bottom:0;
}
/*   ------------------------------------------------------- */ 

[draggable] {
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  /* Required to make elements draggable in old WebKit */
  -khtml-user-drag: element;
  -webkit-user-drag: element;
}

.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.PlaylistNumber {
  font-size: 0.6em;
  border: 1px solid #AAAAAA;
  border-radius: 3px; 
  padding:2px;
  vertical-align:3px;
}

.LineHeader {
	text-decoration: underline;
	font-weight: bold;
	color: #0000CC;
	line-height: 1.5em;
}
.PageBreak {
	color: #EEEEEE;
}
.ChordLine {
	color: #00CC00;
}

.ClickableChord {
	cursor: pointer;
	background-color: #F8F8F8;
	text-decoration: underline;
	text-decoration-color: #99FF99;
	padding-left: 4px;
	padding-right: 4px;
	margin-left: -4px;
	margin-right: -4px;
}
.ClickableChord:hover {
  background-color: #FFEEEE;
}

.SongInformationEditBlock {
/*display:none; position:absolute; top:8px; right:70px; background-color:#DDDDDD; padding: 5px; border:2px solid black; border-radius: 5px; z-index:1*/
	max-width:800px;
	min-width:600px;
	padding:4px; 
	border-radius: 5px; 
	border: 2px solid black; 
	background-color:white; 
	line-spacing: 2em; 
	display:none;
}
.songeditdetails {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.25em;
  color: #0000FF;
  padding-right:1em; 
  border:1px solid #888888; 
  background-color:#EEEEEE; 
  padding:0 0.5em;
  margin-top:5px;
  overflow: hidden;
  white-space: nowrap;
}
.songeditlines {
  margin-top:5px;
}

.songwriter {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.25em;
  color: #0000FF;
}
.songcopyright {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
  color: #0000FF;
}

.playlistdata {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.7em;
  color: #888888;
}

.songlisticon, .songinfoicon, .playlisticon, .localplaylisticon, .localplaylistdeleteicon {
  height: 16px;
  width:16px;
  vertical-align:middle;
  padding:5px;
  cursor: pointer;
  position:absolute;
  right:0;
  opacity:0.2;
  transition: all .15s ease-in-out;
}
.songinfoicon {
  height: 16px;
  width:16px;
  vertical-align:middle;
  padding:5px;
  cursor: pointer;
  position:absolute;
  right:24px;
  opacity:0.2;
  transition: all .15s ease-in-out;
}
.songlisticon:hover, .songinfoicon:hover, .playlisticon:hover, .localplaylisticon:hover, .localplaylistdeleteicon:hover {
  height: 20px;
  width:20px;
  padding:3px;
  opacity:1;
}
.songinfoicon:hover {
  height: 20px;
  width:20px;
  padding:3px;
  opacity:1;
}

.shareiconwrapper {
  position:absolute;
  bottom:16px;
  right:22px;
  padding:3px;
  z-index:200;
}
.shareicon {
  height: 24px;
  width:24px;
  padding:3px;
  opacity:0.6;
}
.shareicon:hover {
  height: 28px;
  width:28px;
  opacity:1;
}

.playlistitem {
  cursor: pointer; /* Add a pointer on hover */
}
.playlistcontrolicon {
  height: 22px;
  width:22px;
  vertical-align:middle;
  cursor: pointer;
  transition: all .15s ease-in-out;
  padding-top:1px;
  margin-left: 0px;
}
.playlistcontrolicon:hover {
  height: 24px;
  width:24px;
  padding-top:0px;
  margin-left: -1px;
}

.songcomment {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.25em;
  color: #0000FF;
}

 .selectBox{border-radius:4px;border:1px solid #AAAAAA;}
 .myButton{border-radius:6px;border:1px solid #AAAAAA;}
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 20px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}


/* The Close Button */
.closePlayer {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.closePlayer:hover,
.closePlayer:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.addedDetailsTitle {
  font-size:0.8em;
  text-decoration: underline;
  color: #888888;
}

.addedDetails {
  font-size:0.8em;
}

.LoadingScreen {
	position:absolute;
	top:90px; 
	width:300px;
	left:calc(50% - 150px);
	padding:20px; 
	border-radius: 5px; 
	border: 2px solid black; 
	background-color:white; 
	line-spacing: 2em; 
}

.pllength {
    font-size: 0.75em;
    color: #888888;
}

.SongInformation {
/*display:none; position:absolute; top:8px; right:70px; background-color:#DDDDDD; padding: 5px; border:2px solid black; border-radius: 5px; z-index:1*/
	position:absolute; 
	left:25%; 
	top:0; 
	width:50%; 
	padding:4px; 
	border-radius: 5px; 
	border: 2px solid black; 
	background-color:white; 
	line-spacing: 2em; 
	display:none;
}

.TransposeButtons {
	position:absolute;
	left:0; 
	top:0; 
	padding:4px; 
	border-radius: 5px; 
	border: 2px solid black; 
	background-color:white; 
	line-spacing: 2em; 
	display:none;
}
.headertext {
  font-family: Arial, Helvetica, sans-serif;
  font-size: calc(8px + 0.5vw);
}
.SongInfoText {
  font-family: Arial, Helvetica, sans-serif;
  font-size: calc(8px + 0.5vw);
}

.accesstoken {
	height:18px;
}

#ManageTools {
	position:absolute; 
	top:24px; 
	right:40px; 
	width:32px;
	cursor: pointer;
	z-index:500;
}

.tinyextras {
  font-size: 0.8em;
  color: #999999;
  padding-left: 12px;
}

	/* ================================================== NARROW ================================================== */
	.songtitle {
	  font-family: Arial, Helvetica, sans-serif;
	  font-size: calc(8px + 0.6vw);
	  font-weight: bold;
	  margin-bottom:0.5em;
	}
	.metronome {
		display: table-cell;
		vertical-align: middle;
		text-align:center; 
		display:none; 
		position:absolute; 
		top:8px; 
		left:6px; 
		width:37px; 
		height:34px; 
	}
	.metronomeCanvas {
		display:none; 
		position:absolute; 
		top:0px; 
		left:0px;
		width: 30px; 
		height: 30px;
	}
	.iconbutton {
	  border-radius:0.4em;
	  border:0.1em solid black;
	  width:26px; 
	  height:28px; 
	  margin:1px; 
	  cursor: pointer;
	  display:inline-block;
      background-color: #F0F0F0;
	}

	.icon {
	  width:16px; 
	  height:16px; 
	  cursor: pointer;
	  vertical-align:middle;
	  display: block;
	  margin:auto;
	  margin-top:5px;
	}
	.icon:hover {
	  width:20px; 
	  height:20px; 
	  margin-top:3px;
	}
	.ShowChordsIcon {
	  width:16px; 
	  height:16px; 
	  cursor: pointer;
	  vertical-align:middle;
	  padding:2px;
	}
	.ShowChordsIcon:hover {
	  width:20px; 
	  height:20px; 
	  padding:0px;
    }

    .WorshipLIVELogo {
		width:70px;
		height:32px;
	}
	.songkey {
	  font-family: Arial, Helvetica, sans-serif;
	  font-size: 1.1em;
	  font-weight: bold;
	  color: #0000FF;
	  border-radius:4px;
	  background-color:#FFFFFF;
	}
	.songtempo {
	  font-family: Arial, Helvetica, sans-serif;
	  font-size: .9em;
	  font-weight: bold;
	  color: #0000FF;
	  width:6vw; 
	  max-width: 48px;
	  min-width: 32px;
	}
	.metronomeIcon {
		width:12px; 
		height:12px; 
		cursor: pointer;
		vertical-align:middle; 
		margin:2px;
	}
	.siteheader {
		position:absolute; 
		top:0; left:0; 
		right:0; 
		height:40px; 
		border-bottom:1px solid black;
	}
	.SidebarToggleButton {
		position:absolute; 
		top:0; 
		right:0; 
		width:40px; 
		height:32px;
		border-radius:0.4em;
		border:0.1em solid black;
		white-space: nowrap;
		text-align: center; margin: 1em 0;
		cursor: pointer;
		margin:4px;
		background-color: #F0F0F0;
	}
	.togglebutton {
		position:absolute; 
		top:0; 
		right:0; 
		width:40px; 
		height:40px;
		border-radius:0.4em;
		border:0.1em solid black;
		width:16px; 
		height:16px; 
		vertical-align:middle; 
		cursor: pointer;
	}
	.togglebar {
		position:absolute; 
		top:41px; 
		right:0; 
		width:100%; 
		height:36px;
	}
	.togglebarInterior {
		position:absolute; 
		top:1px; 
		right:0px; 
		height:64px;
		background-color: white;
		z-index:2;
		width:64px;
	}

	.EditSongContents {
/*		position:fixed; 
		top:65px; 
		left:0px; 
		right:0px; 
		bottom: 0px; */
		width: 99%;
		height: calc(100vh - 140px);
		overflow:scroll;
		overflow-x:hide;
		background-color: white;
		-webkit-overflow-scrolling:touch;
		overflow-y:scroll; 
	}
	.EditToolbar {
/*		position:fixed; 
		top:41px; 
		left:0px; 
		right:0px; 
		height: 24px; 
		overflow:scroll;
		overflow-x:hide;*/
	}

	.songContents {
		position:fixed; 
		top:41px; 
		left:0px; 
		right:0px; 
		bottom: 0px; 
		overflow:scroll;
		overflow-x:hide;
	}
	.sidebar {
		position: absolute;
		top:41px;
		bottom: 11px; 
		right:0;
		width:100%;
		z-index: 1;
		background-color: white;
	}
	.playlistlist {
		position: absolute; 
		top:2px; 
		height:64px; 
		left:0px; 
		width:calc(100% - 67px); 
		border:1px solid black; 
		font-size:0.6em; 
		overflow-y:scroll;	
		overflow-x:hidden;
	}
	.searchcontrols {
		position: absolute; 
		top:72px; 
		height:25px; 
		left:0px; 
		width:100%; 
	}
	.searchBoxContents {
		position:absolute; 
		height:18px;
/*		left:24px;*/
/*		width:calc(50% - 22px - 12px); */
		left:0px;
		width:calc(50% - 10px); 
		font-size: 0.8em; 
		border: 1px solid #ddd; 
		padding: 3px;
	}
	.searchBoxTitle {
		position:absolute; 
		height:18px; 
		font-size: 0.8em; 
		padding: 3px; 
		border: 1px solid #ddd; 
		margin-bottom: 12px; 
		width:calc(50% - 48px); 
		left:50%; 
	}
	.searchBoxButton {
		position:absolute; 
		height:26px; 
		right:2px; 
		width: 30px; 
		border-radius:4px;	
	}
	.songlist {
		background-color: white; 
		font-size:0.6em; 
		position: absolute;
		border:1px solid black; 
		bottom:0px; 
		left:0px; 
		width:100%; 
		top:103px; 
		overflow-y:scroll;	
		overflow-x:hidden;
	}
	.playlistcontrols {
		border: 1px solid black;
		background-color:white;
		position:absolute; 
		bottom:0px; 
		left:0px; 
		width:100%;
		z-index:200;
		display:none;
	}
	.LocalStorageInfo {
		font-size: 0.8em; 
		position:absolute; 
		top:2px; 
		left:3%; 
		width:92%;
		background-color:#DDDDDD; 
		border:2px solid black; 
		border-radius: 5px; 
		z-index:100; 
		display:none; 
	}

	.WebsiteStatusText {
		position:absolute;
		bottom:4px;
		font-size: 0.5em; 
		margin-top: 0em;
		margin-left: 0.2em;
	}

	.WebsiteFooterText {
		float:left; 
		font-size: 0.5em; 
		margin-top: 0em;
		margin-left: 0.2em;
	}
	.WebsiteFooter {
		position:absolute; 
		bottom:0; 
		right:0; 
		width:100%; 
		height:10px; 
	}

@media all and (min-width: 600px) {
	/* ================================================== MEDIUM ================================================== */
	.songtitle {
	  font-family: Arial, Helvetica, sans-serif;
	  font-size: calc(8px + 1vw);
	  font-weight: bold;
	}
	.metronome {
		display: table-cell;
		vertical-align: middle;
		text-align:center; 
		display:none; 
		position:absolute; 
		top:8px; 
		left:94px; 
		width:37px; 
		height:34px; 
	}
	.metronomeCanvas {
		display:none; 
		position:absolute; 
		top:0px; 
		left:0px;
		width: 30px; 
		height: 30px;
	}
	.iconbutton {
	  border-radius:0.4em;
	  border:0.1em solid black;
	  width:22px; 
	  height:27px; 
	  margin:1px; 
	  vertical-align:middle; 
	  cursor: pointer;
	  display:inline-block;
	}

	.icon {
	  width:16px; 
	  height:16px; 
	}
	.icon:hover {
	  width:20px; 
	  height:20px; 
	}
	.ShowChordsIcon {
	  width:24px; 
	  height:24px; 
	  padding:3px;
	}
	.ShowChordsIcon:hover {
	  width:30px; 
	  height:30px; 
	  padding:0px;
    }

	.metronomeIcon {
		width:16px; 
		height:16px; 
		cursor: pointer;
		vertical-align:middle; 
		margin:2px;
	}
    .WorshipLIVELogo {
		width:90px;
		height:41px;
	}
	.songkey {
	  font-family: Arial, Helvetica, sans-serif;
	  font-size: 1.2em;
	  font-weight: bold;
	  color: #0000FF;
	  border-radius:4px;
	  background-color:#FFFFFF;
	}
	.songtempo {
	  font-family: Arial, Helvetica, sans-serif;
	  font-size: 1em;
	  font-weight: bold;
	  color: #0000FF;
	}
	.siteheader {
		position:absolute; 
		top:0; left:0; 
		right:0; 
		height:60px; 
		border-bottom:1px solid black;
	}
	.togglebar {
		position:absolute; 
		top:0; 
		right:44px; 
		width:90px; 
		height:60px;
		text-align: right;
	}
	.togglebarInterior {
		position:absolute; 
		right:2px; 
		height:120px;
		width:28px;
	}
	.SidebarToggleButton {
		width:40px; 
		height:52px;
	}
    .togglebutton {
		border-radius:0.4em;
		border:0.1em solid black;
		width:24px; 
		height:24px; 
		margin:2px; 
		padding:3px;
		padding-top:5px;
		padding-left:5px;
		position:absolute; 
		top:8px; 
		right:0; 
		vertical-align:middle; 
		cursor: pointer;
	}
	.songContents {
		position:fixed; 
		top:61px; 
		left:0px; 
		right:304px; 
		overflow:auto;
	}
	.sidebar {
		top:61px;
		bottom:21px; 
		width:300px;
	}
	.playlistlist {
		height:120px; 
		width:264px;
	}
	.searchcontrols {
		top:129px; 
		right:2px; 
		width:294px; 
	}
	.
 {
		width:calc(118px - 22px); 
	}
	.searchBoxTitle {
	}
	.songlist {
		right:2px;
		width:292px;
		top:160px; 
	}
	.playlistcontrols {
		right:2px;
		width:292px;
	}
	.LocalStorageInfo {
		left:12%; 
		width:75%;
		padding: 5px; 
	}

	.WebsiteFooterText {
		float:left; 
		font-size: 0.6em; 
		margin-top: 0.4em;
	}
	.WebsiteFooter {
		height:20px; 
		width:300px;
	}
}

@media all and (min-width: 800px) {
	/* ================================================== WIDE ================================================== */
	.songtitle {
	  font-family: Arial, Helvetica, sans-serif;
	  font-size: calc(8px + 1vw);
	  font-weight: bold;
	}
	.metronome {
		display: table-cell;
		vertical-align: middle;
		text-align:center; 
		display:none; 
		position:absolute; 
		top:8px; 
		left:175px; 
		width:74px; 
		height:68px; 
	}
	.metronomeCanvas {
		display:none; 
		position:absolute; 
		top:0px; 
		left:0px;
		width: 60px; 
		height: 60px;
	}
	.iconbutton {
	  border-radius:0.4em;
	  border:0.1em solid black;
	  width:36px; 
	  height:33px; 
	  margin:2px; 
	  cursor: pointer;
	  display:inline-block;
	}

	.icon {
	  width:24px; 
	  height:24px; 
	}
	.icon:hover {
	  width:28px; 
	  height:28px; 
	}
	.ShowChordsIcon {
	  width:24px; 
	  height:24px; 
	  padding:3px;
	}
	.ShowChordsIcon:hover {
	  width:30px; 
	  height:30px; 
	  padding:0px;
    }

	.metronomeIcon {
		width:24px; 
		height:24px; 
		cursor: pointer;
		vertical-align:middle; 
		margin:3px;
	}
    .WorshipLIVELogo {
		width:140px;
		height:64px;
	}
	.songkey {
	  font-family: Arial, Helvetica, sans-serif;
	  font-size: 22px;
	  font-weight: bold;
	  color: #0000FF;
	  border-radius:4px;
	  background-color:#FFFFFF;
	}
	.songtempo {
	  font-family: Arial, Helvetica, sans-serif;
	  font-size: 22px;
	  font-weight: bold;
	  color: #0000FF;
	  width:6vw; 
	  max-width: 48px;
	  min-width: 32px;
	}
	.siteheader {
		position:absolute; 
		top:0; left:0; 
		right:0; 
		height:80px; 
		border-bottom:1px solid black;
	}
	.togglebar {
		position:absolute; 
		top:0; 
		right:44; 
		width:100px; 
		height:80px;
		text-align:right;
	}
	.togglebarInterior {
		position:absolute; 
		right:16px; 
		height:64px;
	}
	.SidebarToggleButton {
		width:40px; 
		height:72px;
	}
    .togglebutton {
		border-radius:0.4em;
		border:0.1em solid black;
		width:32px; 
		height:32px; 
		margin:2px; 
		padding:3px;
		padding-top:5px;
		padding-left:5px;
		position:absolute; 
		top:8px; 
		right:0; 
		vertical-align:middle; 
		cursor: pointer;
	}
	.songContents {
		position:fixed; 
		top:81px; 
		left:0px; 
		right:304px; 
		overflow:auto;
	}
	.sidebar {
		top:81px;
		bottom: 21px;
		width:300px;
	}
	.playlistlist {
		height:150px; 
		right:2px;
		width:250px;
	}
	.searchcontrols {
		top:159px; 
		right:2px; 
		width:294px; 
	}
	.songlist {
		right:2px;
		width:292px;
		top:190px; 
	}
	.playlistcontrols {
		right:2px;
		width:292px;
	}
	.LocalStorageInfo {
		left:25%; 
		width:50%;
		padding: 5px; 
	}

	.WebsiteFooterText {
		float:right; 
		font-size: 0.7em; 
		margin-top: 0.2em;
	}
	.WebsiteFooter {
		height:20px; 
		width:300px;
	}
}

	/* ================================================== DONE SIZE-DEPENDENT ================================================== */

.GreenButton {
  background-color:#77d42a;
  border:0.1em solid #268a16;
  color:#306108;
  border-radius:0.4em;
  display:inline-block;
  cursor:pointer;
  font-family:Verdana, Geneva, sans-serif;
  font-size:0.9em;
  font-weight:bold;
  padding:0.1em 0.7em; 
  text-decoration:none;
}
.GreenButton:hover {
  background-color:#5cb811;
}
.GreenButton:active {
  position:relative;
  top:0.1em;
}

.YellowButton {
	background-color:#ffec64;
	border:1px solid #ffaa22;
	color:#333333;
	border-radius:0.4em;
	display:inline-block;
	cursor:pointer;
	font-family:Verdana, Geneva, sans-serif;
	font-size:0.9em;
	font-weight:bold;
	padding:0.1em 0.7em; 
	text-decoration:none;
}
.mYellowButton:hover {
	background-color:#ffab23;
}
.YellowButton:active {
	position:relative;
	top:1px;
}


/* List sorting */

#SongListUL, #PlaylistUL {
  /* Remove default list styling */
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#SongListUL li a, #PlaylistUL li {
  border: 1px solid #ddd; /* Add a border to all links */
  margin-top: -1px; /* Prevent double borders */
  background-color: #f6f6f6; /* Grey background color */
  padding: 4px; /* Add some padding */
  text-decoration: none; /* Remove default text underline */
  font-size: 12px; /* Increase the font-size */
  color: black; /* Add a black text color */
  display: block; /* Make it into a block element to fill the whole list */
}

#SongListUL li a:hover:not(.header), #PlaylistUL li a:hover:not(.header) {
  background-color: #eee; /* Add a hover effect to all links, except for headers */
}

/* ============================================================================ */

/*Container, container body, iframe*/
.mce-tinymce, .mce-container-body, #code_ifr {
    min-height: 100% !important;
}
/*Container body*/
.mce-container-body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}
/*Editing area*/
.mce-container-body .mce-edit-area {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0;
    right: 0;
}
/*Footer*/
.mce-tinymce .mce-statusbar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}


	/* ================================ Overlay ============================================ */

#transposeoverlay {
  position: fixed; /* Sit on top of the page content */
  display: none; /* Hidden by default */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5); /* Black background with opacity */
  z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
  /*cursor: pointer; /* Add a pointer on hover */
}

/* ================================ Playlist Buttons ==================================  */

.PlaylistSidebarButton {
	background-color:#007dc1;
	border-radius:3px;
	border:1px solid #124d77;
	display:inline-block;
	cursor:pointer;
	width:48px; 
	margin-top:3px;
	min-height:36px;
	overflow-y:hidden;
	padding-left:1px;
	padding-right:1px;
}
.PlaylistSidebarButton:hover {
	background-color:#0061a7;
}
.PlaylistSidebarButton:active {
	position:relative;
	top:1px;
}

.PlaylistSidebarSongNumber {
	color:#ffffff;
	font-family:Arial;
	font-size:13px;
	text-decoration:none;
}

.PlaylistSidebarSongTitle {
	font-size:7px;
	text-shadow:none;
	font-weight:normal;
	color:black;
	line-height:9px;
	display:block;
}