#phonic { display: none; }
#phonic2 { display: none; }
#shape { display: none; }
#keyboard { display: none; }
#alphabet { display: block; }


form#buttonform { margin: 0; padding: 0; border: 0;  line-height: normal; }
dt { color: #FF6600; }


/* #consonants { border: 2px dotted #005a9c; } */
#consonants td {  padding: 0;  white-space: nowrap; }
#zwspcol { padding-left: 10px; padding-right: 10px; width: 28px; }

#alphabet { padding-left: 5px; padding-right: 5px; }
#alphabet img { cursor: pointer; }

#phonic, #phonic2 { padding-left: 5px; padding-right: 5px; font-size: 15px; font-family: "Doulos SIL", sans-serif; }
#phonic span, #phonic2 span { cursor:pointer; }
.phonicspaces { padding-left: 10px; padding-right: 10px; width: 28px; }

.sound {font-size: 130%; font-family: "Doulos SIL", "Charis SIL", Gentium, serif; color: #FF3333; cursor: default; white-space: nowrap; margin-right: 7px; }
.sound span {font-size: 110%; font-family: "Doulos SIL", "Charis SIL", Gentium, serif; color: #FFF; cursor: default;  margin-right: 5px; background-color: #bbb; padding: 1px; padding-left:2px; background-image: url(images/topcorner.png); background-repeat:no-repeat; }
.vowels .sound { color: #FF3333; }
.vowels img {vertical-align: bottom; }
.ph { border:0; }

#kbd td { width: 475px; }


#fontgrid { font-size: 24px; display: none; }
#fontgrid table {height: 600px;}
#fontgrid td {height: 12%;width: 8%; cursor: pointer; }



#shape { padding-left: 5px; padding-right: 5px; margin: 20px; }
#shape td { vertical-align: top;  }
#shapekey { padding: 5px; border-bottom: 1px solid orange; text-align: center; margin-bottom: 10px; margin-top: 0px; margin-right: 3%; margin-left: 2%; }
#shapekey img { margin-right: 0px; border: 2px solid white; }


.key { 	height: 32px; width: 60px;	}