/* GENERAL ------------------------------------------------------- */

@import url(https://fonts.googleapis.com/css?family=Dosis:300,400,500);

* {
	padding:0;
	margin:0;
}
body {
	font-family: 'Dosis', sans-serif;
	font-size:18px;
	font-weight:400;
	color:#222;
}
a, a:visited {
	color:#222;
	text-decoration:underline;
}
a:hover {
	text-decoration:underline;
}
h1 {
	font-size:40px;
	font-weight:500;
	line-height:56px;
}
h2 {
	font-size:24px;
	font-weight:400;
	color:#999;
}
ul {
	list-style-type:square;
	margin:10px 0 30px;
}
li {
	line-height:28px;
}
strong {
	font-weight: 500;
}

/* RUNNING ------------------------------------------------------- */

@font-face {
  font-family: 'run';
  src: url('../font/run.eot?77997105');
  src: url('../font/run.eot?77997105#iefix') format('embedded-opentype'),
       url('../font/run.woff?77997105') format('woff'),
       url('../font/run.ttf?77997105') format('truetype'),
       url('../font/run.svg?77997105#run') format('svg');
  font-weight: normal;
  font-style: normal;
}
.running ul li:before, .running p.back:before {
	font-family: run;
	font-style: normal;
	font-weight: normal;
	display: inline-block;
	text-decoration: inherit;
	margin-right:10px;
}

.running div.header {
	background:url(../img/bg.jpg) bottom center no-repeat;
	background-size:cover;
	color:#fff;
}
.running div.dim {
	background: -moz-linear-gradient(top,  rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.6) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.4)), color-stop(100%,rgba(0,0,0,0.6)));
	background: -webkit-linear-gradient(top,  rgba(0,0,0,0.4) 0%,rgba(0,0,0,0.6) 100%);
	background: -o-linear-gradient(top,  rgba(0,0,0,0.4) 0%,rgba(0,0,0,0.6) 100%);
	background: -ms-linear-gradient(top,  rgba(0,0,0,0.4) 0%,rgba(0,0,0,0.6) 100%);
	background: linear-gradient(to bottom,  rgba(0,0,0,0.4) 0%,rgba(0,0,0,0.6) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66000000', endColorstr='#99000000',GradientType=0 );
	padding:40px;
}
.running p.back {
	font-size:14px;
	opacity:0.7;
	transition:opacity 0.2s;
}
.running p.back:before {
	content: '\e802';
}
.running p.back:hover {
	opacity:1;
}
.running p.back a, .running p.back a:visited {
	color:#fff;
	background:none;
	padding:0;
}
.running h1 {
	margin:100px 0 40px;
	font-size:70px;
	line-height:auto;
}
.running p.intro {
	font-size:20px;
	max-width:720px;
}
.running .content {
	padding:40px;
	max-width:720px;
}
.running .primary {
	background:#eee;
	border: 1px solid #ccc;
	padding: 10px;
	margin-bottom: 30px;
}
.running ul {
	list-style-type:none;
	margin-left:27px;
}
.running ul.done {
	color:#00a321;
	margin-left:28px;
}
.running ul.done a {
	color:#00a321;
}
.running ul.done li:before {
	content: '\e800';
	margin-left:-28px;
}
.running ul.pending,
.running ul.pending a {
	color:#eca100;
}
.running ul.pending li:before {
	content: '\e801';
	color:#eca100;
	margin-left:-27px;
}
.running ul.go li:before {
	content: '\e801';
	color:#666;
	margin-left:-27px;
}
.running ul.go li:before a {
	color:#666;
}
.running .footnote {
	color:#999;
	font-style: italic;
}

@media only screen and (max-width : 568px) {

.running div.dim {
	padding:20px;
}
.running .content {
	padding:20px;
}
.running ul {
	margin-left:27px;
}
.running ul.done {
	margin-left:28px;
}
.running ul.done li:before {
	margin-left:-28px;
}
.running ul.go li:before {
	margin-left:-27px;
}

}