h2{font-size: 3.2em; font-weight: 800; margin-top: 30px; border-bottom: 3px solid #094e63; display:inline-block;}
h3{font-size:1.3em;}
h4{font-size:0.9em;}
.noWidgets #heading, .noWidgets #pageMain{padding:5px 10px 5px 0;}
#topRow h2{margin-bottom:0px;line-height:21px;}
#cL_Header{ margin-top:50px; padding: 5px; background: #a0e0f1; border-radius: 42px; border: 1px solid #459aba; width: 70%; filter: drop-shadow(3px 4px 0px #459aba); color: #135d79;}
#aL_Header{ margin-top:50px; padding: 5px; background: #4b91a9; border-radius: 42px; border: 1px solid #459aba; width: 70%; filter: drop-shadow(3px 4px 0px #065771); color: #ccf4ff;}
#kB_Header{ margin-top:50px; padding: 5px; background: #555; border-radius: 42px; border: 1px solid #333; width: 70%; filter: drop-shadow(3px 4px 0px #222); color: #fff;}
#cL_Header span{filter: drop-shadow(2px 4px 0px #71b7d4);}
#aL_Header span{filter: drop-shadow(3px 4px 0px #065771);}
#kB_Header span{filter: drop-shadow(3px 4px 0px #333);}
#topRow{display:block; margin-bottom:15px;}
.stoStatusBox{display:block; margin-bottom: 12px; max-width:550px; min-width:250px;}
.fluidColumn{display: inline-block; margin: 0px 10px; /*vertical-align: top;*/}
.fluidColumn h2 {font-size:1.1em; padding:0px 0px 5px 0px; margin-top:0; font-weight:700; border-bottom-width:2px; max-width:76px;}
.fluidColumn.fc-1-4{width:25%; padding:0px 10px;}
.fluidColumn.fc-1-5{width:20%; padding:0px 10px;}
.lessonContainer{display:inline-block; margin-right: 40px; vertical-align: top;}
.mini .miniHide{display:none;}
.loneReview {display: inline-block; margin-right: 16px; vertical-align: top;}
.lessonButton {display: inline-block; position:relative; text-align:center; width: 115px; height: 115px; margin: 10px 10px 30px 10px; border-radius:10px; box-shadow: -4px 8px 20px -7px black; vertical-align: bottom;}
.lessonButton a{ text-decoration: none; color:black; display: inline-block; width:100%; height:100%; border-radius: 10px; background: #B8E0EE; border: 2px solid #459BBA; box-shadow: inset -1px 1px 9px 0px rgba(102, 102, 102, 0.73); overflow: hidden;}
.lessonButton.review a { font-weight: bold; border: 4px solid #E67E22; background: #FFC17F;}
.lessonButton.review .lessonTitle { background: #E67E22; padding: 3px 0px 6px 0px;}
.keyboard .lessonButton, .keyboard .stackedLesson{width:130px; height:130px; margin: 25px 0px 15px 50px; filter:drop-shadow(2px 4px 1px #1118);}
.hudContainer{position:sticky; top:70px;}


.lessonTitle{ font-weight:bold; background:#459BBA;	padding: 5px 0px; border-radius: 5px 6px 0px 0px; color: white;}
.normalLessonText { position:relative; z-index: 70; margin-top: 20px; font-size: 1.3em;}
.doubleLineLessonText { position:relative; z-index: 70; margin-top: 6px; font-size: 1.4em;}
.doubleLineLessonText span { word-spacing: 50px;}
.micro .doubleLineLessonText span { word-spacing: normal; line-height:18px;}
.micro .advanced .doubleLineLessonText .letters { margin:4px -9px 0px 6px !important;}
.smallLessonText{width:97%; text-align:center; padding:0;}
.smallLessonText span{padding: 5px 0px !important; width:100%;}
.largeLessonText { position:relative; z-index: 70; margin-top: 11px; font-size: 2.5em; font-family: "Courier New", monospace; font-weight: bold; letter-spacing: -4px; color: #004058;}
.review > a > .largeLessonText{ font-family:'Open Sans', Arial, sans-serif; margin-top: 20px; font-size: 1.7em; letter-spacing: -3px !important;}
.advanced .largeLessonText, .mini .advanced .largeLessonText{font-size:1.6em; letter-spacing:-5px;}
.mini .advanced .largeLessonText{font-size:1.2em; padding:2px auto;}
.letters{color: #004058;}
.review > a > div > .letters{color: #602d00;}

.passed a { overflow: visible;}
.meter {position:relative; z-index:88; height:74%; margin-bottom:-81px;}
.meter > span {position:relative; display: block; height:100%; margin-left: 0;}
.progress.fail .meter > span {background:red; width: 25%;}
.progress .meter{display:inline-block; margin-top: 43px; height:84px; width:100%; position:relative; border-top:2px solid #459BBA; margin-bottom:-125px;}
.review.progress .meter{top: -2px; border-top:2px solid #E67E22;}
.progress .lessonText{margin-top:-8px !important;}
.mini .progress .lessonText{margin-top:-21px !important;}
.lessonButton.advanced.progress .lessonText{margin-top:-12px;}
.progress .doubleLineLessonText{ margin-top: -20px; line-height: 26px;}
.progress .meter > span {background:#00526F; margin-top:0px;}
.review.progress .meter > span{background:#AB5000;}
.p50 .meter > span {width:50%;}
.p75 .meter > span {width:75%;}
.p85 .meter > span {width:85%;}
.p95 .meter > span {width:93%;}

/* Lesson stacking */
.topStack.lessonButton .stoTT{width:380px; overflow:hidden;}
.topStack {position: absolute; z-index: 99; border: 1px solid #197da0; box-shadow: -1px -1px 5px 0px #00000038; border-bottom: none; border-right: none; top: 0; left: 0; margin: 0;}
.topStack.review {border: 1px solid #c35f07;}
.middleStack{border: 1px solid #197da0; box-shadow: -1px -1px 5px 0px #00000038;margin-left:-116px;top: -5px; left: -5px;  margin: 0;}
.middleStack.review{border: 1px solid #c35f07;}
.bottomStack{position: absolute; left: -9px; top: -9px; margin: 0;}
.histIconContainer{text-align:right; position: relative; left: -29px; top: 55px; width:40px; font-weight: bold; background:url('../images/histIcon_dkBlue.png') no-repeat 0 0; background-size:24px 24px;}
.stackedLesson {display: inline-block; position: relative; text-align: center; width: 115px; height: 115px; margin: 10px 10px 30px 10px; border-radius: 10px; box-shadow: -4px 8px 20px -7px black; vertical-align: bottom;}
.advanced .stackedLesson, .advanced .lessonButton{box-shadow:-6px 10px 18px -8px black;}
.keyboard .stackedLesson .lessonButton, .stackedLesson .lessonButton.advanced{box-shadow:none; margin:0;}
.stackedLesson .stoTT{overflow: visible;}
.lessonHist .mStat{padding:0; margin: 0;}
.lessonHist .mStat > span {font-size:0.8em; width:102px;margin: 2px 4px;}
.lessonHist .mStat > span.makeDateReadable {font-size:0.6em; padding:3px; width: 114px; margin-left: 0px 2px 1px 1px; vertical-align:middle;}
.lessonHist {height:auto; max-height: 220px; overflow-x: hidden; width:100%; border-top:2px dashed #a5d3e2; padding:5px;}
.review .lessonHist {border-top:2px dashed #e8c886;}
.lessonButton .stoTT .histTitle { font-size:0.9em;font-weight:bold; color: #32768e;}
.lessonButton.review .stoTT .histTitle { font-size:0.9em;font-weight:bold; color: #b38323;}
.stoTT.lessonHist .mStat {padding: 0px;}
.key:hover .stoTT, div[class^="p"]:hover .stackedDiv .stoTT, #kbDiv #keysFilled .keyRows div[class^="p"]:hover > span { display: inline-block; position: relative; margin-left: -607px; width: 590px;}
	/* Need to hide stacked functionality on the miniPopout */
	#miniPopout .stackedLesson {width:auto; height:auto; margin:0; box-shadow: none;}
	#miniPopout .bottomStack {display:none;}
	#miniPopout .middleStack {display:none;}
	#miniPopout .topStack {position:relative; box-shadow: -4px 8px 20px -7px black; border: none; z-index: 5;}
/*.lessonButton .stackedDiv .stoTT{transition: .5s all;   
    transition-delay: 5s; }
.lessonButton .stackedDiv .stoTT:hover{z-index:999; top:-260px;}*/
.keyboard .lessonContainer .stackedLesson:first-child{z-index:54;}

/* stoTT specifics */
.lessonButton .stoTT{-webkit-box-shadow: 0px 7px 60px -2px #353535; box-shadow: 0px 7px 60px -2px #353535; height:auto; max-height:600px; top:auto;  width:380px; bottom:115px; overflow:hidden;}
.hudContainer .lessonButton .stoTT{bottom:40px; left:-380px;}
#topKeyboardBasicsContainer .lessonButton .stoTT{bottom:40px; left:128px;}
.lesson .stoTT{border: 5px solid #3A95B7; background-color: #E0F7FF;}
.review > .stoTT{border: 5px solid #E38F1D; background-color: rgb(255,237,201);}
.lessonButton .stoTT .attention{padding-bottom:20px;}
.lesson .stoTT .attention{background: #07526C; color:white;}
.review > .stoTT .attention{background: #AA6200; color:white;}
.lessonButton.lesson .stoTT .topTitle{background: #3A95B7; color:white;}
.lessonButton.review .stoTT .topTitle{background: #E38F1D; color:white;}
.lessonButton .stoTT .splitCol > span {padding:0;}
.lessonButton .stoTT .splitCol.doubleCol > span{margin-right:-17px; padding: 0 20px;}
.stoTT .splitCol > div{display:inline-block; padding:0; width:86px; font-weight:normal;}
.stoTT .splitCol > div.label {font-weight:bold;}
.stoTT .splitCol.doubleCol {margin-left: -65px;}
.stoTT .splitCol.singleCol > div {text-align:left; width: 40%; padding:0 6px;}
.stoTT .splitCol.singleCol > div.label {text-align:right; width: 40%;}
.stoTT .splitCol.singleCol div.makeDateReadable {width: auto;}
.stoTT .lessonHist .mStat > div{display:inline-block; font-size:0.8em; padding:0; margin:0px 2px; width:86px;}
.stoTT .lessonHist .mStat > div.makeDateReadable{display:inline-block; font-size:0.65em; width:115px;}
.keyboard .stoTT .lessonHist .mStat > div.success{width:162px;}
/* ^^ stoTT specifics ^^ */

.star, .checkmark{display:none;}
.lessonButton.review.passed .star{ display: block; position: relative; color: rgb(255, 232, 107); margin-top: -133px; text-shadow: -1px 2px 22px #FFECC0; font-size: 123px; color: #C25B00;}
.lessonButton.passed .checkmark{display: block; position:relative; color: rgb(32, 127, 161); margin-top: -122px; text-shadow: 0px 0px 14px #D1DDE1; font-size: 108px; margin-bottom: -110px; z-index: -75; left: 2px;}

/* Updates from Leigh */
.lessonButton.passed .checkmark {display: block; position: relative; color: rgb(32, 127, 161); text-shadow: 0px 3px 5px rgba(0, 0, 0, 0.57); /*margin-top: -70px; text-shadow: 0px 3px 10px rgb(255, 255, 255); font-size: 66px; left: 38px; color: #0A5875;*/ margin-top: -87px; font-size: 81px; left: 35px; margin-bottom: -110px; z-index: -75; color: #00AD0D;}
.lessonButton.review.passed .star {display: block; position:relative; margin-top: -72px; text-shadow: -1px 2px 6px #000000; font-size: 66.6px; color: #C25B00; margin-left: 73px; color: yellow;}

.mini .lessonContainer{margin-right:20px;}
.mini .lessonButton{height:70px; width:70px; margin: 10px 3px 15px 4px}
.mini .lessonButton.review a{border-width: 2px;}
.miniTitle {display:none;}
.mini .lessonTitle.miniTitle{display:block; padding:0;}
.mini .lessonTitle{display:none;}
.mini .lessonButton.passed .checkmark, .mini .lessonButton.review.passed .star{ margin-top: -50px; font-size: 45px; left: 21px;}
.mini .lessonButton.review.passed .star{left: -27px; margin-top:-43px;}

.mini .largeLessonText{ font-size: 1.8em; margin-top: 38px;}
.mini .review .largeLessonText{ font-size: 1.2em; margin-top: 38px;}
.mini .normalLessonText{ font-size: 1.1em; margin-top: 39px;}
.mini .doubleLineLessonText{ margin-top: 32px; font-size: 0.9em;}
.mini .progress .meter{margin-bottom:-98px; margin-top:0;}
.mini .review.progress .meter{margin-bottom:-101px; margin-top:0;}
.mini .progress .meter > span{margin-top:0px;}
.mini .progress .lessonText{margin-top:-19px;}
.mini .progress .doubleLineLessonText{margin-top: -21px; line-height: 15px; font-size: 0.9em;}
.mini .titDec .fa{font-size:1.9em; top:11px;}
.mini .lessonButton.advanced .lessonText{margin-top:39px;}
.mini .lessonButton.advanced.progress .lessonText{margin-top:-20px;}
.mini .review .titDec .fa{top:11px;}
.mini .lessonButton.advanced .lessonText .letters{padding:3px 9px 2px 5px;}

.micro .lessonButton{height:45px; width:auto; min-width: 45px; margin:0;}
.micro .lessonTitle{display:none;}
.micro .lessonText{padding: 0; margin-top: 0px !important; height: 100%; font-size: 1.4em; text-transform: lowercase; color: white; letter-spacing: -1px; font-family: 'Open Sans', Arial, sans-serif;}
.micro .lessonButton a{border: 3px solid #004065; background: #459BBA; padding: 0px;}
.micro .lessonButton .letters{padding: 0px 9px;}
.micro .lessonButton.advanced .lessonText .letters{padding: 0px 12px 0px 8px; margin: 4px 13px; color:white !important;}
.micro .lessonButton.advanced .smallLessonText .letters{margin: 5px 29px 0px 1px; line-height:23px;}
.micro .lessonButton a:hover{background: #21708C;}
.micro .lessonButton.review a{border: 3px solid #A94F00; background: #E3821C;}
.micro .lessonButton.review a:hover{background: #C66600;}
.micro .meter {display:none;}
.micro .titDec .fa{top:21px !important;}
.micro .titDec .fa-caret-right{left:-1px;}
.micro .titDec .fa-caret-left{right:-1px;}

.lessonButton:not(.bottomStack):hover{box-shadow: inset -2px 1px 26px -6px rgba(20,20,20,0.3), 0px 0px 21px -5px rgba(20,20,20,0.5);}
.lessonButton:not(.bottomStack):hover a{cursor: pointer; background:#A4D6E7; border:4px solid #FFEB00;}
.lessonButton.review:not(.bottomStack):hover a{background: #F8BD7F; border:5px solid #FFEB00;}

/* Advanced Lessons */
.lessonButton.advanced .lessonText{margin-top:17px; color:#003e55;}
.lessonButton.advanced .lessonText.doubleLineLessonText{margin-top: 6px;}
.mini .lessonButton.advanced .lessonText.doubleLineLessonText{margin:34px auto 0px auto;}
.mini .lessonButton.advanced .lessonText.doubleLineLessonText, .mini .lessonButton.advanced .lessonText.doubleLineLessonText span{padding:0px 1px;}

.lessonButton.advanced .lessonText .letters{display:inline-block; padding:5px 15px 4px 12px; background:#7CB3C6; border-radius:10px;}
.lessonButton.advanced.review .lessonText .letters{background:#ED974A; color:#602d00;}
.lessonButton.advanced.review .doubleLineLessonText{width:87%;}
.lessonButton.advanced.review .doubleLineLessonText span{padding:0px;}
.titDec{display:block; position:relative; width:100%; z-index:75;}
.titDec .fa{color: #004F6C; font-size:2.5em; line-height:0px; position:absolute; top:17px;}
.review > a > .titDec .fa{top:15px; color:#974700;} 
.titDec .fa-caret-right{left:1px;}
.titDec .fa-caret-left{right:1px;}


.mini .lessonButton.review:hover a{border-width:4px;}

.lessonButton.current{box-shadow: 1px 1px 16px 1px #ADAD01;}
.lessonButton.current a{border: 4px solid #FFEB00 !important;}

#topKeyboardBasicsContainer, #classicLessonContainer, #advancedLessonContainer, #bottomKeyboardBasicsContainer{text-align:left; margin:0 2%;}

/* mini lesson popout */
#miniPopout {
	box-shadow: 1px 5px 33px -5px black;
    border: 6px solid #64B4CF;
    background: #DCF6FF;
    margin-top: 150px;
    height: 450px;
    overflow: hidden;
    position: fixed;
    top: -44px;
    width: 246px;
    height: 241px;
    z-index: 88;
    border-radius: 291px;
    left: 23px;
}
#miniPopout h3{display:none; font-size:1.8em;}
#miniPopout #miniTitle{        font-size: 3em;
    font-weight: bold;
    position: absolute;
    z-index: 999;
    color: white;
    text-shadow: -2px 3px 5px #004459;
    background: rgba(5, 60, 92, 0.53);
    top: -1px;
    height: 232px;
    padding: 53px;
    left: -26px;
}
#miniPopout #classicLessons{
	width: 400px;
    position: relative;
	top:0px;
    left: -65px;
}

#miniPopout .lessonButton .stoTT{position: fixed; top: 112px; left: 680px;}

#miniPopout:hover .scrollDiv{overflow-y:scroll; height:100%;}
#miniPopout:hover, #miniPopout:focus {
    width: 600px;
    border-radius: 15px;
    z-index: 101;
	height:700px;
	box-shadow:1px 1px 101px 80px rgba(7, 36, 53, 0.68);
	left:80px;
	overflow:visible;
}
#miniPopout:hover .lessonContainer, #miniPopout:hover .loneReview{display: inline-block;}
#miniPopout:hover #classicLessons {
    width: 100%;
    position: initial;
	left: 0px;
}
#miniPopout:hover #miniTitle{display: none;}
#miniPopout:hover h3{display: block;}

.stoAttention .stoAttentionTitle{margin-bottom:2px;}
#pageMain > #cL_Header{margin-top:0px; display:block;}
#asideWrap{z-index:998; float:right;}
.floatLeft{float: left; clear:both;}
#generalAsideAd{height:250px; width:300px;}
#genAdWrap_bottom{display:block; margin:30px auto;}
#generalBottomLeadAd, #lead_BTF, #lead_ATF{height:90px; width:728px;}

.stoStatusBox .stoStatBoxBody{padding-bottom:7px;}
#targetContainer{border-top: 1px dashed #7a98a2; padding: 4px 0px;}
#targetContainer .subField {display:inline-block; margin-top:5px; vertical-align:middle;}
#targetContainer.field .ui-spinner input{width:70px; padding: 1px; font-family: 'Open Sans', Arial, sans-serif;font-size:1em;}
#targetContainer.field .ui-spinner{vertical-align:middle;}
#targetContainer #speedTargetContainer{margin-right:25px;}
#targetContainer .units{position:relative; display:inline-block; vertical-align:middle; margin-left:2px;}
#targetContainer .targetValue{vertical-align:middle; font-size: 1.4em; font-weight: bold;}

.lessonGroup{position:relative; text-align:left; padding: 15px 15px 76px 15px; margin: 14px 0 36px 0; border-radius: 10px; background: repeating-linear-gradient(50deg, #e7f9ff 0px, #caf3ff 5px, #e9faff 10px); border: 3px solid #74c6de; box-shadow: inset 0px 0px 14px #728d9c, 0px 68px 34px -63px #353535;z-index:0;}
.lessonGroup.keyboard{/*background: repeating-linear-gradient(50deg, #484747 0px, #3e3e3e 5px, #484747 10px);*/ background: repeating-linear-gradient(50deg, #6b6b6b 0px, #5d5c5c 5px, #6b6b6b 10px); border: 3px solid #4c4c4c; box-shadow: inset 0px 0px 14px #000000, 0px 68px 34px -63px #383838;}
.lessonGroup.advanced{background: repeating-linear-gradient(50deg, #a4cfdc 0px, #98c8d6 5px, #a4cfdc 10px);/*repeating-linear-gradient(50deg, #acdbea 0px, #93c8d8 5px, #98cdde 10px);*/ border: 3px solid #4b92a9; box-shadow: inset 0px 0px 14px #1b6982, 0px 68px 34px -63px #353535;}
.lessonGroup:hover{	background: #aedeea; border: 3px solid #2f8ea5; cursor: pointer; border-radius: 10px;}
.keyboard.lessonGroup:hover{background: #565656; border: 3px solid #222;}
.advanced.lessonGroup:hover{background: #4f7d8e; border: 3px solid #01789a;}
.lessonGroupTitle{display: inline-block; position:absolute; bottom:19px; right:27px; font-size:3em; color: #297b9a; font-family: 'Suez One', 'Open Sans'; filter: drop-shadow(2px 4px 0px #8cc5dc);}
.keyboard .lessonGroupTitle{color: #ffffff; filter: drop-shadow(2px 4px 0px #333);}
.advanced .lessonGroupTitle{color: #065771; filter: drop-shadow(2px 4px 0px #4b91a9);}
.lessonGroup:hover .lessonGroupTitle{/*font-weight:bold;*/ color:#055d79;}
.keyboard.lessonGroup:hover .lessonGroupTitle{color:#ccc;}
.advanced.lessonGroup:hover .lessonGroupTitle{color:#99d8ea; filter: drop-shadow(3px 4px 0px #065771);}
/*
.lessonGroup.cID_1 .groupIconImg{width: 355px; height: 280px; background: url(../images/keyboardIcons.svg) no-repeat top left; background-size: 679px 71px; background-position: 186px 0px;}
.lessonGroup.cID_2 .groupIconImg, .lessonGroup.cID_17 .groupIconImg{width: 171px; height: 280px; background: url(../images/keyboardIcons.svg) -169px 0px; background-size: 679px 71px;}
.lessonGroup.cID_5 .groupIconImg, .lessonGroup.cID_18 .groupIconImg{width: 171px; height: 280px; background: url(../images/keyboardIcons.svg) -339px 0px; background-size: 679px 71px;}
.lessonGroup.cID_8 .groupIconImg, .lessonGroup.cID_20 .groupIconImg{width: 171px; height: 280px; background: url(../images/keyboardIcons.svg) -169px 0px; background-size: 679px 71px;}
.lessonGroup.cID_11 .groupIconImg{width: 171px; height: 280px; background: url(../images/keyboardIcons.svg) -169px 0px; background-size: 679px 71px;}

.lessonGroup .groupIconImg {position:absolute; bottom:15px; right: 15px; height: 27%; max-height:72px; background: url(../images/keyboardIcons.svg) -169px 0px;}*/

#reportrange {position:relative; margin-bottom:8px;}
#reportrange > div{display:inline-block;}
#reportrange .iconContainer{width:12%;}
#reportrange .iconContainer .fa{position: absolute; top: 50%; transform: translateY(-50%); left: 5%; font-size:25px;}
#reportrange .textContainer{width:88%; font-weight:500; padding:0px 5px; font-size:14px;}
#reportrange .textContainer .dateRangeLabel{font-size:19px; font-weight:700; /*margin-bottom:4px;*/}
#reportrange .textContainer .fa{font-size:18px; margin-left:10px;}

@media only screen and ( max-width: 1199px ) {
	.noWidgets #heading, .noWidgets #pageMain{padding:5px 10px;}
	.fluidColumn{margin: 0px 10px;}
	.stoFancyList{left:158px;}
	.stoStatusBox{margin-top:10px;}
	#asideWrap{float:none;}
	.noUsername #asideWrap{float:right;}
	.noUsername #generalAsideAd{margin-left: -10%;}
	#lessonProgressContainer{float:right; margin-right:4%;}
	#generalAsideAd{float:left; margin-bottom:50px; margin-left:4%;}
	#topRow{clear:both;}
	.noUsername #topRow{clear:none;}
	#classicLessonContainer{text-align:center;}
	#generalAsideAd{height:280px; width:336px;}
	
}