.welcome, .welcome-info,
.gwt-HTML, .gwt-Label, .gwt-TextBox, .gwt-PasswordTextBox, .gwt-TextArea, .gwt-FileUpload, .gwt-ListBox, .gwt-CheckBox,
.gwt-PushButton, .gwt-ToggleButton, .gwt-DialogBox .caption, input, checkbox, .dropdownBox {
font-size: 32px;
font-family: 'Asap-Regular', Verdana, sans-serif;
}
.noscale .gwt-HTML, .noscale .gwt-Label, .noscale .gwt-TextBox, .noscale .gwt-PasswordTextBox, .noscale .gwt-TextArea, .noscale .gwt-FileUpload, .noscale .gwt-ListBox, .noscale .gwt-CheckBox,
.noscale .gwt-PushButton, .noscale .gwt-ToggleButton, .noscale .gwt-DialogBox .noscale .caption, .noscale input, .noscale checkbox, .noscale .dropdownBox {
font-size: 16px;
}
.gwt-CheckBox {
cursor: pointer;
}
input[type=checkbox] {
width: 40px;
height: 20px;
outline: thin transparent;
}
.noscale input[type=checkbox] {
width: 20px;
height: 10px;
}
.gwt-TextBox, .gwt-PasswordTextBox, .gwt-TextArea, .gwt-FileUpload, .gwt-ListBox, .gwt-PushButton, .gwt-ToggleButton, checkbox, .input {
border-radius: 3px;
}
.gwt-Label, .gwt-CheckBox label, .dropdownBox {
color: white;
font-weight: bold;
line-height: 40px;
}
.dropdownBox {
line-height: 20px;
}
.noscale .gwt-Label, .noscale .gwt-CheckBox label, .noscale .dropdownBox {
line-height: 20px;
}
.gwt-Label.black {
color: black;
font-weight: bold;
}
.gwt-PushButton, .gwt-ToggleButton {
text-align: center;
overflow: visible;
font-weight: bold;
border: none;
outline: none;
background: #bdc4d2;
background: linear-gradient(to bottom right, rgba(189, 196, 210, 0.9), rgba(189, 196, 210, 0.7));
box-shadow: 0 0 150px rgba(255,255,255,0.5), 0 0 0px white, inset 0 0 5px rgba(255,255,255,0.5);
transition: all 0.2s ease-in-out;
transition: box-shadow text-shadow border-radius 0.4s ease-in-out;
}
.noGlow {
box-shadow: 0 0 5px rgba(255,255,255,0.5), 0 0 0px white, inset 0 0 5px rgba(255,255,255,0.5);
}
.faster .gwt-PushButton, .faster .gwt-ToggleButton {
box-shadow: none;
}
.label {
font-size: 26px;
}
.noscale .label {
font-size: 13px;
}
.gwt-PushButton, .gwt-ToggleButton {
width: 310px;
border-radius: 8px;
line-height: 36px;
padding: 12px 8px 10px 12px;
}
.noscale .gwt-PushButton, .noscale .gwt-ToggleButton {
width: 155px;
border-radius: 4px;
line-height: 18px;
padding: 6px 4px 5px 6px;
}
.gwt-PushButton-down, .gwt-PushButton-down-hovering, .gwt-ToggleButton-down-hovering {
padding: 12px 8px 10px 12px;
box-shadow: 0 0 20px white, 0 0 50px white, inset 0 0 15px white;
}
.noscale .gwt-PushButton-down, .noscale .gwt-PushButton-down-hovering, .noscale .gwt-ToggleButton-down-hovering {
padding: 6px 4px 5px 6px;
}
* html .gwt-PushButton div, .gwt-ToggleButton div {
padding: 1px 8px;
}
.gwt-PushButton-up-hovering, .gwt-ToggleButton-up-hovering {
background: #adb4c2;
background: linear-gradient(to bottom right, rgba(189, 196, 210, 1), rgba(189, 196, 210, 0.9));
box-shadow: 0 0 20px white, 0 0 50px white, inset 0 0 15px white;
}
.noscale .gwt-PushButton-up-hovering, .noscale .gwt-ToggleButton-up-hovering {
background: #adb4c2;
}
.noscale .appButton {
background: #bdc4d2;
}
.gwt-PushButton-down, .gwt-PushButton-down-hovering, .gwt-ToggleButton-down, .gwt-ToggleButton-down-hovering {
background: #878e9c;
background: linear-gradient(to bottom right, rgba(189, 196, 210, 0.8), rgba(189, 196, 210, 0.6));
}
.gwt-ToggleButton-down div, .gwt-ToggleButton-down-hovering div, .gwt-ToggleButton-down-disabled div {
padding-left: 20px;
background: url(/images/check.gif) no-repeat -4px 0px;
background-size: 30px 34px;
}
.noscale .gwt-ToggleButton-down div, .noscale .gwt-ToggleButton-down-hovering div, .noscale .gwt-ToggleButton-down-disabled div {
padding-left: 10px;
background: url(/images/check.gif) no-repeat -2px 0px;
background-size: 15px 17px;
}
.appButton {
color: black;
font-family: 'Asap-Regular',arial,sans-serif;
font-size: 32px;
border-radius: 8px;
line-height: 36px;
}
.noscale .appButton {
font-size: 16px;
border-radius: 4px;
line-height: 18px;
}
* html .appButton {
padding: 0;
}
* html .appButton .html-face div {
margin-left: -3px;
}
* html .appButton .html-face .appTitle {
margin-left: -65px;
}
.iconButton, .noscale .iconButton {
background: none;
border: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
padding: 0 2px 2px 0;
}
.noscale .iconButton {
padding: 0 1px 1px 0;
}
.mailButton {
width: 300px;
height: 260px;
}
.noscale .mailButton {
width: 150px;
height: 130px;
}
.lessonPlanButton {
width: 285px;
height: 260px;
}
.noscale .lessonPlanButton {
width: 143px;
height: 130px;
}
.settingsButton {
width: 260px;
height: 260px;
}
.noscale .settingsButton {
width: 130px;
height: 130px;
}
.akLogoButton {
width: 380px;
height: 260px;
}
.noscale .akLogoButton {
width: 190px;
height: 130px;
}
.startButton {
background: #dde;
font-size: 38px;
padding: 24px 10px 24px 14px;
}
.noscale .startButton {
font-size: 19px;
padding: 12px 5px 12px 7px;
}
.gwt-PushButton-up-hovering.startButton {
background: #eee;
}
.gwt-PushButton-down-hovering.iconButton, .gwt-PushButton-down.iconButton {
padding: 2px 0 0 2px;
}
.noscale .gwt-PushButton-down-hovering.iconButton, .noscale .gwt-PushButton-down.iconButton {
padding: 1px 0 0 1px;
}
.gwt-DialogBox {
z-index: 200001;
opacity: 0.9;
border: 2px solid #dde;
border-radius: 5px;
}
html>body .gwt-DialogBox {
border: none;
}
.dialogTopLeft, .dialogBorderCenterTop, .dialogTopRight,
.dialogMiddleLeft, .dialogMiddleRight,
.dialogBottomLeft, .dialogBottomCenter, .dialogBottomRight, .dialogBottomRightInner {
background: transparent !important;
opacity: 0.5;
filter:alpha(opacity=50) !important;
}
.dialogTopRightInner, .dialogBottomRightInner, .dialogTopRight {
width: 4px !important;
height: 4px !important;
margin: 0 !important;
}
.dialogBottom {
height: 5px !important;
}
.dialogBorderCenterTop, .dialogBottomLeftInner, .dialogBottomRightInner {
display: none;
font-size: 0;
}
.dialogCaptionInner {
padding: 6px;
}
.dialogCaptionInner {
text-align: center;
font-family: 'Asap-Regular',verdana, sans-serif;
font-size: 17px;
font-weight: bold;
color: black;
background: none;
padding: 0;
}
.dialogTopCenter {
padding-top: 5px;
}
.gwt-DialogBox .Caption {
border-top: none;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background: #bcc;
padding: 10px;
}
.dialogMiddleCenter {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border: 1px solid #bcc;
}
.gwt-DialogBox .gwt-Label, .gwt-DialogBox .gwt-CheckBox label {
color: black;
}
.gwt-PopupPanelGlass-slides {
z-index: 11;
background-color: black;
opacity: 0.8;
filter:alpha(opacity=80);
}
.gwt-TextBox, .gwt-TextArea, .gwt-PasswordTextBox, .gwt-ListBox {
padding: 10px;
background: #eef5ff;
border: 1px solid #aaa;
border-radius: 8px;
overflow: visible;
font-weight: bold;
}
.noscale .gwt-TextBox, .noscale .gwt-TextArea, .noscale .gwt-PasswordTextBox, .noscale .gwt-ListBox {
padding: 5px;
border-radius: 4px;
}
.gwt-TextArea {
font-family: "Courier New", Courier;
overflow: auto;
}
.gwt-TextArea-readonly {
color: #333333;
}
input.big {
padding: 6px;
}
input.login {
padding: 3px 8px;
font-size: 14px;
width: 70px;
outline: none;
}
input.config {
letter-spacing: 0px;
}
#app a, .gwt-DialogBox a {
font-size: 34px;
}
.noscale #app a, .noscle .gwt-DialogBox a {
font-size: 17px;
}
a, a:link, a:visited {
font-weight: normal;
color: #ddeeff;
border-bottom: 0.1em dotted #ddeeff !important;
text-decoration: none !important;
}
a:hover, a:active {
font-weight: normal;
color: #ccddee;
border-bottom: 0.1em dotted #ccddee !important;
text-decoration: none !important;
}
a.image {
border-bottom: none !important;
}
#app-stream a {
display: block;
height: 0;
border-bottom: none !important;
}
.gwt-DialogBox a, .gwt-DialogBox a:link, .gwt-DialogBox a:visited {
font-size: 16px;
line-height: 26px;
color: #556677;
border-bottom: 0.1em dotted #556677 !important;
text-decoration: none !important;
}
.gwt-DialogBox a:hover, .gwt-DialogBox a:active {
color: #778899;
border-bottom: 0.1em dotted #778899 !important;
text-decoration: none !important;
}
.registerPerson, .registerSchool {
padding: 0 20px 0 20px;
font: bold 34px verdana, sans-serif;
text-align: center;
border-radius: 8px;
color: #fff0f0;
border: 6px solid #fff0f0;
}
.noscale .registerPerson, .noscale .registerSchool {
padding: 0 10px 0 10px;
font: bold 17px verdana, sans-serif;
border: 3px solid #fff0f0;
border-radius: 4px;
}
.registerSchool {
color: #f0fff0;
border: 6px solid #f0fff0;
}
.noscale .registerSchool {
border: 3px solid #f0fff0;
}
.registerPerson ul .registerSchool ul {
margin: 0;
padding: 0 0 0 0px;
list-style-type: disc;
}
.registerPerson li, .registerSchool li {
margin-top: 4px;
line-height: 15px;
}
.registerPerson .price, .registerSchool .price {
font-size: 22px;
color: white;
}
.facebook-box {
margin: 0 80px;
background-color: #D8DFEA;
border-radius: 15px;
filter:alpha(opacity=90);
opacity: 0.9;
}
.facebook-box h3 {
padding: 8px 0 15px 0;
margin: 0;
}
.facebook-box a, .facebook-box a:link, .facebook-box a:hover, .facebook-box a:visited, .facebook-box a:active {
color: #333;
font-weight: bold;
text-decoration: none;
}
.logo {
position: relative;
width: 620px;
margin-right: 60px;
background-position: left bottom;
background-repeat: no-repeat;
text-align: center;
}
.noscale .logo {
width: 310px;
margin-right: 30px;
}
.logo form {
padding: 0;
margin: 0;
}
.logo .gwt-HTML {
margin: 60px 0 0 116px;
width: 300px;
height: 150px;
background-color: white;
border-radius: 6px;
}
.logo .gwt-HTML {
margin: 30px 0 0 58px;
width: 150px;
height: 75px;
}
.logo .inner {
padding: 30px 24px;
}
.noscale .logo .inner {
padding: 15px 12px;
}
#mailNotification .inner, #lessonPlanNotification .inner {
background-color: red;
border-radius: 10px;
z-index: 10;
padding: 10px;
font: 40px verdana, sans-serif;
font-weight: bold;
color: white;
}
.noscale #mailNotification .inner, .noscale #lessonPlanNotification .inner {
border-radius: 5px;
padding: 5px;
font: 20px verdana, sans-serif;
font-weight: bold;
}
.error, .error label {
color: #EE5030;
background-color: #551100;
}
.error a, .error a:link, .error a:visited, .error a:hover, .error a:active {
font-size: 14px !important;
font-weight: bold;
color: #EE5030;
border-bottom: 0.1em dotted #EE5030 !important;
text-decoration: none;
}
.error a:hover, .error a:active {
color: #DE4020;
border-bottom: 0.1em dotted #DE4020 !important;
text-decoration: none;
}
.large, .medium {
font-size: 80px;
font-weight: bold;
font-family: Verdana, sans-serif;
}
.noscale .large {
font-size: 40px;
}
.medium {
font-size: 40px;
}
.noscale .medium {
font-size: 20px;
}
#rightCount, #wrongCount, #speed, #accuracy, #time, #score, .big {
font-size: 120px;
font-weight: bold;
font-family: Verdana, sans-serif;
}
.noscale #rightCount, .noscale #wrongCount, .noscale #speed, .noscale #accuracy, .noscale #time, .noscale #score, .noscale .big {
font-size: 60px;
}
#time {
font-size: 80px;
color: #ccc;
}
.noscale #time {
font-size: 40px;
}
#score {
font-size: 80px;
color: #fff;
}
.noscale #score {
font-size: 40px;
}
#speed, #accuracy {
font-size: 40px;
color: #ddd;
text-align: center;
}
.noscale #speed, .noscale #accuracy {
font-size: 20px;
}
#speed .small, #accuracy .small {
font-size: 24px;
}
.noscale #speed .small, .noscale #accuracy .small {
font-size: 12px;
}
#rightCount {
color: #10AA30;
}
#wrongCount {
color: #AA3010;
}
#lessionName {
font-weight: bold;
font-family: Verdana, sans-serif;
font-size: 28px;
color: #aaa;
}
.noscale #lessionName {
font-size: 14px;
}
.characterBox-wrapper, .pictureBox-wrapper {
padding: 6px;
width: 340px;
background-color: #AACCEE;
border-radius: 10px;
}
.noscale .characterBox-wrapper, .noscale .pictureBox-wrapper {
padding: 3px;
width: 170px;
border-radius: 5px;
}
.characterBox, .pictureBox {
width: 340px;
height: 340px;
}
.noscale .characterBox, .noscale .pictureBox {
width: 170px;
height: 170px;
}
.character {
position: relative;
font-family: helvetica, arial, sans-serif;
font-size: 280px;
line-height: 380px;
font-weight: bold;
text-align: center;
color: white;
text-outline: 4px 4px black;
padding-top: 4px;
}
.noscale .character {
font-size: 140px;
line-height: 190px;
text-outline: 2px 2px black;
padding-top: 2px;
}
* html .character div {
position: absolute;
width: 170px;
margin-left: -55px;
filter: glow(color=#555555, strength=10);
}
.pictureBox {
background-position: center;
background-repeat: no-repeat;
background-size: 66%;
}
.keyboard {
position: relative;
margin-left: 60px;
margin-top: 40px;
}
.noscale .keyboard {
margin-left: 10px;
margin-top: 20px;
}
.key-wrapper {
float: left;
margin: 12px 16px 0 0;
border: 0.1em solid transparent !important;
background-color: #AACCEE;
border-radius: 8px;
transition: all 0.1s;
}
.noscale .key-wrapper {
margin: 6px 8px 0 0;
border-radius: 4px;
}
.keyboard .fade {
transition: all 1s;
}
.shiny {
position: absolute;
width: 60px;
height: 30px;
font-size: 0;
background-color: white;
filter:alpha(opacity=20);
opacity: 0.2;
border-radius: 10px;
}
.noscale .shiny {
width: 30px;
height: 15px;
border-radius: 5px;
}
.key {
width: 68px;
height: 74px;
overflow: hidden;
}
.noscale .key {
width: 34px;
height: 37px;
}
.key .upper, .key .lower, .key .middle, .key .special, .key .middle-special {
position: relative;
left: 16px;
font-family: helvetica, arial, sans-serif;
font-size: 28px;
font-weight: bolder;
line-height: 32px;
}
.noscale .key .upper, .noscale .key .lower, .noscale .key .middle, .noscale .key .special, .noscale .key .middle-special {
left: 8px;
font-size: 14px;
font-weight: bolder;
line-height: 16px;
}
.key .upper {
top: 2px;
}
.key .lower {
float: left;
top: 2px;
}
.noscale .key .upper, .noscale .key .lower {
top: 1px;
}
.key .middle {
left: 18px;
top: 12px;
}
.noscale .key .middle {
left: 9px;
top: 6px;
}
.key .special {
top: -4px;
margin-left: 20px;
float: left;
}
.noscale .key .special {
top: -2px;
margin-left: 10px;
}
.key .middle-special {
top: -4px;
margin-left: 28px;
}
.noscale .key .middle-special {
top: -2px;
margin-left: 14px;
}
.key .small {
font-family: arial;
font-size: 20px;
}
.noscale .key .small {
font-size: 8px;
}
.keyboard-border {
background: url(/images/keyboard-border.png);
width: 46px;
height: 88px;
position: absolute;
z-index: 5;
}
.scale .keyboard-border {
background-size: 100%;
margin-left: -45px;
top: -3px;
}
.noscale .keyboard-border {
margin-left: -3px;
top: 0px;
width: 23px;
height: 45px;
}
@supports (-moz-appearance:none) {
.scale .keyboard-border {
margin-left: -50px;
}
.noscale .keyboard-border {
margin-left: -10px;
}
}
.return-outer, .return2-outer {
position: relative;
width: 20px;
overflow: visible;
}
.noscale .return-outer, .noscale .return2-outer {
width: 10px;
}
.return2-outer {
width: 170px;
}
.noscale .return2-outer {
width: 85px;
}
.return-inner-wrapper {
position: absolute;
margin: 0;
top: -2px;
left: 14px;
border-top-left-radius: 0;
box-shadow: none;
}
.noscale .return-inner-wrapper {
top: -1px;
left: 7px;
margin: 0;
}
.return2-inner-wrapper {
position: absolute;
margin: 0;
width: 84px;
top: -96px;
left: 86px;
z-index: 0;
box-shadow: none;
}
.noscale .return2-inner-wrapper {
width: 42px;
top: -48px;
left: 43px;
}
.return-inner {
width: 84px;
height: 164px;
}
.noscale .return-inner {
width: 42px;
height: 82px;
}
.return-inner-2 {
transition: all 0.1s;
box-shadow: none !important;
}
.return2-inner-wrapper .return-inner {
height: 164px;
}
.noscale .return2-inner-wrapper .return-inner {
height: 82px;
}
.return-inner .shiny {
width: 84px;
}
.noscale .return-inner .shiny {
width: 42px;
}
.return-inner-2, .return2-inner-2 {
position: absolute;
background-color: #AACCEE;
top: 0;
left: 8px;
width: 50px;
height: 66px;
}
.noscale .return-inner-2, .noscale .return2-inner-2 {
left: 4px;
width: 25px;
height: 33px;
}
.return-inner-2 .shiny {
width: 50px;
height: 30px;
border-radius: 0;
}
.noscale .return-inner-2 .shiny {
width: 25px;
height: 15px;
}
.return2-inner-wrapper .shiny {
width: 84px;
}
.noscale .return2-inner-wrapper .shiny {
width: 42px;
}
.return-inner-2 .label, .return2-inner-2 .label {
position: absolute;
letter-spacing: -4px;
padding-top: 6px;
z-index: 4;
}
.noscale .return-inner-2 .label, .noscale .return2-inner-2 .label {
letter-spacing: -2px;
padding-top: 3px;
}
.return2-inner-2 {
left: 86px;
top: -14px;
width: 82px;
height: 22px;
}
.noscale .return2-inner-2 {
left: 43px;
top: -7px;
width: 41px;
height: 11px;
}
.return2-inner-2 .label {
padding-top: 32px;
left: 0px;
}
.noscale .return2-inner-2 .label {
padding-top: 16px;
}
.color-r {
border-color: #af4948;
background-color: #c29696;
}
.color-b {
border-color: #2b659d;
background-color: #81abc8;
}
.color-g {
border-color: #4f9b35;
background-color: #97c588;
}
.color-y {
border-color: #a7911f;
background-color: #c8bd86;
}
.color-w {
border-color: #939393;
background-color: #c3c3c3;
}
.color-wrong {
border-color: #6A0000 !important;
background-color: #AA3010 !important;
border-radius: 10px;
box-shadow: 0 0 20px #AA3010;
color: #eee;
}
.noscale .color-wrong {
border-radius: 20px;
}
.selected {
background-color: #EEEEEE !important;
box-shadow: 0 0 30px white;
}
.pressed-correct {
background-color: #10AA30 !important;
box-shadow: 0 0 30px #10AA30;
}
.pressed-wrong {
background-color: #AA3010 !important;
box-shadow: 0 0 30px #AA3010;
}
.pictureBox .shiny, .characterBox .shiny {
width: 340px;
height: 180px;
filter:alpha(opacity=10);
-moz-opacity: 0.1;
-khtml-opacity: 0.1;
opacity: 0.1;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.noscale .pictureBox .shiny, .noscale .characterBox .shiny {
width: 170px;
height: 90px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
* html .pictureBox .shiny, * html .characterBox .shiny {
margin-left: -85px;
}
* html .pictureBox .both {
margin-left: -170px;
}
* html .characterBox .both {
margin-left: 0px;
}
.wwa .pictureBox-wrapper {
width: 470px;
top: -40px;
margin: 0 -76px -70px -36px;
position: relative;
background-color: transparent !important;
border: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.noscale .wwa .pictureBox-wrapper {
width: 235px;
top: -20px;
margin: 0 -38px -35px -18px;
}
.wwa .pictureBox {
width: 470px;
height: 450px;
background-size: 100%;
}
.noscale .wwa .pictureBox {
width: 235px;
height: 225px;
}
.wwa .characterBox-wrapper {
top: 20px;
position: relative;
border-style: solid;
border-width: 28px;
width: 292px;
background-color: white !important;
box-shadow: 0 0 15px white, 5px 5px 5px black;
border-radius: 40px;
}
.noscale .wwa .characterBox-wrapper {
top: 10px;
border-width: 14px;
width: 146px;
box-shadow: 0 0 8px white, 3px 3px 3px black;
border-radius: 20px;
}
.wwa .characterBox {
width: 292px;
height: 292px;
}
.noscale .wwa .characterBox {
width: 146px;
height: 146px;
}
.wwa .character {
line-height: 290px;
}
.noscale .wwa .character {
line-height: 145px;
}
.wwa .color-r .character {
color: #00539d;
text-shadow: 0 0 20px #00539d;
}
.wwa .color-b .character {
color: #babcbf;
text-shadow: 0 0 20px #babcbf;
}
.wwa .color-g .character {
color: #ffca2a;
text-shadow: 0 0 20px #ffca2a;
}
.wwa .color-y .character {
color: #bf1e2d;
text-shadow: 0 0 20px #bf1e2d;
}
* html .wwa .character div {
filter: none;
}
.wwa .color-r {
border-color: #00539d;
background-color: #4d85b6;
}
.wwa .color-b {
border-color: #babcbf;
background-color: #bbbdc0;
}
.wwa .color-g {
border-color: #ffca2a;
background-color: #cfba6a;
}
.wwa .color-y {
border-color: #bf1e2d;
background-color: #c7727a;
}
.wwa .color-w {
border-color: #444;
background-color: #777;
}
.wwa .pictureBox .shiny, .wwa .characterBox .shiny {
display: none;
}
.highScores td, .trainingLog td, .highScores .gwt-Label, .trainingLog .gwt-Label {
color: white;
font-family: 'Asap-Regular',verdana, sans-serif;
font-size: 34px;
line-height: 30px;
font-weight: bold;
}
.noscale .highScores td, .noscale .trainingLog td, .noscale .highScores .gwt-Label, .noscale .trainingLog .gwt-Label {
font-size: 17px;
line-height: 15px;
}
.trainingLog .header, .highScores .header, .header {
font-size: 28px;
color: #cccccc;
}
.noscale .trainingLog .header, .noscale .highScores .header, .noscale .header {
font-size: 14px;
}
.trainingLog .newEntry, .highScores .newEntry, .newEntry {
color: #ddff77;
text-shadow: 0px 0px 15px #ddff77;
}
.trainingLog-separator {
width: 98%;
padding: 8px 0;
}
.trainingLog-separator div {
height: 4px;
font-size: 0;
background-color: #cccccc;
opacity: 0.5;
}
.nosclae .trainingLog-separator div {
height: 2px;
}
.prepareKeys {
position: absolute;
width: 500px;
margin-left: 20px;
clear: both;
}
.prepareKeys .color-r {
margin-top: 51px;
}
.prepareKeys .color-g {
margin-top: 10px;
}
.prepareKeys .color-y {
margin-top: 48px;
}
.hands {
float: none;
clear: both;
width: 500px;
}
.hands .left, .hands .right {
position: relative;
background-repeat: no-repeat;
float: left;
width: 206px;
height: 319px;
margin-top: -15px;
margin-bottom: -30px;
}
.hands .left {
margin-left: 30px;
}
.hands .right {
margin-left: 20px;
}
.dialogContent .gwt-PushButton {
position: relative;
z-index: 250;
}
.dialogContent .center {
text-align: center;
}
.textLine {
font-family: monospace;
font-size: 120px;
font-weight: bold;
text-align: center;
color: white;
text-outline: 4px 4px black;
width: 1280px;
height: 280px;
line-height: 140px;
overflow: hidden;
}
.noscale .textLine {
font-size: 60px;
text-outline: 2px 2px black;
width: 640px;
height: 140px;
line-height: 70px;
}
* html .textLine {
position: absolute;
margin-left: -300px;
filter: glow(color=#555555, strength=10);
}
.textLine .container {
margin-top: 60px;
width: 4000px;
}
.noscale .textLine .container {
margin-top: 30px;
width: 2000px;
}
.textLine .pre, .textLine .currentChar, .textLine .post {
height: 130px;
float: left;
}
.noscale .textLine .pre, .noscale .textLine .currentChar, .noscale .textLine .post {
height: 65px;
}
.textLine .return {
margin-bottom: 30px;
letter-spacing: -12px;
font-size: 36px;
width: 70px;
}
.noscale .textLine .return {
margin-bottom: 15px;
letter-spacing: -6px;
font-size: 18px;
width: 35px;
}
.textLine .currentChar {
border-width: 4px;
border-style: solid;
border-radius: 10px;
}
.noscale .textLine .currentChar {
border-width: 2px;
border-radius: 5px;
}
.textLine .current {
color: #000;
}
.textLine .pre {
color: #10AA30;
}
.textLine .post {
color: #eee;
}
.p-0 {
filter:alpha(opacity=20);
-moz-opacity:0.2;
-khtml-opacity: 0.2;
opacity: 0.2;
}
.p-1 {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
.p-2 {
filter:alpha(opacity=80);
-moz-opacity:0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
}
.textLine-small {
line-height: 44px;
font-family: monospace;
font-size: 38px;
font-weight: bold;
color: #ddd;
}
.noscale .textLine-small {
line-height: 22px;
font-size: 19px;
}
.textLine-small .current, .textLine-small .done, .textLine-small .coming,
.textLine-small .char, .textLine-small .return {
padding: 4px 0;
float: left;
}
.noscale .textLine-small .current, .noscale .textLine-small .done, .noscale .textLine-small .coming,
.noscale .textLine-small .char, .noscale .textLine-small .return {
padding: 2px 0;
}
.textLine-small .current {
padding: 0;
border-width: 4px;
border-style: solid;
border-radius: 4px;
color: #000;
}
.noscale .textLine-small .current {
border-width: 2px;
border-radius: 2px;
}
.textLine-small .done {
color: #10AA30;
}
.textLine-small .coming {
color: #eee;
}
.textLine-small .return {
margin-top: 8px;
margin-right: 2px;
font-size: 18px;
letter-spacing: -6px;
line-height: 20px;
}
.noscale .textLine-small .return {
margin-top: 4px;
margin-right: 1px;
font-size: 9px;
letter-spacing: -3px;
line-height: 10px;
}
#uservoice-feedback-tab {
filter:alpha(opacity=50);
opacity: 0.5;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border: none !important;
}
ins, .sponsor {
display: block !important;
}
ins, ins iframe, .sponsor iframe {
border-radius: 6px;
background-color: #eee;
}
.newFeature {
color: #dd3300;
}
.editorWrapper {
padding: 30px 20px 30px 60px;
}
.noscale .editorWrapper {
padding: 15px 10px 15px 30px;
}
.editorSection, .editorTextArea, .gwt-traction-input-shadow {
font-size: 30px;
font-family: "Courier New", Courier;
font-weight: bold;
padding: 10px;
}
.noscale .editorSection, .noscale .editorTextArea, .noscale .gwt-traction-input-shadow {
font-size: 15px;
padding: 5px;
}
.editorSection, .editorHomeworkId, .editorTeacherMessage {
border-radius: 6px;
}
.noscale .editorSection, .noscale .editorHomeworkId, .noscale .editorTeacherMessage {
border-radius: 3px;
}
.editorSection {
background-color: #eee;
word-wrap: break-word;
word-break: break-all;
}
.editorHomeworkId, .editorTeacherMessage {
background-color: #dde;
padding: 10px 20px;
margin: 40px 20px;
font: 22px arial;
text-align: center;
}
.noscale .editorHomeworkId, .noscale .editorTeacherMessage {
padding: 5px 10px;
margin: 20px 10px;
font: 11px arial;
}
.editorTeacherMessage {
background-color: #ea6;
}
.editorTextArea {
border: none;
background: transparent;
outline: none;
overflow: hidden;
resize: none;
padding: 0;
margin: 10px 0 0 10px;
}
.noscale .editorTextArea {
margin: 5px 0 0 5px;
}
.gwt-traction-input-shadow {
position: absolute;
padding: 0;
top: 0;
left: -4000px;
}
.lessonBoxBackground {
border: 1px solid #878e9c;
background: #a7aebc;
opacity: 0.3;
filter: alpha(opacity=30);
border-radius: 10px;
margin-top: -10px;
height: 180px;
position: absolute;
}
.noscale .lessonBoxBackground {
border-radius: 5px;
margin-top: -5px;
height: 90px;
}
.lessonBoxBackground.lastLesson {
background-color: #9be;
box-shadow: 0px 0px 5px #9be;
}
.lessonBox {
z-index: 10;
margin-top: 6px;
margin-bottom: 34px;
height: 170px;
position: relative;
}
.noscale .lessonBox {
margin-top: 3px;
margin-bottom: 17px;
height: 85px;
}
.lessonNumber, .lessonName, .lessonButton {
font-size: 180px;
font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
font-weight: normal;
color: white;
text-shadow: 1px 1px 3px #ccc,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
}
.noscale .lessonNumber, .noscale .lessonName, .noscale .lessonButton {
font-size: 90px;
}
.lessonNumber {
text-align: center;
letter-spacing: -30px;
margin: -4px 0 0 0;
line-height: 180px;
}
.noscale .lessonNumber {
letter-spacing: -15px;
margin: -2px 0 0 0;
line-height: 90px;
}
.lessonNumber.small {
font-size: 120px;
left: 320px;
}
.noscale .lessonNumber.small {
font-size: 60px;
left: 160px;
}
.lessonNumber.real {
letter-spacing: -22px;
font-size: 120px;
margin-left: -30px;
}
.noscale .lessonNumber.real {
letter-spacing: -11px;
font-size: 60px;
margin-left: -15px;
}
.lessonNumber.real.small {
font-size: 80px;
left: 410px;
}
.noscale .lessonNumber.real.small {
font-size: 40px;
left: 200px;
}
.lessonName {
font-size: 30px;
font-weight: bold;
margin-top: -6px;
width: 1000px;
height: 52px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.noscale .lessonName {
font-size: 15px;
margin-top: -3px;
width: 500px;
height: 21px;
}
.lessonButton {
box-shadow: 0px 0px 4px #e54;
margin-top: 0px;
margin-right: 30px;
width: 90px;
height: 90px;
font-size: 80px;
color: #eee;
line-height: 80px;
}
.noscale .lessonButton {
box-shadow: 0px 0px 2px #e54;
margin-top: 2px;
margin-right: 15px;
width: 45px;
height: 45px;
font-size: 40px;
line-height: 40px;
}
.lessonButton.lastLesson {
background-color: #9be;
box-shadow: 0px 0px 4px #9be;
}
.noscale .lessonButton.lastLesson {
box-shadow: 0px 0px 2px #9be;
}
.virgin {
opacity: 0.7;
filter: alpha(opacity=70);
}
.gwt-PushButton-up-hovering.lessonButton {
background: #dde;
box-shadow: 0px 0px 4px #fff;
}
.noscale .gwt-PushButton-up-hovering.lessonButton {
box-shadow: 0px 0px 2px #fff;
}
.lessonBoxBackground.hover {
opacity: 0.5;
filter: alpha(opacity=50);
}
.lessonButton.lessonPlan {
margin: 15px 0 0 15px;
background-color: rgba(140, 140, 160, 0.5);
background: linear-gradient(to bottom right, rgba(140, 140, 160, 0.6), rgba(140, 140, 160, 0.3));
box-shadow: none;
border: 1px solid #ccc;
text-align: left;
box-shadow: 0 0 5px rgba(255,255,255,0.5), 0 0 0px white, inset 0 0 5px rgba(255,255,255,0.5);
transition: all 0.2s ease-in-out;
transition: box-shadow text-shadow border-radius 0.4s ease-in-out;
}
.lessonButton .small {
font-size: 30px;
}
.noscale .lessonButton .small {
font-size: 15px;
}
.gwt-PushButton-up-hovering.lessonButton.lessonPlan {
background-color: rgba(140, 140, 160, 0.7);
border: 1px solid #ddd;
box-shadow: 0 0 20px white, 0 0 5px white, inset 0 0 15px white;
}
.lessonStars {
position: absolute;
margin-left: 115px;
top: -36px;
letter-spacing: 0;
}
.noscale .lessonStars {
margin-left: 48px;
top: -18px;
}
.lessonLocked {
background: url(/images/lock.png);
background-size: 100%;
opacity: 0.7;
position: absolute;
margin-left: 234px;
top: 80px;
width: 54px;
height: 64px;
}
.noscale .lessonLocked {
margin-left: 125px;
top: 7px;
width: 27px;
height: 32px;
}
.lessonBoxStars {
position: absolute;
margin-left: 15px;
top: 86px;
}
.noscale .lessonBoxStars {
margin-left: 7px;
top: 41px;
}
.lessonTooltip {
border: none;
background: transparent;
}
.lessonTooltip .content {
border-radius: 4px;
background: #fefefe;
padding: 8px 15px 15px 12px;
font: 13px arial;
}
.lessonTooltip .gameTitle {
font: bold 14px verdana, sans-serif;
margin-bottom: 10px;
}
.lessonTooltip .arrow {
position: relative;
left: 50%;
top: -2px;
margin-left: -10px;
width: 20px;
height: 20px;
background: url(/images/tooltip-arrow.png) no-repeat;
}
.dropdownBox {
cursor: pointer;
font-weight: normal;
}
.dropdownLabel, .dropdownArrow {
overflow: hidden;
white-space: nowrap;
float: left;
line-height: 62px;
}
.noscale .dropdownLabel, .noscale .dropdownArrow {
line-height: 31px;
}
.dropdownLabel {
background: rgb(130,130,130);
background: rgba(0,0,0,0.1);
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
padding-left: 5px;
}
.dropdownArrow {
background: rgb(150,150,150);
background: rgba(0,0,0,0.2);
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
text-align: center;
}
.dropdownBox:hover .dropdownLabel {
background: rgb(150,150,150);
background: rgba(0,0,0,0.2);
}
.dropdownBox:hover .dropdownArrow {
background: rgb(170,170,170);
background-color: rgba(0,0,0,0.3);
}
.gwt-PopupPanel.dropdownBox {
border: none;
border-radius: 3px;
background: rgb(250,250,250);
background: rgba(250,250,250,0.9);
}
.gwt-MenuBar.dropdownBox {
background: transparent;
color: #333;
text-align: left;
}
.gwt-MenuBar.dropdownBox .gwt-MenuItem-selected {
background: rgb(120,120,120);
background: rgba(0,0,0,0.6);
border-radius: 3px;
color: white;
}
.gwt-MenuBar.dropdownBox .gwt-MenuItem {
padding: 4px 16px;
cursor: pointer;
}
.noscale .gwt-MenuBar.dropdownBox .gwt-MenuItem {
padding: 2px 8px;
}
.mouseGrid-selected {
background: #aab;
background: rgba(255,255,255,0.3);
}
.rtl {
direction: rtl;
overflow-x: hidden;
}
.editorWrapper.rtl > div {
overflow-x: hidden !important;
}
.editorWrapper.rtl .gwt-traction-input-autosize {
text-align: right;
}
.rtl .editorSection {
text-align: right;
}
.editorTextArea {
padding-right: 1px;
}
.textLine.rtl .container > div, .textLine-small.rtl > div, .textLine-small.rtl > div > div {
float: right;
}
.none .color-r, .none .color-b, .none .color-g, .none .color-y, .none .color-w {
border-color: #111;
background-color: #333;
color: #fff;
text-shadow: 0 0 2px #eee;
}
.none .color-r .character, .none .color-b .character, .none .color-g .character, .none .color-y .character {
color: #eee;
text-shadow: 0 0 20px #eee;
}
.none .shiny {
filter:alpha(opacity=10);
opacity: 0.1;
}
.none .keyboard-border {
opacity: 0.7;
}
.none .selected {
color: #111;
box-shadow: 0 0 20px #eee;
}
.none .current {
color: #fff;
text-shadow: 0 0 2px #eee;
}
.hintInfoText, .hintInfoText td {
color: white;
text-align: center;
margin: 0 auto;
font-size: 40px;
}
.noscale .hintInfoText, .noscale .hintInfoText td {
font-size: 20px;
}
.hintInfoText b {
color: #bdc4d2;
padding: 0 15px;
}
.hintInfoText td {
text-align: left;
}
.hintInfoText td.c {
text-align: center;
}