body, html {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}

body {
    font-family: 'Expressway';
    font-size:12px;
    background-color:#d1d8e0;
	color:#FFF;
}

div, input, button, form, span, h1, h2 {
    box-sizing: border-box;
}

form {
    margin:0;
    padding:0;
}

#main {
    position: relative;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

#list {
	position:fixed;
	width:600px;
    left:calc(50% - 300px);
    top:50px;
	background-color:#4b6584;
	padding:20px;
	border-radius:8px;
	overflow: auto;
    height: calc(100% - 100px);
}

.list-item {
	line-height:20px;
	color:#FFF;
	background-color:#778ca3;
	margin-bottom:10px;
	padding:4px 10px;
	cursor:pointer;
	border-radius:6px;
	transition:background-color 0.3s;
}

.list-item.playing, .list-item.playing:hover  {
	background-color:#0fb9b1;
}

.list-item:hover {
	background-color:#a5b1c2;
}

#headline {
	font-size:20px;
	margin-bottom:20px;
	color:#FFF;
}

.download-icon {
	position:absolute;
	display:inline-block;
	right:30px;
	width:20px;
	height:18px;
	background-image:url('serveimage.svg');
	background-repeat:no-repeat;
	background-position:center;
}




@font-face {
    font-family: Expressway;
    src: url(expressway.ttf);
}