/* =DARK */
/* TODO: Write a standalone header that we can share accross Next, Jobs, Help, etc… */
.g-dark {
  color: #777;
}

.g-dark a {
  color: #ccc;
  text-shadow: 0 1px 0 #000;
}

.g-dark a:hover,
.g-dark a:focus {
  color: #eee;
}

/* =BASE STYLES
----------------------------------------------------------------------------- */
.header {
  font: 100 14px/1.5 "Interstate", "Lucida Grande", Arial, sans-serif;
  height: 45px;
  background-color: #333;
}

.header,
.header__inner {
  width: 100%;
}

.header__inner {
  border-top: 1px solid #2a2a2a;
  background: transparent url(../images/header/header-bg.png) repeat-x 0 0;
  height: 48px;
  z-index: 1000;
  -webkit-transform: translate3d(0,0,0);
}

.header__aboutShowing .header__inner {
  -webkit-transform: translate3d(0,200px,0);
     -moz-transform: translateY(200px);
       -o-transform: translateY(200px);
      -ms-transform: translateY(200px);
          transform: translateY(200px);
}

.header__left {
  margin-left: 30px;
}

.header__right {
  margin-right: 30px;
}

.header ul {
  margin: 0;
  list-style: none;
}

/* =LOGO
----------------------------------------------------------------------------- */
h1.header__logo {
  margin-top: -1px;
  border-left: 1px solid #000;
  background: #f60;
  background: -webkit-linear-gradient(#f60, #f30);
  background: -moz-linear-gradient(#f60, #f30);
  background: -o-linear-gradient(#f60, #f30);
  background: linear-gradient(#f60, #f30);
  -webkit-box-shadow: -1px 0 0 rgba(255,255,255,0.08);
          box-shadow: -1px 0 0 rgba(255,255,255,0.08);
}

.header__logo > a {
  display: block;
  height: 46px;
  width: 84px;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(173,73,0,0.7) rgba(255,255,255,0.15) rgb(173,73,0);
}

.header__logo > a:hover,
.header__logo > a:focus {
  background: rgba(255,72,0,0.8);
  outline: 0;
}

.header__logo img {
  width: 82px;
  height: 44px;
}

/* =SEPERATORS & NAVIGATION MENUS
----------------------------------------------------------------------------- */

.header__container,
.header__navMenu {
  border-left: 1px solid rgba(0,0,0,0.5);
  border-right: 1px solid rgba(255,255,255,0.05);
  -webkit-box-shadow: -1px 0 0 rgba(255,255,255,0.05);
          box-shadow: -1px 0 0 rgba(255,255,255,0.05);
  -webkit-backface-visibility: hidden;
}

.header__separator,
.header__navMenu > li {
  border-right: 1px solid rgba(0,0,0,0.5);
}

.header__bordered,
.header__navMenu > li > a {
  border: 1px solid rgba(255,255,255,0.05);
  border-width: 0 1px;
}



.header__farRight {
  border-right: 0;
  float: left;
  width: 330px;
}

.header__soundInput {
  border-left: 1px solid rgba(255,255,255,0.05);
}

.header__soundInputButton {
  display: inline-block;
  padding: 0 10px;
  margin: 10px 10px 9px;
  line-height: 1.7;
  border-radius: 4px;
  border: 1px solid black;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
  background: -webkit-linear-gradient(#414141, #292929);
  background: -moz-linear-gradient(#414141, #292929);
  background: -o-linear-gradient(#414141, #292929);
  background: linear-gradient(#414141, #292929);
}