/* Swatches */

@oayellow: #ffc425;
@oaorange: #ef5b23;
@oapurple: #7d355a;
@oagreen1: #014d42;
@oagreen2: #008471;
@oagreen3: #37bba4;
@oagreen4: #70c8bc;
@oagreys1: #d6d3e2;
@oagreys2: #a5bfba;

/* Global styles */

body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: "Raleway", "Helvetica Neue", Helvetica,Arial,sans-serif;
}

/* Navigation and header area */

body { padding-top: 25px; }

.anchor { padding-top: 50px; margin-top: -50px; }

a[name] {
  padding-top: 75px;
  margin-top: -75px;
  display: inline-block;
}

.navbar-header .navbar-brand {
  font-size:0px; text-indent:-9999px;
  width:16px; height:25px;
  margin-top:12px; margin-left:12px;
  background:url(../img/oalogo_x_white.png) no-repeat top left;
}

header {
  background:url(../img/bg.jpg) no-repeat;
  background-position: 0px 50%;
  background-size:100% auto;
  text-align: center;

  .container { display:none; }

  a {
    display: block;
    width:100%; height:225px; max-width: 960px;
    font-size: 0px; text-indent: -9999px;
    background:url(../img/header_wide.png) no-repeat bottom center;
    background-size:80%;
  }

  .lead {
    position: absolute;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    width: 100%;
    left: 0px;
    margin-top: 15px;
    span {
      background-color: @oaorange;
      color: white;
      padding: 0.4em;
      opacity: 0.9;
    }
  }
}

#github_ribbon {
  position: absolute;
  top: 3em;
  right: 0;
  border: 0;
  z-index: 1;
}

#video-header {
  background: url(../img/iconmonstr-video-5.png) no-repeat left center;
  background-size: 1em;
  padding-left: 1.5em;
}

.jumbotron { margin-bottom: 0; }

#start form { border: none; }

/* Bookmarklet popup */

#bookmarklet {
  display: none;
  position: fixed;
  top: 15px;
  right: 100px;
  z-index: 9999;
  padding: 10px;
  margin: 0;
  background: white;
  border: 1px solid #ddd;
  border-radius: 10px;
}

.slidetop {
  animation-name: swooshlet;
  -o-animation-name: swooshlet;
  -ms-animation-name: swooshlet;
  -moz-animation-name: swooshlet;
  -webkit-animation-name: swooshlet;  
  animation-duration: 2s;
  -o-animation-duration: 2s;
  -ms-animation-duration: 2s;
  -moz-animation-duration: 2s;
  -webkit-animation-duration: 2s;
}

@-webkit-keyframes swooshlet {.swoosh-frames;}
@-moz-keyframes swooshlet {.swoosh-frames;}
@-ms-keyframes swooshlet {.swoosh-frames;}
@-o-keyframes swooshlet {.swoosh-frames;}
@keyframes swooshlet {.swoosh-frames;}

.swoosh-frames () {
  from { opacity:0; top: 75px; }
  to   { opacity:1; top: 15px; }
}

#form-bookmarklet {
  .checkbox label { font-weight: 700; }
}

#help-bookmarklet {
  display: none;
  margin-top: 10px;
  margin-bottom: 30px;
  background: #eef;
  padding: 1em 1em 0.5em 1em;
}

.wedge-up {
  display: block;
  width: 15px;
  height: 15px;
  border-top: 15px solid transparent;
  border-left: 15px solid white;
  position: absolute;
  margin-top: -25px;
}

.modal-backdrop.in {
  opacity: .8;
  filter: alpha(opacity=80);
}

/* Activity map */

#world, #map { 
  height: 500px; 
  width: 100%; 
  margin-top: -20px;
}
#world {
  .underlay {
    display: none;
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 84%;
    margin: 0 8%;
    padding: 1em 0;
    z-index: 99;
    background: @oayellow;

    .lead {
      background: #fff;
      text-align: center;
      margin-bottom: 10px;
    }

    p { padding: 0 1em; font-size: 110%; }
  }
}

#counter {
  font-weight: bold;
  font-size: 120%;
}

.thumbnail .caption {
  padding: 0px;

  p { font-size: 95%; }
}

/* Content areas */

h2 { 
  color: #494949;
  font-size: 40px; 
  text-align: center; 
  padding-top: 0;
  margin-top: 0;
  margin-bottom: 15px;
}

h3 {
  color: #555;
  font-size: 19px;
  text-align: center;
  padding-top: 15px;
  margin-top: 0;
  margin-bottom: 1em;
}

h3.overline {
  border-top: 1px solid #aaa;
}

a[data-toggle] {
  cursor: pointer;
}

#intro, #contribute, #thanks {
  
  padding: 2em 3em;

  p { line-height: 1.7; }

  .row {
    border-left:  7px solid transparent;
    border-right: 7px solid transparent;
    padding: 0 1.5em;
  }  
  .row.hilite-left {
    border-left: 7px solid @oaorange;
  }
  .row.hilite-right {
    border-right: 7px solid @oaorange;
  }
}

.panel-contribute {
  margin: 0;
  border: 0;
  padding-top: 5pt;
  text-align: center;
  .panel-body { max-width:80%; }
  .contribute-button {
    cursor: pointer;
    background-color: #eb1478;
    border: none;
    padding: 3px 13px;
    margin-left: 10pt;
    color: #fff;
  }
  .contribute-button:hover {
    color: #fff; font-weight: bold;
  }
}

/* Container colors */
#thanks { background: #ffd; }
#intro, #footer { background: #eee; }

.buttons {
  margin-top: 2em;
  text-align: center;

  a { text-decoration: none !important; }

  button {
    font-size: 20px;
    padding: 4px 10px;
    border-color: #444;
    color: #000;
    margin: 0 20px;
  }
}

#contribute {
  background: #fff;
}

@thumbsize: 48;
@captwidth: 400;
@captheight: 156;
@captmargin: @captwidth - @thumbsize;
@thumbmargin: @captmargin + @thumbsize/2.4;
#thanks .team {
  ul { text-align: left; list-style: none; }
  .thumbnails {

    li { display: inline-block; margin: 0 2px; }

    .wedge-up { border-left-color: @oaorange; margin-top:-19px; }

    .thumb { 
      width: unit(@thumbsize, px); 
      height: unit(@thumbsize, px);
      overflow: hidden;
      display: inline-block;
      img { width: 100%; }
    }

    li:hover, li.hover { .thumb { opacity: 0.1; } }

    li.right {
      .caption { margin-left:unit(-@captmargin, px); }
      .wedge-up { 
        margin-left:unit(@thumbmargin, px); 
        border-left: none; 
        border-right: 15px solid @oaorange; 
      }
    }

    .caption { 
      position: absolute; z-index: 99;
      margin: 0;
      width: unit(@captwidth, px);
      height: unit(@captheight, px);
      max-width: 90%;
      padding: 4px;
      border: 2px solid @oaorange;
      background: white;
      font-size: 20px;

      .name { 
        font-size: 23px; 
        font-weight: bold; 
      }

      p {
        margin-top: 4px;
        font-size: 15px;
        line-height: 1.2;
      }

      .large { 
        height: unit(@thumbsize*3, px); 
        max-width: unit(@thumbsize*3, px); 
        float: left; margin-right: 5px;

        overflow: hidden;
        img { height: 144px; }
      }

      .links {
        position: absolute; 
        left: unit(@thumbsize*3, px);
        bottom: 5px;
      }

      .web, .twitter {
        display: inline-block;
        width: auto; height: 24px; 
        font-size: 18px; 
        margin-left: 10px;
        padding-left: 27px;
        background-size: 24px 24px;
        background-repeat: no-repeat;
        background-position: left;
      }

      .web { background-image: url(../img/iconmonstr-globe-3.png); }
      .twitter { background-image: url(../img/iconmonstr-twitter-4.png); }
    }

    li .caption { display:none; }
    li:hover, li.hover { .caption { display: block; } }
  }
}

#thanks .orgs {
  li { width: 25%; float: left; }
  p { 
    display: block; clear: both; 
    font-size: 15px;
    padding-top:1em; text-align: center; 
  }
}

#footer {
  padding-top: 2em;

  .icon {
    height: 32px;
    width: 32px;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 100%;
    position: relative;
    font-size: 0px;
    text-indent: -9999px;
    margin: 0 25px 0 0;
  }
  .icon:hover { opacity: 0.5; }
  .twitter { background-image: url(../img/webicon-twitter.png); }
  .facebook { background-image: url(../img/webicon-facebook.png); }
  .wordpress { background-image: url(../img/webicon-wordpress.png); }
}

.license { 
  font-size:75%; 
  img {
    float: left;
    padding-top: 1.5em;
    padding-right: 1em;
  }
}

/* Responsive styles */
@media screen and (max-width: 768px) {
  body { padding-top: 0px; }
  header a { background-size:100%; }
  header .lead { font-size:15px; position:relative; }
  .panel-contribute { 
    margin-top: 1.5em; 
    a { padding:0 1em; }
  }
}
@media screen and (max-width: 520px) {
  header a { 
    height: 110px; position: absolute; 
    background-image: url(../img/header_needaccess.png);
  }
  header .lead { visibility: hidden; }
  #github_ribbon { display: none; }
}