.horizontalLetterButtons {
	-moz-box-shadow: 0px 0px 0px 2px #83bef2;
	-webkit-box-shadow: 0px 0px 0px 2px #83bef2;
	box-shadow: 0px 0px 0px 2px #83bef2; /* !important*/
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #73c8f5), color-stop(1, #52bffa));
	background:-moz-linear-gradient(top, #73c8f5 5%, #52bffa 100%);
	background:-webkit-linear-gradient(top, #73c8f5 5%, #52bffa 100%);
	background:-o-linear-gradient(top, #73c8f5 5%, #52bffa 100%);
	background:-ms-linear-gradient(top, #73c8f5 5%, #52bffa 100%);
	background:linear-gradient(to bottom, #73c8f5 5%, #52bffa 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#73c8f5', endColorstr='#52bffa',GradientType=0);
	background-color:#73c8f5;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	border:1px solid #73c8f5; /* !important 74b1f2  */
	display:inline-block;
	cursor:pointer;
	color:#00000f;
	font-family:Georgia;
	font-size:30px;
	padding:12px 0px;
	margin:auto;
	text-decoration:none;
	text-shadow:none;
	width:90%;
	max-width:50px;
	min-width:30px;
}


.horizontalLetterButtons:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #52bffa), color-stop(1, #73c8f5));
	background:-moz-linear-gradient(top, #52bffa 5%, #73c8f5 100%);
	background:-webkit-linear-gradient(top, #52bffa 5%, #73c8f5 100%);
	background:-o-linear-gradient(top, #52bffa 5%, #73c8f5 100%);
	background:-ms-linear-gradient(top, #52bffa 5%, #73c8f5 100%);
	background:linear-gradient(to bottom, #52bffa 5%, #73c8f5 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#52bffa', endColorstr='#73c8f5',GradientType=0);
	background-color:#52bffa;	
}
.horizontalLetterButtons:active {
	
	box-shadow: none !important;
	position:relative;
	top:1px;
}


.horizontalLetterButtonsSimulateHover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #52bffa), color-stop(1, #73c8f5));
	background:-moz-linear-gradient(top, #52bffa 5%, #73c8f5 100%);
	background:-webkit-linear-gradient(top, #52bffa 5%, #73c8f5 100%);
	background:-o-linear-gradient(top, #52bffa 5%, #73c8f5 100%);
	background:-ms-linear-gradient(top, #52bffa 5%, #73c8f5 100%);
	background:linear-gradient(to bottom, #52bffa 5%, #73c8f5 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#52bffa', endColorstr='#73c8f5',GradientType=0);
	background-color:#52bffa;
	position:relative;
	top:1px;
	box-shadow: 0px 0px 0px 2px #83bef2 !important;
}




.horizontalSharpButtons {
	-moz-box-shadow: 0px 0px 0px 2px #f74a4a;
	-webkit-box-shadow: 0px 0px 0px 2px #f74a4a;
	box-shadow: 0px 0px 0px 2px #f74a4a !important;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #fa2828), color-stop(1, #e63e3e));
	background:-moz-linear-gradient(top, #fa2828 5%, #e63e3e 100%);
	background:-webkit-linear-gradient(top, #fa2828 5%, #e63e3e 100%);
	background:-o-linear-gradient(top, #fa2828 5%, #e63e3e 100%);
	background:-ms-linear-gradient(top, #fa2828 5%, #e63e3e 100%);
	background:linear-gradient(to bottom, #fa2828 5%, #e63e3e 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fa2828', endColorstr='#e63e3e',GradientType=0);
	background-color:#fa2828;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	border:1px solid #fa2828 !important; // e63e3e
	display:inline-block;
	cursor:pointer;
	color:#000000;
	font-family:Ariel;
	font-size:19px;
	padding:1px 3px 3px 3px;
	text-decoration:none;
	width:98%;
  max-width: 90px;
  min-width: 65px;
	max-height: 50px;
	min-height: 40px;
	text-align:center;
	margin: auto;
}



.horizontalSharpButtons:hover, .vertSDToolSharpButton:hover{
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e63e3e), color-stop(1, #fa2828));
	background:-moz-linear-gradient(top, #e63e3e 5%, #fa2828 100%);
	background:-webkit-linear-gradient(top, #e63e3e 5%, #fa2828 100%);
	background:-o-linear-gradient(top, #e63e3e 5%, #fa2828 100%);
	background:-ms-linear-gradient(top, #e63e3e 5%, #fa2828 100%);
	background:linear-gradient(to bottom, #e63e3e 5%, #fa2828 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e63e3e', endColorstr='#fa2828',GradientType=0);
	background-color:#e63e3e;
}
.horizontalSharpButtons:active, .vertSDToolSharpButton:active {
	
	box-shadow: none !important;
	position:relative;
	top:1px;
}  

.horizontalSharpButtonsSimulateHover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e63e3e), color-stop(1, #fa2828));
	background:-moz-linear-gradient(top, #e63e3e 5%, #fa2828 100%);
	background:-webkit-linear-gradient(top, #e63e3e 5%, #fa2828 100%);
	background:-o-linear-gradient(top, #e63e3e 5%, #fa2828 100%);
	background:-ms-linear-gradient(top, #e63e3e 5%, #fa2828 100%);
	background:linear-gradient(to bottom, #e63e3e 5%, #fa2828 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e63e3e', endColorstr='#fa2828',GradientType=0);
	background-color:#e63e3e;
	position:relative;
	top:1px;	
	box-shadow: 0px 0px 0px 2px #f74a4a !important;
} 


 
/*

.horizontalFlatText{
	color:#000000;
	font-family:gonville-1111;
	font-size:60px;
	background-color:transparent;

}
.horizontalSharpText{
	color:#000000;
	font-family:gonville-1111;
	font-size:58px;

}
// not doing it this way anymore  
//using svg instead


*/ 
.horizontalFlatButtons {
	-moz-box-shadow: 0px 0px 0px 2px #a549f5;
	-webkit-box-shadow: 0px 0px 0px 2px #a549f5;
	box-shadow: 0px 0px 0px 2px #a549f5 !important;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #8e28fa), color-stop(1, #a33ee6));
	background:-moz-linear-gradient(top, #8e28fa 5%, #a33ee6 100%);
	background:-webkit-linear-gradient(top, #8e28fa 5%, #a33ee6 100%);
	background:-o-linear-gradient(top, #8e28fa 5%, #a33ee6 100%);
	background:-ms-linear-gradient(top, #8e28fa 5%, #a33ee6 100%);
	background:linear-gradient(to bottom, #8e28fa 5%, #a33ee6 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#8e28fa', endColorstr='#a33ee6',GradientType=0);
	background-color:#8e28fa;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	border:1px solid #8e28fa !important; // b13ee6
	display:inline-block;
	cursor:pointer;
	color:#00000f;
	font-family:Arial;
	font-size:19px;
	padding:1px 2px 3px 5px;
	text-decoration:none;
	width:98%;
	max-width:90px;
	min-width:65px;
	text-align:center;
	max-height: 50px;
	margin: auto;
}

.accVerticalBtnAdjust{
	width:68%;
	max-width:80px;
	min-width:40px;
	z-index:1000;
}

.lineSpaceVerticalBtnAdjust{
	width:90%;
	max-width:120px;
	min-width:80px;	
	font-size:20px;
	background: linear-gradient(to bottom, #78c5ed 5%, #52bffa 100%);
	
}
	

.horizontalFlatButtons img{
	width: 50px;
  height: 45px;
  position:relative;
  display: block; 
  margin: auto;  
}
.horizontalSharpButtons img{
	width: 50px;
  height: 45px;
  position:relative;
  display: block; 
  margin: auto;  
}

.horizontalFlatButtons:hover, .vertSDToolFlatButtons:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #a33ee6), color-stop(1, #8e28fa));
	background:-moz-linear-gradient(top, #a33ee6 5%, #8e28fa 100%);
	background:-webkit-linear-gradient(top, #a33ee6 5%, #8e28fa 100%);
	background:-o-linear-gradient(top, #a33ee6 5%, #8e28fa 100%);
	background:-ms-linear-gradient(top, #a33ee6 5%, #8e28fa 100%);
	background:linear-gradient(to bottom, #a33ee6 5%, #8e28fa 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#a33ee6', endColorstr='#8e28fa',GradientType=0);
	background-color:#a33ee6;
}
.horizontalFlatButtons:active, .vertSDToolFlatButtons:active {	
	box-shadow: none !important;
	position:relative;
	top:1px;
}


.horizontalFlatButtonsSimulateHover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #a33ee6), color-stop(1, #8e28fa));
	background:-moz-linear-gradient(top, #a33ee6 5%, #8e28fa 100%);
	background:-webkit-linear-gradient(top, #a33ee6 5%, #8e28fa 100%);
	background:-o-linear-gradient(top, #a33ee6 5%, #8e28fa 100%);
	background:-ms-linear-gradient(top, #a33ee6 5%, #8e28fa 100%);
	background:linear-gradient(to bottom, #a33ee6 5%, #8e28fa 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#a33ee6', endColorstr='#8e28fa',GradientType=0);
	background-color:#a33ee6;
	position:relative;
	top:1px;
	box-shadow: 0px 0px 0px 2px #a549f5 !important;
}

.horizontalTestButtons {
	-moz-box-shadow: 0px 0px 0px 2px #a549f5;
	-webkit-box-shadow: 0px 0px 0px 2px #a549f5;
	box-shadow: 0px 0px 0px 2px #a549f5;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #8e28fa), color-stop(1, #a33ee6));
	background:-moz-linear-gradient(top, #8e28fa 5%, #a33ee6 100%);
	background:-webkit-linear-gradient(top, #8e28fa 5%, #a33ee6 100%);
	background:-o-linear-gradient(top, #8e28fa 5%, #a33ee6 100%);
	background:-ms-linear-gradient(top, #8e28fa 5%, #a33ee6 100%);
	background:linear-gradient(to bottom, #8e28fa 5%, #a33ee6 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#8e28fa', endColorstr='#a33ee6',GradientType=0);
	background-color:#8e28fa;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	border:1px solid #b13ee6;
	display:inline-block;
	cursor:pointer;
	color:#00000f;
	font-family:gonville-1111;
	font-size:60px;
	padding:22px 38px;
	text-decoration:none;
	text-shadow:0px 1px 0px #9b67f5;
}
.horizontalTestButtons:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #a33ee6), color-stop(1, #8e28fa));
	background:-moz-linear-gradient(top, #a33ee6 5%, #8e28fa 100%);
	background:-webkit-linear-gradient(top, #a33ee6 5%, #8e28fa 100%);
	background:-o-linear-gradient(top, #a33ee6 5%, #8e28fa 100%);
	background:-ms-linear-gradient(top, #a33ee6 5%, #8e28fa 100%);
	background:linear-gradient(to bottom, #a33ee6 5%, #8e28fa 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#a33ee6', endColorstr='#8e28fa',GradientType=0);
	background-color:#a33ee6;
}
.horizontalTestButtons:active {
	position:relative;
	top:1px;
}





.vertSDToolDiatonicBtn {
	-moz-box-shadow: 0px 0px 0px 2px #83bef2;
	-webkit-box-shadow: 0px 0px 0px 2px #83bef2;
	box-shadow: 0px 0px 0px 2px #83bef2 !important;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #73c8f5), color-stop(1, #52bffa));
	background:-moz-linear-gradient(top, #73c8f5 5%, #52bffa 100%);
	background:-webkit-linear-gradient(top, #73c8f5 5%, #52bffa 100%);
	background:-o-linear-gradient(top, #73c8f5 5%, #52bffa 100%);
	background:-ms-linear-gradient(top, #73c8f5 5%, #52bffa 100%);
	background:linear-gradient(to bottom, #73c8f5 5%, #52bffa 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#73c8f5', endColorstr='#52bffa',GradientType=0);
	background-color:#73c8f5;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	border:1px solid #73c8f5 !important; // 74b1f2
	display:inline-block;
	cursor:pointer;
	color:#00000f;
	font-family:Georgia;
	align:center;
	font-size:30px;
	padding:6px 0px;
	margin:auto;
	text-decoration:none;
	text-shadow:none;
	width:90%;
	max-width:50px;
	min-width:30px;
}


.vertSDToolDiatonicBtn:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #52bffa), color-stop(1, #73c8f5));
	background:-moz-linear-gradient(top, #52bffa 5%, #73c8f5 100%);
	background:-webkit-linear-gradient(top, #52bffa 5%, #73c8f5 100%);
	background:-o-linear-gradient(top, #52bffa 5%, #73c8f5 100%);
	background:-ms-linear-gradient(top, #52bffa 5%, #73c8f5 100%);
	background:linear-gradient(to bottom, #52bffa 5%, #73c8f5 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#52bffa', endColorstr='#73c8f5',GradientType=0);
	background-color:#52bffa;	
}
.vertSDToolDiatonicBtn:active {
	
	box-shadow: none !important;
	position:relative;
	top:1px;
}

.elemInVertSDTool{
	position:absolute;
	text-align:center;
}


.vertSDToolFlatButtons {
	-moz-box-shadow: 0px 0px 0px 2px #a549f5;
	-webkit-box-shadow: 0px 0px 0px 2px #a549f5;
	box-shadow: 0px 0px 0px 2px #a549f5 !important;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #8e28fa), color-stop(1, #a33ee6));
	background:-moz-linear-gradient(top, #8e28fa 5%, #a33ee6 100%);
	background:-webkit-linear-gradient(top, #8e28fa 5%, #a33ee6 100%);
	background:-o-linear-gradient(top, #8e28fa 5%, #a33ee6 100%);
	background:-ms-linear-gradient(top, #8e28fa 5%, #a33ee6 100%);
	background:linear-gradient(to bottom, #8e28fa 5%, #a33ee6 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#8e28fa', endColorstr='#a33ee6',GradientType=0);
	background-color:#8e28fa;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	border:1px solid #8e28fa !important; // b13ee6
	display:inline-block;
	cursor:pointer;
	color:#00000f;
	font-family:PT;
	font-size:20px;
	// padding:1px 2px 3px 5px;
	text-decoration:none;
	width:90%;
	max-width:45px;
	min-width:30px;
	text-align:center;
	max-height: 50px;
	height:80%;
	padding:5% 2px;
	margin: auto;
	white-space:nowrap;
}

/*
.vertSDToolFlatButtons:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #a33ee6), color-stop(1, #8e28fa));
	background:-moz-linear-gradient(top, #a33ee6 5%, #8e28fa 100%);
	background:-webkit-linear-gradient(top, #a33ee6 5%, #8e28fa 100%);
	background:-o-linear-gradient(top, #a33ee6 5%, #8e28fa 100%);
	background:-ms-linear-gradient(top, #a33ee6 5%, #8e28fa 100%);
	background:linear-gradient(to bottom, #a33ee6 5%, #8e28fa 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#a33ee6', endColorstr='#8e28fa',GradientType=0);
	background-color:#a33ee6;
}
.vertSDToolFlatButtons:active {	
	box-shadow: none !important;
	position:relative;
	top:1px;
}


both above and below are just combined with horizontal sharp and flat above



*/
.vertSDToolSharpButton {
	-moz-box-shadow: 0px 0px 0px 2px #f74a4a;
	-webkit-box-shadow: 0px 0px 0px 2px #f74a4a;
	box-shadow: 0px 0px 0px 2px #f74a4a !important;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #fa2828), color-stop(1, #e63e3e));
	background:-moz-linear-gradient(top, #fa2828 5%, #e63e3e 100%);
	background:-webkit-linear-gradient(top, #fa2828 5%, #e63e3e 100%);
	background:-o-linear-gradient(top, #fa2828 5%, #e63e3e 100%);
	background:-ms-linear-gradient(top, #fa2828 5%, #e63e3e 100%);
	background:linear-gradient(to bottom, #fa2828 5%, #e63e3e 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fa2828', endColorstr='#e63e3e',GradientType=0);
	background-color:#fa2828;
	border:1px solid #fa2828 !important; 
	color:#000000;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	display:inline-block;
	cursor:pointer;
	font-family:PT;
	font-size:20px;
	// padding:1px 2px 3px 5px;
	text-decoration:none;
	width:90%;
	max-width:45px;
	min-width:30px;
	text-align:center;
	max-height: 50px;
	height:80%;
	padding:5% 2px;
	margin: auto;
	white-space:nowrap;
}














button.cleanBtn {
    display: inline;
    font-size: 16px;
    font-family: Georgia, Times, serif;
    line-height: 110%;
    font-weight: 400;
    color: blue;
    background-color: rgba(0, 0, 0, 0);
    border: 0 none;
    border-radius: 3px;
    cursor: pointer;
}


button.cleanBtn:hover {
    cursor: pointer;    
}
    
button.cleanBtn:active{
    cursor: pointer;    
    box-shadow: 0 1px 0 #666, 0 1px 0 #444, 0 -1px -1px rgba(0,0,0,0.4);
 
}

.nextProblemBtn {
	-moz-box-shadow: 0px 0px 0px 2px #268b0cb0;
	-webkit-box-shadow: 0px 0px 0px 2px #268b0cb0;
	box-shadow: 0px 0px 0px 2px #268b0cb0;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #44c767), color-stop(1, #5cbf2a));
	background:-moz-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
	background:-webkit-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
	background:-o-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
	background:-ms-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
	background:linear-gradient(to bottom, #44c767 5%, #5cbf2a 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#44c767', endColorstr='#5cbf2a',GradientType=0);
	background-color:#44c767;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	border:1px solid #44c767 !important; // 18ab29
	display:inline-block;
	cursor:pointer;
	color:#000000;
	font-family:Georgia;
	font-size:16px;
	padding:8px 0px;
	margin:auto;
	text-decoration:none;
	text-shadow:none;
	width:100%;
	max-width:70px;
	min-width:20px;
	position:relative;
	z-index:99;
}
.nextProblemBtn:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #5cbf2a), color-stop(1, #44c767));
	background:-moz-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
	background:-webkit-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
	background:-o-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
	background:-ms-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
	background:linear-gradient(to bottom, #5cbf2a 5%, #44c767 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5cbf2a', endColorstr='#44c767',GradientType=0);
	background-color:#5cbf2a;
}

.nextProblemBtnSimulateHover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #5cbf2a), color-stop(1, #44c767));
	background:-moz-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
	background:-webkit-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
	background:-o-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
	background:-ms-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
	background:linear-gradient(to bottom, #5cbf2a 5%, #44c767 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5cbf2a', endColorstr='#44c767',GradientType=0);
	background-color:#5cbf2a;
	box-shadow: 0px 0px 0px 2px #3dc21b !important;
}


.nextProblemBtn:active {
	
	box-shadow: none !important;
	position:relative;
	top:1px;
}

.helpBtnInDiv, .helpBtnInMenu{
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff !important;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #f6f6f6));
	background:-moz-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
	background:-webkit-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
	background:-o-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
	background:-ms-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
	background:linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0);
	background-color:#ffffff;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #dcdcdc;
	display:inline-block;
	cursor:pointer;
	color:#0b6000;
	font-family:Arial;
	font-size:12px;
	padding:3px 3px;
	text-decoration:none;
	text-shadow:none;
	width:98%;
	max-width:80px;
	min-width:40px;
	min-height: 34px;
  overflow: hidden;
  text-overflow: clip;  
  white-space: normal; // allows text wrapping for some reason
	position: relative;
}
.helpBtnInDiv:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f6f6f6), color-stop(1, #ffffff));
	background:-moz-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
	background:-webkit-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
	background:-o-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
	background:-ms-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
	background:linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f6f6', endColorstr='#ffffff',GradientType=0);
	background-color:#f6f6f6;
}
.helpBtnInDiv:active {
}


.helpBtnInBanner {
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff !important;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff !important;
	box-shadow:inset 0px 1px 0px 0px #ffffff !important;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #f6f6f6));
	background:-moz-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
	background:-webkit-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
	background:-o-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
	background:-ms-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
	background:linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0);
	background-color:#ededed;
  -webkit-align-self: center;
  align-self: center;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #dcdcdc !important;
	display:inline-block;
	cursor:pointer;
	color:black;
	font-family:Arial;
	font-size:10px;
	padding:1px 3px 2px 3px;
	margin: 2px;
	text-decoration:none;
	text-shadow:none;
	width:32px !important;
	height:16px;
  overflow: hidden;
  text-overflow: clip;  
  white-space: normal; // allows text wrapping for some reason

}
.helpBtnInBanner:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f6f6f6), color-stop(1, #ffffff));
	background:-moz-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
	background:-webkit-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
	background:-o-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
	background:-ms-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
	background:linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f6f6', endColorstr='#ffffff',GradientType=0);
	background-color:#f6f6f6;
}
.helpBtnInBanner:active {
	position:relative;
}



.helpBtnInBannerDropDown {
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff !important;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff !important;
	box-shadow:inset 0px 1px 0px 0px #ffffff !important;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #f6f6f6));
	background:-moz-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
	background:-webkit-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
	background:-o-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
	background:-ms-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
	background:linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0);
	background-color:#ededed;
	opacity:1;
  -webkit-align-self: center;
  align-self: center;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #dcdcdc !important;
	display:inline-block;
	cursor:pointer;
	color:black;
	font-family:Arial;
	font-size:10px;
	padding:1px 3px 2px 3px;
	margin: 2px auto !important;
	text-decoration:none;
	text-shadow:none;
	//max-width:120px;
	max-height:32px;
  overflow: hidden;
  text-overflow: clip;  
  white-space: normal; // allows text wrapping for some reason

}
.helpBtnInBannerDropDown:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f6f6f6), color-stop(1, #ffffff));
	background:-moz-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
	background:-webkit-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
	background:-o-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
	background:-ms-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
	background:linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f6f6', endColorstr='#ffffff',GradientType=0);
	background-color:#f6f6f6;
}
.helpBtnInBannerDropDown:active {
	//position:relative;
	top:1px;
}


.helpBtnInMenu{
	min-width:20px;
	max-width:200px;
}

.helpBtnInMenu2{
}



.flex-containerDefault {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    padding: 0px;
    max-width: 450px;
    min-width: 300px;
    width: 94%;
    margin: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: transparent; // lightgrey;
}
	
.flex-containerDiatonicButtons {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    padding: 0px;
    max-width: 450px;
    min-width: 300px;
    width: 94%;
    height: 70px;
    margin: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: transparent; // lightgrey;
}

.flex-itemDiatonicButtons {
    background-color: transparent;
    width: 12%;
    min-width: 20px;
    max-width: 85px;
    height: 100px;
    margin: 0px;
}

.flex-containerChromaticButtons {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    padding: 0px;
    max-width: 450px;
    min-width: 300px;
    width: 94%;
    height: 50px;
    margin: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: transparent; // lightgrey;
}

.flex-itemChromaticButtons {
    background-color: transparent; // #659cef;
    width: 18%;
    min-width: 20px;
    max-width: 85px;
    height: 50px;
    margin: 0px;
}

.flex-containerExerciseSub1{
	  display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    
  	flex-direction: column;
    padding: 0px;
    // max-width: 250px;
    // min-width: 150px;
    width: 80%;
    height: 80vh;
    max-height: 400px;
    margin: 0px;
    background-color: transparent; // lightgrey;
	
}

.flex-containerHelpAndNextVertical{
		display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    
  	flex-direction: row;
    padding: 0px;
    // max-width: 250px;
    // min-width: 150px;
    width: 90%;
    // height: 80vh;
     max-height: 400px;
    margin: 0% 0% 10% 8%;
    background-color: transparent;
}



.flex-containerDiatonicVeritcalButtons {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    
  	flex-direction: column;
    padding: 0px;
    /* max-width: 250px;
     min-width: 150px;*/
    width: 19%;
    height: 68vh;
    max-height: 500px;
    margin: 10px 0 0 0;
    background-color: transparent; // lightgrey;
    
    z-index: 1000;
}


.flex-containerSDVeritcalButtons {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-around;
    justify-content: space-around;   
  	flex-direction: column;
    padding: 0px;
    min-width: 30px;
    width: 100%;
    height: 100%;
    max-height: 500px;
    margin: 10px 0 0 0;
    background-color: transparent;   
    z-index: 1000;
}


.flex-ContainerQuizAnswers {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    
  	flex-direction: column;
    padding: 0px;
    // max-width: 250px;
    // min-width: 150px;
    width: 99%;
    height: 40vh;
    max-height: 400px;
    margin: 15px 10px;
    background-color: transparent; // lightgrey;
    
    z-index: 1000;
}
.verticalLettersAdjust{
	max-height: 60px;
	min-height: 35px;
	line-height: 45%;
	height:90%;
	padding: 3px 1px 7px 1px;
	font-family: PT;
	font-size: 20px;
}

.verticalQuizLettersAdjust{ // not used
	line-height: 45%;
	height:90%;
	max-height: 55px;
	min-height: 30px;
	padding: 2px;
}

.invisible{
	visibility:hidden;
}

.diatonicLetterButtonsGrayed {
	-moz-box-shadow: 0px 0px 0px 2px #EFEFEF;
	-webkit-box-shadow: 0px 0px 0px 2px #EFEFEF;
	box-shadow: 0px 0px 0px 2px #EFEFEF; /* !important*/
	/*background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #73c8f5), color-stop(1, #52bffa));
	background:-moz-linear-gradient(top, #73c8f5 5%, #52bffa 100%);
	background:-webkit-linear-gradient(top, #73c8f5 5%, #52bffa 100%);
	background:-o-linear-gradient(top, #73c8f5 5%, #52bffa 100%);
	background:-ms-linear-gradient(top, #73c8f5 5%, #52bffa 100%);
	background:linear-gradient(to bottom, #73c8f5 5%, #52bffa 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#73c8f5', endColorstr='#52bffa',GradientType=0);
	*/
	background-color:#EFEFEF;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	border:1px solid #EEEEEE; /* !important 74b1f2  */
	display:inline-block;
	cursor:pointer;
	color:#00000f;
	font-family:Georgia;
	font-size:20px;
	padding:12px 0px;
	margin:auto;
	text-decoration:none;
	text-shadow:none;
	width:90%;
	max-width:50px;
	min-width:30px;
}

.verticalLettersAdjustGray{
	max-height: 60px;
	min-height: 35px;
	line-height: 45%;
	height:90%;
	padding: 3px 1px 7px 1px;
	font-family: PT;
	font-size: 20px;
	color: #AFAFAF;
}




.flex-itemDiatonicVerticalButtons {
    background-color: transparent;
    width: 98%;
    min-width: 40px;
    max-width: 135px;
    height: 13%;
    min-height: 35px;
    max-height: 55px;
    margin: 4% 0 4% 0;
    z-index: 1001;
}
.flex-itemHalfDiatonicVerticalButtons {
		visibility:hidden;
    background-color: transparent;
    width: 98%;
    min-width: 40px;
    max-width: 135px;
    height: 6.5%;
    min-height: 17.5px;
    max-height: 27.5px;
    margin: 2% 0 2% 0;
}

.adjustFloorDivForChromaticVerticalBtnColumns{
	height:0px;
	margin:0px;
}




.flex-itemQuizButtons {
    background-color: transparent;
    width: 98%;
    min-width: 40px;
    max-width: 450px;
    height: 15%;
    min-height: 35px;
    max-height: 100px;
    margin: 1.5% .5%;
}
.flex-containerExerciseArea {  
	/*style="position:relative; height:170px; width:240px;border-color:transparent;border-style:solid;"
   */
   	position:relative;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    padding: 0px;
    max-width: 500px;
    min-width: 330px;
    width: 96%;
    min-height: 200px;
    margin: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: transparent; //   lightgrey; // 

}

.flex-itemExerciseArea {
/*	style="width:240px;height:200px; position:absolute; top:0px; left:0px;background-color:transparent;border-style:none; z-index:10"
  background-color:   #659cef; // transparent; 
*/    //height: 70px;

}
.itemHelpAreaforVertLayout{
	background-color: transparent; //  red;// 
	// min-width: 10px;
  // max-width: 100px;
 	width: 100%;
 	min-height: 50px;
 	margin: 0px;
 	/*margin: auto;*/
  -webkit-align-self: center;
  align-self: center;
  // border:1px solid red;
}
.itemHelpArea{
	background-color: transparent; //  red;// 
	min-width: 10px;
  max-width: 100px;
 	width: 16%;
 	min-height: 50px;
 	margin: 0px;
 	/*margin: auto;*/
  -webkit-align-self: center;
  align-self: center;
  // border:1px solid red;
}

.hideWithJS{
	display: inline-block;
}

.innerAbsolute{
	position:absolute;
	z-index:99;
}

.itemExercise{
	/*align-self: center;*/
	min-width: 200px;
  max-width: 420px;
  min-height:160px;
  background-color:  transparent; // #659cef; // 
  width: 70%;
  margin: 0px;
  -webkit-align-self: center;
  align-self: center;  
}
.sdExerciseArea{
	/*align-self: center;*/
	min-width: 200px;
  max-width: 320px;
  min-height:140px;
  background-color:  transparent; // #659cef; // 
  width: 90%;
  margin: 0px auto;
  position:relative; 
}



.itemNextProb{
	background-color: transparent; //  green;// transparent; //red;
 	/*-webkit-flex: 1;
 	flex: 1;*/
	min-width: 40px;
  max-width: 160px;
 	width: 14%;
 	min-height: 50px;
 	margin: 0px;
 	/*margin: auto;*/
  -webkit-align-self: center;
  align-self: center;
 	// border: 1px solid red;
 	
  
}



#exerciseAndCorrectionsDivId{
	position:relative; 
	height:100%; 
	width:100%;
	border-color:transparent;
	border-style:solid;
}

#topFrameBannerContainer{
	box-sizing: border-box;
}



.flex-containerExerciseFrameTop {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    padding: 0px;
    max-width: 450px;
    min-width: 280px;
    min-height: 30px;
    width: 99%;
    margin: auto;
    margin-top: 0px;
    margin-bottom: 0px;
    background-color: black; // lightgrey;
    
    border-style: solid;
    border-width: 1px;
    border-color: lightgrey;
}

.topFrameContainerLowerRows{
	  display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-start;
    justify-content: flext-start;
	  // min-height: 20px;

}

.topFrameContainerDblTableRow{
	  display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-start;
    justify-content: flext-start;
    min-height:22px; 
		height: 24px;		
}

.topFrameContainerFakeRowForTable{
  -webkit-justify-content: flex-end;
  justify-content: flext-end;
  min-height:22px !important;
  height: 24px;  
	// box-sizing: border-box;
}


#bannerRow3FakeForTable{
	height: 16px;	
	width: 350px;
	top: -16px;
}

	

.flex-itemTopFrame {
    background-color: black; // #659cef;
    color: white;
    width: 18%;
    min-width: 20px;
    max-width: 400px;
    height: 90%;
    margin: auto;
    text-align: center-left;   
}



.topFrameExercise{
	margin-left: 15px;
	width:80%; 
	color:#4EC068;	
	text-decoration:none;
	text-shadow:none;
}

.topFrameSessionTimeTitle{
	flex-wrap: wrap;
	width: 12%;
	color: #fdfdfd;
	font-size: 12px;
	line-height: 12px;
}
	
.topFrameSessionTime{
	flex-wrap: wrap;
	width: 6%;
	color: #fdfdfd;
	font-size: 12px;
	line-height: 12px;
}

.topFrameExerciseLowerCells {
	font-size: 12px;
	line-height: 12px;
	width: 23%;
	padding: 0px 4px 0px 4px;
	text-shadow: none;

}

.topFrameExerciseSecondRow {
	font-size: 12px;
	line-height: 12px;
	width: 98%;
	text-shadow: none;
}

.topFrameContainerHelpBtnRow{
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    padding: 0px;
    max-width: 450px;
    min-width: 300px;
    height: 2px;
    width: 94%;
    margin: auto;
    margin-top: 0px;
    margin-bottom: 0px;
    background-color: transparent; // lightgrey;   
    border-style: none;

}

.flex-itemTopFrameHelpItem {
    background-color: transparent; // #659cef;
    color: black;
    width: 18%;
    min-width: 14px;
    max-width: 40px;
    height: 2px;
    padding: 0px;
    margin-right: 6px;
    text-align: center-left;
    font-size: 12px;
		line-height: 12px;	
		text-shadow: none; 
		position: relative;
}
#mainHelpBtnId{  
	  position:absolute; 
	  top:-26px;
	  right:-8px;
}





.clearAnswerBox{
	margin-bottom: 2px;
	padding-left: 5px;
	padding-right: 3px;
	padding-bottom: 2px;
	//border-bottom-style: solid;
	//border-bottom-color: green;
	font-size: 130%;
	font-weight: 300;
	color: #97e5a8;
	font-family:times;
	width:20px;
	text-align: center;
}

 .bannerRow2Table tr, .bannerRow2Table td, .bannerRow2Table p{  
    font-size: 12px;
    font-family: Georgia;
    margin: 0px;
    padding: 1px 3px 2px 3px;
    text-align: center;
    text-shadow: none;
    color: #fafafa;
    background-color: transparent;
    height: 1em;
}

table{
	border-collapse: collapse;
	/* width: 100%; */
	
}
.bannerTableStatsTextClass{
	font-size: 12px;
}


	
.bannerRow2Table td{
	/*border-bottom: 1px solid #ddd;*/
	border: none;
}
.clearAnswerBoxInTable{
	margin-bottom: 3px;
	padding-left: 6px;
	padding-right: 4px;
	padding-bottom: 3px;
	font-size: 130%;
	font-weight: 300;
	color: #97e5a8;
	font-family:times;
	width:20px;
	text-align:center;
}

/*
.rightSideFillerRow{
	width: 20%;
	max-width: 200px;
	min-width: 20px;
}
*/

.bannerBottomRightSide{
  background-color: transparent;
  text-align: center-right;  
	align-self: flex-end;
	webkit-align-self: flex-end;
	padding: 2px 5px 2px 2px;
	margin: 0px 6px 0px auto;
	color: #fafafa;
	font-size: 12px;
}
.bannerTopRightSide{
  background-color: transparent;
  text-align: center-right;  
	align-self: flex-end;
	webkit-align-self: flex-end;
	padding: 2px 5px 2px 2px;
	margin-right: 0px;
	margin-left: auto;
	color: #fafafa;
	min-width: 24px;
	max-height:18px;
	font-size: 12px;
}

.bannerTopRightSideSDEx{
  background-color: transparent;
  text-align: center-right;  
	align-self: flex-end;
	webkit-align-self: flex-end;
	padding: 2px 5px 2px 2px;
	margin-right: 0px;
	margin-left: auto;
	color: #fafafa;
	min-width: 24px;
	max-height:18px;
	height: 18px;
	font-size: 12px;
	  display: block;
    position: absolute;
    top: 3px;
    right: 10px;
    z-index: 100000;
}

.bannerTopRightSideSDExWrapper{
	padding: 0px;
  max-width: 450px;
  min-width: 320px;
  height: 0px;
  width: 99%;
  margin: auto;
  position: relative;
}

/* flashcard banner below */
		
 .bannerRow2Div{  
 		display:inline-block;
 		width: 98%;
    font-size: 12px;
    font-family: Georgia;
    margin: 0px 0px 0px 5px;
    padding: 1px 3px 2px 3px;
    text-align: left;
    text-shadow: none;
    color: #fafafa;
    background-color: transparent;
    height: 42px;
    // border: 1px solid red;

    line-height: 21px;
    vertical-align:7%;
}

.bannerDivStatsTextClass{
	font-size: 12px;
	color: #fafafa;
}
	
.clearAnswerBoxInDiv{
	margin-bottom: 3px;
	padding-left: 6px;
	padding-right: 4px;
	padding-bottom: 3px;
	font-size: 130%;
	font-weight: 300;
	color: #97e5a8;
	font-family:times;
	width:20px;
	text-align:center;
}
.quizQuestionID{
	font-size: 18px;
	
}




.quizAnswersTable{
	height: 40vh;
	max-height: 300px;
	min-height: 220px;
	margin: 3px 3px 3px 8%;
	font-size:18px;
}

.quizAnswersTable tr{
	max-height:80px;
	min-height:35px;
	height:16%;
}

.quizAnswersTable tr td img{
	width:98%;
	display:none;
}

.quizAnswersTable tr td:nth-child(1){
	min-width:55px;
	max-width:80px;
	padding: 3px 1px ;
}

.quizAnswersTable tr td:nth-child(2){
	min-width:10px;
	max-width:20px;
	width: 18px;
	padding: 0px;
}

.quizAnswersTable tr td:nth-child(3){
	// background-color:blue;
	min-width:60px;
	max-width:350px;
	padding: 8px;
	font-size:14px;
}

/* flashcard banner above*/