/* ==========================================================================
   APRICOT 2014 / APNIC 37 Conference site styles.
   ========================================================================== */
body {
    padding-top: 0px; /* because we're getting rid of the top navbar */
}
html,body{
    background:#fff;
    height:100%; /* make footer stay at bottom */
    margin:0;
}
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:265px; /* 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:265px; /* 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{display:none;} /* Get rid of it for now - not on the design */
.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;
}
#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:#f8c16b;
}
/* ==========================================================================
   Navigation highlighting (e.g. make the home link light up on the home page)   
   ========================================================================== */
#navigation .active span{
    border-bottom-color:#f5a72c !important;
    color: #000 !important;
}


/* ==========================================================================
   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 header,
#banner h2,
#banner h3,
#banner div,
#banner span,
#banner strong,
#banner em{
    margin:0;
    padding:0;
    border:0;
}
#banner header{
    height:255px;
    background:#fff url('../images/bangkok-header-background.jpg') -70px 10% no-repeat;
    position:relative;
    border-bottom:6px solid #221f20;
}
/* ==========================================================================
   Banner - "APRICOT 2014" text and logo
   ========================================================================== */
#banner header h2{
    position:absolute;
    bottom:20px;
    left:20px;

    background:url('../images/apricot-logo-and-text.png') 0 0 no-repeat;
    width:745px;
    height:84px;
}
#banner header h2 span{
    display:block;
    height:86px;
    background:url('../images/apricot-logo.png') 0 0 no-repeat;
    line-height:76px;
    font-size:86px;
    padding-left:110px;

    display:none; /* Was going for a Google Font, now looks like an image */
}
#banner header h2 span strong{}
#banner header h2 span em{
    font-style:normal;
    color:#f5a72c;
    margin-left:10px;
}

/* ==========================================================================
   Banner - "BANGKOK 18-28 February 2014" text
   ========================================================================== */
#banner header h3{
    position:absolute;
    bottom:20px;
    right:20px;
}
#banner header h3 span{
    display:block;
    line-height:1;
    text-align:right;
}
#banner header h3 span strong{
    display:block;
    line-height:1;
}
#banner header h3 span em{
    display:block;
    line-height:1;
    font-weight:normal;
    font-style:normal;
    font-size:19px;
}


/* ==========================================================================
   Banner - Host logos
   ========================================================================== */
#banner .host-logo{
    position: absolute;
    top: 10px;
}
#banner #host-logo-right{
    right: 15px;
}
#banner #host-logo-left{
    left: 22px;
    top: 20px;
}
#banner .host-logo-true{
    width:149px;
    height:99px;
    background:url('../images/host-logo-true-149x99px.png') 0 0  no-repeat;
}
#banner .host-logo-nectec{
    width:245px;
    height:70px;
    background:url('../images/host-logo-nectec-245x70px.png') 0 0  no-repeat;
}


/* ==========================================================================
   Banner - With
   ========================================================================== */

#banner #with{
    background:#924593 url('../images/with-apnic37.jpg') 100% 100% no-repeat;
    color:#fff;
    height:40px;
}
#banner #with h4{
    margin:0 0 0 22px;
    padding:0;
    line-height:40px;
    position:relative;
}
#banner #with h4 strong{
    margin:0;
    padding:0;
    position:absolute;
    top:0;
    right:22px;
}
#banner #with h4 strong span{
    display:none;
}

/* ==========================================================================
   Fat Footer 
   ========================================================================== */
#fat-footer{
     position:relative;
}
/* ==========================================================================
   Footer sponsors
   ========================================================================== */
#footer-sponsors{
    text-align:justify; /* trick to spread the nav items */
    margin-bottom:18px;
}
#footer-sponsors.no-results{
    padding-bottom:80px;
}

#footer-sponsors ul{
    list-style:none;
    margin:0;
    padding:18px 0 0 0;
}

#footer-sponsors 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;
}


#footer-sponsors li{
    display: inline-block;
    vertical-align: top;
    text-align: center;
    margin:0;
    padding:0;
    text-transform: uppercase;
}

#footer-sponsors img{max-height:50px;}

#footer-sponsors li img{
    -webkit-filter: grayscale(100%);
       -moz-filter: grayscale(100%);
         -o-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
            filter: grayscale(100%); 
}
#footer-sponsors li a:hover img{
    -webkit-filter: grayscale(0%);
       -moz-filter: grayscale(0%);
         -o-filter: grayscale(0%);
        -ms-filter: grayscale(0%);
            filter: grayscale(0%); 
}

#footer-sponsors p{
    text-align:right;
}


/* ==========================================================================
   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{

}
#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/apricot-stamp.png') 0 0 no-repeat;
    min-height:67px;
}
#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;
    position:absolute;
    bottom:0;
    right:0;
}


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

/* ==========================================================================
   Shout, shout-frame. 
   ========================================================================== */
.shout{
    min-height: 20px;
    padding: 1px 19px 12px 19px;
    margin-bottom: 20px;
    background-color: #333333;
    color: #ffffff;
}
.shout-frame{
    border:12px solid #faa621;
}
/* ==========================================================================
   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;
}
.frame-loud{
    border:6px solid #faa621;
}
.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:#faa621;
}
a.go{
    display:block;
    background:#faa621;
    padding:4px 4px 6px 0.4em;
    color:#fff;
    font-size:2em;
    line-height:1.1em;
    font-family: 'Oswald', sans-serif; /* Google Font */
}
a.go:hover{
    background:#ffffff;
    color:#faa621;
    text-decoration:none;
}
body{
    font-family: 'Open Sans', sans-serif; /* Google Font */
    font-size: 15px;
    line-height: 1.7;
}
h1 {
    font-family: 'Oswald', sans-serif; /* Google Font */
    font-size: 48.5px;
    line-height: 50px;
}
h1,h2,h3,h4,h5,h6{
    font-family: 'Oswald', sans-serif; /* Google Font */
    font-weight: normal;
}
#navigation{
    font-family:'Oswald',sans-serif;
}
#banner header h3 {
    font-family:'Open Sans',sans-serif;
}
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;
}
/* ==========================================================================
   No Javascript stuff 
   ========================================================================== */
.js-disabled{display:none;}
.noscript .js-enabled{display:none;}
.noscript .js-disabled{display:inherit;}

/* ==========================================================================
  dl-horizontal overrides
   ========================================================================== */
.dl-horizontal dt {
    width: 460px;
}
.dl-horizontal dd {
    margin-left: 480px;
}
@media (max-width: 970px) {
    .dl-horizontal dt{ width:100%; text-align:left; }
    .dl-horizontal dd{ margin-left:0; width: 100%; clear:both;  }
}

/* ==========================================================================
   IE hacks
   ========================================================================== */
.lte8 #banner header h2{
    background-image:url('../images/apricot-logo-and-text-70.png');
}
.lte8 #banner header{
    background-image:url('../images/bangkok-header-background-70.jpg');background-position:30% 150%;
}
.lte7 #footer-nav li,
.lte7 #footer-sponsors li,
.lte7 #navigation li{
    display: inline;
}
.lte7 #footer-stamp{
    height:67px;
}
.lte7 #navigation li{
    margin-right:1em;
}

/* ==========================================================================
   APNIC 37 themed pages
   ========================================================================== */
.apnic37themeyes #pagecopy{
    background: url('../images/37.png') 0 0 no-repeat;
}

.apnic37themeyes .frame {
    border-color: #924593 !important;
    margin-top: 24px;
}

.apnic37themeyes #pagecopy h1,
.apnic37themeyes #pagecopy h2,
.apnic37themeyes #pagecopy h3,
.apnic37themeyes #pagecopy h4,
.apnic37themeyes #pagecopy h5,
.apnic37themeyes #pagecopy h6 {
    color: #924593;
}



/* ==========================================================================
   APNIC 37 themed pages - default layout
   ========================================================================== */
.apnic37themeyes.apnic37defaultlayoutyes #pagecopy {
    padding-left:240px;
    padding-right:130px;
}

/* ==========================================================================
   APNIC 37 themed pages - responsive styles
   ========================================================================== */
@media (min-width: 741px) and (max-width: 1199px) {
    .apnic37themeyes.apnic37defaultlayoutyes #pagecopy {
        padding-right: 0px;
    }
}
@media (max-width: 740px) {
    .apnic37themeyes.apnic37defaultlayoutyes #pagecopy {
        padding-top: 160px;
        padding-left: 0px;
        padding-right: 0px;
    }
}