body {
    font-family: "Lucida Sands Unicode","Arial Black";
    font-size: medium;
    font-style: normal;
    font-weight: 600;
    margin: auto;
    background-color: yellow;
    //background: url("Images/paperLikeBackground.jpg");
 }
p {
     font-size: medium; 
  }
a {
    vertical-align: top;
    font-size: medium;
}
h2 {
    text-align: center;
    font-style: italic;
  }
h3 {
    text-align: center;
    font-style: italic;
  }
button {
    font-style: normal;
    font-weight: bold;
    background-color: yellow;
}
td {
    text-align: center;
}
td.a {
    text-align: center;
}
th.a {
    text-align: center;
}
td.operationAndLanguageOptions {
    text-align: left;
}
td.results {
    text-align: left;
}
td.buttons {
    text-align: left;
}
table {
    margin: auto;
}

input {
    border-radius: 10px;
}
	
#submitId {
    background-color: #D6FFC2; /* light green */
    background: -webkit-linear-gradiant(top, #D6FFC2, #8FB28F ); /* shading */
    background: -moz-linear-gradiant(top, #D6FFC2, #8FB28F );
    background: -ms-linear-gradiant(top, #D6FFC2, #8FB28F );
    background: -o-linear-gradiant(top, #D6FFC2, #8FB28F );
    background: linear-gradiant(to top, #D6FFC2, #8FB28F );
    font-weight: bold;
    font-size: large;
    margin-top: 5px;
    margin-bottom: 5px;
}
#inputId {
    font-size: large;
    font-weight: bold;
    color: blue;
    height: 2em;
    border: solid thin blue;
    background-color: white;
    width: 150px;
    text-align: left;
    padding: 4px;
  }
div.inputCellId {
    text-align: center;
}
div.header {
    background-color: white;
}
a {
    vertical-align: bottom;
    font-size: medium;
    text-align: right;
}
td.radioBox {
    font-weight: bold;
    font-size: medium;
    text-align: left;
    margin-right: 20px;
}
td.inputArea {
    text-align: center;
}
div.instructions 
    {
    text-align: left;
    border: solid thin black;
    font-weight: normal;
    background: lightYellow;
    text-indent: 20pt;
    font-style: normal;
    margin: 20px;
    padding: 10px;
}
td.roman {
    text-align: center;
    background-color: white;
    color: blue;
}
td.foreign {
    text-align: center;
    background-color: yellow;
    color: black;
}
td.native {
    text-align: center;
    background-color: yellow;
    color: black;
}

.foreign {
    font-style: normal;
    font-weight: bold;
    font-size: large;
    color: black;
}
.roman {
    font-style: italic;
    font-size: smaller;
    font-weight: normal;
    color: blue;
}
.pronunciation i {
    font-weight: italic;
    font-size: larger;
    font-weight: normal;
    color: blue;
}
.matchesInput {
    font-style: normal;
    font-weight: bold;
    font-size: large;
    color: purple;
}
table.keyboard {
    border: solid thin black;
    border-collapse: collapse;
}
table.keyboard th {
    border: solid thin black;
    background-color: #D6FFC2; /* light green */
    cell-spacing: 2px;
    text-align: center;
}
table.keyboard td {
    border: solid thin black;
    background-color: white;
    cell-spacing: 2px;
    text-align: center;
}
table.results {
    border: solid thin black;
    border-collapse: collapse;
    cell-spacing: 2px;
    background-color: white;
    empty-cells: show;
}
table.results th {
    border: solid thin black;
    padding: 2px;
    background-color: yellow;
}
table.results td {
    border: solid thin black;
    padding: 2px;
    background-color: white;
    text-align: left;
}
table.results i .stress {
    font-weight: bold;
    /* font-size: larger; */
    }
table.results td.foreign {
    font-weight: bold;
    font-style: normal;
    color: black;
}
table.results td.roman {
    font-weight: light;
    font-style: italic;
    color: green;
}
table.results td.pronunciation {
    font-weight: normal;
    font-style: italic;
    color: blue;
}
table.results td.matches {
    font-weight: bold;
    text-decoration: underline;
    color: red;
}
.category {
    font-weight: bold;
    color: green;
}
table.results caption {
    font-style: normal;
    font-size: small;
    color: black;
    background-color: #D6FFC2;
    text-align: left;
    border: solid thin black;
}

caption {
    font-style: normal;
    font-size: small;
    color: black;
    background-color: #D6FFC2;
    text-align: left;
    border: solid thin black;
}
    
button.key {
    font-weight: bold;
    color: blue;
    width: 12px;
    border-radius: 4px;
    background-color: yellow;
    margin: 1px;
    padding-right: 10px;
}
.rotate {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);

  /* also accepts left, right, top, bottom coordinates; not required, but a good idea for styling */
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;

  /* Should be unset in IE9+ I think. */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
table.stats {
    border: solid thin black;
    border-collapse: collapse;
    cell-spacing: 2px;
    background-color: white;
}
table.stats th {
    border: solid thin black;
    padding: 2px;
    background-color: #D6FFC2; /* light green */
    text-align: left;
}
table.stats td {
    border: solid thin black;
    padding: 2px;
    background-color: white;
    text-align: left;
}
table.results caption {
    border: solid thin black;
    border-collapse: collapse;
    background-color: #D6FFC2; /* light green */
}

table.insidecaption {
    border: solid thin black;
    border-collapse: collapse;
    background-color: #D6FFC2; /* light green */
}
table.insidecaption th {
    border: solid thin black;
    padding: 2px;
    text-align: left;
    font-weight: bold;
    background-color: #D6FFC2; /* light green */
}
table.insidecaption td {
    border: 1;
    padding: 2px;
    text-align: left;
    background-color: white;
}
.alert {
    color: red;
}
.english {
    color: blue;
    font-style: italic;
    font-weight: bold;   
}
.foreign {
    color: black;
    font-style: normal;
    font-weight: bold;   
}
.native {
    color: black;
    font-style: normal;
    font-weight: bold;   
}
.matches {
    border-bottom: solid thick red;
}
.arrow {
    color: purple;
    font-weight: bold;
    font-size: large;
}