@charset "utf-8";

/*CSS Reset. 
http://meyerweb.com/eric/tools/css/reset/ 
v2.0 | 20110126
License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

html {
    height: 100%;
}

body {
    color: white;
    cursor: default;
    height:100%;
    overflow: hidden;
    position: relative;

    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    user-select: none;

    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
}

/*  The folling hover style is used in conjunction with some javascript to fix
    bubbling on the mouseout event, which should should only be fired upon
    leaving the body.  */
body:hover {
    outline: 0px dashed transparent;
}

/*Main Tutorial Windows*/
.ml-mainscene,
.mainscene {
    overflow: hidden;
    position: relative;
    text-align: center;
    visibility: hidden;
}

/*Loading Windows*/
#splashContainer {
    display: table;
    height: 100%;
    left: 0px;
    position: absolute;
    text-align: center;
    top: 0px; 
    transition: opacity 0.5s;
    -o-transition: opacity 0.5s;
    -webkit-transition: opacity 0.5s;
    width: 100%; 
    z-index: 100;
}

.splashBackground {
    background-color: white;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    z-index: 1;
}

.splashLogo {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    padding: 0 30px;
    width: 100%;
}

@keyframes fadeIn {
    100%    {opacity: 1;}
}
@-webkit-keyframes fadeIn {
    100%    {opacity: 1;}
}

.splashLoadBarContainer,
.splashTextLoad {
    animation: fadeIn 0.25s ease-out 2.4s 1 normal forwards;
    -webkit-animation: fadeIn 0.25s ease-out 2.4s 1 normal forwards;
}

.splashLoadBarContainer {
    display: inline-block;
    position: relative;
    background-color: white;
    width: 244px; 
    height: 19px;
    border: 3px solid #000;
    margin-top: 25px;
    opacity: 0;
}

.splashLoadBar {
    margin: 2px;
    background-color: #A6CE39;
    height: 15px;
    width: 0px;

    -webkit-transition: width 0.25s;
    transition: width 0.25s;
}

.splashText {
    color: #000;
    font: bold 14px/1 Arial;
    text-shadow: 0 0 3px rgba(51, 51, 51, 0.35);
}

.splashTextLoad {
    display: block;
    margin-top: 20px;
    opacity: 0;
}

/*Content Windows*/
.ml-tutorialTitle,
.tutorialTitle {
    background-color: white;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
    color: #333;
    display: inline-block;
    font: bold 22px/1 Arial;
    padding: 6px 14px 9px 14px;
    position: relative;
    text-align: center;
    text-shadow: 3px 3px 5px rgba(51,51,51,.3);
}

.ml-controlBack,
.controlBack {
    /*background-color: rgba(148, 164, 176, 0.25);
    border-radius: 8px;*/

    /*box-shadow: 0 0 3px #555;*/
}

.ml-mainWindow, .ml-readOutText,
.mainWindow, .readOutText {
    background-image: linear-gradient(#1f4250, #081014);
    background-image: -moz-linear-gradient(#1f4250, #081014);
    background-image: -o-linear-gradient(#1f4250, #081014);
    background-image: -webkit-linear-gradient(#1f4250, #081014);
    border: solid 3px #bec7cd;
    border-radius: 5px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.ml-whiteWindow,
.whiteWindow {
    /*box-shadow: 0 0 3px #555;*/
    margin: 20px;
    position: absolute;
}

.ml-specimenWindow,
.specimenWindow {
    background-color: black;
    border: solid 2px #d9dce1;
    box-shadow: 0 0 10px black;
}

.ml-specimenWindow2,
.specimenWindow2 {
    background-color: black;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.35);
}

.ml-keyInfoWindow,
.keyInfoWindow {
    background-image: linear-gradient(
        rgba(210, 0, 0, 0.75), rgba(110, 0, 0, 0.75));
    background-image: -moz-linear-gradient(
        rgba(210, 0, 0, 0.75), rgba(110, 0, 0, 0.75));
    background-image: -o-linear-gradient(
        rgba(210, 0, 0, 0.75), rgba(110, 0, 0, 0.75));
    background-image: -webkit-linear-gradient(
        rgba(210, 0, 0, 0.75), rgba(110, 0, 0, 0.75));
    border-radius: 8px;
    box-shadow: 0 0 10px black;
    position: absolute;
}

.ml-keyReadOutBox,
.keyReadOutBox{
    background-image: linear-gradient(left,
        rgba(210, 0, 0, 0.75), rgba(110, 0, 0, 0.75));
    background-image: -moz-linear-gradient(left,
        rgba(210, 0, 0, 0.75), rgba(110, 0, 0, 0.75));
    background-image: -o-linear-gradient(left,
        rgba(210, 0, 0, 0.75), rgba(110, 0, 0, 0.75));
    background-image: -webkit-linear-gradient(left,
        rgba(210, 0, 0, 0.75), rgba(110, 0, 0, 0.75));
    border-radius: 8px;
    box-shadow: 0 0 2px white,
                0 0 2px black;
    position: absolute;
}

.ml-labelText,
.labelText {
    color: black;
    position: absolute;
    font: bold 12px Helvetica;
    line-height: 1;
}

.ml-windowText,
.windowText {
    color: #d9dce1;
    text-shadow: 0 0 3px rgba(51, 51, 51, 0.5);
}

.ml-readOutText,
.readOutText {
    color: white;
    font: 700 16px/1 Arial; 
    height: 30px;
    padding: 4px 3px 0 0;
    text-align: right;
}

.ml-infoText,
.infoText {
    font-weight: 300;
}

.ml-graphText,
.graphText {
    color: #333;
}

.ml-graphUnitText,
.graphUnitText {
    font-size: 11px;
}

.ml-controlText,
.controlText {
    color: #000;
    font: bold 12px/1 Helvetica;
    padding: 3px;
    text-align: center;
    position: relative;
    display: block;
    margin: 5px;
}

.ml-unitText,
.unitText {
    color: #7b899a;
}

/*-------------- MlComponent Styles -----------------*/
.webkitMaskOverflowFix {
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);    
}

/*-------------- MlSlider Styles -----------------*/
.ml-slider,
.slider {
    cursor: pointer;
    height: 30px;
    transition: opacity 0.25s linear;
    -o-transition: opacity 0.25s linear;
    -webkit-transition: opacity 0.25s linear;
}

.ml-sliderTrackBorder,
.sliderTrackBorder {
    background-color: #ccc;
    border: 1px solid rgba(0, 0, 0, 0.5);
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5);
    height: 6px;
    left: 0;
    position: absolute;
    top: 11px;
}

.ml-sliderTrackThresh,
.sliderTrackThresh  {
    background-color: #ccc;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.ml-sliderHandleBorderUp,
.sliderHandleBorderUp {
    background-color: #A6CE39;
    border: solid 1px #709A00;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    height: 30px;
    left: -1px;
    position: absolute; 
    top: 0;
    width: 8px;
}

.nl-sliderHandleTween,
.sliderHandleTween {
    transition: transform 0.1s ease-in;
    -o-transition: -o-transform 0.1s ease-in;
    -webkit-transition: -webkit-transform 0.1s ease-in;
}

.ml-sliderHandleBorderDown,
.sliderHandleBorderDown {
    /*background-color: #91BC20;*/
}

/*-------------- MlRadioGroup Styles -------------*/
.ml-button,
.button {
    background-color: #A6CE39;
    border-radius: 5px;
    height: 30px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    cursor: pointer;
    transition: opacity 0.25s linear;
    -o-transition: opacity 0.25s linear;
    -webkit-transition: opacity 0.25s linear;
}

.button:hover {
    /*text-shadow: 0 1px 0 rgba(255,255,255,1);*/
}

.ml-buttonOver,
.buttonOver {
    text-shadow: 0 0 5px rgba(255,255,255,1);
}

.ml-buttonText,
.buttonText {
    color: #445D00;
    font: bold 12px Helvetica;
    position: absolute;
    /*text-shadow: 0 1px 0 rgba(255,255,255,0.1);*/
    text-align: center;
    width: 100%;
}

.ml-buttonDown,
.buttonDown {
    background-color: #91BC20;
}

.ml-buttonCrater,
.buttonCrater {
    background-color: #e1ffeb;
    border-radius: 7px;
    height: 14px;
    left: 0;
    position: absolute;
    top: 0;
    width: 14px;
}

.ml-buttonCrater:after,
.buttonCrater:after {
    background-image: radial-gradient(#029801, #32482f);
    background-image: -moz-radial-gradient(#029801, #32482f);
    background-image: -o-radial-gradient(#029801, #32482f);
    background-image: -webkit-radial-gradient(#029801, #32482f);
    border-radius: 5px;
    content: '';
    height: 10px;
    left: 2px;
    position: absolute;
    top: 2px;
    width: 10px;
}

.ml-buttonLight,
.buttonLight {
    background-image: radial-gradient(#f2f4f5 1px, #00ff00);
    background-image: -moz-radial-gradient(#f2f4f5 1px, #00ff00);
    background-image: -o-radial-gradient(#f2f4f5 1px, #00ff00);
    background-image: -webkit-radial-gradient(#f2f4f5 1px, #00ff00);
    border-radius: 5px;
    box-shadow: 0 0 8px #00ff00, 0 0 8px #00ff00;
    height: 10px;
    left: 2px;
    opacity: 0;
    position: absolute;
    top: 2px;
    transition: opacity 0.1s linear;
    -o-transition: opacity 0.1s linear;
    -webkit-transition: opacity 0.1s linear;
    width: 10px;
    z-index: 1;
}

/*-------------- MlRadioGroup Styles -------------*/
.ml-radioGroup,
.radioGroup {
    background-color: #91BC20;
    border: solid 2px #91BC20;
    border-radius: 5px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    display: inline-block;
    overflow: hidden;
    transition: opacity 0.25s linear;
    -o-transition: opacity 0.25s linear;
    -webkit-transition: opacity 0.25s linear;
}

.ml-radioButton,
.radioButton {
    background-color: #A6CE39;
    clip: rect(0, 100%, 100%, 0);
    cursor: pointer;
    display: table;
    margin: 0;
    position: relative;

    color: #445D00;
    font: bold 12px Helvetica;
    text-align: center;
    /*text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);*/
}

.ml-horizontalRadioGroup,
.horizontalRadioGroup {
    float: left;
}

.ml-horizontalRadioGroup:first-child,
.horizontalRadioGroup:first-child {
    border-radius: 3px 0 0 3px;
}

.ml-horizontalRadioGroup:last-child,
.horizontalRadioGroup:last-child {
    border-radius: 0 3px 3px 0;
}

.ml-horizontalRadioGroup:nth-child(n+2),
.horizontalRadioGroup:nth-child(n+2) {
    margin: 0 0 0 1px;
}

.ml-verticalRadioGroup,
.verticalRadioGroup {
    float: none;
}

.ml-verticalRadioGroup:first-child,
.verticalRadioGroup:first-child {
    border-radius: 4px 4px 0 0;
}

.ml-verticalRadioGroup:last-child,
.verticalRadioGroup:last-child {
    border-radius: 0 0 4px 4px;
}

.ml-verticalRadioGroup:nth-child(n+2),
.verticalRadioGroup:nth-child(n+2) {
    margin: 1px 0 0 0;
}

.ml-radioButton > *,
.radioButton > * {
    display: table-cell;
    padding: 0;
    vertical-align: middle;
}

.ml-radioButtonSelected,
.radioButtonSelected {
    background-color: #91BC20;
    cursor: default;
    box-shadow: inset 0px 1px 8px 0px rgba(0, 0, 0, 0.75);
    -webkit-box-shadow: inset 0px 1px 8px 0px rgba(0, 30, 0, 0.75);
}

.ml-horizontalRadioGroup.radioButtonSelected:first-child,
.horizontalRadioGroup.radioButtonSelected:first-child {
    box-shadow: inset 1px 1px 8px 0px rgba(0, 0, 0, 0.75);
    -webkit-box-shadow: inset 1px 1px 8px 0px rgba(0, 30, 0, 0.75);
}

.ml-horizontalRadioGroup.radioButtonSelected:last-child,
.horizontalRadioGroup.radioButtonSelected:last-child {
    box-shadow: inset -1px 1px 8px 0px rgba(0, 0, 0, 0.75);
    -webkit-box-shadow: inset -1px 1px 8px 0px rgba(0, 30, 0, 0.75);
}

.ml-colorBoxContainer,
.colorBoxContainer{
    box-shadow: 0 0 3px #555;
    position: absolute;
    left: 10px; top: 10px;
    width: 51px; height: 51px;
}

.ml-colorBtn,
.colorBtn{
    cursor: pointer;
    float: left;
    width: 20px; height: 20px;
    margin: 1px 0 0 1px;
    border-radius: 50%;
}