/* http://colorschemedesigner.com/#0M61Tw0w0w0w0 */
/* http://colorschemedesigner.com/#0161TuZnuw0w0 */

/* ---------------------------------------------------------------------------
FONTS
--------------------------------------------------------------------------- */
/* H1 */
@font-face {
    font-family: 'b';
    src: url('http://cdn.pubnub.com/assets/fonts/b.eot');
    src: local('☺'),
        url('/static/assets/fonts/b.woff') format('woff'),
        url('http://cdn.pubnub.com/assets/fonts/b.ttf') format('truetype'),
        url('http://cdn.pubnub.com/assets/fonts/b.svg#b') format('svg');
}

/* Links */
@font-face {
    font-family: 'f';
    src: url('http://cdn.pubnub.com/assets/fonts/f.eot');
    src: local('☺'),
        url('/static/assets/fonts/f.woff') format('woff'),
        url('http://cdn.pubnub.com/assets/fonts/f.ttf') format('truetype'),
        url('http://cdn.pubnub.com/assets/fonts/f.svg#f') format('svg');
}

/* PubNub Logo */
@font-face {
    font-family: 'p';
    src: url('http://cdn.pubnub.com/assets/fonts/p.eot');
    src: local('☺'),
        url('/static/assets/fonts/p.woff') format('woff'),
        url('http://cdn.pubnub.com/assets/fonts/p.ttf') format('truetype'),
        url('http://cdn.pubnub.com/assets/fonts/p.svg#p') format('svg');
}

/* Regular */
@font-face {
    font-family: 'd';
    src: url('http://cdn.pubnub.com/assets/fonts/d.eot');
    src: local('☺'),
        url('/static/assets/fonts/d.woff') format('woff'),
        url('http://cdn.pubnub.com/assets/fonts/d.ttf') format('truetype'),
        url('http://cdn.pubnub.com/assets/fonts/d.svg#d') format('svg');
}

/* Mono */
@font-face {
    font-family: 'm';
    src: url('http://cdn.pubnub.com/assets/fonts/m.eot');
    src: local('☺'),
        url('/static/assets/fonts/m.woff') format('woff'),
        url('http://cdn.pubnub.com/assets/fonts/m.ttf') format('truetype'),
        url('http://cdn.pubnub.com/assets/fonts/m.svg#m') format('svg');
}

/* Curly */
@font-face {
    font-family: 'c';
    src: url('http://cdn.pubnub.com/assets/fonts/c.eot');
    src: local('☺'),
        url('/static/assets/fonts/c.woff') format('woff'),
        url('http://cdn.pubnub.com/assets/fonts/c.ttf') format('truetype'),
        url('http://cdn.pubnub.com/assets/fonts/c.svg#c') format('svg');
}

/* Total Messages Delivered */
@font-face {
    font-family: 'a';
    src: url('http://cdn.pubnub.com/assets/fonts/a.eot');
    src: local('☺'),
        url('/static/assets/fonts/a.woff') format('woff'),
        url('http://cdn.pubnub.com/assets/fonts/a.ttf') format('truetype'),
        url('http://cdn.pubnub.com/assets/fonts/a.svg#a') format('svg');
}

/* ---------------------------------------------------------------------------
CHATTR
--------------------------------------------------------------------------- */
#chattr-header {
    background: #ed0d07;
    -webkit-border-top-left-radius: 4px;
    -webkit-border-top-right-radius: 4px;
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-topright: 4px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

/* ---------------------------------------------------------------------------
BODY
--------------------------------------------------------------------------- */
body {
    margin: 0;
    padding: 0;

    font-size: 16px;
    line-height: 24px;
    font-family: 'Cabin','Helvetica Neue',Helvetica,Arial,Verdana,sans-serif;
    text-shadow: rgba(0,0,0,0.1) 0 1px 2px;

    background: #fff;
    color: #444;
}
/* ---------------------------------------------------------------------------
SUB-PAGE
--------------------------------------------------------------------------- */
#left-nav {
    float: left;
    width: 366px;
    border-right: 1px solid #eee;
    padding-right: 10px;
}
#right-content {
    float: right;
    width: 604px;
    margin-left: 10px;
}


/* ---------------------------------------------------------------------------
STAGE
--------------------------------------------------------------------------- */
.stage {
    position: relative;
    width: 1000px;
    margin: 0 auto 0 auto;
}

/* ---------------------------------------------------------------------------
LOGO
--------------------------------------------------------------------------- */
#logo, pub {
    font-family: p, 'Helvetica Neue', Helvetica, Arial;
    color: #ed0d07;
}
.pubnub {
    color: #ed0d07;
}
#logo {
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;

    color: #fff;
    text-shadow: rgba(0,0,0,0.2) 0 0 4px;
    font-size: 72px;
    line-height: 84px;
    text-decoration: none;

    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
}
#logo:hover, #logo-catchphrase:hover {
    color: #fa0;
    text-shadow: rgba(255,255,255,0.2) 0 0 30px;
}
#logo-catchphrase {
    cursor: pointer;
    position: absolute;
    top: 72px;
    right: 0;

    color: #fff;
    text-shadow: rgba(0,0,0,0.2) 0 0 4px;
    font-size: 17px;
    line-height: 17px;
    text-decoration: none;

    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
}

/* ---------------------------------------------------------------------------
HEADER
--------------------------------------------------------------------------- */
#top-red-strip {
    background: #ff5600;
    height: 9px;
}
#header {
    height: 100px;
    background: #ed0d07;
}
#header-ios-fill {
    background: #ed0d07;
}
#header-nav {
    position: absolute;
    top: 44px;
    right: 10px;
}
#header-nav-account {
    position: absolute;
    top: 10px;
    right: 16px;
}
.header-shadow {
    position: absolute;
    top: -1px;
    height: 30px;
    width: 100%;
    background: transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAZCAYAAADwkER/AAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAADdJREFUCNdVzDEOwCAUw9DX/Nv2/kMLRXQD4cFylsAd9KAtvcFz1p5bLfjWwQhGIYUrmMEsiIMfNxwSOsvoNw4AAAAASUVORK5CYII=') repeat-x;
}
#try-it-now-for-free {
    position: absolute;
    top: 20px;
    right: 90px;
}

/* ---------------------------------------------------------------------------
HEADER NAV
--------------------------------------------------------------------------- */
.new {
    vertical-align: super;
    color: #ff0;
}
.header-nav {
    display: inline-block;

    padding: 2px 10px 3px 10px;

    color: #fff;
    background: transparent;
    font-family: f, 'Times', sans;
    text-align: center;
    text-shadow: rgba(0,0,0,0.2) 0 1px 1px;
    text-decoration: none;

    -webkit-border-radius: 52px;
    -moz-border-radius: 52px;
    -o-border-radius: 52px;
    border-radius: 52px;
}
.header-nav:hover {
    text-decoration: none;
    color: #fff;
    background-color: #ffc500;
}
.header-nav:active {
    color: #0af;
    background-color: #fff;
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
}
.header-nav-sign-up {
    text-decoration: none;
    color: #fff;

    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);

    background: #778 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAABCCAYAAACbx8wMAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAABQSURBVHjaYvz//38QA3YgxAIk/uOQ/D9Qkv9wSP4j21iGweYgGoXQMIqy/zSM7EEXn+T7c3h45f9A5eyREEJMDHjAQLh2IBxEIzvxGgsQYADsCHjfVTwmSwAAAABJRU5ErkJggg==');
}

/* ---------------------------------------------------------------------------
HEADER NAV LEVEL TWO (Social & Buttons)
--------------------------------------------------------------------------- */
#header-nav-level-two {
    position: absolute;
    top: 50px;
    right: 10px;
}

/* ---------------------------------------------------------------------------
HEADER NAV PLAY VIDEO
--------------------------------------------------------------------------- */
#header-video-link {
    position: absolute;
    top: 14px;
    right: 130px;

    text-decoration: none;
    text-align: right;

    color: #ffc500;
    font-size: 16px;
    line-height: 20px;
    font-family: 'Oswald', arial, serif;

    -webkit-transition: all 0.1s;
    -moz-transition: all 0.1s;
    -ms-transition: all 0.1s;
    -o-transition: all 0.1s;
    transition: all 0.1s;
}
#header-video-link:hover {
    color: #ff0;
}
#header-video-link:active {
    color: #f00;
}

/* ---------------------------------------------------------------------------
HERO AREA
--------------------------------------------------------------------------- */
#hero {
    position: relative;
    height: 0px;
    background: #bb0a06;
    overflow: hidden;

    -webkit-transition: height 0.8s;
    -moz-transition: height 0.8s;
    -ms-transition: height 0.8s;
    -o-transition: height 0.8s;
    transition: height 0.8s;
}
#hero-title {
    /*cursor: pointer;*/
    z-index: 200;
    padding: 28px 0;
    height: 110px;
    overflow: hidden;
    color: #f4f4f4;
    font-family: 'Francois One', arial, serif;
    letter-spacing: -0.05em;
    font-size: 32px;
    line-height: 36px;
    text-shadow: rgba(0,0,0,0.3) 0 1px 2px;
    text-align: center;
}
.hero-glow {
    text-shadow: rgba(255,255,255,0.3) 0 0 50px;
    cursor: pointer;
}
/*
#hero-title:hover {
    color: #fc0;
    text-shadow: rgba(0,0,0,1) 0 1px 2px;
}
*/

/* ---------------------------------------------------------------------------
Try It Code
--------------------------------------------------------------------------- */
#try-it-code {
    outline: 0;
    width: 876px;
    border: 0;
    height: 40px;
    padding: 10px;
    margin: 10px;
    font-size: 16px;
    line-height: 20px;
    color: #000;
    text-shadow: 0 0 3px rgba(255,255,255,1);
    background: rgba(255,255,255,0.8);

    -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.4);
    -moz-box-shadow: 0 0 20px rgba(0,0,0,0.4);
    -ms-box-shadow: 0 0 20px rgba(0,0,0,0.4);
    -o-box-shadow: 0 0 20px rgba(0,0,0,0.4);
    box-shadow: 0 0 20px rgba(0,0,0,0.4);
}

/* ---------------------------------------------------------------------------
HERO ROTATE
--------------------------------------------------------------------------- */
#hero-rotate {
    z-index: 100;
    position: relative;
    width: 1000px;
    height: 663px;
    overflow: hidden;
}
#hero-rotate-mover {
    position: absolute;
    top: 0;
    left: 0;
    height: 663px;
    width: 5000px;

    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}

.hero-rotate {
    position: relative;
    float: left;
    padding: 0;
    margin: 0;
    border: 0;
    width: 1000px;
    height: 663px;
    overflow: hidden;
}
.hero-rotate-photo {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0;
    margin: 0;
    border: 0;
    width: 1000px;
    height: 663px;
    overflow: hidden;
}
.hero-rotate-bg {
    z-index: 190;
    cursor: pointer;
    position: absolute;
    top: 0;
    width: 1000px;
    height: 663px;
    background: url(http://cdn.pubnub.com/2011/hero-rotate-bg.png);
}
#hero-rotate-ios-border {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 996px;
    height: 659px;
    overflow: hidden;
}

.hero-rotate-footer {
    position: absolute;
    left: -10px;
    top: -10px;
    padding: 40px 0 20px 0;
    width: 1020px;
    background: rgba(255,255,255,0.8);
    color: #222;
    text-align: center;
    line-height: 70px;
    font-size: 56px;
    font-family: 'Waiting for the Sunrise','Helvetica Neue',Helvetica,Arial,Verdana,sans-serif;
    text-shadow: rgba(0,0,0,0.5) 0 1px 3px;
}

/* ---------------------------------------------------------------------------
SIGN UP AREA
--------------------------------------------------------------------------- */
#callout {
    text-align: center;
}
#sign-up-area {
    cursor: pointer;
    display: inline-block;
    position: relative;
    width: 242px;
    height: 84px;
    overflow: hidden;
    background: url(http://cdn.pubnub.com/2011/sign-up-button.png);
}
#sign-up-wave {
    cursor: pointer;
    display: none;
    position: absolute;
    top: -10px;
    left: 0;
    width: 242px;
    height: 84px;
    background: url(http://cdn.pubnub.com/2011/button-wave.png);
    opacity: 0.4;
}
#sign-up-mask {
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    width: 242px;
    height: 84px;
    background: url(http://cdn.pubnub.com/2011/sign-up-button-mask.png);
}


/* ---------------------------------------------------------------------------
A NEW KIND OF
--------------------------------------------------------------------------- */
#new-kind-of {
    height: 40px;
    line-height: 40px;
    overflow: hidden;

    background: #4b2910;

    color: #fc0;
    text-align: center;
    font-family: b;
    font-size: 22px;
}

/* ---------------------------------------------------------------------------
EXAMPLE CODE
--------------------------------------------------------------------------- */
#example-code {
    height: 120px;
    background: #fff;
}

#example-sub {
    float: left;
    width: 365px;
    height: 90px;
    overflow: hidden;
    font-size: 14px;
    line-height: 18px;

    background: transparent;

    padding-left: 10px;
    border: 0px;
    border-right: 1px solid #ccc;
    border-left: 1px solid #ccc;
}
#example-pub {
    float: left;
    width: 220px;
    height: 90px;
    overflow: hidden;
    font-size: 14px;
    line-height: 18px;

    background: transparent;

    border: 0px;
    margin-left: 10px;
}

/* ---------------------------------------------------------------------------
COUNTS DAILY / TOTAL
--------------------------------------------------------------------------- */
#counts {
    margin-top: 15px;
    float: right;
    width: 384px;
    text-align: center;
}
#total, #daily {
    font-family: 'Oswald', arial, serif;
    color: #7a0502;
    font-size: 28px;
    line-height: 34px;
}
#daily {
    color: #4e5465;
    font-size: 22px;
}

/* ---------------------------------------------------------------------------
INFO BOXES
--------------------------------------------------------------------------- */
.info-box {
    width: 1000px;
    background: #fff;
    font-size: 20px;
    line-height: 30px;
    margin-bottom: 10px;
}
.info-box-left {
    float: left;
    width: 366px;
    border-right: 1px solid #ccc;
    color: #777;
}
.info-box-right {
    float: right;
    width: 590px;
}
.info-box-center {
    border-top: 1px solid #ccc;
    width: 1000px;
}
.info-box-left-title {
    font-family: 'Quattrocento Sans', arial, serif;
    color: #0d58a6;
    font-size: 24px;
    line-height: 60px;
}
.info-box-padding {
    padding: 10px;
}
.info-box-big {
    text-align: center;
    font-size: 30px;
    line-height: 40px;
}
.checkmark {
    vertical-align: text-bottom;
}
.checkmark-info {
    margin-left: 40px;
    font-size: 14px;
    line-height: 18px;
    color: #777;
}
.generic-seperator {
    height: 20px;
}
#hundreds-of-companies {
    font-family: 'c';
    color: #444;
}

/* ---------------------------------------------------------------------------
THOUSANDS OF COMPANIES RELY ON PUBNUB
--------------------------------------------------------------------------- */
.customer-link {
    position: absolute;
    font-size: 300px;
    line-height: 900px;
    width: 160px;
    height: 110px;
    overflow: hidden;
    display: block;
    color: rgba(0,0,0,0);
    /*
    background: rgba(0,0,0,0.1);
    border: 1px solid red;
    */
}
#customer-link-1-1 { top: 0; left: 60px }
#customer-link-1-2 { top: 0; left: 260px }
#customer-link-1-3 { top: 0; left: 430px }
#customer-link-1-4 { top: 0; left: 610px }
#customer-link-1-5 { top: 0; left: 800px }

#customer-link-2-1 { top: 110px; left: 60px }
#customer-link-2-2 { top: 110px; left: 260px }
#customer-link-2-3 { top: 110px; left: 430px }
#customer-link-2-4 { top: 110px; left: 610px }
#customer-link-2-5 { top: 110px; left: 800px }

/* ---------------------------------------------------------------------------
VIDEOS
--------------------------------------------------------------------------- */
#videos {
    overflow: hidden;
    height: 530px;
    display: none;
}

/* ---------------------------------------------------------------------------
FOOTER
--------------------------------------------------------------------------- */
#footer {
    position: relative;
    background: transparent;
    height: 145px;
    overflow: hidden;
}
#footer-window {
    z-index: 200;
    position: absolute;
    top: 0;
    left: 0;
    width: 1000px;
    height: 145px;
    background: transparent url('http://cdn.pubnub.com/2011/footer-window.png');
}
#footer-bg {
    z-index: 150;
    position: absolute;
    top: 2px;
    left: 2px;
    width: 996px;
    height: 141px;
    background: transparent url(http://cdn.pubnub.com/assets/pubnub-real-time-footer-background.jpg) 0 -800px;
}
#footer-links {
    z-index: 220;
    position: absolute;
    top: 20px;
    left: 2px;
    width: 996px;
    text-align: center;
}

/* ---------------------------------------------------------------------------
FOOTER NAV
--------------------------------------------------------------------------- */
.footer-nav {
    display: inline-block;

    padding: 2px 10px 3px 10px;

    color: #fff;
    background: transparent;
    font-family: f, 'Times', sans;
    text-align: center;
    text-shadow: #000 0 0 10px;
    text-decoration: none;

    -webkit-border-radius: 52px;
    -moz-border-radius: 52px;
    -o-border-radius: 52px;
    border-radius: 52px;

    -webkit-transition: all 0.1s;
    -moz-transition: all 0.1s;
    -ms-transition: all 0.1s;
    -o-transition: all 0.1s;
    transition: all 0.1s;
}
.footer-nav:hover {
    text-decoration: none;
    color: #fff;
    background: #ffc500;
    text-shadow: rgba(0,0,0,0.2) 0 1px 2px;

    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
}
.footer-nav:active {
    color: #0af;
    background: #fff;
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
}

/* ---------------------------------------------------------------------------
HEADERS
--------------------------------------------------------------------------- */
h1, h2, h3, h4 {
    margin: 0;
    padding: 0;

    font-weight: normal;

    font-family: b, 'Arial Black', 'Helvetica Neue', Helvetica, Arial;
    font-size: 36px;
    line-height: 40px;
}
h2 {
    font-size: 30px;
    line-height: 34px;
    margin: 30px 0 20px 0;
}
h3 {
    font-family: d, 'Arial Black', 'Helvetica Neue', Helvetica, Arial;
    font-size: 26px;
    line-height: 30px;
    margin: 30px 0 20px 0;
}
h4 {
    font-family: d, 'Arial Black', 'Helvetica Neue', Helvetica, Arial;
    font-size: 22px;
    line-height: 26px;
    margin: 30px 0 20px 0;
}

.push-notifications {
    font-size: 78px;
    line-height: 110px;
    color: #fff;
    text-shadow: #fff -1px -1px 4px;
}

/* ---------------------------------------------------------------------------
CODE
--------------------------------------------------------------------------- */
pre {
    font-family: m, mono;
    font-size: 14px;
    line-height: 18px;
}
.comment{color:#0768ac}
.important{color:#9b0}
.keyword{color:#0af}
.function{color:#dc2d24}
.relative{position:relative}
.center{text-align:center}


/* ---------------------------------------------------------------------------
BOXES
--------------------------------------------------------------------------- */
.box2 {
    margin: 20px;
    padding: 20px;
    background: #f3f3f3;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}

/* ---------------------------------------------------------------------------
UTILITY
--------------------------------------------------------------------------- */
img {
    border: 0;
}
table {
    width: 100%;
}

.tpl { display: none }

.center, h1, h2 {
    text-align: center;
}
.tr {
    transition: all 0.3s;
    -o-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
}
.clear {
    clear: both;
}
.clear-left {
    clear: left;
}
.clear-right {
    clear: right;
}
.pimg {
    padding-right: 20px;
    float: left;
}

.button {
    margin: 10px 0 10px 0;
    display: block;
}

a:hover {
    text-decoration: none;
}

a {
    color: #0af;
}
.regular-link {
    font-family: 'Cabin','Helvetica Neue',Helvetica,Arial,Verdana,sans-serif;
    color: #777;
    text-decoration: none;
}
.regular-link:hover {
    text-decoration: underline;
}

date {
    display: block;
    color: #ce6021;
    margin-bottom: 20px;
}

.sg, .sg2 {
    border-radius: 12px;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
}
.sg {
    margin-left: 288px;
    width: 425px;
    height: 365px;
    border: 0;
}
.sg2 {
    margin-left: 25px;
    width: 430px;
    height: 400px;
    border: 0;
}
textarea {
    padding: 20px;
    font-size: 16px;
    line-height: 22px;
    font-family: m, mono;
}
balance {
    font-size: 40px;
    line-height: 60px;
}
good {
    color: green;
}
bad {
    color: red;
}