MagicMirror/css/main.css

body {
	margin: 60px;
	position: relative;
	background: #000;
	color: #aaa;
	font-family: 'roboto_condensedregular', arial;
	font-size: 2em;
	line-height: 1.5em;
	-webkit-font-smoothing: antialiased;
}

/**
 * Default styles.
 */

.dimmed {color: #555;}
.normal {color: #999;}
.bright {color: #fff;}

.xsmall {font-size: 15px; line-height: 20px;}
.small {font-size: 20px; line-height: 25px;}
.medium {font-size: 30px; line-height: 35px;}
.large {font-size: 65px; line-height: 65px;}
.xlarge {font-size: 75px; line-height: 75px; letter-spacing: -3px;}

.thin {font-family: 'robotothin'; }
.light {font-family: 'roboto_condensedlight'; }
.regular {font-family: 'roboto_condensedregular';}
.bold {font-family: 'roboto_condensedbold';}

.align-right {text-align: right;}


header {
	margin-top: 40px;
	text-transform: uppercase;
	font-size: 15px;
	font-family: 'roboto_condensedregular';
	border-bottom: 1px solid #333;
	line-height: 0.35em;
	padding-bottom: 10px;
	margin-bottom: 10px;
	color: #666;
}

header:first-child {
	margin-top: 0px;
}

sup {
	font-size: 50%;
	line-height: 50%;
}
/**
 * Region Definitions.
 */

.region {
	position: absolute;
}
.region.right {
	right: 0;
}
.region.top {
	top: 0;
}
.region.top .container{
	margin-bottom: 25px;
}
.region.top .container:empty {
	margin-bottom: 0px;
}
.region.top.center, .region.bottom.center {
	left: 50%;
	-moz-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
}
.region.top.right, .region.top.left, .region.top.center {
	top: 100%;
}
.region.bottom {
	bottom: 0;
}
.region.bottom .container{
	margin-top: 25px;
}
.region.bottom .container:empty {
	margin-top: 0px;
}
.region.bottom.right, .region.bottom.center, .region.bottom.left {
	bottom: 100%;
}
.region.bar {
	width: 100%;
	text-align: center;
}
.region.third, .region.middle.center {
	width: 100%;
	text-align: center;
	-moz-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}
.region.upper.third {
	top: 33%;
}
.region.middle.center {
	top: 50%;
}
.region.lower.third {
	top: 66%;
}
.region.left {
	text-align: left;
}
.region.right {
	text-align: right;
}
.region.right  table {
	float: right;
}