dev/scss/header/header.scss

@charset "utf-8";
@import "../util";
@import "hint";       // Hint specific menu list
@import "menu";       // Menu list
@import "searchbar";  // The search bar
@import "vc";         // Virtual collection builder
@import "datepicker"; // Datepicker

header {
  position: relative;
  background-color: $light-green;
//  @include light-noise;
  @include box-sizing-box();
  padding: $base-padding;
  padding-bottom: 0;
  font-size: 10pt;
  color: $nearly-white;
  // text-shadow: none;
  button {
    color: $light-green;
    background-color: transparent;
    border-width: 0;
    font-weight: normal;
    margin: 0;
    padding: 0;
    outline: none;
  }
  span.select { /* , #vc-choose, Formally vc.location */
    cursor: pointer;
    line-height: 1.8em;
    border: {
      width: 0;
      bottom-width: 3px;
      style: solid;
      color: transparent;
    }
    display: inline-block;
    &:hover {
      color: $dark-green;
      border-color: $dark-green;
    }
    &.active {
      border-color: $dark-orange;
    }
    &::after {
      pointer-events: none;
      font-family: FontAwesome;
      text-align: center;
      background-color: $light-green;
    }
  }
  span.select {
    &::after {
      content: $fa-down;
      padding: {
	left: 4pt;
	right: 4pt;
      }
    }
    &.active::after {
      content: $fa-up;
    }
  }

  form {
    padding-left: $logo-left-distance;
    min-height: 2.7em;
    display: block;
    margin: 0px;
    position: relative;
  }
  .clear {
    clear: both;
  }

  .button {
    &.right {
      float: right;
      display: inline-block;
    }
    &.top {
      position: absolute;
      display: block;
      top: 0;
      right: 0;
      margin-right: 0;
      width: ($standard-margin / 2);
      background-color: $dark-green;
      text-align: center;
      height: 100%;
      z-index: 20;
      > a:hover {
	color: $nearly-white
      }
    }
    color: $nearly-white;
    line-height: 2em;
    margin-right: $right-distance;
    > a {
      color: $nearly-white;
      cursor:pointer;
      position: relative;
      font-size: 120%;
      > span {
	@include blind;
      }
    }
    > a::after {
      font-family: 'FontAwesome';
    }
    > a.tutorial::after {
      content: $fa-tutorial;
    }
    > a.question::after {
      content: $fa-question;
    }
    > a.login::after {
      content: $fa-login;
    }
    > a.logout::after {
      content: $fa-logout;
    }
  }

  #vc-view > div {
    margin: 1.3em 0 .5em 0;
  }
}


/**
 * Temporary hack for language chooser
 * http://cssdeck.com/labs/styling-select-box-with-css3
 */
#ql-field {
  cursor: pointer;
  margin: 0;
  outline: none;
  border: none;
  display: inline-block;
  position: relative;
  color: white;
  background-color: $light-green;
  border-width: 0;
  border-radius: 0;
  @include no-appearance;
  &:checked {
    outline: none;
  }
  > option {
    padding: 0pt 2pt;
    outline: none;
  }
}

/**
 * funny hack for firefox
 */
#ql-field:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 white;
}