html,body {
	background-color:#eee;
	
	/* everything started here is experimental and won't work */
/* 	background-image: url("large");
    background-repeat: no-repeat;
    background-size: 100% 177.77%;
    background-attachment: fixed; */
	/* end of experimenting */
	
	height:100%;
}
.container {
	background-color:#fff;
	min-height:100%;
	padding:/*0px*/ 16px;
}
.row {
	margin-top:8px;
}

p {
	float:left; /*Used for stank*/
}

#header {
	border-bottom:solid black 1px;
}
#logo {
	background-image:url(dr3v.png);
	background-size:auto 60px; /* the line-height */
	background-repeat:no-repeat;
	display:inline-block; /* don't wrap */
	min-width:110px; /* how wide the image ends up at 60px tall */
	height:64px; /* make it a little bigger so I can nudge it downward 4px */
	background-position:bottom; /* which makes it line up with the rest of the line (not image) */
}
#logo #logo-text {
	visibility:hidden;
}

#admin {
	border-bottom:solid black 1px;
	display:none;
}
#admin h5 {
	border-bottom:solid #ccc 1px;
}
.secret {
	-webkit-user-select:none; /*prevent it from highlighting when we do the secret thing*/
	-moz-user-select: none;
	-khtml-user-select: none;
	user-select: none;
}

.status {
	font-size:2.5rem;
}
.title {
	font-size:1.75rem;
	margin-top:1.5rem;
}
.subtitle {
	font-size:1.5rem;
	display:none; /*hide these optional pieces until they exist*/
	color:#aaa;
	position:relative;
	top:-0.2rem;
}
.art {
	/*visibility:hidden;*/
	opacity:0;
}
.subtitle span {
	color:#777;
}

#player-ui button {
	width:100%;
}
.jp-volume-bar {
	border:solid 1px;
}
.jp-volume-bar-value {
	background-color:#ddd;
	text-align:right;
}
#volume-bar-speaker {
	height:20px;
	width:auto;
	margin:4px 4px -4px 4px;
}

#no-broadcast {
	display:none;
}

#calendar-embed {
	height:300px;
	width:;
	margin-top:10px;
	margin-left:auto;
	margin-right:auto;
	-webkit-filter: grayscale(100%);
	filter: gray;
	filter: grayscale(100%);
}