source: VirtualCollectionRegistry/branches/VirtualCollectionRegistry-1.0-beta/src/main/webapp/css/CLARIN.scss @ 5596

@charset "UTF-8";

$indent: 7px;

// Colors

$red: #9e0025;
//$blue: #52acda;
//$dark_powder_blue: #003399;
//$clarin_blue_old: #007bc5;
$clarin_blue: #00406f;
$grey: #e3e3e3;
$light_grey: #f3f3f3;

$thin_separator_grey: #e7e7e7;
$text_emphasized: #222;
$text_deemphasized: #666;
//$hyperlink_color: #03683f;
$text_emphasized_periphery: #806a52;
$text_deemphasized_periphery: #c0a37c;
$hyperlink: $text_emphasized_periphery;
$hyperlink_visited: $text_deemphasized_periphery;
$background_color: #f9f9f9;

// Font
// https://bugzilla.mozilla.org/show_bug.cgi?id=604421
/*
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto Condensed Regular'), local('RobotoCondensed-Regular'), url('Roboto_Condensed_with_European_character_sets.woff') format('woff');
}
*/

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto Regular'), local('Roboto-Regular'), url('Roboto_with_European_character_sets.woff') format('woff');
}

$font-stack: 'Roboto', sans-serif;

body {
  font-family: $font-stack;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: $text_emphasized;
  font-size: 100%;
  word-wrap: break-word;
}

a {
  color: $hyperlink;
  text-decoration: dotted !important;

  &:hover, &:focus {
    // color: inherit;
    text-decoration: none !important;
  }

  &:visited {
    color: $hyperlink_visited;
  }
}

div.navbar-header {
  text-overflow: ellipsis;
  overflow: hidden;
  //max-height: 30px; // TODO: transition to flex divs.
}

a.navbar-brand {
  color: $text_emphasized_periphery;
  //text-shadow: 3px 3px 0px #2c2e38, 5px 5px 0px #5c5f72;
  font-size: 2em;
  text-overflow: ellipsis;
  //overflow: hidden;
  //letter-spacing: 1px;

  //$clarin_blue1: #00406f;
  //$clarin_blue2: #006dab;
  //$clarin_blue3: #007eda;

  //font-weight: bold;
  line-height: 1em;
  //color: $clarin_blue !important;

  //text-shadow: -.025em -.025em .0125em rgba(0, 64, 111, 0.8), -.060em -.080em 0.02em rgba(0, 64, 111, 0.6); //rgba(90, 90, 90, .6);
}

/*
a {
    text-decoration: none;
}

a:link {
    color: #00c;
    border-bottom: 1px solid #00c;
}

a:visited {
    color: #6D006D;
    border-bottom: 1px dotted #6D006D;
}

a:focus {
    color: #c00;
    border-bottom: 1px dashed #c00;
}

a:hover {
    color: #c00;
    border-bottom: 1px dashed #c00;
}

a:active {
    color: #c00;
    border-bottom: 1px solid #c00;
    font-style: italic;
}
*/

h1, h2, h3, h4, h5, h6, label {
  color: $text_deemphasized;
  font-weight: normal;
  line-height: 1.2em;
}

body, h1, h2, h3, h4, h5, h6 {
  font-size-adjust: 0.5;
}

/* Based on http://typecast.com/blog/a-more-modern-scale-for-web-typography */

#page {
  font-size: 1em;
  /* equivalent to 16px */
  line-height: 1.25;
  /* equivalent to 20px */
}

h1 {
  font-size: 2em;
  /* 2x body copy size = 32px */
  line-height: 1.25;
  /* 45px / 36px */
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}

h2 {
  font-size: 1.625em;
  /* 1.625x body copy size = 26px */
  line-height: 1.15384615;
  /* 30px / 26px */
}

h3 {
  font-size: 1.375em;
  /* 1.375x body copy size = 22px */
  line-height: 1.13636364;
  /* 25px / 22px */
}

h4 {
  font-size: 1.125em;
  /* 1.125x body copy size = 18px */
  line-height: 1.11111111;
}

blockquote {
  font-size: 1.25em;
  /* 20px / 16px */
  line-height: 1.25;
  /* 25px / 20px */
}

@media (min-width: 56.25em) {
  h1 {
    font-size: 3em;
    /* 3x body copy size = 48px */
    line-height: 1.05;
    /* keep to a multiple of the 20px line height
    and something more appropriate for display headings */
  }

  h2 {
    font-size: 2.25em;
    /* 2.25x body copy size = 36px */
    line-height: 1.25;
  }

  h3 {
    font-size: 1.75em;
    /* 1.75x body copy size = 28px */
    line-height: 1.25;
  }
}

@media (min-width: 43.75em) {
  #page {
    font-size: 1em;
    /* equivalent to 16px */
    line-height: 1.375;
    /* equivalent to 22px */
  }

  h1 {
    font-size: 2.5em;
    /* 2.5x body copy size = 40px */
    line-height: 1.125;
  }

  h2 {
    font-size: 2em;
    /* 2x body copy size = 32px */
    line-height: 1.25;
  }

  h3 {
    font-size: 1.5em;
    /* 1.5x body copy size = 24px */
    line-height: 1.25;
  }

  h4 {
    line-height: 1.22222222;
    /* (22px / 18px */
  }

  blockquote {
    font-size: 1.5em;
    /* 24px / 16px = */
    line-height: 1.45833333;
    /* 35px / 24px */
  }
}

p {
  margin: 0 0 15px 0;
}

//input {
//  @include box-sizing(border-box);
//}

menu, ol, ul {
  padding: 0 0 0 20px;
}

hr {
  clear: both;
}

div.container {
  z-index: -1 !important;
}

// Tables

//@import "compass/utilities/tables";

table.display {
  border-collapse: collapse !important;
  position: relative !important;
  border-spacing: 0 !important;
  border: 0px !important;
  background-clip: padding-box;
  //background-repeat: no-repeat;
  //background-position: center top;

  th, td {
    border: 0px !important;
    //background-clip: content-box !important;
  }

  thead tr th {
    background-color: $clarin_blue !important;
    border-collapse: collapse !important;
    //background-clip: content-box !important;
    background-attachment: scroll !important;
    //border-bottom: 0px !important;
    color: #fff !important;
  }

  thead {
    tr th:first-child {
      border-top-left-radius: 6px !important;
      border-bottom-left-radius: 6px !important;

      -webkit-border-top-left-radius: 6px !important;
      -webkit-border-bottom-left-radius: 6px !important;

      -moz-border-top-left-radius: 6px !important;
      -moz-border-bottom-left-radius: 6px !important;
    }

    tr {
      padding: $indent $indent !important;
      font-weight: bolder !important;
      text-align: left !important;
      border: 0px !important;
    }

    tr th a {
      color: #fff !important;
      text-decoration: underline !important;
    }

    tr th:last-child {
      border-top-right-radius: 6px !important;
      border-bottom-right-radius: 6px !important;

      -webkit-border-top-right-radius: 6px !important;
      -webkit-border-bottom-right-radius: 6px !important;

      -moz-border-top-right-radius: 6px !important;
      -moz-border-bottom-right-radius: 6px !important;
    }
  }
}

table {
  tbody {
    tr:nth-child(2n+1) td {
      background-color: $grey !important;
    }

    td:first-child {
      -webkit-border-top-left-radius: 6px !important;
      -webkit-border-bottom-left-radius: 6px !important;

      -moz-border-top-left-radius: 6px !important;
      -moz-border-bottom-left-radius: 6px !important;

      border-top-left-radius: 6px !important;
      border-bottom-left-radius: 6px !important;
    }

    td:last-child {
      -webkit-border-top-right-radius: 6px !important;
      -webkit-border-bottom-right-radius: 6px !important;

      -moz-border-top-right-radius: 6px !important;
      -moz-border-bottom-right-radius: 6px !important;

      border-top-right-radius: 6px !important;
      border-bottom-right-radius: 6px !important;
    }

    tr {
      //border-bottom: 1px solid #e6e6e6 !important;
      vertical-align: middle !important;
      //background-clip: padding-box !important;
      //border-collapse: collapse !important;
    }

    tr:last-child td:first-child {
      -webkit-border-bottom-left-radius: 6px !important;
      -moz-border-bottom-left-radius: 6px !important;
      border-bottom-left-radius: 6px !important;
    }

    tr:last-child td:last-child {
      -webkit-border-bottom-right-radius: 6px !important;
      -moz-border-bottom-right-radius: 6px !important;
      border-bottom-right-radius: 6px !important;
    }

    tr:last-child {
      border-bottom: 1px solid $clarin_blue !important;
    }
  }
}

table:not(.display) {
  tr:first-child {
    border-top: 1px solid $clarin_blue !important;
  }

  td, th {
    padding: 5px;
  }

  th {
    background-color: $grey;
    border-right: 1px dotted black;
  }
}

html body ul#nav ul, html body ul#nav ul li {
  width: 200px;
}

html body ul#nav ul ul {
  margin: 0 0 0 200px;
}

div#body {
  min-height: 100%;
  height: auto;
  //margin: 0 auto -60px;
  /* Pad top and bottom to prevent overflow over body div if using fixed-top navbar. */
  //padding: 60px 0 60px; // TODO: transition to flex divs.
}

div#footer {
  //height: 60px;
  background-color: #f5f5f5; // TODO: parameterize
  //position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  border-top: 1px solid $thin_separator_grey;
  margin-top: 20px;

  div.container {
    //height: 60px !important;
    height: 100%;
    display : flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
    align-content: space-around;

    div#CLARIN_footer_left {
      order: 1;
      //float: left;
      //display: inline-block;
      display: flex !important;
      text-align: left;
      vertical-align: middle;
      margin: auto;
      align-content: space-around;
      //width: 25%;
      //max-height: 100%;
    }

    div#CLARIN_footer_middle {
      order: 2;
      //float: left;
      //display: inline-block;
      display: flex !important;
      text-align: center;
      margin: auto;
      align-content: space-around;
      //width: 50%;
      //max-height: 100%;

      img {
        display: inline-block;
        max-width: 100%;
        max-height: 100%;
        overflow: hidden;
      }
    }

    div#CLARIN_footer_right {
      order: 3;
      //float: left;
      text-align: right;
      vertical-align: middle;
      display: flex !important;
      margin: auto;
      align-content: space-around;
      //width: 25%;
      //max-height: 100%;
    }
  }
}

ul#CLARIN_header_right, div#CLARIN_footer_left, div#CLARIN_footer_right {
  :not(.glyphicon) {
    font-family: $font-stack;
    font-size: smaller;
    font-variant: small-caps;
  }

  a {
    color: $text_emphasized_periphery;
    text-decoration: none;

    &:hover, &:focus {
      color: inherit !important;
      text-decoration: none !important;
    }

    &:visited {
      color: inherit !important;
      text-decoration: none !important;
      //color: $text_deemphasized_periphery;
    }
  }

  margin: 0px 4px 0 p x 4px;
  //text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;
  color: $text_emphasized_periphery;
  //opacity: 0.8;
}