/* ==========================================================================
    APNIC Simple Stylsheet.
   ========================================================================== */

/* No Javascript stuff */
.js-off{display:none;}
.no-js .js-on{display:none;}
.no-js .js-off{display:inherit;}

body{
    font-family: 'Whitney SSm A', 'Whitney SSm B', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 400; 
    font-style: normal;
    line-height: 1.65;
}
b,strong,h1,h2,h3,h4,h5,h6{
    font-weight: 700;
}

/* ==========================================================================
    Sprite definitions come before the more specific elements
    (so they can over-ride their bg-pos without !important)
   ========================================================================== */
.apnic-sprite{
    background-repeat: no-repeat;
    background-position: -9999px -9999px;
}
.apnic-sprite-glyphs{
    background-image: url('../img/apnic-sprite-glyphs.png');
}

.container{
     position: relative;
}
/* ==========================================================================
    Start: Banner stuff (APNIC   Contact us | Press | ..    (::)    Your IP)
   ========================================================================== */
#banner{
    height: 120px;
    position: relative;
    border-bottom: 4px solid #000;
}

/* ==========================================================================
    Banner img = "APNIC" (the one true image!)
   ========================================================================== */ 
#banner img{
    width: 200px;
    height: 55px;
    position: absolute;
    top: 35px;
}

/* ==========================================================================
    Banner glyph = the big coloured (::) 
   ========================================================================== */
#glyph{
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    display: block;
    width: 150px;
    height: 115px;
}
.glyph-blue-1{background-position: 0 0;}
.glyph-blue-2{background-position: -150px 0;}
.glyph-blue-3{background-position: -300px 0;}
.glyph-blue-4{background-position: -450px 0;}
.glyph-blue-5{background-position: -600px 0;}

.glyph-darkgreen-1{background-position: 0 -150px;}
.glyph-darkgreen-2{background-position: -150px -150px;}
.glyph-darkgreen-3{background-position: -300px -150px;}
.glyph-darkgreen-4{background-position: -450px -150px;}
.glyph-darkgreen-5{background-position: -600px -150px;}

.glyph-lightgreen-1{background-position: 0 -300px;}
.glyph-lightgreen-2{background-position: -150px -300px;}
.glyph-lightgreen-3{background-position: -300px -300px;}
.glyph-lightgreen-4{background-position: -450px -300px;}
.glyph-lightgreen-5{background-position: -600px -300px;}

.glyph-orange-1{background-position: 0 -450px;}
.glyph-orange-2{background-position: -150px -450px;}
.glyph-orange-3{background-position: -300px -450px;}
.glyph-orange-4{background-position: -450px -450px;}
.glyph-orange-5{background-position: -600px -450px;}

.glyph-purple-1{background-position: 0 -600px;}
.glyph-purple-2{background-position: -150px -600px;}
.glyph-purple-3{background-position: -300px -600px;}
.glyph-purple-4{background-position: -450px -600px;}
.glyph-purple-5{background-position: -600px -600px;}

.glyph-yellow-1{background-position: 0 -750px;}
.glyph-yellow-2{background-position: -150px -750px;}
.glyph-yellow-3{background-position: -300px -750px;}
.glyph-yellow-4{background-position: -450px -750px;}
.glyph-yellow-5{background-position: -600px -750px;}


/* ==========================================================================
     Banner bg-glyph = the little gray (::) (::) (::) 
   ========================================================================== */
#bg-glyphs{
    background-position: -350px 0;
    width: 190px;
    height: 75px;
    position: absolute;
    top: 45px;
    right: 90px;
    z-index: 1;
}


/* ==========================================================================
     Mobile tweaks to the banner 
   ========================================================================== */
@media (max-width: 991px) {
    #banner{
        height: auto;
        overflow: auto;
        margin-top: 15px;
    }
    #banner img{
        position: static;
        float:left;
        clear:both;
        margin: 0 ;
    }
    #bg-glyphs,
    #glyph{
        display: none;
    }
    #banner img{
        margin-bottom:15px;
    }
}


/* ==========================================================================
     H1 colours,etc
   ========================================================================== */ 
h1{
    color: #002598;
    margin-top: 0.3em;

    font-family: 'Whitney SSm A', 'Whitney SSm B', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 700; 
    font-style: normal;
}

.theme-orange h1{
    color: #ef3a01;
}
.theme-darkgreen h1{
    color: #166813;
}
.theme-purple h1{
    color: #5f175b;
}
.theme-lightgreen h1{
    color: #6a9703;
}


#footer{
    margin-bottom:1em;
    margin-top:3em;
    color:#999;
}
#footer .col-md-3{padding-left: 0 !important;}
#footer .col-md-9{padding-right: 0 !important;}
#copyright-stamp{
    /*padding-top:45px;*/
}


/* ==========================================================================
    Print tweaks
   ========================================================================== */
@media print{
    #banner{border-bottom: 4px solid black;}
    #footer{border-top: 4px solid black;}
}


.no-js #js-warning{
    position: absolute;
    top: 16px;
    left:0;
    right:0;
    bottom:0;
}
.no-js body{
    margin-top:116px
}

.theme-popup #main-content{
    min-height: 500px; 
}