/* http://stackoverflow.com/questions/501671/superscript-in-css-only#501696
small, sub, span { font-size: .83em }
sub             { vertical-align: sub }
span             { vertical-align: super }
*/

* {
	line-height: 1.5;
	
font-family: Lucida Sans Unicode, Arial Unicode MS, Arial,sans-serif;
}

article {
	margin: 1em;
	
	
} 

/*  black on light green */
.completion {
		BACKGROUND-COLOR: #B0FFB0;
		color: #000000;
		vertical-align: super;
		font-size: .83em;
}

/* black on yellow */
.chord {
		BACKGROUND-COLOR: #FFFFA5;
		color: #000000;
		vertical-align: super;
		font-size: .83em;
}

/*user missed abbrevs yellow on blue  */
.info {
		BACKGROUND-COLOR: #0000FF;
		color: #FFFFA5;
		vertical-align: super;
		font-size: .83em;
}

/*   red on gray */
.typo {
		BACKGROUND-COLOR: #E0E0E0;
		color: #A00000;
		vertical-align: super;
		font-size: .83em;
}

/*   green on gray */
.complexTip {
		BACKGROUND-COLOR: grey;
		color: #00ff00;
		vertical-align: super;
		font-size: .83em;
}

/* black on white */
.predictive {
		BACKGROUND-COLOR: white;
		color: #000000;
		vertical-align: super;
		font-size: .83em;
}


.noreplace {
		/*0xE0E0E0, 0x000000)  ;    black on gray*/
}

.warn {
		/*  0x0000FF, 0xFFFFFF  blue background, white text */
}
/* warning to user */  
.alert, .alert-hidden {
		color: red;
		font-style: italic;
			text-align: center;
} 
.alert-hidden {
		display: none;
} 
code,pre {
		font-family: monospace;
		font-size:1.2em;
		color:darkblue;
} 

.exercise-hint {
	font-style: italic;
		font-size:1em;
} 

.exercise-hint p {
	padding:0em;
	margin:0em;
} 


a:hover  {
	text-decoration: underline;
}

.dldbtn, .dldbtn:visited {
	
		border: solid 1px #F36337;
	color:white; 
	background-color: #F36337;
	padding: 0.4em 0.8em;
	margin: 0em 0em;
	text-align: center;
	text-decoration: none;
	border-radius: 20%;
}

.dldbtn:hover {
	background-color: white;
	color:#F36337; 
}

a.dldbtn:hover {text-decoration: none;} 




.rh-input {
    float: right;
}
INPUT, TEXTAREA {
 /*   border: 3px solid red;*/
   margin:5px; text-align: left;
}
.input-cont {
	display: block;
	overflow: hidden;
	text-align: left;
/*	 border: 3px solid green;*/
	width:80em;
}
.input-cont-left{
	width:15em;
}
.input-prompt {
	font-style: italic;
}

/* BEGIN  HEADER */

.footer, .header {
	background-color:#F36337;
	/*shade #E2983B to #F04432;*/
	
	margin:0 0 0 0;
	text-align: center;
	padding: 0 0 0 0;
	
	height:65px;	
	width:100%;	
	line-height: 65px; 
}

.footer {
	margin: 1em 0 0 0;
}




.header span { 
	display: inline-block;
	vertical-align: middle;
	line-height: 65px;  
}

.headerSpan {
	float:right;
}

.hdrNav {
	text-align: right;
	font-size: 1em;  
	padding: 0.8em;	
	vertical-align: middle;
	line-height: 65px; 
}

.hdrBtn {
	border: solid 1px white;
	color: #F36337;
	background-color:white; 
	padding: 0.4em 0.8em;
	margin: 0em 0em;
	text-align: center;
	text-decoration: none;
	border-radius: 20%;
}

.hdrBtn:hover {
	background-color:#F36337; 
	color: white;
}

.hdrTitle {
	font-size: 3em;
	vertical-align: middle;
	line-height: 65px; 
}

#hdrIcon {
	left: 0%;
	float:left;
}
#hdrIcon {
	left: 0%;
	float:left;
}

.footer a, .header a {
	color: white;
	font-weight: bold;
	text-align: left;
	text-decoration: none;
}
a.hdrBtn {color: #F36337;} 
.footer a:hover , .header a:hover {
	text-decoration: underline;
}

a.hdrBtn:hover {text-decoration: none;} 



.extLink:after {content:"\21AA \FE0F "}

/*
.extLink:after {content:"\1f517 "}
.extLink:after {content:"↪"}}*/
/*.extLink:before {content:"\f08e"}  "} */

/* END HEADER */
.credits {
	font-style: italic;
	font-size: 0.8em;
	color: gray;
	padding: 0em;
	margin:0em;
	text-align: left;
}

/* BEGIN LAYOUT */

img {
	vertical-align: text-bottom;
  position: relative;
 left: 20%; 

}

.inlineIMG {
	left: 0%;
}
#touch-type-img {
	left: 10%;	
}

.imgRight, .imgRight IMG { 
	float: right;
	clear: left; 
	left: 0%;
	padding:1em;
}
	
.imgLeft {
	float: left;
	clear: right;
	left: 0%;
	padding:1em;
}

.section {
	display: inline-block;
	width:100%;
	padding-top:1em;
	padding-bottom:1em;
}

/* END LAYOUT */

.fullHdr {
	width:100%;
	text-align: center;
		font-weight: bold;
		font-size: large;
}


.inline {
 float: right;
 padding: 0 20px 20px 0;
}

table tr:nth-child(odd) {
	background:lightgray;
}

th {
	background:silver; 
	padding :0.5em; 	
}

td {
	padding :0.2em 1em 0.2em 1em; 
}

td:nth-child(odd), th:nth-child(odd) {
  border-right: solid 1px gray;
}

.plain-table td, .plain-table th {
	border: none;		
	background:white;
}

/*
.vert-table td:nth-child(even) {
	background:white;
}

.vert-table td:nth-child(odd) {
	background:lightgray;
}*/

.vert-table td {
	border-right: none;
}

.vert-table td:nth-child(1) {
	background:silver;
	font-weight: bold;
}

.vert-table tr:nth-child(even) {
	border-bottom: solid 1px gray;
}


table {
	border-collapse: collapse;
/*	margin: auto; */ 
}

/*
.vert-table tr:nth-child(even) {
   border-bottom: solid 1px gray;
}
*/
.vert-table  tr:first-child {
  border-top: solid 1px gray;
}

.special {
	color: red;	
}
.dupl {
	font-weight: bold;
}

.awkw, .plain-table .awkw {
	background:pink; 
}

h1 {
	font-size: 3em;
	text-align: center;
}

h2 {
	font-size: 3em;
	text-align: center;
}

h3 {
	font-size: 2em;
	text-align: center;
}

h4 {
	font-size: 2em;
	text-align: center;
}

 .leftHeading {
	font-size: 2em;
	text-align: left;
}




.gridContainer {
	display: -ms-grid;
  display: grid;  
   -ms-grid-columns: 50% 50%;
  grid-template-columns:50% 50%;	
  text-align: center;

}

.gridLeft{  -ms-grid-column: 1;-ms-grid-column-span:1;}
.gridLeft IMG {
	position:relative;
	left:0px;
}

.gridRight {
	position:relative;
	right:0px;
	-ms-grid-column: 2;
	-ms-grid-column-span:1;
}

.pink {
	border: solid 1px pink;

}

.gridRight IMG {
  text-align: right;
  left:0%;
 right:0%;
}


.gridRight .credits {
	text-align: center;
}

.gridLeft .credits {
	text-align: center;
}
.center{text-align: center;}

form{
	text-align: center;
	margin:auto;
	/*border: solid 1px gray;*/
}