/* ==========================================================================
   APNIC 38 Conference site styles.
   ========================================================================== */
body {
    padding-top: 51px; /* because we're getting rid of the top navbar */
}
html,body{
    background:#fff;
    height:100%; /* make footer stay at bottom */
    margin:0;
}
a,a:link {color:#1976bb;} 
a:visited {color:#519597;}  /* visited link */
a:hover {color:#faaf3f;}  /* mouse over link */
a:active {color:#a3347f;}  /* selected link */
a.btn-primary {
    color: #FFFFFF;
}
div#wrapper{
    /* background image added later depending on @media screen width values */
    background-color:#ebedf0;
    background-position: center center;
    background-repeat: repeat-y;
    min-height:100%; /* make footer stay at bottom */
    position:relative; /* relative so footer can be position:absolute */
}
#page{
    background-color:#fff;
    padding-bottom:165px; /* should match footer height value */
}
#content{
    /* an extra div to leave boostrap .container un-tampered and give us some
       extra white space */
    margin-top:10px;   
    margin-bottom:30px;
    overflow:hidden;
    padding-bottom:100px;
}
#pagecopy{
    margin-left:30px;
    margin-right:30px;
}
footer{
    background-color:#222;
    color:#fff;
    width:100%;
    height:165px; /* should match #page padding-bottom value */
    position:absolute; /* make footer stay at bottom */
    bottom:0;
    left:0;
}
footer a{
    color:#fff;
}
footer a:hover{
    color:#fff !important;
}


/* ==========================================================================
   Global APNIC navbar link highlight - make "training" pop!
   ========================================================================== */
.navbar-fixed-top{line-height:24px;}

.navbar-inverse .nav #global-apnic-navbar-link-conferences > a, 
.navbar-inverse .nav #global-apnic-navbar-link-conferences > a:hover, 
.navbar-inverse .nav #global-apnic-navbar-link-conferences > a:focus {
    background-color: #111111;
    color: #FFFFFF;
}
.navbar .nav > #global-apnic-navbar-link-conferences > a, 
.navbar .nav > #global-apnic-navbar-link-conferences > a:hover, 
.navbar .nav > #global-apnic-navbar-link-conferences > a:focus {
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.125) inset;
    text-decoration: none;
}

/* ==========================================================================
   Navigation - the training site level one (not the global one at very top.
   ========================================================================== */

#navigation{
    text-align:justify; /* trick to spread the nav items */
    line-height:0.5;
    margin-left:30px;
    margin-right:30px;
    margin-bottom:10px;
    margin-top:10px;
}
#navigation ul{
    list-style:none;
    margin:0;
    padding:0;
}
#navigation ul:after{
    /* trick to spread the nav items */
   content: "";
   font-size: 0;
   height: 0;
   line-height: 0;
   width: 100%;
   display: inline-block;
   vertical-align: top;
}

#navigation li{
    display: inline-block;
    vertical-align: top;
    text-align: center;
    margin:0;
    padding:0;
}
#navigation a{
    color:#000;
    font-weight:bold;
    text-decoration:none;
}
#navigation span{
    border-bottom:4px solid white;
}
#navigation a:hover span{
    border-bottom-color:#00ade6;
}
/* ==========================================================================
   Navigation highlighting (e.g. make the home link light up on the home page)   
   ========================================================================== */
#navigation .active span{
    border-bottom-color:#00a1e4 !important;
    color: #000 !important;
}
/* ==========================================================================
   Navigation hack to fix bug on safari   
   ========================================================================== */
#navigation,#navigation ul,#navigation ul li,#navigation ul li a{height:20px;overflow:visible;}

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */

#breadcrumb{
    display: none; /* Not on design so  hide for now */
    color: #b2b2b2;
    font-size:0.8em;
    margin-top:10px;
    margin-bottom:10px;
    margin-left:30px;
    margin-right:30px;
}
#breadcrumb h3{
    display: inline;
    font-size: inherit;
    font-weight: normal;
}
#breadcrumb ul{
    display:inline-block;
    list-style:none;
    margin: 0;
    padding: 0;
}
#breadcrumb li{
    display:inline-block;
    margin: 0;
    padding: 0;
    list-style: none;
}
#breadcrumb li:before{
    content: "// ";
}
#breadcrumb li.first-child:before,
#breadcrumb li:first-child:before{
    content: " ";
}
#breadcrumb a{
    display:inline-block;
    color: inherit;
    text-decoration: none;
    text-transform: uppercase;
}
#breadcrumb a span{
    border-bottom:4px solid white;
    display:inline-block;
    margin-left:0.25em;
    margin-right:0.25em;
}
#breadcrumb a:hover span{
    border-bottom-color:#b2b2b2;
}

/* ==========================================================================
   Banner
   ========================================================================== */

#banner{
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-bottom:6px solid #221f20;
}

.sprite,#banner h2,#banner div,#banner h3,#banner,h4{
    background-image:url('../images/apnic38-sprite-2014-03-07.png');
    background-repeat:no-repeat;
    background-position: -2000px -2000px;
}
.sprite span{
    display: none;
}
#banner h2,#banner h3,#banner h4,
#banner a,#banner div{
    margin: 0;
    padding: 0;
    border: 0;
}
/* Default sprite banner */
#banner{
    height: 241px;
    background-position: 100% 0;
    position: relative;
    transition:width,height 1s;
    -webkit-transition:width,height 1s; /* Safari */
}
#banner a{
    display: block;
    width:100%;
    height: 100%;
    outline:none;
    transition: all 1s; 
    -webkit-transition: all 1s; /* Safari */
}
#banner a:hover {
    background-color: #4ca146;
    background-color: rgba(76, 161, 70, 0.5);
}
#banner h2,#banner div,#banner h3,#banner h4{
    position: absolute;
    transition:width,height 1s;
    -webkit-transition:width,height 1s; /* Safari */
}
#banner h3,#banner h4{
    transition: all 1s;
    -webkit-transition: all 1s; /* Safari */
}
#banner h2{
    width: 440px;
    height: 173px;
    background-position: -730px -235px;
    top: 0;
    left: 55px;
}
#banner div{
    width: 570px;
    height: 235px;
    background-position: -590px -410px;
    top: 0;
    right: 0;
}
#banner h3{
    width: 310px;
    height: 35px;
    background-position: -860px -645px;
    bottom: 14px;
    right: 240px;
}
#banner h4{
    width: 200px;
    height: 30px;
    background-position: -969px -699px;
    bottom: 14px;
    right: 18px;
}
/* Medium sprite banner */
@media (max-width: 1199px) {
    #banner{
        height: 181px;
        background-position: -110px -60px;
    }
    #banner h2{
        width: 330px;
        height: 131px;
        background-position: -400px -278px;
        top: 0;
        left: 55px;
    }
    #banner div{
        width: 430px;
        height: 176px;
        background-position: -150px -469px;
        top: 0;
        right: 0;
    }
    #banner h3{
        width: 240px;
        height: 26px;
        background-position: -620px -654px;
        bottom: 10px;
        right: 175px;
    }
    #banner h4{
        width: 150px;
        height: 20px;
        background-position: -810px -705px;
        bottom: 14px;
        right: 12px;
    }
}
/* Small sprite banner */
@media (max-width: 991px) {
    #banner{
        height: 123px;
        background-position: 0 -118px;
    }
    #banner h2{
        width: 220px;
        height: 88px;
        background-position: -180px -320px;
        top: 0;
        left: 55px;
    }
    #banner div{
        display: none;
    }
    #banner h3{
        bottom: 4px;
    }
    #banner h4{
        bottom: 8px;
    }
}
/* Tiny sprite banner */
@media (max-width: 470px) {
    #banner{
        height: 156px;
        background-position: 0 -85px;
    }
    #banner h3{
        right: auto;
        left: 55px;
        bottom: 33px;
    }
    #banner h4{
        bottom: 13px;
    }
}
/* Teeny tiny sprite banner */
@media (max-width: 304px) {
    #banner h2{
        left: 15px;
    }
    #banner h3{
        left: 15px;
    }
    #banner h4{
        bottom: 13px;
        right: auto;
        left: 15px;
    }
}
#banner a#hashtag{
    color: #6da04e;
    position: absolute;
    top: 0;
    right: 0;
    padding: 10px 20px;
    width: auto;
    height: auto;
    transition: none;
    -webkit-transition: none;
    font-weight: normal;
}
#banner a#hashtag:hover{
    background-color: transparent;
}
@media (max-width: 650px) {
    #banner a#hashtag{
        display: none;
    }
}

/* ==========================================================================
   Fat Footer 
   ========================================================================== */
#fat-footer{
     position:relative;
     padding-top: 1.5em;
}
/* ==========================================================================
   Footer sponsors
   ========================================================================== */
#footer-sponsors{
    display: none;
}

/* ==========================================================================
   Grayscale on various images.
   ========================================================================== */

.grayscale img{
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
    -webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */
    -webkit-backface-visibility: hidden; /* Fix for transition flickering */
}
.grayscale a:hover img{
    filter: none;
    -webkit-filter: grayscale(0%);
}


/* ==========================================================================
   Footer - Nav 
   ========================================================================== */
#footer-nav{
    margin-bottom:3em;
}
#footer-nav ul{
    margin:18px 0 18px 0;
    padding:0;
}
#footer-nav li{
    margin:0 1em 0 0;
    padding:0;
    list-style-type:none;
    display:inline;
    display:inline-block;
}
#footer-nav a{
}

/* ==========================================================================
   Footer - Stamp 
   ========================================================================== */
#footer-stamp{
    background:url('../images/apnic-stamp.png') 0 0 no-repeat;
    min-height:60px;
}
#footer-stamp p{
    display:none;
}

/* ==========================================================================
   Footer - Contact 
   ========================================================================== */
#footer-contact h2{
    float:left;
    margin-top:0;
    padding-top:0;
    line-height:1;
    font-size:30px;
}
#footer-contact p{
    float:left;
    margin-left:1em;
    color:#6d6e71;
}
#footer-contact a{
    color:#6d6e71;
    text-decoration:underline;
}


/* ==========================================================================
   Footer - Copyright 
   ========================================================================== */
#footer-copyright{
    text-align:right;
    position:relative;
}
#footer-copyright p{
    text-align:right;
}
#footer-copyright p a{
    color: #fff;
}


/* ==========================================================================
   Tab content 
   ========================================================================== */
.nav-tabs a,
a[data-toggle="tab"]{
    outline:0 none !important; /* Hide the ugly outline on active/clicked tabs */
}

ul.nav-tabs{
    margin-bottom: 1.5em;
}

/* ==========================================================================
   Shout, shout-frame. 
   ========================================================================== */
.shout{
    min-height: 20px;
    padding: 1px 19px 12px 19px;
    margin-bottom: 20px;
    background-color: #002598;
    color: #ffffff;
}
.shout-frame{
    border:12px solid #002598;
}
.shout h2.glow, .shout h2, .shout h1{
    color:#fff !important;
    margin-top:20px
}
.shout a{
    text-decoration:underline;
    color:white;
}
.shout a:hover{
    text-decoration:none;
    color:white;
}
.shout a.go{
    background:white;
    color:#002598;
    text-decoration:none;
}
.shout a.go:hover{
    background:#002598;
    color:white;
    text-decoration:underline;
}
/* 20th anniversary background stuff */
.shout{
    background-image:url('../images/20th-anniversary-background-tall.png');
    background-repeat:no-repeat;
    min-height: 220px;
}
.shout h1,.shout h2,.shout p{
    margin-left:210px;
}


/* ==========================================================================
   Frame, frame-whisper, frame-wire, frame-loud. 
   ========================================================================== */
.frame{
    min-height: 20px;
    padding: 12px;
    margin-bottom: 20px;
    border:6px solid #b3b3b3;
}
.frame-whisper{
    border:6px solid #e5e5e5;
}
.frame-wire{
    border:1px solid #b3b3b3;
    overflow:hidden;
}
.frame-loud{
    border:6px solid #00ade6;
}
.frame-ghost{
    border:1px solid #ffffff;
}
/* ==========================================================================
   Shout and Frame tweaks. 
   ========================================================================== */
.shout h2:first-child, .frame h2:first-child{
    margin-top:0;
}
/* ==========================================================================
   Heading and Link colours. 
   ========================================================================== */
h2.glow,.glow{
    color:#002598;
}
a.go{
    display:block;
    background:#faa621;
    padding:4px 4px 6px 0.4em;
    color:#fff;
    font-size:2em;
    line-height:1.1em;
}
a.go:hover{
    background:#ffffff;
    color:#faa621;
    text-decoration:none;
}
body{
    font-size: 15px;
    line-height: 1.7;
}
h1 {
    font-size: 48.5px;
    line-height: 50px;
}
h1,h2,h3,h4,h5,h6{
    font-weight: normal;
}
h2.nightosphere{
    background:#333;
    color:#fff;
    padding:4px 12px;
}
.frame-wire-right{
    border-right:1px solid #b3b3b3;
}
.frame-wire-left{
    border-right:1px solid #b3b3b3;
}
.frame-graphic{
    background:#222 url("../images/bar-image.jpg") 0 0 no-repeat;
    color:#fff;
    padding:0;
    min-height:250px;
    position:relative;
}
.frame-graphic h2{
    background:#222;
    color:#fff;
    padding:2px 12px;
}
.frame-graphic p{
    margin-left:12px;
    margin-right:12px;
    position:absolute;
    bottom:0;
    left:0;
}
td.yes span{color:#93C690;} 

td.yes{background:#93C690; text-align:center; vertical-align:middle; padding:0 !important; } 
/* ==========================================================================
   No Javascript stuff 
   ========================================================================== */
.js-disabled{display:none;}
.noscript .js-enabled{display:none;}
.noscript .js-disabled{display:inherit;}