body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #444444; font-weight: bold; font-size: 1.0em; margin: 0px 0px 0px 0px; }

h2 { font-size: 1.9em; margin: 0 0 0 0; font-weight: bold; }
h3 { font-size: 14pt; margin: 20px 0 2px 0; font-weight: bold; }
h4 { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #444444; font-weight: bold; font-size: 10pt; margin: 0px 0px 0px 0px; }

p { margin-top: 22px; font-size: 10pt; font-weight: normal; font-family: "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif; }

ul { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; }
ul li { list-style-type: none; line-height: 30px; }
ul li a { cursor: pointer; color: #F3FfE9; text-decoration: none; }
ul li a:hover { text-decoration: underline; }
ul li ul { margin: 0px 0px 10px 16px; padding: 0px 0px 0px 0px; }
ul li ul li { list-style-type: none; line-height: 18px; font-size: 0.9em; margin-bottom: 6px; }
ul li ul li a { cursor: pointer; color: #F3FfE9; text-decoration: none; }
ul li ul li a:hover { text-decoration: underline; }
ul li ul li ul { margin: 0px 0px 0px 16px; padding: 0px 0px 0px 0px; }
ul li ul li ul li { list-style-type: none; line-height: 18px; font-size: 0.8em; }
ul li ul li ul li a { cursor: pointer; color: #F3FfE9; text-decoration: none; }
ul li ul li ul li a:hover { text-decoration: underline; }

.bpList ul { margin: 0px 0px 0px 0px; padding: 6px 0px 0px 30px; font-weight: normal; font-family: "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif; }
.bpList ul li { list-style-type: disc; line-height: 20px; }

.leftSidebar { position: fixed; width: 200px; height: 100%; background-color: #96b97d; }

.navigationMenu { position: absolute; width: 200px; color: #F3FfE9 }

.clearfix { clear: both; width: 100%; height: 0px; }

.siteThemeColour { background-color: #96b97d; color: #F3FfE9; }

.redText { color: #F04040; }

/*.orangeText { color: #F0A340; }*/
.orangeText { color: #F08D40; }

.greenText { color: #76995d; }

.whiteText { color: #D3DFC9; }

.blockText { font-size: 14pt; }

.hoverHighlight:hover { background-color: #badaa3; cursor: pointer; }

.rowHighlight { background-color: #badaa3; }

.reportProblemLink { font-size: 8pt; font-style: italic; }

.clickableBox { cursor: pointer; }
.clickableBox:hover { background-color: #badaa3; }

.smallFont { font-size: 10pt; font-weight: normal; font-family: "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif; }

.errorMessage { background-color: #D07070; color: #F8F8F8; line-height: 32px; padding-left: 10px; width: 500px; }

.imageLink { border: 0 none; text-decoration: none; }

input[type="text"], select {
    height: 24px;
    border: 1px solid #777777;
    padding-left: 3px;
}

input[type="button"], input[type="submit"] {
    height: 28px;
    border: 1px solid #777777;
}

input[type="button"], input[type="submit"], select {
    cursor: pointer;
}

#stenoKeyboard{
	/* Box */
	width: 280px;
	height: 160px;
	margin: 0;

    /* Colors */
	background-color: #FFFFFF;
}
    
.stenoNumberBar {
    /* Box */
	width: 100%;
	height: 14px;
	padding: 0;
	border: 0;
	margin: 0 0 6px 0;
}

.stenoUpperBank {
    /* Box */
	width: 100%;
	height: 25%;
	padding: 0;
	border: 0;
	margin: 0 0 2px 0;
}

.stenoLowerBank {
    /* Box */
	width: 100%;
	height: 25%;
	padding: 0;
	border: 0;
	margin: 0 0 6px 0;
}

.stenoVowelKeys {
    /* Box */
	width: 100%;
	height: 25%;
	padding: 0;
	border: 0;
	margin: 10px 0 0 0;
}

#stenoKeyNumberBar {
	/* Box */
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	margin: 0;

	/* Styling */
	-webkit-border-radius: 0.9375% / 12.5%;
	-moz-border-radius: 0.9375% / 12.5%;
	border-radius: 0.9375% / 12.5%;
}

.stenoKey {
	/* Positioning */
	float: left;

	/* Box */
	width: 7.5%;
	height: 100%;
	padding: 0;
	border: 0;
	margin: 0 1.25% 0 1.25%;

	/* Color */	
    color: #ffffff;
	background-color: #000000;

	/* Text */
	font-family: 'Verdana';
	font-size: 10pt;
	text-align: center;
	line-height: 41px;
}

.highlightedStenoKey { background-color: #F04040; }
.highlightedStenoKeyPressed { background-color: #76995d; }

.square {
	/* Styling */
	-webkit-border-radius: 12.5% / 7.5%;
	-moz-border-radius: 12.5% / 7.5%;
	border-radius: 12.5% / 7.5%;
}

.rounded {
	/* Styling */
	-webkit-border-radius: 12.5% / 7.5%;
	-webkit-border-bottom-right-radius: 50% 30%;
	-webkit-border-bottom-left-radius: 50% 30%;
	-moz-border-radius: 12.5% / 7.5%;
	-moz-border-radius-bottomright: 50% 30%;
	-moz-border-radius-bottomleft: 50% 30%;
	border-radius: 12.5% / 7.5%;
	border-bottom-right-radius: 50% 30%;
	border-bottom-left-radius: 50% 30%;
}
    
#stenoKeyS-1, #stenoKeyS-2 {
	/* Box */
	margin-left: 0;
}

#stenoKeyH-, #stenoKeyR- {
	/* Box */
	/*margin-right: 1.875%;*/
}

#stenoKeyAsterisk1, #stenoKeyAsterisk2 {
	/* Box */
	margin-left: 1.875%;
	margin-right: 1.875%;
}

#stenoKey-F, #stenoKey-R {
	/* Box */
	/*margin-left: 1.875%;*/
}

#stenoKey-D, #stenoKey-Z {
	/* Box */
	margin-right: 0;
}

#stenoKeyA- {
	/* Box */
	margin-left: 27%;
	margin-right: 0.3125%;	
}

#stenoKeyO- {
	/* Box */
	margin-left: 0.3125%;
	margin-right: 1.5625%;	
}

#stenoKey-E {
	/* Box */
	margin-left: 1.5625%;
	margin-right: 0.3125%;	
}

#stenoKey-U {
	/* Box */
	margin-left: 0.3125%;
}