h2{color:#094e63;}
.orangeCTA, .oCTA{border: 4px solid #E38F1D; background-color: rgb(255,237,201); -webkit-box-shadow: 3px 7px 40px -13px #353535; box-shadow: 3px 7px 40px -13px #353535;}
.blueCTA, .bCTA{ border: 4px solid #008ab6; background-color: #d3f4ff; -webkit-box-shadow: 3px 7px 40px -13px #353535; box-shadow: 3px 7px 40px -13px #353535;}
.stoUI {font-size: 1.1em; font-weight: bold; color: #2d495f;}
.stoUI th {font-size: 1.3em; text-decoration: underline; color: #558798;}
.stoUI h2,.stoUI h3 {border-bottom: none;}
.stoUICheckbox label{padding: 5px 18px; margin:-2px 0px; width:auto;}
.stoUICheckbox label:hover{cursor:pointer; background: #B5DBE3; border-radius:8px;}
.stoUIHeader{background-color:#084563; border:1px solid #053C5C; color: #d1e3ed;}
.stoUIContent, /*.stoUIClickable option*/{background-color:#93c3cd; border:1px solid #a6c9e2; color: #222;}
.stoUIClickable option{background:white;}
.stoUIClickable, .stoUIClickable select, .stoUIradio label span, .stoUImenu ul li{background: #93c3cd; background: repeating-linear-gradient( 135deg, #93c3cd, #93C2CC 1px, #9DC9D1 5px); border: 1px solid #739497; color:#2d495f; padding: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;}
.stoUIClickableDark, .stoUIClickableDark select, .stoUIradioDark label span, .stoUImenuDark ul li{background: #5998a9; border-color: #09637b; color: #004659;}
.stoUIClickable:hover, .stoUIradio input:hover + span, .stoUImenu ul li:hover{background: #fae8b6; border: 1px solid #739497; color:#1d5987; font-weight:bold; cursor: pointer;}
.stoUIClickableDark:hover, .stoUIradioDark input:hover + span, .stoUImenuDark ul li:hover{background: #68aabb;}
.stoUIClickableRed, .stoUIClickableRed select, .stoUIradioRed label span, .stoUImenuRed ul li{background: #fda1a1; border-color: #7b0909; color: #590000;}
.stoUIClickableRed:hover, .stoUIradioRed input:hover + span, .stoUImenuRed ul li:hover{background: #e07171; color: #590203; border-color: #310000;}
.stoUIClickableGreen, .stoUIClickableGreen select, .stoUIradioGreen label span, .stoUImenuGreen ul li{background: #86da90; border-color: #00610b; color: #004207;}
.stoUIClickableGreen:hover, .stoUIradioGreen input:hover + span, .stoUImenuGreen ul li:hover{background: #65c370; color: #003506; border-color: #003506;}
.stoUIClickable:active, .stoUIradio input:checked + span, .stoUImenu ul li.active {background: #f6bd6b; background: repeating-linear-gradient( 135deg, #f6bd6b, #f6bd6b 1px, #ECB76F 5px); border: 1px solid #739497; color:#4A2C02; font-weight:bold;}
.stoUIClickable:disabled{filter: grayscale(1); opacity: 0.5;}

.stoUIClickable.solidColor, .stoUIClickable.solidColor select{background: #2a6271; border-color: #09637b; color: #004659;}
.stoUIClickable.solidColor.whiteTxt, .stoUIClickable.solidColor.whiteTxt select{color: #fff;}
.stoUIClickable.solidColor:hover{background: #175667;}

.stoUIClickable.cancelBtn{background: #fff; border-color: #aaa; color:#777;}

.stoUIradio label{overflow:auto; display:inline-block; position: relative; width:170px; margin:4px; cursor:pointer; }
.stoUIradio label input{visibility: hidden;}
.stoUIradio label span{text-align:center; padding:4px; margin:0; display:block;}
.stoUIradio label span h3{margin:0;}

.stoUIradio .radioRight{margin-left: -9px;}
.stoUIradio .radioLeft{margin-right: -9px;}
.stoUImenu .radioRight{margin-left: -2px;}
.stoUImenu .radioLeft{margin-right: -2px;}
.stoUIradio .radioRight > span, .stoUImenu .radioRight{-webkit-border-top-left-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-topleft: 0px; -moz-border-radius-bottomleft: 0px; border-top-left-radius: 0px; border-bottom-left-radius: 0px;}
.stoUIradio .radioLeft > span, .stoUImenu .radioLeft{-webkit-border-top-right-radius: 0px; -webkit-border-bottom-right-radius: 0px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px;}
.stoUIradio .radioMiddle > span, .stoUImenu .radioMiddle > li{-webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px;}
.stoInfoBox, .stoStatusBox{/*display:inline-block; padding: 10px 25px;*/ border: 2px solid #7CB9CE; background-color: #DFF4FF; 
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;}
.stoStatusBox{border-color:#005e7c; background:#ebf5fa;}
.stoStatBoxFloatRight{width:500px; margin-right:4%; float:right; clear:both;}
.STO_botDivide{border-bottom: 1px solid #A4D3E3; padding-bottom:10px; margin-bottom:15px; margin-left: 10%; margin-right: 10%;}
.stoInfoBox .stoInfoTitle{background-color: #7CB9CE; color: #11485B; width: 100%;}
.stoStatusBox .stoStatBoxTitle{background:#005e7c; color:#fff; width:100%;}
.stoStatusBox .stoStatBoxTitle > *{border:none; margin:0;}
.stoStatusBox .stoStatBoxBody{padding:4px 15px;}
.stoTT{ position:absolute; width:290px; height:290px; z-index: 150; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; display:none; font-size:16px; overflow: hidden;}
.stoTT .warn, .stoTT .success, #userTypingInfoBlurb .warn, #userTypingInfoBlurb .success{color: #FFFFFF; border: 1px solid #A80000; text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.37); border-radius: 11px; background: #F82626;}
.stoTT .success, #userTypingInfoBlurb .success{ border: 1px solid #206807; background: #60b044;}
.keyboard .stoTT .success{width:65%;}
.stoTT .divider{ border-bottom: 2px solid #666; margin: 0px 12px; padding:4px 0px; font-size:1.1em;}
.stoTT .mStat, .stoTT .large_mStat{ padding:18px 0px; font-size:1.8em; line-height: normal; font-weight:bold;}
.stoTT .large_mStat{ font-size: 2em; padding: 8px 0px 0px;}
.keyboard .stoTT .large_mStat{ padding-bottom:10px;}
.stoTT .mStat > span {display:inline-block; padding: 0px 10px; margin:0px 8px; width: 108px;}
.stoTT .mStat .noteSmall{ font-size:14px; width: 28px;}
.lessonButton .stoTT .divider, .stoTT .topTitle{font-size:1.5em; font-weight: bold; padding: 10px 0px 20px 0px;}
.stoTT .topTitle, .stoTT .attention{width:100%; margin:0;}
.stoTT .attention {font-size:1.3em; font-weight:bold; padding: 7px 0px 10px; margin: 0; bottom: -10px; position: relative;}
#kbDiv.hideAcc .stoTT .accToHide, #kbDiv.hideSpd .stoTT .spdToHide, #kbDiv.hideAcc .accToHide, #kbDiv.hideSpd .spdToHide{ display:none;}
#kbDiv .stoTT .divider{font-family: TexGyreCursor-Bold, Courier, monospace; font-size:1.8em; font-weight: bold; padding: 10px 0px 20px 0px;}
.stoTT .splitCol{padding-bottom:8px; line-height: normal;}
.stoTT .splitCol > div {font-weight:bold;}
.stoTT .splitCol > span{padding:0px 20px; font-size:1.2em;}
.stoTT .align{text-align:left; line-height: normal;}
.stoTT .align span{display: inline-block; text-align:right; width:57%; padding:3px 8px 4px 0px;}
.stoTT .align .noteSmall{width:auto;}
#kbDiv #keysFilled .stoTT{color:black; text-align:center; font-size:1.2em; display: none; top:-253px; margin-left: -30px; padding: 10px; position: absolute; z-index: 1000; width:230px; height:240px;}
#kbDiv #keysFilled .stoTT .mStat{font-size:1.6em;}
#kbDiv #keysFilled .stoTT .mStat > span{padding:0;}
#kbDiv #keysFilled .stoTT .align{font-size:0.8em;}
#kbDiv #keysFilled .stoTT .align span{width:59%; padding:2px 9px;}
#kbLegend .stoTT div{padding-bottom: 12px;}
#kbLegend .stoTT .keySpdRange div{padding-bottom: 0px; margin-top: 20px;}
/*#keysFilled .stoTT, .lessonButton */.stoTT{height:282px; top:-230px; width: 320px; font-weight:normal; font-size:16px;}
.key:hover .stoTT, div[class^="p"]:hover .stoTT, #kbDiv #keysFilled .keyRows div[class^="p"]:hover > span, #kbDiv #keysFilled .keyRows div[class^="p"]:hover > div { display: block;}

.stoProgBar{display: inline-block; width: 100%; height: 30px; border-radius: 5px; text-align: left; overflow: hidden; background: #c9f1ff; border: 1px solid #02729b; margin-bottom:0px; white-space:nowrap}
.stoProgBar > span{display: inline-block; height: 100%; font-weight: bold; text-align: left; overflow: visible; padding-left: 6px; background: #59afca; color: #003849; line-height:29px;}
.stoProgBar.orange{background: #ffdfbe; border-color: #974700;}
.stoProgBar.orange > span{background: #e67e22; color: #6a3201;}
.stoProgBar.dkBlue{background: #7a98a2; border-color: #005270;}
.stoProgBar.dkBlue > span{background: #004a61; color: #e0f7ff;}
.stoProgBar.large{height:32px;}
.stoProgBar.large > span{font-size:1.5em; line-height:28px;}

input[type="submit"].dkBlueBkgd{background-color:#005E7C; color: white; cursor:pointer;}
input[type="submit"].dkBlueBkgd:hover{background-color:#014b63;}

.stoAttention{border-radius:8px; border: 3px solid #cabc59; background: #fffad4; margin-top: -3px; /*border:1px solid #e67e22; background:#ffdfbe;*/ }
.stoAttention .stoAttentionTitle{width:100%; margin:0px; padding:2px 10px 0px 10px; border-top-left-radius:8px; border-top-right-radius:8px; /*background:#e67e22; color:white;*/}
.stoAttention .stoAttentionTitle > * {margin:0; padding:0;}

ul.dashed { list-style-type: none;}
ul.dashed > li:before { content: "-"; padding-right: 3px; font-weight:bold;}
.posRel{position:relative;}
.sub{font-size:0.8em;}

.grid + div{clear:both;}
.stoFancyList{ position:relative; text-align: center; margin: 0 auto; margin-top:100px; clear:both; width:75%; max-width:1100px; height:auto; border-top: 2px solid orange; left:0px;}
.stoFancyList h2{font-size:2.2em;}
.stoFancyList .grid ul li h3 {font-size:1.6em;}
.stoFancyList .grid ul > li > span, .stoSimpleList > ol > li  > span, .stoFancyList .grid ul > li > div, .stoSimpleList > ol > li  > div {display:inline-block; border-top: 1px solid #D2D2D2; padding-top: 5px; /*min-width: 313px; this was messing up small-screens*/}
.stoFancyList .grid ul > li > span.noLine, .stoSimpleList > ol > li  > span.noLine, .stoFancyList .grid ul > li > div.noLine, .stoSimpleList > ol > li  > div.noLine {border-top: none;}
.stoFancyList .grid li:before{color:#FE7917;}
.stoFancyList .grid ul li p {margin:12px 5px 0px 10px;}
.stoFancyList .grid {margin:0 0 -25px 0;}
.stoFancyList .insideList li,.insideList li{padding:7px 2px; margin-left: 30px; line-height:1.5em;}
.checkList, .arrowList {padding: 0 20px;}
.checkList h3, .arrowList h3{font-weight:bold;margin: 4px 0px 5px 35px;position: relative;display: inline-block;}
.checkList p, .arrowList p{margin:0px 0px 10px 35px;line-height:1.5;}
.checkList>li {text-align:left; list-style-type:none; background:url('/images/gr_chk_vsm.png') no-repeat 0 5px;margin:0 0 30px 0;}
.arrowList>li {text-align:left; list-style-type:none; margin:0 0 30px 0;}
.arrowList>li:before {content: "\0BB"; font-size:2.6em; font-weight:bold;}
.arrowList h3 {margin-left:8px;}
ol.numberedList {counter-reset:li; margin-left:0; padding-left:0;}
ol.numberedList > li{position:relative; margin:40px 0 6px 2em; padding:4px 8px; list-style:none;}
ol.numberedList > li > span, ol.numberedList > li > div{padding-top:15px;}
/*ol.numberedList > li:before{content: counter(li); counter-increment: li; position: absolute; top:2px; left: -1.3em; width: 1em; margin-right: 8px; padding: 0em 0em 0.1em 0.4em; font-size: 1.8em; font-weight: bold; color: #fff; background: #216e8a; border-radius: 50%; line-height: 1.3em;}*/
ol.numberedList > li:before{content: counter(li); counter-increment: li; position: absolute; display:block; text-align:center; top:2px; left: -1.3em; width: 1.5em; margin-right: 8px; padding: 3px 0px; font-size: 1.8em; font-weight: bold; color: #fff; background: #216e8a; border-radius: 50%; line-height: 1.3em;}
ol.numberedList .listTitle, ol .listTitle, ul .listTitle{font-size:1.5em; font-weight:bold;}
ol.numberedList .listTitle{color:#216e8a;}

ul.bulletList {width:auto; text-align:left; margin:30px auto 30px 15%;}
ul.bulletList li {margin-bottom: 10px; list-style-type:disc !important;}

table {border-spacing: 0; border-collapse: collapse; margin: 1.5em 0;}
th {text-align:center;}
table.displayLines td, table.displayLines th {padding: .75em; border: solid 1px #666;}

#cookieConsentPopup {z-index: 999; min-height: 20px; padding: 10px 20px; background: rgba(255, 232, 173, 0.88); overflow: hidden; position: fixed;color: #b17749; bottom: 0px; right: 10px; display: none; left: 0; text-align: center; font-size: 15px; font-weight: bold; border-top: 1px solid #d4a783;}
#cookieConsentPopup div { padding: 5px 0 0;}
#cookieConsentPopup a { color: #904000; display: inline-block; padding: 0 10px;}
#cookieConsentPopup a:hover {color: #fda016;}
#cookieConsentPopup a#cookieButton { display: inline-block; color: #fff; font-size: 1.1em; background: #e0821f; text-decoration: none; cursor: pointer; padding: 3px 32px; float: right; border-radius: 20px;}
#cookieConsentPopup a#cookieButton:hover { background: #fda016;	color: #fff;}

#adSliderContainer{box-shadow: 0 0 30px rgba(0, 0, 0, 0.1); border-radius:15px; width:90%;}
#slider { position: relative; width: 140px; height: auto; overflow: hidden; margin-bottom: 20px; border-radius:12px;}
#slider ul { position: relative; list-style: none; height: 100%; width: 10000%; padding: 0; margin: 0; transition: all 750ms ease; left: 0; }
#slider ul li {position: relative; height: 100%; float: left; }
#slider ul li a > img{ width: 140px; height: auto;}
#adSliderContainer #prev, #adSliderContainer #next { width: 30px; line-height: 30px; border-radius: 50%; font-size: 1.3rem; text-shadow: 0 0 20px rgba(0, 0, 0, 0.6); text-align: center; color: #7cb9ce; text-decoration: none; position: absolute; top: 21%; transform: translateY(-50%); transition: all 150ms ease; }
#adSliderContainer #prev:hover, #adSliderContainer #next:hover { background-color: rgba(0, 0, 0, 0.5); text-shadow: 0; }
#adSliderContainer #prev { left: 20px; }
#adSliderContainer #next { right: 20px; }

#highScoreContainer .limitHeight{max-height: 1000px; overflow-y:scroll; border-top-right-radius:5px; border-bottom-right-radius:5px;}
#highScoreContainer .limitHeight::-webkit-scrollbar{width:12px; background-color:#dbfd86;}
#highScoreContainer .limitHeight::-webkit-scrollbar-thumb{background-color:#9bcf19; outline: 1px solid #5d7c10;}
#highScoreContainer .limitHeight::-webkit-scrollbar-track{/*margin:3px;*/ -webkit-box-shadow:inset 0 0 6px rgb(0 0 0 / 30%); border-radius:5px;}

.circle-image.poweruser{ width: 40px; height: 40px; border-width: 1px; border-color: #efaf6d; /* filter: drop-shadow(0px 0px 4px orange); */ color: orange; box-shadow: 0px 0px 2px 3px #ffc543; border: 1px solid orange; }

@media only screen and (max-width: 1018px){
	.stoFancyList{width:68%; /*left:98px;*/}
}

@media only screen and (max-width: 895px){
	.stoFancyList{ width: 75%; /*left: 64px;*/}
}

@media only screen and (max-width: 660px){
	.stoFancyList{ width: 67%; /*left: 83px;*/}
}

@media only screen and (max-width: 575px){
	.stoFancyList{ width: 443px; /*left: 108px;*/}
}

@media only screen and (max-width: 450px){
	.stoFancyList{width: 380px; /*left: 149px;*/}
}

@media only screen and (max-width:400px){
	.stoFancyList .grid ul li h3 {font-size:1.3em;}
}