@font-face{
	font-family: 'Franklin Gothic Book';
	src: url('fonts/FranklinGothic-Book-webfont.eot');
	src: url('fonts/FranklinGothic-Book-webfont.eot?#iefix') format('embedded-opentype'),
	     url('fonts/FranklinGothic-Book-webfont.woff') format('woff'),
	     url('fonts/FranklinGothic-Book-webfont.ttf') format('truetype'),
	     url('fonts/FranklinGothic-Book-webfont.svg#webfont') format('svg');
}

@font-face{
	font-family: 'Franklin Gothic Demi';
	src: url('fonts/FranklinGothic-Demi-webfont.eot');
	src: url('fonts/FranklinGothic-Demi-webfont.eot?#iefix') format('embedded-opentype'),
	     url('fonts/FranklinGothic-Demi-webfont.woff') format('woff'),
	     url('fonts/FranklinGothic-Demi-webfont.ttf') format('truetype'),
	     url('fonts/FranklinGothic-Demi-webfont.svg#webfont') format('svg');
}

@font-face{
	font-family: 'ticks';
	src: url('fonts/ticks.eot');
	src: url('fonts/ticks.eot?#iefix') format('embedded-opentype'),
			url('fonts/ticks.woff') format('woff'),
			url('fonts/ticks.ttf') format('truetype'),
			url('fonts/ticks.svg#webfont') format('svg');
}

body{
	background-color: whitesmoke;
  margin: 0;
  font-family: 'Franklin Gothic Book';
  font-size: 1.5em;
}

a{
	text-decoration: none;
	color: darkred;
}

.header{
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  text-align: center;
  background-color: whitesmoke;
  padding-top: 2em;
  padding-bottom: 2em;
}

.headersm{
	padding-bottom: 0.3em;
	background-color: darkred;
	color: white;
}

.headersm h1{
	font-size: 1.2em;
	padding-left: 0.4em;
	display: inline;
}

.headersm span{
	font-size: 0.8em;
	margin-left: 1em;
	font-family: "Franklin Gothic Demi";
}

.header h1 {
	font-size: 5em;
	margin: 0;
}

.bunsho{
	text-decoration: none;
	text-shadow: 0 1px 0 #ccc,
							0 2px 0 #c9c9c9,
							0 3px 0 #bbb,
							0 4px 0 #b9b9b9,
							0 5px 0 #aaa,
							0 6px 1px rgba(0,0,0,.1),
							0 0 5px rgba(0,0,0,.1),
							0 1px 3px rgba(0,0,0,.3),
							0 3px 5px rgba(0,0,0,.2),
							0 5px 10px rgba(0,0,0,.25),
							0 10px 10px rgba(0,0,0,.2);
	font-family: 'Franklin Gothic Demi';
	color: white;
}

.message{
  max-width: 40em;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  box-shadow: 0 5px 5px #ccc;
  background-color: white;
	border: 1px solid white;
	border-top: 5px solid darkred;
}

.warning{
	margin-top: 1em;
	background-color: blanchedalmond;
	border-top: 5px solid burlywood;
}

.message p{
  margin: 0;
  padding: 2%;
}

.topics{
  list-style-type: none;
  padding: 0;
  max-width: 40em;
  margin-left: auto;
  margin-right: auto;
}

.topics li{
  font-family: 'Franklin Gothic Demi';
  width: 96%;
  color: darkred;
  box-shadow: 0 5px 5px #ccc;
  background-color: white;
  display: block;
  margin-bottom: 1em;
  padding: 2%;
	border: 1px solid white;
	background: linear-gradient(235deg, transparent 10em, white 10em);
}

.topics li:hover{

	border: 1px solid gray;
  cursor: pointer;
}

.topics li abbr{
  font-family: 'Franklin Gothic Book';
  font-size: 0.75em;
  color: black;
  display: block;
}

.description{
	font-size: 0.7em;
	padding-top: 1em;
	border-top: 1px solid darkred;
	margin-top: 1em;
	font-family: 'Franklin Gothic Book';
}

.button{
	background-color: white;
	border: 1px solid darkred;
	border-bottom: 5px solid darkred;
	padding: 0.3em;
	margin-top: 0.5em;
	text-align: center;
	box-shadow: 0 5px 5px #ccc;
	cursor: pointer;
	color: darkred;
	font-size: 1em;
}

.buttonunavailable{
	padding: 0.3em;
	margin-top: 0.5em;
	text-align: center;
	color: darkred;
	font-size: 1em;
}

.button:hover{
	background-color: darkred;
	color: white;
}

.button:active{
	background-color: darkred;
	color: white;
	position: relative;
	top: 5px;
	box-shadow: none;
}

.mainarea{
	text-align: center;
	max-width: 38em;
	margin-right: auto;
	margin-left: auto;
}

.mainarea .lessonnumber{
	margin-top: 2em;
	border-bottom: 2px solid darkred;
	display: block;
	width: 5em;
	margin-left: auto;
	margin-right: auto;
	color: darkred;
}

.mainarea h2{
	font-family: 'Franklin Gothic Demi';
	color: darkred;
}

.mainarea p{
	width: 100%
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

.mainarea li{
	text-align: left;
	margin-bottom: 1em;
}

.mainarea li abbr{
	display: block;
	font-size: 0.8em;
}

.lessonpage .textinput{
	width: 98%;
}

.textinput{
	font-size: 1em;
	border: none;
	color: darkred;
	padding: 0.4em;
	text-align: center;
	background-color: whitesmoke;
	border-bottom: 2px solid darkred;
	font-family: 'Franklin Gothic Demi';
	width: 3em;
}

.progressbar{
	background-color: darkgray;
	height: 0.2em;
}

.form{
	font-family: 'Franklin Gothic Demi';
	width: 96%;
	color: darkred;
	box-shadow: 0 5px 5px #ccc;
	background-color: white;
	display: block;
	margin-bottom: 1em;
	padding: 2%;
	border: 1px solid white;
	background: linear-gradient(235deg, transparent 10em, white 10em);
}

.resultspage{
	text-align: center;
}

.ticks{
	font-family: 'ticks';
}

.lessonpage .button{
	display: block;
	margin-left: auto;
}

.skip{
	font-size: 0.8em;
}

.hint{
	border-top: 1px solid darkgray;
	border-bottom: 1px solid darkgray;
	cursor: pointer;
}

.progressinfo{
	padding-bottom: 1em;
	padding-top: 1em;
}

.questremaining{
	float: left;
}

.resultsmeter{
	float: right;
}

.resultsreport{
	font-family: 'Franklin Gothic Demi';
	font-size: 2em;
	text-align: center;
	color: darkred;
}

.resultsreport .ticks{
	padding-right: 0.25em;
}

.revisionlist{
	padding: 0;
}

.revisionlist li{
	list-style-type: none;
	padding: 2%;
	max-width: 40em;
	margin-left: auto;
	margin-right: auto;
	box-shadow: 0 5px 5px #ccc;
	background-color: blanchedalmond;
	border: 1px solid white;
}

.revisionlist li span{
	float: right;
}

.revisionlist li span a{
	font-family: ticks;
	margin-left: 0.5em;
}

.revisionwords{
	padding: 0;
	color: gray;
	display: block;
	margin-bottom: 1em;
}