styles.css

/*
Javascript-video-scrubber Demo
Created by Gary Hepting and the Dev Team at Emerge Interactive
Fork, follow and watch on Github at https://github.com/ghepting/javascript-video-scrubber
Visit Emerge Interctive at http://emergeinteractive.com/
*/

@font-face {
  font-family: 'Russo One';
  font-style: normal;
  font-weight: 400;
  src: local('Russo One'), local('RussoOne-Regular'), url('http://themes.googleusercontent.com/static/fonts/russoone/v1/RO6e96EC9m6OLO0tr7J3z7O3LdcAZYWl9Si6vvxL-qU.woff') format('woff');
}
body {
	font-family: Helvetica, Arial, sans-serif;
	font-size:16px;
	line-height:150%;
	color:#fff;
	text-shadow:3px 3px 3px #000;
	min-height:3500px;
}
div.code {
	background:rgba(0,0,0,0.65);
	padding:.5em 2em;

}
pre {
	font-size:12px;
	font-family:Courier;
	text-shadow:none;
	overflow:auto;
}
a, a:link, a:visited {
	color:#eee;
	text-decoration:none;
	border-bottom:1px dotted #eee;
}
a:hover, a:focus, a:active {
	color:#fff;
	text-decoration:none;
	border-bottom:1px dotted #fff;
}
a.button, a.button:link, a.button:visited {
	display: inline-block;
	margin-right:0.5em;
	height: 31px;
	padding: 0 0 0 3px;
	font-family: Helvetica,arial,freesans,clean,sans-serif;
	font-size: 21px;
	font-weight: bold;
	color: #333;
	text-shadow: 1px 1px 0 #fff;
	white-space: nowrap;
	border: 1px solid #d4d4d4;
	border-radius: 6px;
	background: #f4f4f4;
	background: -moz-linear-gradient(#f4f4f4,#ececec);
	background: -webkit-linear-gradient(#f4f4f4,#ececec);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4f4f4',endColorstr='#ececec')";
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	text-decoration:none;
}
a.button:hover, a.button:focus {
	color: #fff;
	text-decoration: none;
	text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
	border-color: #518cc6;
	border-bottom-color: #2a65a0;
	background: #599bdc;
	background: -moz-linear-gradient(#599bdc,#3072b3);
	background: -webkit-linear-gradient(#599bdc,#3072b3);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#599bdc',endColorstr='#3072b3')";
}
a span {
	display: block;
	height: 31px;
	padding: 0 9px 0 7px;
	line-height: 31px;
}
h1, h2, h3 {
	font-family: 'Russo One', serif;
}
p {
	margin-top:2em;
}
div.article {
	border-radius:1em;
	padding:1em 2em;
	background:rgba(0,0,0,0.5);
}
ul.checkmarks {
	list-style:none;
	padding:1em 2em;
	border-radius:1em;
}
ul.checkmarks li {
	font-size:14px;
	font-weight:bold;
	display:block;
	padding:1.5em 1.5em 2.5em;
    background:transparent url("./images/checkmark.png") 0 1.35em no-repeat;
    padding-left: 60px;
    border-bottom:3px dotted rgba(255,255,255,0.3);
    margin-bottom:1em;
}
ul.checkmarks li:last-child {
	border:none;
	margin-bottom:0;
	padding-bottom:0;
}
img#video {
	position:fixed;
	z-index:1;
	top:0;
	right:0;
	bottom:0;
	left:0;
	width:100%;
	height:100%;
}
#overlay {
	position:fixed;
	z-index:2;
	top:0;
	right:0;
	bottom:0;
	left:0;
	width:100%;
	height:100%;
	background:url('./images/grid_overlay.png');
}
#content {
	position:relative;
	z-index:2;
	width:66%;
	padding:4% 6%;
	margin:0 10%;
}
#footer {
	text-align:center;
}
#footer h1 a {
	border:none;
}
#footer h1 a img {
	position:relative;
	top:12px;
}