/*  BAM
    ...................................................................... */

    @import "foundation.css";


/*  LAYOUT
    ...................................................................... */

    body {/*
      background: url(images/grid.gif) 50% 0;*/
        font-family: Verdana, Arial, sans-serif;
        color: #142e3b;
    }
    a {
        color: #142e3b;
    }
    a:hover {
      color: #0096ff;
    }
    address {
      font-style: normal;
    }
    #page {
      position: relative;
      top: 5em;
        margin: 24px auto;
        width: 98em;
        border: 1px solid #ccc;
    }
    #header {
      position: relative;
      top: -3.75em;
        font-weight: bold;
        text-transform: uppercase;
        text-align: right;
    }
    #header a span { margin-left: -9999px; }
    #header a {
      color: #000;
    }
    #header #top {
      height: 48px;
      margin-top: -2em;
    }
    #header a#logo {
      width: 76px;
      height: 48px;
      background: url(/images/bam-logo.png) top left no-repeat;
      margin-top: -15px;
      display: block;
      float: left;
    }
  #header a#logo:hover {
      color: #142e3b;
      background: url(/images/bam-logo.png) bottom left no-repeat;
    }
    #header p {
      position: relative;
      left: -1px;
        float: left;
        display: inline;
        padding: 1.375em 0 0;
        width: 62%;
        font-size: 1.2em;
        text-align: left;
    }
    #header p strong {
        margin-right: 1em;
        font-size: 1.1em;
        color: #0096ff;
    }
    #header p span {
        margin-right: 1.0em;
    }
    #header p strong img {
      position: relative;
      top: -2px;
        vertical-align: middle;
    }
    #header form {
      position: relative;
      right: -0.125em;
      _right: -3em;
        padding: 1.5em 0 .5em;
        float: right;
        display: inline;
        width: 38%;
    }
    *+html #header form {
      right: -1em;
    }
    #header form legend, #header form label {
        position: absolute;
        top: 0;
        left: -9999em;
    }
    #header form input {
        margin: 0;
        padding: .25em 0;
        border: 1px solid #000;
        background: #fff;
        font-size: 1em;
        vertical-align: middle;
        font-family: inherit;
    }
    #header form button {
      position: relative;
      top: -0.125em;
        margin: 0;
        padding: 0;
        border: 0;
        font-weight: bold;
        font-size: 1.2em;
        font-family: inherit;
        background: none;
        text-transform: uppercase;
        vertical-align: middle;
    }
    #footer {
      padding: 2em 0 0;
        text-transform: uppercase;
        font-weight: bold;
    }
    #header ul {
        position: relative;
        top: 1em;
        margin: 1em 1em -4em;
        background: #111;
        clear: both;
        list-style: none;
        text-align: left;
    }
    #header li {
        float: left;
    display: inline;
        width: 14.3%;
    }
    #header li a {
        display: block;
        padding: .125em .4em .25em .3em;
        border-left: .9em solid #fff;
        font-size: .9em;
        line-height: 1.125;
        background: #111;
        color: #fff;
        text-shadow: .1em .1em .1em #000;
        text-align: center;
    }
    #header li#m-landscape a {
        border-left: 0;
    }
    #header li#m-contact-bam {
      margin-right: -1em;
    }
    #header li a:hover {
        background: #142e3b;
        color: #fff;
    }
    #content {
        margin-top: 2.25em;
        border-top: 0;
    }
    #content #masthead {
      clear: both;
        position: relative;
        float: left;
        margin-bottom: -6em;
        width: 100%;
    }
    #content #masthead img {
        position: relative;
        display: block;
        margin: 0 auto;
        width: 100%;
    }
    body.about #content #masthead {
      display: none !important;
    }
  #content .wrap {
    clear: left;
    margin: 2em 1em 0px 1em;
  }
    #content h1 {
        padding: 2.75em 0 .5em;
        font-size: 1.8em;
        color: #142e3b;
        text-transform: uppercase;
        font-weight: bold;
    }
    #content h1.no-top {
      padding-top: 0 !important;
    }
    #content .intro h1 {
      padding-top: .5em;
    }
    #content h2, #content h3 {
        font-size: 1.375em;
        font-weight: bold;
        line-height: 1.24;
        color: #333;
        clear: left;
        margin-bottom: .45em;
        text-transform: uppercase;
    }
  #content #primary h2, #content #primary h3 {
        min-height: 4.95em;
    }
    #content #secondary h2, #content #secondary h3 {
      min-height: 0;
    }
    #content h3 {
        font-weight: normal;
    }
    #content p, #content address {
        padding-bottom: 1em;
    }
    #content #main {
      clear: both;
        position: relative;
    }
    #content #main p, #content #main address, #content #main ul {
        font-size: 1.2em;
        line-height: 1.5;
    }
    #content #main .english, #content #main .chinese {
        float: left;
    display: inline;
        width: 50%;
        padding-bottom: 1.8em;
    }
    #content #main .english {
        clear: both;
    }
  #content #main .chinese {
    position: relative;
    margin-right: -1em;
    }
    #content #main .intro .english .wrap {
      margin-left: 2em;
      margin-right: 2.5em;
    }
    #content #main .intro .chinese .wrap {
      margin-left: 1.5em;
      margin-right: 3em;
    }
    #content #main ul.listing .english .wrap, #content #main ul.listing .chinese .wrap {
      margin-left: 2em;
      margin-right: 2em;
    }
  #content #main ul.listing .chinese .wrap {
      margin-left: 2em;
    }
    #content #main .intro {
      padding-top: 2.75em;
    }
    #content #main ul.listing {
        clear: both;
        margin: 0 1em;
        padding-top: 1.2em;
        list-style: none;
        font-size: 1em;
    }
    #content #main ul.listing li {
        position: relative;
        padding: 0 0 0 18em;
        min-height: 17.25em; /* see bam-ie.css for IE height setting */
    }
    #content #main ul.listing p.image {
        position: absolute;
        left: 0;
        padding: 0;
        float: left;
    display: inline;
        top: .375em;
        font-size: 1em;
    }
    #content #main ul.listing p.image img {
        width: 16em;
    }
    #content #main .entry {
      margin-right: 2.25em;
    }
    #content #main #primary .entry {
      margin-right: 0;
    }
    #content #main #primary .entry .image {
    padding: 0;
    height: 24.6em;
      overflow: hidden;
    }
    #content #main #primary .entry .caption {
      margin: .5em 0;
      padding: 0;
      min-height: 5.8em;
    }
    #content #main .location, #content #main .title {
        text-transform: uppercase;
    }
    #content #main .location .loc, #content #main .title .loc {
        text-transform: capitalize;
    }
    #content #main p.location, #content #main p.title {
      padding-bottom: 0;
    }
    #content #primary, #content #secondary, #content #tertiary {
        position: relative;
        float: left;
    display: inline;
        width: 25%;
    }
    #content #primary {
        width: 50%;
        left: 25%;
    }
    #content p.photo img, #content #primary p img, #content p.map img {
      width: 100%;
    }
    #content p.photo img {
        margin-top: 1em;
    }
    #content p.caption {
        font-size: 1.2em;
    }
    #content #secondary {
        font-size: 1em;
        left: -50%;
    }
    #content #secondary h2 {
        padding-top: .0625em;
        font-weight: bold;
        font-size: 1.25em;
        text-transform: uppercase;
    }
  #content #secondary .image {
    padding: 0;
  }
    #content #secondary .image img {
      float: left;
      position: relative;
      margin: .375em 1em .5em 0;
      width: 6.5em;
    }
    #content #secondary .entry {
      margin: 0 0 1.5em 0;
      border: 1px solid #999;
      padding: 1em 1em 0;
        font-size: .9em;
        color: #666;
    }
    #content #tertiary {
      margin-right: -1em;
    }
    #content #tertiary .entry {
      margin-right: 0;
    }
    #content ul.thumbs, #content ul.related {
        list-style: none;
    }
  #content ul.thumbs {
      position: relative;
      left: .75em;
    }
    #content ul.thumbs li, #content ul.related li  {
        display: inline;
    }
    #content ul.thumbs li img, #content ul.related li img {
        float: left;
    display: inline;
    width: 5.75em;
        margin-right: .5em;
        margin-bottom: .5em;
    }
    #content #tertiary ul.thumbs {
      left: 0;
      margin-right: -1em;
    }
    #content #main ul.related li img {
        margin-right: 1.75em;
        margin-bottom: 1em;
        width: 13.25em;
    }
    #content #main ul.bios {
      position: relative;
      margin: 0 -.5em;
      list-style: none;
    }
    #content #main ul.bios .bio-photo {
      display: block;
      margin: 0 0 .5em;
      max-width: 100%;
    }
    #content #main ul.bios li {
      float: left;
      padding: 0 .5em;
      width: 25%;
      box-sizing: border-box;
    }
    #content #main ul.bios li p {
      font-size: .9em;
    }
    #content #main ul.bios li p.title {
      margin-bottom: .5em;
    }
    #content #main ul.bios li p.title, #content #main ul.bios li p.subtitle {
      font-size: 1em;
    }
    #content p.download {
      margin-right: 2em;
      text-align: right;
      text-transform: uppercase;
      font-weight: bold;
    }
  #footer {
    margin-top: 1.2em;
  }
  #footer p {
    padding-bottom: 2em;
  }
    #header ul:after, #content #main:after, #content ul.listing li:after, #content ul.thumbs:after, #content ul.related:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
  }

  /* Slideshow controls */
  #slideshow {
    position: relative;
  }
    #slideshow .slideButtons .next,
    #slideshow .slideButtons .prev {
      font-size: 20px;
      height: 100%;
      line-height: 1;
      position: absolute;
      text-indent: -999em;
      top: 10px;
      width: 50%;
      -webkit-transition: background 500ms ease-out;
      -moz-transition: background 500ms ease-out;
      -o-transition: background 500ms ease-out;
      transition: background 500ms ease-out;
    }
    #slideshow .slideButtons .prev {
      left: 10px;
    }
    #slideshow .slideButtons .next {
      right: 10px;
    }

  /* Intro Video */
  .intro-video {
    position: relative;
    z-index: 200;
  }
  .intro-video img {
    position: relative;
    z-index: 201;
    max-width: 100%;
  }
  .intro-video-link {
    position: absolute;
    z-index: 205;
    top: 0;
    bottom: 0;
    width: 50%;
    background-size: auto 160px;
    background-position: center center;
    background-repeat: no-repeat;
    transition: opacity .3s;
    -webkit-transition: opacity .3s;
  }
  .intro-video-link-full {
    width: 100%;
    left: 0;
    right: 0;
  }
  .intro-video-link:hover {
    opacity: .8;
  }
  .intro-video-link-youku {
    left: 0;
    background-image: url(/images/youku-logo.png);
  }
  .intro-video-link-youtube {
    right: 0;
    background-image: url(/images/youtube-logo.png);
  }
  .intro-video-link-vqq {
    background-image: url(/images/vqq-logo.png);
    background-size: auto 280px;
  }