html {
	background: rgb(4, 189, 253);
}

body {
	margin-top: 100px;
	font-family: 'Trebuchet MS', serif;
	line-height: 1.6
}

h1 {
    margin-bottom: 0;
    margin-top: 0;
}

.container{
	width: auto;
	margin: 0 auto;
}

ul.tabs {
	margin: 0px;
	padding: 0px;
	list-style: none;
	background: rgb(3, 73, 124);	
}
ul.tabs li {
	background: rgb(4, 99, 153);
	color: #eee;
	display: inline-block;
	padding: 10px 15px;
	cursor: pointer;
	font-size: 24px;
}

ul.tabs li.current{
	background: rgb(4, 189, 253);
	color: #111;
}

.tab-content {
	display: none;
	background: rgb(4, 189, 253);
	padding: 0px;
	color: #000;
}

.padded {
	padding: 15px;
}

.tab-link {
}

.tab-content.current{
	display: inherit;
}

#searchInput {
    background-image: url('searchicon.png');
    background-position: 10px 12px;
    background-repeat: no-repeat;
    font-size: 16px;
    padding: 12px 20px 12px 40px;
    border: 1px solid #ddd;
    margin-bottom: 0px; /* Add some space below the input */
}

#searchInput2 {
    background-image: url('searchicon.png');
    background-position: 10px 12px;
    background-repeat: no-repeat;
    font-size: 16px;
    padding: 12px 20px 12px 40px;
    border: 1px solid #ddd;
    margin-bottom: 0px; /* Add some space below the input */
}

#mySongs {
    list-style-type: none;
    padding: 0;
    margin: 0px;
    background: rgb(3, 73, 124);
}

#myVideos {
    list-style-type: none;
    padding: 0;
    margin: 0px;
    background: rgb(3, 73, 124);
}

.song-list-item {
    border: 1px solid #ddd; /* Add a border to all links */
    margin-top: -1px; /* Prevent double borders */
    padding: 10px 15px;
    text-decoration: none;
    font-size: 18px;
    color: #eeeeee;
    display: block;
    background: rgb(3, 73, 124);
    text-align: center;
}

.song-list-item-ref {
	width: 100%;
}

.song-list-item:hover:not(.header) {
    background: rgb(4, 189, 253);
    color: #111111;
}

#mediaPlayerContainer {
	width: 100%;
	height: 0px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #000; 
}

#mediaPlayerContainer2 {
	width: 100%;
	height: 0px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #000; 
}

.text-input-container {
   width: 100%;
   overflow: hidden;
}
 
.text-input {
   width: 100%;
}

	a.demo_img {
		display: block;
		width:300px;
		position:relative;
		line-height:25px;
	}
	
	a.demo_img>div {
		position:absolute;
		padding:0;
		margin:0;
		left: 142px; /* change this value to one that works best for you */
		top: -20px; /* change this value to one that works best for you */
		background: transparent url(files/arrow-down-grey.png) left 23px no-repeat;
		margin-left: 24px;
		opacity:0;
		height: 0;
		overflow: hidden;
		
		/* Enable transitions */
		/*-webkit-transition: all .3s ease .15s;
		-moz-transition: all .3s ease .15s;
		-o-transition: all .3s ease .15s;
		-ms-transition: all .3s ease .15s;
		transition: all .3s ease .15s;*/
	}
	
	a.demo_img>div img {
		padding:8px;
		margin-left:4px;
		border:1px solid #BCBDC0;
		background-color:#BCBDC0;
		-webkit-border-radius: 5px;
	   	   -moz-border-radius: 5px;
		    	border-radius: 5px;
		
		-webkit-box-sizing:border-box; 
		   -moz-box-sizing:border-box; 
				box-sizing:border-box;
	}
	a.demo_img:hover>div {
		
		opacity:1;
		width: 300px;
		height: 300px;
		padding: 8px;   
		
		z-index:1;
	}