html,body{
	font-family: verdana;
	background-color: #111;
	margin: 0;
	height: 100%;
	max-height: 100%;
	overflow: hidden;
}
/*----------------  TOP BAR ITEMS --------------------*/

	/* top/header table */
	#topRow{
		width: 100%;
		height: 70px;
		vertical-align: middle;
		height: 5%;
		min-height: 55px;
		max-height: 55px;
		background-color: #EEE;
		padding-left: 10px;
		border-bottom: solid 6px #08B;
	}

	/* the words "Media Huddle" */
	#topLogo{
		color: #08B; 
		font-weight: bold;
		font-family: verdana;
		font-size: xx-large;
	}

	#searchCell{
		text-align: center;
	}
	#searchText{
		height: 34px;
		font-size: 14pt;
		font-family: helvetica;
		padding: 3px 5px;
		background-color: #FFF;
		color: #08B;
	}
	#searchText:focus{
		background-color: #FFA;
		color: #000;
	}
	
	#closeSearchBTN {
		float: right;
		margin-right: 10px;
	}

	/* far right cell with user name and logout buttons */
	#userCell{
		text-align: right;
		vertical-align: middle;
	}


	#logoutBTN, #accountBTN{
		cursor: pointer;
		margin: 0 15px;	
		vertical-align: middle;
	}
	#logoutBTN{
		float: right;
		color: #FFF;
	}
	#accountBTN{
		font-size: x-large;
}
/* ----------- end of top bar -------------- */

.container {
	max-width: 100%;
	height: 85%;
	vertical-align: top;
	margin: 0;
	padding: 20px 10px;	

	background-image: url("img/container.png");
	color: #08B;
	overflow: auto;
}


img, object, embed {
	max-width: 100%;
}

img {
	height: auto;
}



h2{
  margin: 0;
  display: inline;
}



/* ======== LINKS ======= */
a, a:visited{
  text-decoration: none;
}
a:hover{
  text-decoration: underline;
}
.clickable{
	cursor: pointer;
}
.clickable:hover{
	/*text-decoration: underline;*/
}




::-webkit-scrollbar {
    width: 12px;
}
 
/* scrollbar movement */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(0,136,187,0.8); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
::-webkit-scrollbar-thumb:window-inactive {
	background: rgba(0,136,187,0.4); 
}

.inline-label{
	margin: 0 10px 0 0;
}









/* --++++++++++++++++++++++++++ PLAYLISTS +++++++++++++++++++++++++--   */

#playlistBar{
	margin: -3px 0 10px 0;
	padding: 25px;
	background-color: rgba(238, 238, 238, 0.32);
	border: solid 4px #08B !important;
	border-radius: 5px;
	min-height: 280px;
}
#playlistBar h2{
	color: #FFF;
	font-style: italic;
	margin-right: 25px;
}

#playList {
	margin-top: -2px;
}

/* an item in the list of playlists */
.playlist{
	background-color: #DDD;
	cursor: pointer;
	list-style: none;
	list-style-type: none;
	display: inline;
	padding: 10px 15px;
	margin: 5px 10px 5px 0;
	
	border: 0;
	border-radius: 10px 10px 0 0;
	-webkit-border-radius: 10px 10px 0 0;
	-moz-border-radius: 10px 10px 0 0;
}	
.playlist:hover, .curPlayList{  	
	background-color: rgba(0,136,187,0.8);
	color: #EEE;
	text-decoration: none !important;
}
#backToPlaylistsBTN {
	margin: 0 5px 0 0;
	display: inline;
}
#backToPlaylistsBTN:hover{
    text-decoration: none !important;
}
/* ---------- PLAYLIST CONTENTS ------------ */

#songPane{
	/* height: 250px; */
	max-height: 250px;
	min-height: 250px;
	overflow-y: hidden;
	overflow-x: hidden;
	padding-bottom: 10px;
	margin-top: 10px;
	background-color: #DDD;
	
	border: 0;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}

#innerSongPane{
	max-height: 240px;
	min-height: 90px;
	overflow-y: auto;
	overflow-x: hidden;
	margin: 10px;
	text-align: center;
}

/* an item in the #songPane (i.e. a loaded playlist) */
.song{
	list-style: none;
	background-color: #EEE;
	border-bottom: solid 1px #222;
	padding: 12px;
	cursor: pointer;
}
.song:hover{
	color: #FFF !important;
	text-decoration: none !important;
	background-color: #08B;
	font-weight: bold;
}

.openedSong{
	text-decoration: line-through;
	background: gold;
}

.floatRight{
	float: right;
}

.rounded{
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
}
.lightGray{
	background-color: #EEE;
}
.innerPane{
   padding: 10px;
}

.myButton, .enabledBTN{
	background-color: #08B;
	color: #FFF;
	padding: 8px;
	cursor: pointer;
}
.myButton:hover{
	background-color: #58CC22;
}
.disabledBTN{
	background-color: #DDD;
	color: #555;
	padding: 8px;
	cursor: default;
}





/* --++++++++++++++++++++++++++ SONG CONTENTS +++++++++++++++++++++++++--   */
/*			  lyrics, tabs and video in a table for one song 				*/

/*div for all loaded songs */
#loadedSongsDiv h2{
	color: #000 !important;
	font-style: italic;
}

/* a particular song*/
.songDiv{
  padding: 10px;
  background-color: #EEE;
  border-radius: 10px;
  font-size: 14pt;
}
.songTable{
	width: 100%;
}
.songTable td{
	vertical-align: top;
	padding: 10px;
}
.songTable h2, .songTable h3{
	color: #08B;
}

.closeSongBTN{
   font-weight: bold;
   float: right;
   margin-right: 10px;
   cursor: pointer;
}
.goToTopBTN{
	float: center;
	margin: auto;
}

/* ------------- PLAYLIST OPTIONS --------------- */
#expandSongListBTN, #saveOrderBTN, #optionsBTN, #addSongBTN, #closeAllSongsBTN, #closeAcctBTN{
	margin: 5px 0 15px 25px;
	width: 125px !important;
	float: right;
	text-align: center;
}

#sortable{
	margin-top: 0;
	padding: 0;
}
/* THE ACTUAL PLAYLIST OPTIONS / SETTINGS PAGE, not the buttons on the right */
#optionsTable{
	width: 100%;
	border: solid 1px;
	padding: 20px;
}
#optionsTable tr{
	height: 60px;
}
#optionsTable span{
	margin-left: 15px !important;
}
#deletePlaylistBTN {
	top: -8px;
	position: relative;
}



/* ------------- CREATE SONG FORM ------------------ */
#createSongTable td{
	vertical-align:top;
	padding: 6px;
}
#createSongInnerDiv{
	padding: 20px;
}