@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;
}

body {
    color: white;
    cursor: default;
    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;
}

/*  Box shadow property does not work properly on Safari browser.
    This extra bit allows for shadow to function propertly.
    Added: 4-13-16 by Caleigh Campbell*/
img, canvas{
    border-radius: .1px;
}

/*Main Tutorial Windows*/
.tutorial{
    /*border: 2px solid #7C8F99;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;*/
    overflow: hidden;
    position: relative;
    text-align: center;
    /*visibility: hidden;*/
}
.mainscene {
    border: 2px solid #7C8F99;
    background: #fff;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    overflow: hidden;
    position: relative;
    text-align: center;
    visibility: hidden;
}

/*Loading Windows*/
.splashContainer {
    background-color: white;
    height: 100%;
    left: 0;
    position: absolute;
    text-align: center;
    top: 0; 
    /*transition: opacity 0.5s;
    -o-transition: opacity 0.5s;
    -webkit-transition: opacity 0.5s;*/
    width: 100%;
    z-index: 999;

    border: 2px solid #7C8F99;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.splashBackground {
    height: 284px;
    left: 50%;
    margin: -142px 0 0 -203px;
    position: absolute;
    top: 50%;
    width: 406px;
    z-index: 1;
}

.tutorialCanvas{
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 100%;
}

.splashBackgroundReverse {
    /*animation: fadeOut 0.2s ease-in 0s 1 normal forwards;
    -webkit-animation: fadeOut 0.2s ease-in 0s 1 normal forwards;*/
    opacity: 1;
}

.splashLogoImg{
    /*height: 284px;*/
    left: 0;
    margin: 0 auto;
    opacity: 0;
    position: absolute;
    top: 0;
    /*width: 406px;*/
    /*animation: fadeIn 0.3s ease-out 0.4s 1 normal forwards;
    -webkit-animation: fadeIn 0.3s ease-out 0.4s 1 normal forwards;*/
}

.microLogoImg{
    /*height: 284px;*/
    left: 22px;
    margin: 0 auto;
    opacity: 0;
    position: absolute;
    top: 100px;
    /*width: 406px;*/
    /*animation: fadeIn 0.3s ease-out 0.4s 1 normal forwards;
    -webkit-animation: fadeIn 0.3s ease-out 0.4s 1 normal forwards;*/
}

.nikonLogoImg{
    /*height: 284px;*/
    left: 160px;
    opacity: 0;
    position: absolute;
    top: 10px;
    /*width: 406px;*/
    /*animation: fadeIn 0.3s ease-out 0.4s 1 normal forwards;
    -webkit-animation: fadeIn 0.3s ease-out 0.4s 1 normal forwards;*/
}

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

@keyframes fadeOut {
    100%    {opacity: 0;}
}
@-webkit-keyframes fadeOut {
    100%    {opacity: 0;}
}
@keyframes logoTxtAnim {
    100% {top: 192px; opacity: 1;}
}

@-webkit-keyframes logoTxtAnim {
    100% {top: 192px; opacity: 1;}
}

/* - - - - - Load Bar - - - - - */
.loadBarContainer{
    /*animation: fadeIn 0.3s ease-out 1.1s 1 normal forwards;
    -webkit-animation: fadeIn 0.3s ease-out 1.1s 1 normal forwards;*/
    padding: 5px;
    background: #fff;
    border-radius: 5px;
    left: 50%;
    margin-left: -125px;
    position: absolute;
    opacity: 0;
    top: 220px;
}
.loadBarGloss{
    position: absolute;
    width: 240px;
    height: 20px;
    background: rgba(226,226,226,0.6);
    background: -moz-linear-gradient(top, rgba(226,226,226,0.6) 0%, rgba(219,219,219,0.5) 50%, rgba(99,99,99,0.5) 51%, rgba(33,33,33,0.5) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(226,226,226,0.6)), color-stop(50%, rgba(219,219,219,0.5)), color-stop(51%, rgba(99,99,99,0.5)), color-stop(100%, rgba(33,33,33,0.5)));
    background: -webkit-linear-gradient(top, rgba(226,226,226,0.6) 0%, rgba(219,219,219,0.5) 50%, rgba(99,99,99,0.5) 51%, rgba(33,33,33,0.5) 100%);
    background: -o-linear-gradient(top, rgba(226,226,226,0.6) 0%, rgba(219,219,219,0.5) 50%, rgba(99,99,99,0.5) 51%, rgba(33,33,33,0.5) 100%);
    background: -ms-linear-gradient(top, rgba(226,226,226,0.6) 0%, rgba(219,219,219,0.5) 50%, rgba(99,99,99,0.5) 51%, rgba(33,33,33,0.5) 100%);
    background: linear-gradient(to bottom, rgba(226,226,226,0.6) 0%, rgba(219,219,219,0.5) 50%, rgba(99,99,99,0.5) 51%, rgba(33,33,33,0.5) 100%);
}
.loadBar{
    width: 240px;
    height: 20px;
    border: 1px solid #000;
    background: #000;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    overflow: hidden;
}

.loadBarFill{
    width: 0;
    overflow: hidden;
}

.loadBarSkin{
    animation: barAnimate 0.3s linear infinite;
    -webkit-animation: barAnimate 0.3s linear infinite;
    width: 260px;
    height: 20px;

    background-size: 20px 20px;
    background-image: linear-gradient(-45deg, rgba(180, 220, 240, 1) 25%, transparent 25%, transparent 50%, rgba(180, 220, 240, 1) 50%, rgba(180, 220, 240, 1) 75%, transparent 75%, transparent);
    background-image: -moz-linear-gradient(-45deg, rgba(180, 220, 240, 1) 25%, transparent 25%, transparent 50%, rgba(180, 220, 240, 1) 50%, rgba(180, 220, 240, 1) 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient(-45deg, rgba(180, 220, 240, 1) 25%, transparent 25%, transparent 50%, rgba(180, 220, 240, 1) 50%, rgba(180, 220, 240, 1) 75%, transparent 75%, transparent);
    background-image: -webkit-linear-gradient(-45deg, rgba(180, 220, 240, 1) 25%, transparent 25%, transparent 50%, rgba(180, 220, 240, 1) 50%, rgba(180, 220, 240, 1) 75%, transparent 75%, transparent);
}

@keyframes barAnimate
{
from {margin-left: -20px;}
to {margin-left: 0;}
}

@-webkit-keyframes barAnimate 
{
from {margin-left: -20px;}
to {margin-left: 0px;}
}

/* - - - - End Load Bar - - - - - */

.splashText {
    color: #fff;
    font: bold 14px/1 Arial;
    position: absolute;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.75);
}

.splashTextLoad {
    /*animation: fadeIn 0.3s ease-out 1.1s 1 normal forwards;
    -webkit-animation: fadeIn 0.3s ease-out 1.1s 1 normal forwards;*/
    top: 254px;
    opacity: 0;
    width: 100%;
}

.splashLogoTxt{
    /*animation: logoTxtAnim 0.1s ease-out 0.8s 1 normal forwards;
    -webkit-animation: logoTxtAnim 0.1s ease-out 0.8s 1 normal forwards;*/
    top: 160px;
    left: 98px;
    background: white;
    font: bold 15px Arial;
    color: #445158;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, .2);
    opacity: 0;
    border-radius: 6px 6px 6px 6px;
    padding: 2px 10px 2px 10px;
}

/*Content Windows*/

.tutorialTitle {
    position: absolute;
    width: 100%; height: 36px;
    z-index: 1;
}
.tutorialTitleCanvas{
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 100%;
    
}
.tutorialTitleText{
    position: absolute;
    left: 0; top: 5px;
    /*width: 100%;*/
    text-align: center;
    color: #343E4E;
    font: bold 22px/1 Arial;
    text-shadow: 3px 3px 5px rgba(52, 62, 78, 0.2);
}

.mainWindow {
    background: #1b2021;
    background: -moz-linear-gradient(top,  #1b2021 0%, #384347 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1b2021), color-stop(100%,#384347));
    background: -webkit-linear-gradient(top,  #1b2021 0%,#384347 100%);
    background: -o-linear-gradient(top,  #1b2021 0%,#384347 100%);
    background: -ms-linear-gradient(top,  #1b2021 0%,#384347 100%);
    background: linear-gradient(to bottom,  #1b2021 0%,#384347 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1b2021', endColorstr='#384347',GradientType=0 );

    box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.5);
    border: solid 5px #D6E0E4;
    border-radius: 5px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.mainWindowContainer, .readOutText{
    background: rgba(255, 255, 255, .3);
    border: 1px solid rgba(255, 255, 255, .05);
    border-radius: 4px;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.specimenWindow {
    border: solid 4px #4A4F51;
    border-radius: 4px;
    background: #000;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
}

.specimenTitle{
    padding: 6px;
    background: #606465;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    color: #fff;
    font: bold 12px/1 Arial;
    text-align: center;
    position: relative;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    line-height: 1;
}

.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;
}

.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;
}

.labelText {
    color: #000;
    text-align: center;
    font: bold 12px/1 Arial;
    line-height: 1;
}

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

.readOutText {
    color: white;
    font: 700 16px/1 Arial;
    padding: 4px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.infoText {
    font-weight: 300;
}

.graphText {
    color: #333;
}

.graphUnitText {
    font-size: 11px;
}

.controlBackContainer{
    position: absolute;
    width: 100%;
    bottom: 0;
    background: rgb(124,143,153); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(124,143,153,1) 0%, rgba(71,85,90,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(124,143,153,1)), color-stop(100%,rgba(71,85,90,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(124,143,153,1) 0%,rgba(71,85,90,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(124,143,153,1) 0%,rgba(71,85,90,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(124,143,153,1) 0%,rgba(71,85,90,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(124,143,153,1) 0%,rgba(71,85,90,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7c8f99', endColorstr='#47555a',GradientType=0 ); /* IE6-9 */
}

.controlBack {
    background-color: rgba(62, 73, 78, 0.75);
    border-radius: 5px;
    padding: 8px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.75);
    vertical-align: middle;
    display: inline-block;
    margin: 12px 3px;
}

.controlText {
    color: #fff;
    font: bold 12px/1 Arial;
    text-align: center;
    position: relative;
    display: block;
    margin-bottom: 5px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    line-height: 1;
}

.whiteText {
    color: #fff;
    font: bold 12px/1 Arial;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    line-height: 1;
}

.grayText {
    color: #999;
    font: bold 12px/1 Arial;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0,0,0,0.75);
    line-height: 1;
}

.blackText {
    color: #000;
    font: bold 12px/1 Arial;
    text-align: center;
    text-shadow: 0 1px 2px rgba(255,255,255,0.25);
    line-height: 1;
}

.unitText {
    color: #7b899a;
}

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

/*-------------- NikSlider Styles -----------------*/
.slider {
    cursor: pointer;
    height: 30px;
    width: 150px;

    /*-webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;*/

    -o-transition: opacity 0.25s linear;
    -webkit-transition: opacity 0.25s linear;
    transition: opacity 0.25s linear;
}

.verticalSlider {
    height: 150px;
    width: 30px;
}

.sliderTrack {
    background-color: #445155;
    /*border: 1px solid rgba(0, 0, 0, 0.5);*/
    border-top: 1px solid rgba(0, 0, 0, 0.5);
    border-bottom: 1px solid rgba(186, 212, 220, 0.5);
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5);
    border-radius: 6px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 12px;
    left: 0;
    position: absolute;
    top: 9px;
    width: 100%;
    padding: 0 10px;
}

.verticalSlider .sliderTrack {
    /*border-top: 1px solid rgba(0, 0, 0, 0.5);
    border-bottom: 1px solid rgba(186, 212, 220, 0.5);*/

    height: 100%;
    left: 9px;
    top: 0;
    width: 12px;
    padding: 10px 0;
}

.sliderTrackThresh  {
    background: #000000;
    background: -moz-linear-gradient(top,  #000000 0%, #556666 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#556666));
    background: -webkit-linear-gradient(top,  #000000 0%,#556666 100%);
    background: -o-linear-gradient(top,  #000000 0%,#556666 100%);
    background: -ms-linear-gradient(top,  #000000 0%,#556666 100%);
    background: linear-gradient(to bottom,  #000000 0%,#556666 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#556666',GradientType=0 );

    height: 2px;
    margin: 5px auto;
}

.verticalSlider .sliderTrackThresh  {
    background: #000000; /* Old browsers */
    background: -moz-linear-gradient(right,  #000000 0%, #556666 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, right top, left top, color-stop(0%,#000000), color-stop(100%,#556666)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(right,  #000000 0%,#556666 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(right,  #000000 0%,#556666 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(right,  #000000 0%,#556666 100%); /* IE10+ */
    background: linear-gradient(to left,  #000000 0%,#556666 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#556666',GradientType=1 ); /* IE6-9 */

    height: 100%;
    width: 2px;
    margin: 0 5px;
}

.sliderHandleBorder {
    background: #333c3a;
    background: -moz-linear-gradient(top,  #333c3a 0%, #000000 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#333c3a), color-stop(100%,#000000));
    background: -webkit-linear-gradient(top,  #333c3a 0%,#000000 100%);
    background: -o-linear-gradient(top,  #333c3a 0%,#000000 100%);
    background: -ms-linear-gradient(top,  #333c3a 0%,#000000 100%);
    background: linear-gradient(to bottom,  #333c3a 0%,#000000 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333c3a', endColorstr='#000000',GradientType=0 );

    height: 30px;
    left: 0;
    position: absolute;
    top: 0;
    width: 10px;
}

.verticalSlider .sliderHandleBorder {
    background: #333c3a;
    background: -moz-linear-gradient(right,  #333c3a 0%, #000000 100%);
    background: -webkit-gradient(linear, right top, left top, color-stop(0%,#333c3a), color-stop(100%,#000000));
    background: -webkit-linear-gradient(right,  #333c3a 0%,#000000 100%);
    background: -o-linear-gradient(right,  #333c3a 0%,#000000 100%);
    background: -ms-linear-gradient(right,  #333c3a 0%,#000000 100%);
    background: linear-gradient(to left,  #333c3a 0%,#000000 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333c3a', endColorstr='#000000',GradientType=1 );

    height: 10px;
    width: 30px;
}

.sliderHandleTween {
    /*transition: transform 0.1s ease-in;
    -o-transition: -o-transform 0.1s ease-in;
    -webkit-transition: -webkit-transform 0.1s ease-in;
    -webkit-backface-visibility: hidden;*/
}

.sliderHandleFill {
    height: 26px;
    left: 2px;
    position: absolute;
    top: 2px;
    width: 6px;
}

.verticalSlider .sliderHandleFill {
    height: 6px;
    width: 26px;
}

.sliderHandleSpectrumCanvas {
    border: ridge 1px #D7DCDE;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.sliderHandleFillUp {
    background: rgb(218,223,224); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(218,223,224,1) 0%, rgba(125,154,181,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(218,223,224,1)), color-stop(100%,rgba(125,154,181,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(218,223,224,1) 0%,rgba(125,154,181,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(218,223,224,1) 0%,rgba(125,154,181,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(218,223,224,1) 0%,rgba(125,154,181,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(218,223,224,1) 0%,rgba(125,154,181,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dadfe0', endColorstr='#7d9ab5',GradientType=0 ); /* IE6-9 */
}

.verticalSlider .sliderHandleFillUp {
    background: rgb(125,154,181);
    background: -moz-linear-gradient(right,  rgba(218,223,224,1) 0%, rgba(125,154,181,1) 100%);
    background: -webkit-gradient(linear, right top, left top, color-stop(0%,#fff), color-stop(100%,rgba(125,154,181,1)));
    background: -webkit-linear-gradient(right,  rgba(218,223,224,1) 0%,rgba(125,154,181,1) 100%);
    background: -o-linear-gradient(right,  rgba(218,223,224,1) 0%,rgba(125,154,181,1) 100%);
    background: -ms-linear-gradient(right,  rgba(218,223,224,1) 0%,rgba(125,154,181,1) 100%);
    background: linear-gradient(to left,  rgba(218,223,224,1) 0%,rgba(125,154,181,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(218,223,224,1)', endColorstr='rgba(125,154,181,1)',GradientType=1 );
}

.sliderHandleFillDown {
    background: rgb(255,255,145); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(255,255,145,1) 0%, rgba(255,205,9,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,145,1)), color-stop(100%,rgba(255,205,9,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(255,255,145,1) 0%,rgba(255,205,9,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(255,255,145,1) 0%,rgba(255,205,9,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(255,255,145,1) 0%,rgba(255,205,9,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(255,255,145,1) 0%,rgba(255,205,9,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffff91', endColorstr='#ffcd09',GradientType=0 ); /* IE6-9 */
}

.verticalSlider .sliderHandleFillDown {
    background: rgb(255,205,9);
    background: -moz-linear-gradient(right,  rgba(255,255,145,1) 0%, rgba(255,205,9,1) 100%);
    background: -webkit-gradient(linear, right top, left top, color-stop(0%,#ffffff), color-stop(100%,rgba(255,205,9,1)));
    background: -webkit-linear-gradient(right,  rgba(255,255,145,1) 0%,rgba(255,205,9,1) 100%);
    background: -o-linear-gradient(right,  rgba(255,255,145,1) 0%,rgba(255,205,9,1) 100%);
    background: -ms-linear-gradient(right,  rgba(255,255,145,1) 0%,rgba(255,205,9,1) 100%);
    background: linear-gradient(to left,  rgba(255,255,145,1) 0%,rgba(255,205,9,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(255,255,145,1)', endColorstr='rgba(255,205,9,1)',GradientType=1 );
}

.sliderHandleFillHover {
    background: #FFEC44;
    background: -moz-linear-gradient(top,  #ffffff 0%, #FFEC44 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#FFEC44));
    background: -webkit-linear-gradient(top,  #ffffff 0%,#FFEC44 100%);
    background: -o-linear-gradient(top,  #ffffff 0%,#FFEC44 100%);
    background: -ms-linear-gradient(top,  #ffffff 0%,#FFEC44 100%);
    background: linear-gradient(to bottom,  #ffffff 0%,#FFEC44 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#FFEC44',GradientType=0 );
}

.verticalSlider .sliderHandleFillHover {
    background: #FFEC44;
    background: -moz-linear-gradient(right,  #ffffff 0%, #FFEC44 100%);
    background: -webkit-gradient(linear, right top, left top, color-stop(0%,#ffffff), color-stop(100%,#FFEC44));
    background: -webkit-linear-gradient(right,  #ffffff 0%,#FFEC44 100%);
    background: -o-linear-gradient(right,  #ffffff 0%,#FFEC44 100%);
    background: -ms-linear-gradient(right,  #ffffff 0%,#FFEC44 100%);
    background: linear-gradient(to left,  #ffffff 0%,#FFEC44 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#FFEC44',GradientType=1 );
}

.sliderHandleSpectrumCanvas {
    left: 2px;
    position: absolute;
    top: 2px;
}

/*-------------- NikRadioGroup Styles -------------*/
.button {
    background: rgb(221,221,221); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(221,221,221,1) 0%, rgba(191,191,191,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(221,221,221,1)), color-stop(100%,rgba(191,191,191,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(221,221,221,1) 0%,rgba(191,191,191,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(221,221,221,1) 0%,rgba(191,191,191,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(221,221,221,1) 0%,rgba(191,191,191,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(221,221,221,1) 0%,rgba(191,191,191,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dddddd', endColorstr='#bfbfbf',GradientType=0 ); /* IE6-9 */
    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);*/
}

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

.buttonText {
    color: #222;
    font: bold 12px Arial;
    position: absolute;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.5); 
    text-align: center;
    width: 100%;
}

.buttonDown {
    background: rgb(191,191,191); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(191,191,191,1) 0%, rgba(221,221,221,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(191,191,191,1)), color-stop(100%,rgba(221,221,221,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(191,191,191,1) 0%,rgba(221,221,221,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(191,191,191,1) 0%,rgba(221,221,221,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(191,191,191,1) 0%,rgba(221,221,221,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(191,191,191,1) 0%,rgba(221,221,221,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfbfbf', endColorstr='#dddddd',GradientType=0 ); /* IE6-9 */
}

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

.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;
}

.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;
}

/*-------------- NikRadioGroup Styles -------------*/
.radioGroup {
    background-color: #AEAEAE;
    border: solid 2px #AEAEAE;
    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;
}

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

    color: #222;
    font: bold 12px Arial;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
    text-align: center;
}

.horizontalRadioGroup {
    float: left;
}

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

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

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

.verticalRadioGroup {
    float: none;
}

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

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

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

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

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

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

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

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

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

.loader{
    overflow: hidden;
    border-radius: 25px;
    box-shadow: 0px 1px 1px rgba(0,0,0,1);
    padding: 6px 26px;
    color: #fff;
    font: bold 14px Arial;
    text-shadow: 0px 1px 1px rgba(0,0,0,0.75);

    background: rgb(101,116,117);
    background: -moz-linear-gradient(top,  rgba(101,116,117.0.5) 0%, rgba(141,152,153.0.5) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(101,116,117.0.5)), color-stop(100%,rgba(141,152,153.0.5)));
    background: -webkit-linear-gradient(top,  rgba(101,116,117.0.5) 0%,rgba(141,152,153.0.5) 100%);
    background: -o-linear-gradient(top,  rgba(101,116,117.0.5) 0%,rgba(141,152,153.0.5) 100%);
    background: -ms-linear-gradient(top,  rgba(101,116,117.0.5) 0%,rgba(141,152,153.0.5) 100%);
    background: linear-gradient(to bottom,  rgba(101,116,117.0.5) 0%,rgba(141,152,153.0.5) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#657475', endColorstr='#8d9899',GradientType=0 );

    transition: opacity 0.2s linear;
    -o-transition: opacity 0.2s linear;
    -webkit-transition: opacity 0.2s linear;
}