/*************************************************/
/*************************************************/
* { margin:0px; padding:0px; }

body{ /*height:3057px;*/ overflow: auto;}
#container{position:relative; z-index:0; width:100%; left:0px; height:2200px; min-height:100%; overflow: hidden;}
#mainBody{ position:relative; width:100%; z-index: 0;}
#mainBodyContent{position: relative; margin-left:30px; top:0px; margin-top:0px;}
#centerConsoleWrap{margin: 0 auto; text-align: center; position:relative; top:0px; left:0px;}
#centerConsole{position: relative; top:0px; width: 960px; left:1%; margin:15px auto 40px auto; z-index:101;}
#centerContent{margin-bottom:37px; height:auto;}
#centerConsole #centerContent{height:auto;}
#sb_shade{position: absolute;top: 0px;left: 219px;width: 4px;height: 100%;background: url(../images/Shade2R.png) repeat-y left top;}
#rightBar{position: relative;float:right;top:0;right:0px;width:auto;height:auto;z-index:50;margin:0;}
#header{z-index:100;left:0px;top: 0px;width:100%;position: absolute;}
#wrapHeading{top:17px; position:relative;}
#heading{width:57%; height:80px; margin-bottom: -17px; top: 21px; left:-30px;}
#heading h1{width:100%; padding:10px 10px 10px 40px;}
#main{top:10px; text-align:center; position: relative;}
#menuContainer{text-align: right;margin: 0;position: absolute;width:100%;top:10px;left:0px;z-index:101;}
#menu{z-index:110;position: relative !important;float: right;z-index: 102;}
#footer{top:154px;}
#headInfo{position: absolute;left:0px;width:734px;line-height:25px;font-size:0.9em;margin:4px 0 0 91px;}

#lessonDiv{height:auto; min-height: 156px;}
#loginInfo{height:124px;}

/* overwrite rules that add skyscraper ad to typing test */
#divBackWrap{margin: 0 auto;}
#containerWrapper{margin-left:77px;}
#timerDiv{margin-left:155px;}

#loggedInInfo{margin:0 auto; text-align:center; left:0; top:-2px; width:auto;}
#loginOrRegister{margin-left: -64px;}

/* BottomInfo START */
/****************************/
#bottomInfo{border: none;margin: 0 auto; text-align:center; top: -175px;left: 70px;}
#bottomInfo > div{border-top: 2px solid orange;}

#bottomInfo ul{padding: 0 20px;}
#bottomInfo li {text-align:left; list-style-type:none; margin:0 0 30px 0}
#bottomInfo li h3{font-weight:bold;margin: 4px 0px 5px 35px;position: relative;display: inline-block;}
#bottomInfo li h4{font-weight:bold;margin: 4px 0px 5px 85px;position: relative;display: inline-block;}
#bottomInfo li .doubleIndent {margin-left:85px;}
#bottomInfo li p{margin:0px 0px 10px 35px;line-height:1.5;}

/* BottomInfo END */
/*****************************/

/* ****************************************************************/
/* SCALING EFFECT START */

.mainDivInputs{overflow: hidden;}
#widthDiv{position:absolute; width: 100%; left:0px; right:0px;}
.scale75p{transform: scale(0.75); -ms-transform: scale(0.75); -webkit-transform: scale(0.75); -o-transform: scale(0.75); -moz-transform: scale(0.75); top: -90px !important;}
.scale90p{transform: scale(0.9); -ms-transform: scale(0.9); -webkit-transform: scale(0.9); -o-transform: scale(0.9); -moz-transform: scale(0.9); top: -36px !important;}
.scale115p{transform: scale(1.15); -ms-transform: scale(1.15); -webkit-transform: scale(1.15); -o-transform: scale(1.15);-moz-transform: scale(1.15); top: 54px !important;}

/* SCALING EFFECT START */
/* ****************************************************************/

/* ****************************************************************/
/* KEYBOARD START */

#KHWrap{text-align: center; margin: 0px auto; left:0px; top:0px; width:960px; z-index:70;}
#kbWrap{ position: relative; text-align: center; margin: 0px auto; left:0px; top:0px; width: 960px;}
#kbDiv{position: relative; text-align: center; margin: 0px auto; width: 720px; height: 280px; background: #404040; border: 3px inset #FF8505; top: 0px; left: 0px;}
#keysFilled{position: relative; top:0px; left:0px; text-align: center; margin: 2px auto; margin-left:20px; width:720px; height: 280px; background: url(../images/keysFilledDk.png) no-repeat top left;}
#keysShading{ position: relative; top:0px; left:0px; text-align: center; margin: 2px auto; margin-top: -282px; margin-left:20px; width:720px; height: 280px; background: url(../images/keysShading.png) no-repeat top left;}
#keyToPress{ position: relative; top:0px; left:0px; text-align: center; margin: 2px auto; margin-left:0px; width:44px; height: 44px; background: url(../images/keyToPress.png) no-repeat top left;}
#spaceToPress{position: relative; top:-70px; left:0px; text-align: center; margin: 2px auto; margin-left: 212px; width: 225px; height: 41px !important; background: url(../images/spaceToPress.png) no-repeat top left;}
#L_ShiftToPress{ position: absolute; top:0px; left:0px; text-align: center; margin: 2px auto; margin-top:169px; margin-left:29px; width:100px; height: 42px; background: url(../images/L_ShiftToPress.png) no-repeat top left;}
#R_ShiftToPress{ position: absolute; top:0px; left:0px; text-align: center; margin: 2px auto; margin-top:169px; margin-left:575px; width:116px; height: 42px; background: url(../images/R_ShiftToPress.png) no-repeat top left;}
#keyLabelWrap{ position: relative; text-align: center; margin: 0px auto; left:0px; top:0px; height: 2px; width: 720px;}
#klDiv{position: relative; text-align: center; margin: 0px auto; width: 720px; height: 2px; top: 0px; left: 0px;}
#keysLabels{position: relative; top:-276px; left:0px; text-align: center; margin: 2px auto; margin-left:22px; width:720px; height: 280px; background: url(../images/keysLabels.png) no-repeat top left;}

/* KEYBOARD END */
/* ****************************************************************/
/* ****************************************************************/
/* HAND OUTLINE START */

#HandWrap{position: relative; text-align: center; margin: 0px auto; width: 960px; height: 6px; left:0px; top:67px; z-index:71;}
#handDiv{position: relative; text-align: left; margin:0px auto; width: 960px; left:0px; top:0px; height:5px;}
#R_HandWrap{position: relative; top:-492px; left:0px; width:154px; height:168px; margin-left:790px;}
#R_HandOutline, #R_FingerToPress{position:absolute; margin: 0px auto; left:0px; top:0px; width:154px; height:168px;}
#R_HandOutline {background: url(../images/HandOutlines.png) no-repeat right top;}
#R_FingerToPress {background: url(../images/fingersToPress.png) no-repeat right top;}
#L_HandWrap{position: relative; top:-324px; left:0px; width:154px; height:168px; margin-left:15px;}
#L_HandOutline, #L_FingerToPress{position:absolute; margin: 0px auto; left:0px; top:0px; width:154px; height:168px;}
#L_HandOutline { background: url(../images/HandOutlines.png) no-repeat top left;}
#L_FingerToPress { background: url(../images/fingersToPress.png) no-repeat top left;}
#kbLegend{position: absolute; left: 0px; top: 0px; width: 114px; height: 46px; margin-left: 561px; margin-top: 237px; color: white; font-family: Arial, Helvetic, sans-serif; font-weight: bold;  font-size: .9em;}

/* HAND OUTLINE END */
/* ****************************************************************/
/* ****************************************************************/
/* SIDEBAR START */

#sidebar{position: fixed;top:410px;left:35px;width:212px;height:auto;z-index:95;text-align: center;padding:2px 0px 5px;box-shadow:0px 0px 19px -1px #3b3b3b;}
#sidebar:hover{z-index:95;}
#sidebarAd{width: 200px;height: 200px;margin-top: 81px;margin-bottom: -160px;margin-left: 10px;}
.puncFont{display: inline-block; font-family: "Trebuchet MS", Helvetica; font-size:135%; font-weight:bolder; line-height:1.3; margin-top:-10px; margin-bottom:-10px;}
#CLT{ margin: 0 auto; font-size: 14px; font-family: arial, Helvetica; font-weight: bolder; color:white; background-color: #396b84; border:2px solid #004266; top:0; left:0px; margin-top:185px; width:160px; padding:5px; border-radius: 12px; -moz-border-radius: 12px; }
#CLT h2{font-size:16px;margin:0;}
/* SEE TOP FOR #sidebar */

#sidebar h3{color:#004065; font-size:1.3em;}
#sidebar .STO_botDivide{padding-bottom:20px;}
#sbOptionsWrap{position: relative; padding-top: 5px;}
#sbOptionsWrap select{ padding: 2px 10px; margin-top: 5px; font-size: 1.1em; font-weight: 600;}
#CL1{z-index:200;} 
#testOut{width:60px;}
#testIn{overflow:auto;}
#customLessonDiv{top:0;left:0;height:auto;width:auto;}
#customLessonDiv p{}
#CLIW{position:relative;}
#CL_Entry p{margin:0;} 
#customLessonTA{font-size: 20px;letter-spacing: 1.5px;width: 140px;resize: none;margin-top:8px;margin-bottom:8px;}
#CL_Button {cursor:pointer; cursor:hand; font-family: arial; width:71px; height:30px; line-height:30px; font-size:17px; font-weight:bold; color:#000000; background: url(../images/goButtonBg.png) no-repeat right top; border: none; margin-left:69px;}
#CL_Button:hover{background: url(../images/goButtonBg.png) no-repeat right bottom;}

#MQL a{font-family: Arial, Helvetica;font-size:10px;margin-left:90px;}
#psContainer{ top:0px; margin:0;width:auto;}

/* SIDEBAR END */
/* ****************************************************************/
/* ****************************************************************/
/* RIGHTBAR START */

#smSqAd{position: absolute; top:0px; left: 0px; margin-top:152px; height:200px; width:200px; margin-left:-6px;}
#rightAd{position: absolute; top:180px; right: 60px; margin-top:0px; height:600px; width:300px;}
#lessonHintDiv{position: absolute; top:-110px; left:14px; width:164px; height:164px; border: 2px solid #e38f1d; background-color: #ffedc9; padding:5px; font-weight:bold;}
#textHintDiv{position: relative; height: auto; font-size: 16px; background-color: #E38F1D; margin: -5px -5px 0 -5px; padding: 2px 0; color: #3f2200; font-family: Arial, Helvetica, Sans-serif; font-weight: bolder;}
#lessonHintDisplay{ /*position: relative; top: 0px; left: 0px; width: 148px; overflow: auto; padding-top:14px; padding-left:5px; font-family: Arial, Helvetica, Sans-serif; font-size: 14px; text-align: left;*/}

/* RIGHTBAR END */
/* ****************************************************************/

/* ****************************************************************?
/* typing-tutor.php SPECIFICS */

#lessonInfoDiv{position: relative !important;text-align:center;font-weight:bold;font-size:18px;left:50px;padding-bottom:10px;margin: 0 auto;width:650px;height:75px;clear: both;}
#lessonInfo{text-align:left;font-size:16px;padding:12px;left:0px;top: 0px;margin:-64px 0 0 -40px;width:700px;position: absolute !important;}

#lessonDivContainer{width: auto; margin: 65px auto -55px auto; height: auto; background: #DFF4FF; border: 2px solid #459BBA; border-radius: 5px; display: inline-block; position: relative; vertical-align: top; z-index: 51;}
#lessonDivLead{   background: #459BBA; color: #FFFFFF; line-height: 35px; text-align: center; padding: 0 10px;}

#lessonDiv > span{padding:8px 7px 13px 14px;}
#textPurposeDiv{font-weight: bolder;}
#lessonPurposeDisplay{position: relative;font-size:1em;}
#psDiv{margin: 20px 0 0 18px; width:auto;}
#psDiv *:hover{cursor:pointer;}
#resultDiv{margin: 0 auto 0 93px;}
#colorHideLink{top:-140px;z-index:101;}
#hiddenContainer{top:-140px;left:200px;z-index:102;}
.specialFont{font-weight: bold;color: black;background: #ffd47f;}
#fbLikeDiv{position:absolute; top: 50px; right: 110px;}

#leadAd{left:8px;margin-top:70px;}

#lessonDiv #lessonLettersWrap{text-align:center; padding-left:25px;}
.lessonDivCols{display:inline-block; vertical-align: top;}
#lessonDiv #lessonTargetsWrap{margin-right: 16px; padding-left: 5px; text-align:center; padding-bottom: 25px;}
#lessonTargetsWrap .textInfoDisplay > div{position:relative; display:inline-block; min-width:86px; border: 1px solid #459BBA; background: #C6E5F6; border-radius: 10px; padding: 3px 10px 4px 9px; margin-top: 6px; text-align: center;}
#lessonTargetsWrap #targetEditDiv{background:transparent; border:none; display:block; font-size:0.9em; width:50%; text-align:center; margin: 3px auto -5px;}


.review #lessonTargetsWrap .textInfoDisplay > div, .review #lessonTargetsWrap .textInfoDisplay .editField{ border: 1px solid #CB6902; background: #FFCD81;}
.custom #lessonTargetsWrap .textInfoDisplay > div, .custom #lessonTargetsWrap .textInfoDisplay .editField{ border: 1px solid #0C8726; background: #C2EBCC;}
/*#lessonTargetsWrap .textInfoDisplay .editField{ display: none; position: absolute; color: #004065; font-size: 14px; top: 0px; right: 4px; background:#C6E5F6; box-shadow: 1px 5px 33px -5px black; border: 2px solid #459BBA;}
#lessonTargetsWrap .textInfoDisplay > div:hover { cursor: pointer;}
#lessonTargetsWrap .textInfoDisplay > div:hover  .editField{ display: inline-block; width: 176px; height: 80px; top: -30px; border-radius: 10px; padding: 10px 5px 5px; left: -50px; z-index:99;}
*/


.review #lessonTargetsWrap .textInfoDisplay > div, .review #editTargetsPopup{ border: 1px solid #CB6902; background: #FFCD81;}
.custom #lessonTargetsWrap .textInfoDisplay > div, .custom #editTargetsPopup{ border: 1px solid #0C8726; background: #C2EBCC;}
#editTargetsPopup{ display: none; position: absolute; color: #004065; font-size: 14px; top: 0px; right: 4px; background:#C6E5F6; box-shadow: 1px 5px 33px -5px black; border: 2px solid #459BBA;}
#targetEditDiv:hover { cursor: pointer; background: blue;}
#lessonTargetsWrap:hover{background: rgba(0, 0, 0, 0.13); cursor: pointer;}
#lessonTargetsWrap:hover #editTargetsPopup,#targetEditDiv:hover #editTargetsPopup{ display: inline-block;
    width: 293px;
    height: 115px;
    top: -130px;
    border-radius: 10px;
    padding: 10px 5px 5px;
    left: -103px;
    z-index: 99;}

#editTargetsPopup .LI_title{font-size: 1.4em; text-decoration: underline;}
#editTargetsPopup .LI_title .fa{font-size: 0.9em;}

.editField{display:inline-block; padding:2px 13px;}
.editField label{display:block; font-weight:bold; padding-bottom: 5px; position:relative;}
.editField .ui-spinner{position:relative; display: inline-block; text-align:center; border: 1px solid gray; border-radius: 4px; overflow:hidden;}
.editField input{width:55px; font-size:1.4em; padding:2px; margin-right:15px;}
.editField .ui-spinner-button{position: absolute; background: #95CEE3; height:16px; width:16px;}
.editField .ui-spinner-up{margin: 0px 0px 0px -16px; border-top-right-radius: 3px;}
.editField .ui-spinner-down{margin: 16px 0px 0px -16px; border-bottom-right-radius: 3px;}
.editField .ui-icon-triangle-1-n{font-size:0.9em; top:-2px; display:inline-block; position:relative;}
.editField .ui-icon-triangle-1-s{font-size:0.9em; top:-4px; display:inline-block; position:relative;}
.editField .ui-spinner-button.ui-state-hover{background:#62ADC8;}


#lessonHintDisplay{display:inline-block; text-align:left; padding-left:15px; width: 220px;}
#lessonHintDisplay li{ padding-bottom: 5px;}
.LI_title{padding-bottom:2px; font-weight: bold; display:block;}
#lessonLettersToLearn{border-radius: 21px; padding: 6px 13px 12px 15px; font-size: 2.2em; font-weight: bold; color: white; margin: 0 auto; letter-spacing:2px; overflow:hidden;}
.lesson #lessonLettersToLearn{background: #21708C; border: 5px solid #004065;}
#tl_wpm_target, #tl_accuracy_target{font-size:1.5em; display:inline-block; font-weight:bold; color: #004E7C;}
.review #tl_wpm_target, .review #tl_accuracy_target{color:#984D00;}
.custom #tl_wpm_target, .custom #tl_accuracy_target{color:#005B13;}



#lessonLettersToLearn.doubleLine {width: 130px; font-size: 1.3em; line-height: 24px; padding-bottom: 10px;}
#prevLessonDiv{right: auto; left: -36px;}

.moveLessonCarets{position: absolute; right: -36px; margin-top: -6px; font-size: 7em; height: auto; top: 0px;}
.moveLessonCarets span{position: Relative; line-height: 30px; display: inline-block; margin: 0; border-radius: 20px; padding-bottom 25px; color: #797979;}
.moveLessonCarets span:hover {text-decoration: none; font-size: 1.2em; top: 7px; left: 5px; text-shadow: -2px 0px 5px rgba(0, 0, 0, 0.74); cursor:pointer;}

#prevLessonDiv.moveLessonCarets span:hover{left:-5px; text-shadow: 2px 0px 5px rgba(0, 0, 0, 0.74)}
#infoBlurbName{margin-top: 5px; border-top: 2px solid rgb(69, 155, 186); background: #98D0E4;}

#lessonDivContainer.review{background: #FFEDD1; border: 2px solid #CB6902;}
.review  #lessonDivLead{background: #CB6902;}
.review #lessonLettersToLearn{background: #C66600; border: 5px solid #994F03;}
.review #infoBlurbName {border-top: 2px solid rgb(153, 79, 3); background: #ECAD6C;}
.review #infoBlurbName a {color: #7A3E00;}
.review #userTypingInfoBlurb #infoBlurbAve {border-right: 1px solid #ECAD6C; border-left: 1px solid #ECAD6C;}


#lessonDivContainer.custom{background: rgb(225, 255, 232); border: 2px solid #0C8726;}
.custom  #lessonDivLead{background: #0C8726;}
.custom #lessonLettersToLearn{background: #006516; border: 5px solid #00300A; color: white;}
.custom #infoBlurbName {border-top: 2px solid rgb(12, 135, 38); background: #9BD3A7;}
.custom #infoBlurbName a {color: #00300A;}
.custom #userTypingInfoBlurb #infoBlurbAve {border-right: 1px solid #9BD3A7; border-left: 1px solid #9BD3A7;}

#userTypingInfoBlurb > div { vertical-align: middle;}
#currentLessonScore{font-size:2em;}
#currentLessonScore .fa{font-weight:bold; line-height:0; font-size:1.3em;}
#currentLessonScore .fa-check{color:#36A90D; }
#currentLessonScore .fa-star{color:yellow; text-shadow: -1px 2px 6px #000000;}

.stoFancyList{width:100%;}
footer{z-index:-9;}
/* learnToType.php SPECIFICS */
/* ****************************************************************/


@media only screen and ( max-width: 1530px ) {
	#rightAd{right:10px;}
}

@media only screen and ( max-width: 1430px ) {
	#rightAd{width:160px; right:50px;}
	#heading h1{padding:10px; font-size:1.8em;}
	#heading h3{margin:0px 10px;}
	#heading span{padding-right:0px;}
}

@media only screen and ( max-width: 1210px ) {
	#miniPopout{width:186px; height:181px;}
	#miniPopout #miniTitle{font-size:2em;}
	#sidebar{font-size:12px; left: 12px; width: 173px; top: 320px;}
	#rightAd{right:10px;}
	#heading{height:100px;}
	#heading h1{padding:10px 10px 10px 33px; font-size:1.6em;}
	#heading span{margin-top:36px;}
}

@media only screen and ( max-width: 1120px ) {
	#rightAd{display:none;}
	#lessonDivContainer{left:8%;}
	#centerConsoleWrap{left:74px;}
	#miniPopout{left:5px;}
	#sidebar{}
	.stoFancyList{width:88%; left:18px;}
}