//
// APP STYLES
//


#masthead {
  background: 50% 50% url(/img/rainbow-masthead-small.png) no-repeat;
  height: 96px;
  border-bottom: 4px solid black;
  .title {
    width: 460px;
    margin: 0 auto;
    padding: 0;
    font-size: 26px;
    line-height: 96px;
  }
}


//
// HOME PAGE STYLES
//

.home-page {
  .b {
    font-weight: bold;
  }
  h1 {
    margin-top: 1em;
  }
  .home-buttons .box {
    margin-bottom: 1em;
  }
}

//.home-page .navbar .navbar-inner {
.home-page {
  .navcontainer {
    overflow: hidden;
  }
  .nav {
    width: 1000px;
    max-width: 1000px;
    margin: 0 auto;

    //@include border-bottom-radius(4px);
    //background: #444;
    //border-top: 2px solid black;
    //border-bottom: 2px solid black;
    padding: 10px;
    padding-left: 26px;
    font-weight: bold;
    a {
      color: #fff;
      &:hover {
        color: #000;
        //text-decoration: underline;
      }
    }
    margin-bottom: 0;
  }
  .navheader {
    background: #444;
    border-top: 2px solid black;
    border-bottom: 2px solid black;
    margin-bottom: 1em;
  }
}

.home-page .heroish-unit {
  background: 50% 50% url(/img/rainbow-masthead.png) no-repeat;

  //background-image:  url('image.png');
  //background-image:  none,url('image.svg'), url('image.png');
  //background-size: 100% 100%;



  height: 256px;
  //padding: 60px;

  //@include gradient-vertical(#e6e6e6, #ccc);
  //margin: 10px 0 1px 0;
  color: black;

  //@include box-shadow(#{0 4px 6px rgba(0,0,0,.15) inset, 0 -2px 5px rgba(0,0,0,.25) inset});
  //@include box-shadow(#{2px 2px 8px rgba(255,255,255,.3) inset});
  //@include border-top-radius(4px);

  //.image {
  //  background-image: url(/img/bitmask-large.png);
  //  height: 122px;
  //  width: 256px;
  //  float: left;
  //  margin-right: 20px;
  //}
  .text {
    width: 360px;
    margin: 80px auto 0 auto;
  }
  .title {
    font-size: 80px;
    line-height: 60px;
    color: #000;
    margin: 0;
    font-weight: bold;
  }
  .tagline {
    padding-left: 5px;
    margin-top: 6px;
    font-size: 18px;
    line-height: 24px;
  }
}

.home-page {
  .introtext {
    font-size: 18px;
    line-height: 24px;
    margin: 10px 0;
  }
  .home-buttons {
    //text-align: left;
    //a.btn {
    //  width: 12em;
    //  padding: 8px;
    //  margin: 0 0 12px 0;
    //}
  }

}

//
// SMALL SCREEN
//

@media (max-width: 767px) {
  .home-page .masthead {
    margin-left: -20px;
    margin-right: -20px;
    .heroish-unit {
      background: 40% 50% url(/img/rainbow-masthead-small.png) no-repeat;
      height: 96px;
    }
    .tagline {
      display: none;
    }
    .text {
      margin: 0 auto;
      padding: 0;
      width: 190px;
    }
    .title {
      font-size: 42px;
      line-height: 96px;
    }
  }
}