body{
    padding:            0 0 40px;
    font-size:          13px;
    line-height:        18px;
    }


/* NAVBAR */
.navbar {
    margin-top:         40px;
    margin-bottom:      48px;
    }

.navbar-inverse .navbar-inner {
    background-color: #2c2c2c;
    background-image: -moz-linear-gradient(top, #333333, #222222);
    background-image: -ms-linear-gradient(top, #333333, #222222);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333333), to(#222222));
    background-image: -webkit-linear-gradient(top, #333333, #222222);
    background-image: -o-linear-gradient(top, #333333, #222222);
    background-image: linear-gradient(top, #333333, #222222);
    background-repeat: repeat-x;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
       -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
    }

.navbar-inverse .divider-vertical {
    border-right-color: #333;
    border-left-color: #222;
    }

.navbar-inverse .brand:hover {
    color:              #999;
    }

.navbar .nav {
    margin-right:       0;
    }

.navbar .nav > li > a {
    padding:            9px 10px 11px;
    color:              #BBB;
    -webkit-font-smoothing: antialiased;
    }

.navbar i {
    margin-right:       2px;
    }

.navbar a:hover i, .navbar a i.icon-white {
    display:            none;
    }

.navbar a:hover i.icon-white {
    display:            inline-block;
    }


/* FOOTER */
footer {
    margin-top:         56px;
    }

footer small {
    float:              right;
    }

footer nav a {
    display:            inline-block;
    margin-right:       12px;
    }


/* HOMEPAGE */
.hero-unit {
    padding:            12px 20px;
    }

.hero-unit .btn {
    margin-top:         18px;
    font-weight:        bold;
    opacity:            0.999;
    }

.hero-unit .btn .icon-white {
    display:            inline-block;
    vertical-align:     -10%;
    }

.hero-unit li {
    font-size:          13px;
    line-height:        21px;
    margin-top:         16px;
    color:              inherit;
    }

.hero-unit {
    padding:            30px 20px;
    }

.hero-unit h1 {
    margin-bottom:      18px;
    margin-left:        10px;
    font-size:          30px;
    line-height:        1.3;
    letter-spacing:     0;
    }

.hero-unit .intro p {
    display:            inline-block;
    vertical-align:     top;
    width:              260px;
    margin-left:        30px;
    font-size:          16px;
    line-height:        1.5;
    }

.hero-unit sup {
    font-size:          60%;
    }

.hero-unit small {
    display:            block;
    text-align:         right;
    margin-right:       20px;
    }

.hero-unit .buttons {
    margin-top:         18px;
    text-align:         center;
    }


/* USER FORMS */
#user_submit {
    display:            block;
    }


/* USER DASHBOARD */
#intro_alert {
    display:            none;
    font-size:          13px;
    line-height:        18px;
    }

#intro_alert p {
    margin-top:         9px;
    }

#intro_alert a {
    text-decoration:    underline;
    }

#intro_alert a.close {
    text-decoration:    none;
    }

#intro_alert code {
    background-color:   transparent;
    color:              inherit;
    border:             none;
    padding:            0;
    }

#api_use.well {
    padding-right:      0;
    padding-bottom:     0;
    padding-left:       0;
    }

#tz_note {
    display:            block;
    position:           relative;
    z-index:            2;
    opacity:            0.0;
    color:              #BBB;
    text-align:         center;
    font-size:          12px;
    margin-bottom:      12px;
    }

.date_controls {
    text-align: center
    }

#graph {
    height:             200px;
    }

#graph svg {
    opacity:            0.0;
    width:              100% !important;
    }

.visible #graph svg {
    opacity:            1.0;
    }


/* STATS ON NUMBER OF API CALLS MADE AND THEIR COST */
#stats {
    opacity:            0.0;
    font-size:          0;
    white-space:        nowrap;
    text-transform:     uppercase;
    }

#stats ul, #stats li {
    margin:             0;
    padding:            0;
    list-style:         none;
    }

#stats ul {
    display:            inline-block;
    vertical-align:     top;
    width:              33.333333333%;
    padding:            0 4%;
    box-shadow:         1px 0 0 white;
    border-right:       1px solid #E0E0E0;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    }

#stats ul:last-child {
    box-shadow:         none;
    border-right:       none;
    }

#stats li {
    margin:             12px 0;
    font-size:          12px;
    color:              #888;
    }

#stats li strong {
    display:            block;
    margin-bottom:      1px;
    font-size:          24px;
    color:              #555;
    }

#stats .free #calls_today {
    color:              #AE0F0F;
    }


/* API KEY AND BIG RED BUTTON FOR RESETTING IT */
#api_keys {
    opacity:            0.0;
    white-space:        nowrap;
    text-align:         center;
    line-height:        0;
    }

#api_keys h2 {
    display:            inline-block;
    margin:             0;
    padding:            0 24px 0 0;
    font-size:          18px;
    line-height:        18px;
    }

#api_key {
    margin:             0;
    width:              320px;
    background-color:   #FAFAFA;
    text-align:         center;
    cursor:             text;
    font-family:        Menlo, Monaco, Consolas, "Courier New", monospace;
    font-size:          13px;
    height:             16px;
    }

.input-append input, .input-append .btn {
    vertical-align:     middle;
    }

.help-block {
    color:              #888;
    font-size:          12px;
    font-style:         italic;
    }

#trial_note {
    background-color: #0074cc;
    *background-color: #0055cc;
    background-image: -ms-linear-gradient(top, #0088cc, #0055cc);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0055cc));
    background-image: -webkit-linear-gradient(top, #0088cc, #0055cc);
    background-image: -o-linear-gradient(top, #0088cc, #0055cc);
    background-image: -moz-linear-gradient(top, #0088cc, #0055cc);
    background-image: linear-gradient(top, #0088cc, #0055cc);
    background-repeat: repeat-x;
    border-color: #0055cc #0055cc #003580;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
    text-align: center;
    font-size: 14px;
    line-height: 1.3;
    border-top: 1px solid #2FB8FF;
    border-bottom: 1px solid #08405C;
    color: #FFF;
    padding: 10px;
    margin: 18px -20px 8px;
    -webkit-font-smoothing: antialiased;
    }

#trial_note em {
    text-shadow: 0 -1px 0 
    rgba(0, 0, 0, 0.2);
    text-align: center;
    font-size: 15px;
    }

#trial_note a {
    color: #FFF;
    text-decoration: underline;
    text-shadow: none;
    }

@media (max-width:767px){
    .navbar {margin-top:0;margin-bottom:0;}
    .navbar-inverse .navbar-inner, .well{-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;}
    #api_use.well {margin-bottom:0;}
    #api_key {width:auto;}
    #api_keys h2 {margin-right:8px;font-size:14px;}
    footer {margin:28px 4px 0;}
    }



/* LIST OF PAYMENTS */
#payments {
    height:             0px;
    overflow:           hidden;
    }

#payments h2 {
    margin:             0;
    padding:            32px 0 0;
    text-align:         center;
    color:              #AAA;
    font-size:          20px;
    font-weight:        200;
    letter-spacing:     1px;
    }

#payments th, #payments td {
    white-space:        nowrap;
    }

#payments .quantity {
    text-align:         right;
    }

#homepage {
  background-color: #eeeeee;
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;

    }

#billing_alert {
    margin-bottom:      4px;
    background:         transparent;
    border:             none;
    text-align:         center;
    }

#billing_alert a {
    text-decoration:    underline;
    }