/* Basic browser reset */

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dd, dt, blockquote, fieldset, legend, form {
	border: 0;
	margin: 0;
	padding: 0;
}

html, input, textarea, select {
	font-size: 100%;
}
/* keep ie happy */

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}

.clearfix {
	clear: both;
}
/* 1.ROOT */

body {
	background: #0f0f0e;
	color: rgba(163, 163, 163, 1);
	font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif;
	font-size: 100%/1.335;
	font-style: normal;
	font-weight: 400;
	overflow: hidden; /*weather icon*/
	padding: 0 1%;
}
/* 2.HEADINGS */

h1, h2, h3, h4, h5, h6 {
	color: rgb(244, 49, 50);
	line-height: 0.85em;
	/*margin: .25em 0;*/
}

h1 {
	clear: both;
	font-size: 2.275em;
	margin-top: 0;
}

h2 {
	font-size: 1.875em;
}

h3 {
	font-size: 1.25em;
}

h4 {
	font-size: 1.25em;
}

h5 {
	font-size: 1em;
}

h6 {
	font-size: .9875em;
}

/* 3.TYPOGRAPHY */

p {
	margin-bottom: 1em;
}



/* 4.LINKS */

a {
	text-decoration: none;
}

	a, a:visited {
		color: #ffbb44;
	}

		a:hover, a:focus {
			color: #ffefaa; /*#017cbb;*/
		}

		a img {
			border: 0!important;
		}


.page-wrap { /* equal to footer height */
	margin-bottom: -142px;
	min-height: 100%;
}

	.page-wrap:after {
		content: "";
		display: block;
	}

.site-footer {
	position: relative;
	width: 100%;
	z-index: 99;
}




section {
	background-image: linear-gradient(to bottom, rgba(40, 42, 40, .75) 50%, rgba(22, 22, 22, .75) 51%);
	border: .16em rgba(68, 68, 68, 1.0) solid;
	border-radius: .5em;
	box-sizing: border-box;
	float: left;
	/*margin: .16em;*/
	min-width: 20%;
	overflow: hidden;
	width: 48%;
}

	section.small {
		width: 24.5%;
	}

	section.half {
		width: 49.3%;
	}

	section.full {
		width: 100%;
	}

.slider-container {
	overflow: hidden;
}

article {
	padding: .4em .6em;
}




.location-wrapper {
	height: 30px;
	position: relative;
}

	.location-wrapper .sun-event {
		background-color: rgb(57, 130, 206);
		display: inline-block;
		height: 100%;
		position: relative;
		width: 5%;
	}

	.location-wrapper .workday-marker {
		border-left: rgb(174, 41, 41) 2px dotted;
		color: rgb(174, 41, 41);
		font-size: 2em;
		height: 50px;
		position: absolute;
	}

	.location-wrapper .day-time {
		-webkit-box-shadow: 0px 0px 40px 29px rgb(9, 78, 141);
		box-shadow: 0px 0px 25px 29px rgb(9, 78, 141);
		background-color: rgb(9, 78, 141);
		display: inline-block;
		height: 100%;
		position: absolute;
	}

	.location-wrapper .night-time {
		background-color: #000;
		display: inline-block;
		height: 100%;
		position: relative;
	}


	.location-wrapper .temp {
		font-size: 2.5em;
		position: relative;
		top: -15px;
		left: 5%;
		font-weight: bolder;
	}

		.location-wrapper .temp:first-of-type {
			border-right: 2px #fff solid;
			padding-right: 20px;
			margin-right: 13px;
		}
	/*.timezone-offset { display: inline-block; width: 30%; background: rgba(237, 215, 215, 0.28); }*/

	.location-wrapper .sun-slider {
		background: rgba(0, 0, 0, 0.28);
		display: block;
		height: 15px;
		overflow: hidden;
		position: relative;
		top: 15px;
		width: 100%;
	}

	.location-wrapper .icon {
		display: inline;
		max-height: 54px;
		position: absolute;
		z-index: 9999;
		animation-duration: 3s;
		animation-name: slidein;
		-webkit-animation-name: slidein;
		-webkit-animation-duration: 4s;
		-webkit-animation-timing-function: ease-out;
	}

@-webkit-keyframes move {
	0% {
		left: 850px;
		-webkit-animation-timing-function: linear;
	}
}

@keyframes move {
	0% {
		left: 850px;
		animation-timing-function: linear;
	}
}

@-webkit-keyframes slidein {
	from {
		left: -10%;
	}

	to {
		transform: translateY(0%);
	}
}

@keyframes slidein {
	from {
		left: -10%;
	}

	to {
		transform: translateY(0%);
	}
}



#recent-tracks {
	bottom: 29px;
	position: fixed;
	width: 98%;
}

	#recent-tracks .viewport {
		height: 150px;
		overflow: hidden;
		position: relative;
	}

	#recent-tracks .overview {
		position: absolute;
	}

	#recent-tracks .scrollbar {
		float: right;
		height: 5px;
		position: relative;
	}

	#recent-tracks .thumb {
		background: #880606;
		border-radius: 15px;
		cursor: pointer;
		height: 5px;
		overflow: hidden;
		position: absolute;
		top: -10px;
		width: 25px;
	}

	#recent-tracks .disable {
		display: none;
	}

.noSelect {
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	-webkit-user-select: none;
	user-select: none;
}

.slider-container .inner {
	overflow: hidden;
	padding: .4em;
	width: 10000px;
}

.borderbox {
	box-sizing: border-box;
	margin-right: .4em;
	overflow: hidden;
}

.user-avatar {
	border-radius: 50px;
	left: 94px;
	max-width: 30px;
	position: absolute;
	top: 95px;
}

.track-wrapper {
	display: inline-block;
	float: left;
	height: 126px;
	margin: 4px;
	position: relative;
	width: 126px;
}

	.track-wrapper:first-child {
		margin-left: 0;
	}

img.album-art {
	max-height: 126px;
}

.playing-indicator {
	left: 38px;
	position: absolute;
	top: 90px;
}

.tracecontent tr {
	background-color: #555;
}

.track {
	font-family: 'Concert One', Impact, Arial, sans-serif;
	font-size: 1.3em;
	letter-spacing: 0.0625em;
	margin: auto auto;
	position: absolute;
	text-align: center;
	text-transform: uppercase;
	top: 7px;
	width: 100%;
}


.animate-repeat.ng-leave {
	-webkit-transition: 4000ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
	-moz-transition: 4000ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
	-ms-transition: 4000ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
	-o-transition: 4000ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
	transition: 4000ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
	display: block;
	overflow: hidden;
	text-overflow: clip;
	white-space: nowrap;
}

.animate-repeat.ng-enter {
	-webkit-transition: 3000ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
	-moz-transition: 3000ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
	-ms-transition: 3000ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
	-o-transition: 3000ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
	transition: 3000ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
	display: block;
	overflow: hidden;
	text-overflow: clip;
	white-space: nowrap;
}

	.animate-repeat.ng-leave.ng-leave-active,
	.animate-repeat.ng-enter {
		opacity: 0;
		/*width: 0px;
    height: 0px;*/
	}

		.animate-repeat.ng-enter.ng-enter-active,
		.animate-repeat.ng-leave {
			opacity: 1;
			/*width: 150px;
    height: 30px;*/
		}



#status-indicator-events {
	color: #fff;
	color: #b1346c;
	padding: 2px 20px;
	position: absolute;
	right: 0px;
	top: 0px;
}

#status-indicator-nowplaying {
	color: #b1346c;
	padding: 2px 20px;
	position: absolute;
	right: 50px;
	top: 20px;
}





















.radred {
	color: rgb(244, 49, 50);
}

.yellowish {
	color: #ffbb44;
}

.darkgrey {
	color: rgb(36, 36, 36);
}

.lightergrey {
	color: rgb(65, 65, 65);
}



#event-log .ng-enter,
#event-log .ng-leave {
	-webkit-transition: 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
	-moz-transition: 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
	-ms-transition: 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
	-o-transition: 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
	transition: 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
	position: relative;
	display: block;
}

	#event-log .ng-enter.ng-enter-active,
	#event-log .ng-leave {
		opacity: 1;
		top: 0;
	}

		#event-log .ng-leave.ng-leave-active,
		#event-log .ng-enter {
			opacity: 0;
			top: -50px;
		}




/* Only iPad 1 & 2 Portrait & iPad Mini Landscape */
@media only screen and ((width:768px) and (resolution:132dpi) or ((width:1024px) and (resolution: 163dpi)) {
}