html, body {
margin:			0px;
padding:		0px;
height:			100%;
border:			none
}

body {
background-color: #ffffff;
-webkit-text-size-adjust:100%;
}

.logo {
display: 			inline-block;
float: 				left;
margin:				4px 20px 4px 0px;
}

H1 {
display: 			inline-block;
float: 				left;
FONT-FAMILY:		varela round, arial rounded MT bold, arial, helvetica, san serif;
FONT-SIZE:			20px;
FONT-WEIGHT:		normal;
MARGIN:				14px 0px 0px 20px;
COLOR:				#fff;
}

.ad {
margin: 			10px 0px;
}

P {
font-family: 		varela round, arial rounded MT bold, arial, helvetica, san serif;
COLOR:				#666;
font-size:			16px;
margin:				10px;
}

.menu-num {
font-family: 		varela round, arial rounded MT bold, arial, helvetica, san serif;
color:				#666;
font-size:			12px;
text-align:			right;
padding-right:		20px;
}

.menu-item {
font-family: 		varela round, arial rounded MT bold, arial, helvetica, san serif;
line-height:		175%;
color:				#099;
font-size:			24px;
cursor: 			pointer;
}

.back-button {
display: 			inline-block;
float: 				left;
margin-right:		15px;
cursor: 			pointer;
}

#nameField {
width:				300px;
height:				40px;
FONT-FAMILY:		varela round, arial rounded MT bold, arial, helvetica, san serif;
FONT-SIZE:			24px;
padding-left:		10px;
}

#reloadButton {
display: 			inline-block;
margin-top:			30px;
cursor: 			pointer;
}

.test-name {
FONT-FAMILY:		varela round, arial rounded MT bold, arial, helvetica, san serif;
FONT-SIZE:			24px;
FONT-WEIGHT:		normal;
MARGIN:				0px;
COLOR:				#099;
padding:			2px 0px 0px 0px;
}

#testAreaBorder {
display:			block;
width:				724px;
border:				solid 2px transparent;
margin:				30px;
}

#testArea {
display:			inline-block;
background:			#f6f6f6;	
}

#scrollBox {
position: 			relative;
margin:				20px;
height:				180px;
overflow:			hidden;		
}

#textArea {			
position:			absolute;
text-align:			left;
}

.line {
display:			block;
}

.letter, .blank {
display:			inline-block;
font-family:		'Roboto Mono','Courier New', Courier, monospace;
font-weight:		300;
font-size:			30px;
width:				20px;
line-height:		150%;
color: 				#999;
border:				2px solid transparent;
border-width:		0px 0px 0px 2px;
}

.correct {
font-weight:		700;
color:				black;
}

.wrong {
font-weight:		700;
color:				red;
text-decoration: 	underline;
}

.cursor {
border-color:		black;
-webkit-animation:	1s blink step-end infinite;
}

@-webkit-keyframes "blink" {
  from, to {
    border-color: black;
  }
  50% {
    border-color: transparent;
  }
}

#progressArea {
width:				724px;
height:				4px;
background-color:	#ccc;
margin:				0px;
}

#progressBar {
height:				4px;
width:				0px;
background-color:	#099;
float:				left;
}

TABLE.results TD {
font-family: 		varela round, arial rounded MT bold, arial, helvetica, san serif;
text-align:			right;
font-size: 			16px;
color: 				#333;
padding:			6px 10px;
}

.share {
FONT-FAMILY:		Arial, Helvetica, sans-serif;
FONT-SIZE:			14px;
LINE-HEIGHT:		150%;
margin:				15px;
}

.share:link         {color: #999;}
.share:visited      {color: #999;}
.share:hover        {color: #bbb;}

.shareOptions {
margin:				18px 0px;
}

.shareOptions TD {
padding:			0px 10px;
}

.linkBox {
width: 				450px;
font-size: 			14px;
background-color: 	#eee;
border: 			1px solid #ccc;
padding: 			4px;
margin: 			0px;
}

.copyright {
FONT-FAMILY:		Arial, Helvetica, sans-serif;
FONT-SIZE:			11px;
COLOR:				#fff;
MARGIN:				10px;
}

#instructions {
FONT-FAMILY:		Arial, Helvetica, sans-serif;
FONT-SIZE:			14px;
LINE-HEIGHT:		100%;
HEIGHT: 			30px;
background-color: 	#FFFDD4;
}

#instructions A:link 	{color: #3366FF;}
#instructions A:visited {color: #3366FF;}
#instructions A:hover 	{color: #6699FF;}