body {
	background-color: #fff;
	font-family: "Arial", "Helvetica", sans-serif;
	color: #3e3e3e;
	text-align: center;
	font-size: 14px;
	display: flex;
	flex-flow: column;
	align-items: center;
}

#logodiv {
	text-align: center;
	left: 0;
	right: 0;
	width: 400px;
	height: 100px;
	margin: 30px auto;
}

#messagediv,
#redirect {
	margin: 10px;
	padding: 4px;
	text-align: center;
}

#messagediv
{
	border: 1px solid green;
}

#redirect {
	cursor: pointer;
	background: blue;
	color: white;
	/* font-weight: bold; */
	font-size: 20px;
	padding: 8px;
}

#maindiv {
	/* margin-bottom: 20px; */
}

.station,
.goup,
.folder {
	width: 210px;
	text-align: center;
	background-color: #e9e9e9;
	margin: 8px;
	display: inline-block;
	vertical-align: top;
	overflow: hidden;
	word-wrap: break-word;
	font-size: 12px;
	position: relative;
	cursor: pointer;
	border: none;
	padding: 0px;
}

.goup,
.folder {
	height: 224px;
}

.folder icon,
.goup icon {
	font-size: 100px;
	display: block;
}

.folder icon {
	background-size: 100px;
	background-image: url('/player/img/folder.png');
	background-repeat: no-repeat;
	background-position: center;
}

.tvIcon {
	background-size: 100px;
	background-image: url('/player/img/tv.png');
}

.radioIcon {
	background-size: 100px;
	background-image: url('/player/img/radio.png');
}

.station fullname {
	min-height: 66px;
	display: block;
}

.station name,
.folder name,
.goup name {
	display: block;
	font-size: 22px;
	padding: 0px 6px;
}

#folderInfo {
	font-size: 22px;
}

#folderInfo subfolder:hover {
	background-color: #e9e9e9;
	cursor: pointer;
	border-bottom: 2px solid #ba0000;
}

#folderInfo icon {
	cursor: pointer;
	background-image: url('/player/img/folder-path.png');
	background-size:90%;
	width: 30px;
	height: 24px;
	display: inline-block;
	background-repeat: no-repeat;
	background-position: left bottom;
}

.station atserver {
	font-size: 12px;
}

.station info,
.folder info {
	display: block;
	font-size: 12px;
	padding: 0px 6px;
}

.station atserver {
	font-size: 12px;
	display: block;
	padding: 5px;
}

.station canvas {
	margin: auto;
	display: block;
	background-position: center;
	background-repeat: no-repeat;
}

loginbox {}

logoutbox {}

.collapsedLogin {
	/* background-color: #d9d9d9; */
}

loginbox,
logoutbox {
	width: 210px;
	background-color: #e9e9e9;
	/* display: inline-block; */
	/* min-width: 160px; */
	margin: 8px;
	/* border:1px solid #ccc; */
	/* padding: 8px; */
	box-sizing: border-box;
	vertical-align: top;
}

expandedlogin {
	padding: 8px;
	display: block;
}

loginbox button,
logoutbox button {
	/* font-size:22px; */
	padding: 8px;
	margin: 0px;
	border: none;
}

button {
	color: black;
	cursor: pointer;
	border: 1px solid #ccc;
	font-size: 14;
	padding: 10px 4px;
	display: block;
	width: 100%;
	font-family: sans-serif;
	background-color: #e9e9e9;
	margin: 8px 0px;
}

input {
	font-family: 'arial', 'helvetica', 'lucida sans unicode', 'lucida grande', 'Trebuchet MS', verdana, arial, helvetica, helve, sans-serif;
	color: #333;
	margin: 5px 0px;
	border: 1px solid #ccc;
	padding: 6px 4px;
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	border-radius: 0px;
	background: #fff;
	display: block;
	font-size: 14px;
	width: 100%
}

#searchbox {
	width: 360px;
	border: 1px solid #ccc;
	margin: 0px auto;
	position: relative;
	display: inline-block;
}

#stationsearch {
	display: inline-block;
	border: none;
	margin: 0px;
	left: 0px;
	padding-right: 20px;
}

#clear {
	position: absolute;
	font-size: 24px;
	width: 25px;
	text-align: center;
	top: 0px;
	bottom: 0px;
	right: 0px;
	cursor: default;
	color: gray;
}

#clear:hover {
	color: black;
}

#servers {
	margin-top: 8px;
}

server {
	border: 1px gray;
	/* border-style: none solid; */
	display: inline-block;
	/* margin-right: -1px; */
	vertical-align: top;
	width: 210px;
	margin: 8px;
	margin-bottom: 15px;
	background-color: #e9e9e9;
	padding: 8px;
	box-sizing: border-box;
}

server name {
	display: block;
	font-size: 14px;
}

server status {
	font-size: 12px;
}

server status.ok {
	//	color:#0a0
}

server status.connecting {
	color: #ffd907;
}

server status.bad {
	color: #d50015;
}

server status.logged {
	color: blue;
}

server memory.danger {
	color: #d50015;
}

server hamburger {
	font-size: 18px;
}

server button.dropdown {
	/* background-color: #d9d9d9; */
	//
	background-color: white;
	border: none;
	font-size: 10px;
	padding: 3px 0px;
	margin: 0px auto;
	/* width: 100px; */
}

server dropdown {
	display: block;
	/* margin: 0px 8px; */
	/* width: 100%; */
}

server dropdown input {
	width: 100px;
	min-width: 100%;
}

server message.error {
	color: #d50015;
	font-size: 14px;
}

error {
	color: #d50015;
}

@media screen and (max-device-width: 600px) {
	body {
		padding: 3px;
	}
	.station,
	.folder,
	.goup {
		width: 100%;
		padding: 0px;
		display: block;
		margin-left: 0px;
		margin-right: 0px;
	}



	#logindiv,
	#logoutdiv,
	#collapsedlogindiv {
		padding: 10px 10px;
		width: auto;
	}
	#logodiv {
		padding: 0px;
		width: auto;
		height: auto;
		margin: 10%;
	}
	server {
		width: 100%;
		border-style: solid none none;
	}
	#searchbox {
		width: 100%;
	}
}

.danger {
	color: #d50015;
}

a:link {
	text-decoration: none;
	color: #3e3e3e;
}

a:visited {
	text-decoration: none;
	color: #3e3e3e;
}

a:hover {
	text-decoration: none;
	color: #3e3e3e;
}

a:active {
	text-decoration: none;
	color: #3e3e3e;
}

.dimm {	color:#5E5D5E;}