@font-face {
  font-family: 'Arvo';
  font-style: normal;
  font-weight: 400;
  src: local('Arvo'), url(arvo.woff) format('woff');
}

#header { background-color: #3874bb;/*#000000;*/ padding-top: 1px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px;  }
#header h1 { font-size: 2em; color:#ffffff; background-color: #3874bb; padding-top: 0px; padding-bottom: 0.5em; padding-left: 30px; padding-right: 30px; line-height: 1em;}
#header h1 a {color: #ffffff; text-decoration:none; background-color: #3874bb;}
#header h1 a span {font-style:italic; font-size: 0.9em; font-weight: normal;}
hr {color: #000000; background-color: #000000;}
#header h1 span {font-style:italic; font-size: 0.9em; font-weight: normal;}

span.greyKey{text-align: center; font-weight: bold; background-color: #ddaaff;/*#e2e2e2;*/ border-top: solid 1px #000000; border-bottom: solid 1px #000000; border-left: solid 1px #000000; border-right: solid 1px #000000; padding-left: 5px; padding-right: 5px;}
span.blueKey{text-align: center; font-weight: bold; background-color: #aacc00;/*#b7cade;*/ border-top: solid 1px #000000; border-bottom: solid 1px #000000; border-left: solid 1px #000000; border-right: solid 1px #000000; padding-left: 5px; padding-right: 5px;}
div.keyboard {text-align: center; padding-left: 25%; padding-right: 25%;}
table.bracket {width: 300px; border-top: solid 1px #000000; border-bottom: solid 1px #000000; border-left: solid 1px #000000; border-right: solid 1px #000000;}
td.blue {background-color: #aacc00;/*#b7cade;*/ width: 27px; text-align: center; padding-left: 0; padding-right: 0; padding-top: 0; padding-bottom: 0; border-top: solid 1px #000000; border-bottom: solid 1px #000000; border-left: solid 1px #000000; border-right: solid 1px #000000;}
td.grey {background-color: #ddaaff;/*#e2e2e2;*/ width: 27px; text-align: center; padding-left: 0; padding-right: 0; padding-top: 0; padding-bottom: 0; border-top: solid 1px #000000; border-bottom: solid 1px #000000; border-left: solid 1px #000000; border-right: solid 1px #000000;}

#exerciseBox {background-color: #ffcc66; /*#f1f1f1;*/ 
 padding-bottom: 20px; padding-top: 10px; padding-left: 20px; padding-right: 20px; margin-left: 10px; margin-right: 10px; border-top: solid 1px /*#a1a5a9;*/#ff9933; border-bottom: solid 1px /*#a1a5a9;*/#ff9933; border-left: solid 1px /*#a1a5a9;*/#ff9933; border-right: solid 1px /*#a1a5a9;*/#ff9933;}
#exerciseBox b {font-size: 1.2em;}

#userPromptKey {font-family: 'Courier New', 'Andale Mono', Monaco, monospace; font-weight: bold; font-size: 1.8em;}
#userErrorHint {font-size: 0.9em;}
#wpm {font-size: 0.9em;}
#updated {text-align: center;}
#userInputBox {font-family: 'Courier New', monospace; font-size: 1.5em; color: #000000;  background-color: #ffffff; width: 100%}
#typingBenefits li {padding-top:1em;}
ul {font-size: 1em;}
ul.keys {font-size: 1em; line-height: 1.5em;}
td.plain {background-color: #ffffff; width: 27px; text-align: center; border-top: solid 1px #000000; border-bottom: solid 1px #000000; border-left: solid 1px #000000; border-right: solid 1px #000000;}
td.spacer1 {width: 0px; padding-left: 0; padding-right: 0; padding-top: 0; padding-bottom: 0;}
td.spacer2 {width: 9px;}
td.spacer3 {width: 18px;}
td.spacer4 {width: 27px;}
span.CPmistakeWas {font-size: 1em; font-weight: normal;}
table.bracket {width: 300px; border-top: solid 1px #000000; border-bottom: solid 1px #000000; border-left: solid 1px #000000; border-right: solid 1px #000000;}

p { text-align: justify; font-size: 1em; line-height: 1.5em;}
p.smaller {font-size: 0.9em; line-height: 1.5em;}
p.mistakes {font-size: 1em; line-height: 1.5em; font-weight: normal;}
#sampleText {background-color: #ffffff; border-top: solid 1px /*#a1a5a9;*/#ff9933; border-bottom: solid 1px /*#a1a5a9;*/#ff9933; border-left: solid 1px /*#a1a5a9;*/#ff9933; border-right: solid 1px /*#a1a5a9;*/#ff9933; padding-left: 1%; padding-right: 1%;}

menu {list-style-type: none;}
menu li {display: inline;}
#mistakeWas {font-size: 0.9em;}
#numberTable tr.colouredRow {background-color: #ddaaff;}
#numberTable {border-collapse: collapse; border-top: solid 1px #ff9933; border-bottom:solid 1px #ff9933; border-left:solid 1px #ff9933; border-right: solid 1px #ff9933;}

#mainContentBlock { float: right; width: 74%; padding-left: 1%; padding-right: 1%;}
#mainContentBlock ol {list-style-type: decimal; line-height: 1.5em; font-family: Monaco, 'Courier New', monospace; font-weight: bold;}
#map {font-size: 1em; margin-left:19%;}
#map li.groupStart {padding-top: 1em;}

hr {color: #000000; background-color: #000000;}
#header h1 span {font-style:italic; font-size: 0.9em; font-weight: normal;}
label {vertical-align: top;}

div.cp {background-color: #ffffff;}
div.keyboard {text-align: center; padding-left: 25%; padding-right: 25%;}
#ednaPic {border: 0px;}

address {font-style: normal;}

caption {font-style: italic;}
#comingTextBlock {font-family: 'Courier New', 'Andale Mono', Monaco, monospace; font-weight: normal; font-size: 1.5em;}
#container {text-align: justify; font-size: 0.9em; font-family: 'Courier New', monospace; font-weight: bold; padding-bottom: 5px; line-height: 1.5em;}
 #copyright {text-align: right; font-size: 0.7em;}
#copyTextInputBox {margin-right:5%; width: 90%; height: 15%; margin-bottom: 5%; margin-top: 0%; font-size: 0.9em; font-family: 'Courier New', monospace; font-weight: bold;}
#cppast {background-color: #ffffff; font-size: 1em; font-weight: normal; font-family: 'Courier New', Monaco, monospace; color: #76797c; }
#cpfuture {background-color: #ffffff; font-size: 1em; font-weight: bold; font-family: 'Courier New', Monaco, monospace; color: #000000; }
#cpfuture:first-letter {text-decoration: underline;}

body {
	margin: 0;
	padding: 0;
	font-family: Trebuchet MS, Arial, sans-serif;
	font-size: 14px;
	color: #4D4D4D;
}

h1, h2, h3 {
	margin: 0;
	padding: 0;
	font-weight: normal;
	font-family: 'Arvo', serif;
	color: #056303;
}

a {
	text-decoration: none;
	color: #C16C2F;
}

a:hover {
text-decoration: underline;
}


p, ul, ol {
	margin-top: 0;
	line-height: 240%;
}



 /* Wrapper */

 #wrapper {
 padding: 0 0.3em; background: #ededed; border: 0.4em solid #f8f8f8; border-width: 0 0.4em; 
  
 	clear: both;
 	width: 1004px;
     margin: 0 auto;


 }
 
 #wrapper2 {clear: both;
 
 padding-right: 2px;
 padding-left: 2px;
 background: #FFFFFF;

 	width: 1000px;

}

#wrapper2 p {
margin-left: 10px;
}


/* Header */

#header-wrapper {
	margin-top: 5px;
	height: 120px;
}

#header {
	width: 1000px;
	margin: 0 auto;
	padding: 0px 0px 0px 0px;
}

/* Ads */

#ads-wrapper {
	
}

#ads {
	width: 728px;
	margin: 0 auto;
	padding: 10px 0px 0px 0px;
}


/* Logo */

#logo {
	float: left;
	width: 350px;
	margin: 0;
	padding: 0;
	color: #FFFFFF;
}

/* Sidebar1 */

#sidebar1 {
	float: left;
	width: 160px;
}

/* Sidebar2 */

#sidebar2 {
	float: right;
	width: 110px;
	
}

#sidebar2 h2 {
	margin: 0px;
	margin-left: -25px;
	text-align: left;
	text-transform: uppercase;
	font-size: 20px;
	font-weight: normal;
	color: #2E2E2E;
}

#sidebar2 a {
	color: #857E6E;
}

#sidebar2 a:hover {
	text-decoration: underline;
}

#sidebar2 ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#links {
	line-height: 65%;
	border-bottom: 1px dashed #A5A08C;
	margin: 0px 0px;
	font-size: 14px;
	font-weight: normal;
}

#links a {
	border: none;
	color: #857E6E;
	text-decoration: none;
	line-height: 35px;
}

#links a:hover {
	text-decoration: underline;
}

#links li {
	margin: 0px 0px;
	padding: 0;
	list-style: none;
}

#links li ul {
	margin: 0px 0px;
	padding-bottom: 50px;
}

#links li li {

	border-bottom: 1px dashed #A5A08C;
	margin: 0px 0px;
	font-size: 14px;
	font-weight: normal;
}

#links li li span {
}

#links li li a {
	padding: 0px 0px 0px 0px;
}

/* Content */

#content {
	float: left;
	width: 710px;
	margin-left: 10px;
	margin-right: 10px;
}

#content .ads {
	margin-left: -9px;
	padding: 0px 0px 0px 0px;
	text-align: justify;
}

#contentTyping {
	float: left;
	width: 700px;
	margin-left: 0 auto;
}

/* Footer */

#footer {
	width: 1000px;
	margin: 0px auto;
	padding: 20px 0px;
	//background: #3D3630;
	background: #f0f0f0;
	color: #949085;
}

#footer p {
	margin: 0;
	line-height: normal;
	letter-spacing: 2px;
	text-align: center;
	text-decoration: none;
	text-align: center;
	text-transform: uppercase;
	font-family: 'Arvo', serif;
	font-weight: normal;
	font-size: 10px;
}

#footer a {
	color: #949085;
}