/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
    Main
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */
body, div, li, span, textarea {
    padding: 0;
    margin: 0;
    -webkit-backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
}
body {
    background:
        radial-gradient(rgba(255,255,255,0.02) 55%, transparent 20%) 5px 6px,
        radial-gradient(rgba(255,255,255,0.08) 5%, transparent 20%) 0 1px;
    background:
        -webkit-radial-gradient(
            rgba(255,255,255,0.02) 55%, transparent 20%
        ) 5px 6px,
        -webkit-radial-gradient(
            rgba(255,255,255,0.08) 5%, transparent 20%
        ) 0 1px;
    background-color: rgba(30,30,32,1.0);
    background-size: 10px 10px;
    transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
}
.light-glow {
    position: absolute;
    bottom: 240px;
    right: 37.5%;
    width: 25%;
    height: 0px;
    border-radius: 500px;
    box-shadow: 0px 0px 300px 300px rgba( 255, 255, 255, 0.1 );
}
.pubnub-status {
    font-family: "Helvetica Neue";
    font-weight: 100;
    font-size: 70px;
    color: #fffffe;
    text-align: center;
    text-shadow: 1px 1px 20px rgba( 255, 255, 255, 0.4 );
    -webkit-transform-origin: 50% 20px 100px;
}
.github-logo {
    cursor: pointer;
    position: absolute;
    opacity: 0.5;
    top: 20px;
    left: 20px;
    background-image: url(github.png);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 50px;
    height: 50px;
}
.pubnub-logo,
.pubnub-logo-glow {
    cursor: pointer;
    position: absolute;
    top: 40px;
    right: 40px;
    background-image: url(pubnub.png);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 98px;
    height: 22px;
}
.pubnub-logo-glow {
    -webkit-filter: blur(20px);
}

/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
    Meter
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */
.pubnub-meter-icon {
    position: absolute;
    top: -60px;
    right: 0;
    display: inline-block;
    margin: 0 0 50px 30px;
    text-align: center;
    font-size: 24px;
    width: 50px;
    color: rgba( 255, 255, 255, 0.9 );;
    text-shadow:
        0px -5px  2px rgba( 0, 0, 0, 0.1 ),
        0px -5px  8px rgba( 0, 0, 0, 0.2 ),
        0px -5px 20px rgba( 0, 0, 0, 0.6 );
}
.pubnub-margin-top {
    padding-top: 180px;
}
.pubnub-meter-container {
    position: relative;
    margin: 0 auto;
    width: 446px;
    height: 440px;
}
.pubnub-meter {
    position: relative;
    display: inline-block;
    margin-left: 30px;
    width: 50px;
    height: 300px;
}
.pubnub-meter-reflect {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 300px;
    -webkit-box-reflect: below 0px -webkit-gradient(
        linear,
        left top,
        left bottom,
        from(rgba(255,255,255,0.0)),
        color-stop(60%, rgba(255,255,255,0.0)),
        to(rgba(255,255,255,0.3))
    );
}

.pubnub-meter-base {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background-color: #101010;
    box-shadow: 0 0 10px 1px rgba( 0, 0, 5, 0.2 );
}

.pubnub-meter-bar,
.pubnub-meter-bar-back,
.pubnub-meter-bar-grid {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 30px;
}
.pubnub-meter-bar-back {
    height: 280px;
    background-color: #33333f;
}
.pubnub-meter-bar {
    background-color: #02a7ff;
    height: 0%;

    box-shadow:
              0 -10px 20px 1px rgba( 17, 170, 255, 0.4 ),
              0   0   40px 1px rgba( 17, 170, 255, 0.3 ),
              0   0   20px 1px rgba( 17, 170, 255, 0.1 );

    -webkit-transition: height 0.5s;
    -moz-transition:    height 0.5s;
    -ms-transition:     height 0.5s;
    -o-transition:      height 0.5s;
    transition:         height 0.5s;

    -webkit-transition-timing-function: ease-in-out;
    -moz-transition-timing-function:    ease-in-out;
    -ms-transition-timing-function:     ease-in-out;
    -o-transition-timing-function:      ease-in-out;
    transition-timing-function:         ease-in-out;

}
.pubnub-meter-bar-grid {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 30px;
    height: 280px;

    background-image:
        linear-gradient(  0deg, transparent 60%, rgba(0,0,0,0.7) 40% ),
        linear-gradient( 90deg, transparent 82%, rgba(0,0,0,0.7) 18% );

    background-image:
        -webkit-linear-gradient(  0deg, transparent 80%, rgba(0,0,0,0.7) 20% ),
        -webkit-linear-gradient( 90deg, transparent 60%, rgba(0,0,0,0.7) 40% );
    background-size: 17px 5px;
}


/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
    Animations
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */
.dropin1, .dropin2, .dropin3, .dropin4, .dropin5,
.dropin6, .dropin7, .dropin8, .dropin9, .dropin10 {
    -webkit-animation: dropin 1s 1 normal ease-in-out;
    -moz-animation:    dropin 1s 1 normal ease-in-out;
    -ms-animation:     dropin 1s 1 normal ease-in-out;
    -o-animation:      dropin 1s 1 normal ease-in-out;
    animation:         dropin 1s 1 normal ease-in-out;
}
.dropin1  { -webkit-animation-duration: 0.5s; }
.dropin2  { -webkit-animation-duration: 0.6s; }
.dropin3  { -webkit-animation-duration: 0.7s; }
.dropin4  { -webkit-animation-duration: 0.8s; }
.dropin5  { -webkit-animation-duration: 0.9s; }
.dropin6  { -webkit-animation-duration: 1.1s; }
.dropin7  { -webkit-animation-duration: 1.3s; }
.dropin8  { -webkit-animation-duration: 1.5s; }
.dropin9  { -webkit-animation-duration: 1.7s; }
.dropin10 { -webkit-animation-duration: 1.9s; }

@-webkit-keyframes dropin {
    0%   { -webkit-transform: translate(0,-300px); opacity: 0.0;  }
    100% { -webkit-transform: translate(0,0px);    opacity: 1.0;  }
}

.mbootup1, .mbootup2, .mbootup3, .mbootup4, .mbootup5 {
    -webkit-animation: mbootup 1s 1 normal ease-in-out;
    -moz-animation:    mbootup 1s 1 normal ease-in-out;
    -ms-animation:     mbootup 1s 1 normal ease-in-out;
    -o-animation:      mbootup 1s 1 normal ease-in-out;
    animation:         mbootup 1s 1 normal ease-in-out;
}
.mbootup1 { -webkit-animation-duration: 2.0s; }
.mbootup2 { -webkit-animation-duration: 2.3s; }
.mbootup3 { -webkit-animation-duration: 2.6s; }
.mbootup4 { -webkit-animation-duration: 2.9s; }
.mbootup5 { -webkit-animation-duration: 3.1s; }

@-webkit-keyframes mbootup {
    0%   { height: 0%;  }
    30%  { height: 92%; }
    100% { height: 0%;  }
}

.statuschangea {
    -webkit-animation: statuschangea 1s 2 alternate ease-in-out;
    -moz-animation:    statuschangea 1s 2 alternate ease-in-out;
    -ms-animation:     statuschangea 1s 2 alternate ease-in-out;
    -o-animation:      statuschangea 1s 2 alternate ease-in-out;
    animation:         statuschangea 1s 2 alternate ease-in-out;
}

@-webkit-keyframes statuschangea {
    0%   { opacity: 1.0; }
    30%  { opacity: 0.0; }
    100% { opacity: 0.0; }
}

.system-alert {
    -webkit-animation: systemalert 2.2s infinite alternate ease-in-out;
    -moz-animation:    systemalert 2.2s infinite alternate ease-in-out;
    -ms-animation:     systemalert 2.2s infinite alternate ease-in-out;
    -o-animation:      systemalert 2.2s infinite alternate ease-in-out;
    animation:         systemalert 2.2s infinite alternate ease-in-out;
}
@-webkit-keyframes systemalert {
    0%    { background-color: rgba(30,30,32,1.0); }
    50%   { background-color: rgba(255,0,0,1.0); }
    100%  { background-color: rgba(30,30,32,1.0); }
}