@font-face {
    font-family: SourceSansPro;
    src: url('/fonts/sourceSansPro.ttf');
}

@font-face {
    font-family: SocialIcons;
    src: url('/fonts/socialIcons.ttf');
}

@font-face {
    font-family: weatherIcons;
    src: url('/fonts/weathericons-regular-webfont.ttf');
}

body {
	background-color: #F3F3F3;
	color: #333;
	margin: 0 0.5rem 0 0.5rem;
	padding: 0;
	/* 1.5rem 2.0rem    1.0rem 1.125rem */
	font-size: 1.0rem;
	line-height: 1.125rem;
	font-family: SourceSansPro, Georgia, sans-serif;
}

a {
	text-decoration: none;
}

a:link, a:visited, a:active {
	transition:background-color .2s ease 0, border .2s ease 0, color .2s ease 0, opacity .2s ease-in-out 0;
	color: #e24a37;
}

a:hover {
		color: #37cfe2;
}

#home{
	font-family: SocialIcons;
}

h2, h3, h4, h5, h6 {
	margin: 0.5rem 0 0.5rem 0;
	color: #e24a37;
}

ul, ol {
	margin: 0;
}

li {
	list-style-position: outside;
}

ul {
	list-style-type: disc;
}

@counter-style bracket-decimal {
	system: extends decimal;
	prefix: "";
	suffix: ") ";
}

[type="1"] {
	list-style: bracket-decimal;
}

/* video editing styles */
table {
	width: 100%;
	font-size: inherit;
}

th, td {
	text-align: left;
}

tr th:nth-child(1), tr td:nth-child(1),  tr th:nth-child(3), tr td:nth-child(3) {
	width: 14%;
}

tr th:nth-child(2), tr td:nth-child(2),  tr th:nth-child(4), tr td:nth-child(4) {
	width: 36%;
}

td.spacer {
	height: 1.125rem;
}

/* desktop styles */
body#desktop {
	margin: 0;
	padding: 0;
	line-height: normal;
	color: #fff;
	overflow: hidden;
}

div#background, div#stage {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

div#background {
background-size: cover;
background-position: center;
transition: background-image 0.3s ease;
}

div#display {
	position: absolute;
	display: inline-block;
	padding: 0.5rem;
  	font-weight: bold;
  	opacity: 1.0;
  	transition: opacity 0.1s ease;
}

div#display.fadeOut {
  opacity: 0.0;
}

div#display.topLeft {
	top: 0;
	left: 0;
}

div#display.topRight {
	top: 0;
	right: 0;
}

div#display.bottomLeft {
	bottom: 0;
	left: 0;
}

div#display.bottomRight {
	bottom: 0;
	right: 0;
}

DIV#weatherAndDate {
	display: flex;
	align-items: flex-end;
}

div#weatherIcon, div#temperatureAndDate {
	display: inline-block;
}

div#weatherIcon {
	font-family: 'weathericons';
	font-size: 2.125rem;
	margin-right: 0.5rem;
}

div#temperature, div#date {
	font-size: 1.5rem;
	line-height: 1.5rem;
}

div#time {
	font-size: 3.375rem;
	line-height: 3.375rem;
}