/** FONTS: **/
@font-face {
	font-family: 'body';
	font-style: normal;
	font-weight: normal;
	src: local('OpenSans-Light'), url('fonts/OpenSans-Light.ttf') format('truetype');
}

@font-face {
	font-family: 'body';
	font-style: normal;
	font-weight: bold;
	src: local('OpenSans-Regular'), url('fonts/OpenSans-Regular.ttf') format('truetype');
}

/** SHARED **/
body {
	color: #FFF;
	font-family: body, Arial, sans-serif;
	margin: 0;
	padding: 0;
}

a {
	text-decoration: none;
	color: hsla(200, 100%, 50%, 1);
	-webkit-transition: color 1s ease-out;
}

a:hover {
	text-decoration: underline;
	color: hsla(210, 100%, 90%, 1);
}

/** PRESO **/
body.preso {
	overflow: hidden;
	background-color: #080808;
}

#logo {
	top: 20px;
	right: 20px;
	position: absolute;
	z-index: 200;
}

.slideHolder {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	z-index: 48;
}

#gradient, #background {
	width: 100%;
	height: 100%;
	position: absolute;
}

#background {
	background: hsl(215, 0%, 12%);
	background-image: url("img/bg3.jpg");
}

#gradient {
	background: -webkit-gradient(linear, left center, right bottom, color-stop(0%, hsla(270, 50%, 8%, 0.95)), color-stop(50%, hsla(230, 15%, 13%, 0.78)), color-stop(99%, hsla(200, 50%, 8%, 0.98)));
}

#timerPanel {
	position: absolute;
	font-size: 11px;
	border-bottom-right-radius: 6px;
	padding: 4px;
	padding-left: 10px;
	z-index: 100;
	font-weight: bold;
	background-color: hsla(215, 100%, 0%, 1);
	/*background-image: url("img/stripe.png");*/
}

#timerPanel input {
	border: none;
	background-color: hsla(215, 100%, 100%, 1);
	color: #111;
	border-radius: 2px;
	font-size: inherit;
	text-align: center;
	padding-top: 3px;
	padding-bottom: 3px;
}

#timerFld {
	width: 1.7em;
}

nav {
	position: absolute;
	z-index: 100;
	width: 100%;
	bottom: 0;
	padding-top: 4px;
	padding-bottom: 15px;
	
	font-size: 14px;
	text-align: center;
	color: #666;

	-webkit-box-shadow: 0em -0.3em 10em hsla(40, 100%, 0%, 1);
	border-top: 1px dotted hsla(0, 0%, 5%, 1);

	background-color: hsla(20, 100%, 100%, 0.9);
}

.slidebar, .timebar, .tick {
	height: 3px;
	background-color: hsla(220, 100%, 0%, 0.05);
	width: 100%;
}

.timebar {
	margin-bottom: 1px;
}

.tickbar {
	font-size: 0;
	margin-top: -4px;
}

.tick {
	height: 3px;
	width: 1px;
}

#meter {
	position: absolute;
	left: 5px;
	right: 5px;
	bottom: 5px;
}

/** SLIDES **/
.slide {
	text-shadow: 0.00em 0.08em 0.05em hsla(0, 0%, 0%, 1);
	color: #AAA;
	padding-top: 1.6em;
	padding-left:14%; /*because of transition padding.*/
	padding-right:14%;
	padding-bottom: 0;
	background: hsl(215, 30%, 15%) url("img/guide.png") no-repeat;
	font-size: 47px;
}

section {
	-webkit-transition: opacity 0.6s ease-in-out;
}

.run {
	/** this is injected into slides using the "slide" class at runtime **/
	background: none;
}

.center {
	top: 0;
	height: 100%;
	display: table;
	left: 0;
	width: 100%;
	position: absolute;
}

.innercenter {
	padding-bottom: 36px; /*account for bottom bar*/
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	padding-right: 7%;
	padding-left: 7%;
}

.titleSlide {
	font-size: 200%;
}

.slide h1, .slide h2 {
	font-weight: normal;
	color: #FFF;
	font-size: 150%;
	margin: 0;
	margin-bottom: 0.1em;
	padding-top: 0em;
	padding-bottom: 0.15em;
	
	border-bottom: 1px dotted hsla(0,0%,100%,0.08);
	border-top: 1px dotted hsla(0,0%,100%,0.08);
	background-color: hsla(250, 10%, 20%, 0.06);
}

.slide h2 {
	font-size: 100%;
}


.codeSlide {
	padding-top: 70px;
}

.codeSlide h1 {
	font-size:30px;
	margin-top: 0;
}

.innercenter h1 {
/*
	background-color: rgba(0,0,0,0.6);
	padding-left: 0.3em;
	padding-right: 0.3em;
	padding-bottom: 0.2em;
	border-radius: 0.1em;
	display:inline;
*/
}

.slide h2 {
	font-size: 125%
}

.slide ul, .slide ol {
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0.6em;
}

.slide ol {
	margin-left: 1.2em;
}

.slide strong {
	font-weight: normal;
	color: #FFF;
}

.slide .aside {
	color: hsla(215,10%,50%,0.8);
}

.codeEditor {
	font-size:16px;
	background: white;
	text-shadow: none;
}

.codeView {
	border: none;
	border-top: solid 1px black;
	background: #FFF;
	width:100%;
	height:240px;
}

.imgAttribution {
	position:fixed;
	top:0px;
	left:5%;
	background-color:rgba(0,0,0,0.5);
	padding: 8px 6px 6px 6px;
	font-size:11px;
	opacity: 0.9;
}

.bgImg, .bgImgFaded {
	z-index:-1;
	width:100%;
	height:100%;
	position:fixed;
	top:0;
	left:0;
}


.bgImgFaded {
	opacity: 0.18;
}