/* ==========================================================================
   Webfonts
   ========================================================================== */

@font-face {
  font-family: 'DINWebPro-Bold';
     src: url('webfonts/DINWebPro-Bold/DINWebPro-Bold.eot');
     src: url('webfonts/DINWebPro-Bold/DINWebPro-Bold.eot?#iefix') format('eot'),
          url('webfonts/DINWebPro-Bold/DINWebPro-Bold.woff') format('woff'),
          url('webfonts/DINWebPro-Bold/DINWebPro-Bold.ttf') format('truetype'),
          url('webfonts/DINWebPro-Bold/DINWebPro-Bold.svg#webfonteM3WTEhs') format('svg');
}

@font-face {
  font-family: 'DINWebPro-Medium';
     src: url('webfonts/DINWebPro-Medium/DINWebPro-Medium.eot');
     src: url('webfonts/DINWebPro-Medium/DINWebPro-Medium.eot?#iefix') format('eot'),
          url('webfonts/DINWebPro-Medium/DINWebPro-Medium.woff') format('woff'),
          url('webfonts/DINWebPro-Medium/DINWebPro-Medium.ttf') format('truetype'),
          url('webfonts/DINWebPro-Medium/DINWebPro-Medium.svg#webfonteM3WTEhs') format('svg');
}


/* ==========================================================================
   Base styles
   ========================================================================== */

* {
  -webkit-font-smoothing: antialiased;
  -webkit-transition:
    background-color 0.1s ease-in-out,
    border-color 0.1s ease-in-out,
    color 0.1s ease-in-out;
}

::selection {
  background-color: #b3d349;
  color: white;
}

body {
  min-width: 1024px;
  margin: 0;
  padding: 0;
  position: relative;
  font: 15px/25px Arial, sans-serif;
  background: white;
  color: #666;
}
/* prevent top margin */
body:before {
  content: "";
  height: 0;
  display: block;
  padding: 1px;
}

h1 {
  margin: 30px 0 14px;
  font: 28px/33px DINWebPro-Bold, Arial, sans-serif;
  text-transform: uppercase;
  color: #b3d349;
}

h2 {
  margin: 32px 0 5px;
  font: 18px/23px DINWebPro-Bold, Arial, sans-serif;
  text-transform: uppercase;
  color: #660066;
}

h1 + h2 {
  margin-top: 18px;
}

h3 {
  margin: 25px 0 0;
  font-size: 15px;
  font-weight: bold;
  line-height: 25px;
  color: #660066;
}

h1 small,
h2 small,
h3 small,
p.page-label small {
  float: right;
  padding: 13px 0 0;
  font: 13px/1 Arial, sans-serif;
  text-transform: none;
  vertical-align: text-bottom;
  color: #a9a9a9;
}

h1 a,
h2 a,
h3 a {
  text-decoration: none;
  color: inherit;
}

p {
  margin: 20px 0 0;
}

a {
  text-decoration: underline;
  color: #7eaf15;
}

a:hover {
  color: black;
}

a:active {
  color: #666;
}

a > img {
  border: 0;
}

figure {
  margin: 20px 0 0;
}

  figure > img {
    display: block;
  }

  /* text-image */
  figure.text-image {
    margin: 25px 0 25px;
    padding: 0;
  }
    figure.text-image img {
      display: block;
      margin: 0 0 13px;
      padding: 0;
    }
    figure.text-image .caption {
      color: #C2C2C2;
      font-size: 12px;
      line-height: 20px;
    }

.subtitle{
  font-size: 13px;
  color: #a9a9a9;
}

h1 + .subtitle{
  margin-top: -11px;
  margin-bottom: -2px;
}

sup, sub {
   vertical-align: baseline;
   position: relative;
   top: -0.4em;
}
sub { top: 0.4em; }


/* hover over anything */
.hover{
    cursor: pointer;
}

/*
 * Lists
 */

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

.lt-ie8 ol{
  padding-left: 30px;
}
.lt-ie8 .paragraph-section ul{
  list-style-image: url(../images/ie7/bullet.gif);
}


ul {
  list-style: none;
}

  li {
    padding: 0;
    margin: 0;
  }

  ul > li:before {
    content: ' ';
    display: inline-block;
    width: 5px;
    height: 5px;
    margin: 0 15px 5px -20px;
    vertical-align: text-bottom;
    background: #b3d349;
  }

/*
 * Tables
 */

table {
  width: 100%;
  margin: 20px 0 0;
  border-collapse: collapse;
  /* behavior: url(../modules/base/styles/striped-table.htc);  /* emulate nth-child trick for IE8, place in conditional comment */
}

  thead th,
  thead td,
  thead th[class] { /* give importance over th.odd for IE8 */
    font-weight: bold;
    background: #b3d349;
    color: white;
  }

  th,
  td {
    padding: 7px 20px 8px;
    font-size: 14px;
    font-weight: normal;
    line-height: 25px;
    text-align: left;
    vertical-align: top;
    background: white;
    overflow: hidden;
    text-overflow: ellipis;
  }

  tr:nth-child(2n) > td,
  tr:nth-child(2n) > th {
    background: #eee;
  }

  td.odd,
  th.odd { /* emulate nth-child trick for IE8 */
    background: #eee;
  }

.tbi3-projects td{
  overflow: hidden;
  text-overflow: ellipsis;
}


/*
 * Reset margin-top on first-child elements
 * or elements that come after an heading
 */

h1:first-child, h2:first-child, h3:first-child,
p:first-child, ul:first-child, ol:first-child, li:first-child, figure:first-child,
h1 + p, h2 + p, h3 + p,
h1 + table, h2 + table, h3 + table,
h1 + ul, h2 + ul, h3 + ul,
h1 + ol, h2 + ol, h3 + ol,
h1 + figure[class*="float"] + p,
h2 + figure[class*="float"] + p,
h3 + figure[class*="float"] + p {
  margin-top: 0;
}

/* paragraph-section to prevent floating figures from floating next to each other when
 * there is no (or to little) text after them
 */
.paragraph-section{
  clear: both;
}
.paragraph-section:before,
.paragraph-section:after {
    content: " ";
    display: table;
}
.paragraph-section:after {
    clear: both;
}
.paragraph-section {
    *zoom: 1;
}

/* Reset style, because widget is in a paragraph section */
.paragraph-section section.widget {
  margin-left: 0;
}


/*
 * Re-reset margin-top on first-child elements
 * inside the paragraph-section
 */

.paragraph-section h1:first-child{
  margin-top: 30px;
}
.paragraph-section h2:first-child{
  margin-top: 32px;
}
.paragraph-section h3:first-child{
  margin-top: 25px;
}
.paragraph-section p:first-child{
  margin-top: 20px;
}
.paragraph-section ul:first-child{
  margin-top: 20px;
}
.paragraph-section ol:first-child{
  margin-top: 20px;
}
.paragraph-section figure:first-child{
  margin-top: 26px;
}

/*
 * Re-re-reset margin-top on first-child elements
 * inside the first paragraph-section
 */
.paragraph-section:first-child h1:first-child,
.paragraph-section:first-child h2:first-child,
.paragraph-section:first-child h3:first-child,
.paragraph-section:first-child p:first-child,
.paragraph-section:first-child ul:first-child,
.paragraph-section:first-child ol:first-child,
.paragraph-section:first-child figure:first-child{
  margin-top: 0;
}

/*
 * Horizontal ruler
 */

hr {
  display: block;
  height: 5px;
  padding: 0;
  margin: 40px 0 0;
  border: 0;
  border-top: 1px solid #eee;
}

.lt-ie8 hr{
  height: 1px;
}

/* ==========================================================================
   Alternative styles
   ========================================================================== */

/*
 * Homepage title
 */

.homepage-title {
  margin: 32px 0 17px;
  font-size: 24px;
  line-height: 29px;
  color: #660066;
}

/*
 * Page label
 */

.page-label {
  margin: 30px 0 14px;
  font: 28px/33px DINWebPro-Bold, Arial, sans-serif;
  text-transform: uppercase;
  color: #b3d349;
}

/*
 * Page title
 */

.page-title {
  margin: 20px 0 17px;
  font-size: 24px;
  line-height: 29px;
  color: #660066;
}

/*
 * FAQ title
 */

.faq-title {
  font-size: 15px;
  line-height: 25px;
  text-transform: none;
}

/*
 * Link list
 */

.link-list {
  padding: 0;
  margin: 13px 0 0;
  list-style: none;
}

.link-list:first-child {
  margin-top: 23px;
}

  .link-list > li:before {
    display: none;
  }

  [class*="link-list-link"] {
    position: relative;
    display: block;
    padding: 7px 18px 7px 0;
    text-decoration: none;
    border-bottom: 1px solid #dadada;
  }

  .link-list-link-menu {
    padding: 11px 18px 11px 0;
  }

  :first-child > [class*="link-list-link"] {
    border-top: 1px solid #dadada;
  }

  [class*="link-list-link"]:after {
    content: ' ';
    position: absolute;
    top: 50%;
    right: 4px;
    width: 7px;
    height: 11px;
    margin-top: -6px;
    background: url('../images/sprites/sprite.png') no-repeat;
    background: rgba(0,0,0,0) url('../images/sprite.svg') no-repeat;
    background-position: -7px -345px;
  }

  .link-list-link-menu:after {
    right: 10px;
  }

  [class*="link-list-link"]:hover:after {
    background-position: -27px -345px;
  }

  [class*="link-list-link"]:active:after {
    background-position: -47px -345px;
  }


  .lt-ie8 .link-list-link{
    background: url("../images/ie7/arrow-right-green.png") no-repeat right center;
  }
  .lt-ie8 .link-list-link:hover{
    background-image: url("../images/ie7/arrow-right-3.png");
  }

.paragraph-section .link-list{
  clear: both;
}

/*
 * Menu list
 */

.menu-list {
  padding: 0;
  margin: 13px 0 0;
  list-style: none;
}

.menu-list:first-child {
  margin-top: 23px;
}

  .menu-list > li:before {
    display: none;
  }

  .menu-list-link {
    position: relative;
    display: block;
    padding: 11px 18px 11px 0;
    text-decoration: none;
    border-bottom: 1px solid #eee;
  }

  :first-child > .menu-list-link {
    border-top: 1px solid #eee;
  }

  .menu-list-link:after {
    content: ' ';
    position: absolute;
    top: 50%;
    right: 4px;
    width: 7px;
    height: 11px;
    margin-top: -6px;
    background: url('../images/sprites/sprite.png') no-repeat;
    background: rgba(0,0,0,0) url('../images/sprite.svg') no-repeat;
    background-position: -7px -345px;
  }

  .menu-list-link-menu:after {
    right: 10px;
  }

  [class*="menu-list-link"]:hover:after {
    background-position: -27px -345px;
  }

  [class*="menu-list-link"]:active:after {
    background-position: -47px -345px;
  }

  .lt-ie8 .menu-list-link{
    background: url("../images/ie7/arrow-right-green.png") no-repeat right center;
  }
  .lt-ie8 .menu-list-link:hover{
    background-image: url("../images/ie7/arrow-right-3.png");
  }

  .menu-list-icon {
    margin: 0 6px 0 0;
  }

/*
 * Data list
 */

.data-list {
  margin: 13px 0 0;
  padding: 0 0 0 128px;
  border-bottom: 1px solid #eee;
}

  .data-list-title {
    clear: left;
    float: left;
    width: 128px;
    padding: 7px 0;
    margin: 0 0 0 -128px;
    border-top: 1px solid #eee;
    color: black;
  }

  .data-list-description {
    padding: 7px 0;
    margin: 0;
    border-top: 1px solid #eee;
  }

/*
 * Table projects
 */

.table-projects {
  margin-top: 40px;
}

/*
 * Table subheading
 */

.table-heading-sub[class] { /* give importance by using [class] attribute selector */
  font-weight: bold;
  color: black;
  background: #dadada;
}

/*
 * Floating elements
 */

.float-left {
  float: left;
  margin: 6px 26px 0 0;
}

figure.float-left {
  margin: 26px 26px 10px 0;
}

.float-right {
  float: right;
  margin: 6px 0 0 26px;
}

figure.float-right {
  margin: 26px 0 10px 26px;
}

.clear-float .float-right,
.clear-float .float-left{
  float: none;
}

h1 + figure[class*="float"],
h2 + figure[class*="float"],
h3 + figure[class*="float"] {
  margin-top: 6px;
}

/* fix floating image + list showing up behind the figure */
.paragraph-section figure{
  background: #fff;
  position: relative;
  z-index: 1;
}
.paragraph-section figure.float-left {
  padding: 26px 26px 10px 0;
  margin:0;
}
.paragraph-section figure.float-right {
  padding: 26px 0 10px 26px;
  margin:0;
}

.paragraph-section h1 + figure[class*="float"],
.paragraph-section h2 + figure[class*="float"],
.paragraph-section h3 + figure[class*="float"] {
  padding-top: 6px;
}



/* fix floating image in no man's land */
figure.float-left + .separator,
figure.float-left + table {
  clear: left;
}

figure.float-right + .separator,
figure.float-right + table {
  clear: right;
}

/*
 * Banner
 */

img.banner {
  display: block;
}

/*
 * Separator
 */

.separator {
  padding: 20px 0 0;
  margin: 40px 0 0;
  border-top: 1px solid #eee;
}

/* fix edge case: separator after floating image */
figure.float-right + p + .separator {
  clear: right;
  border-top: 0;
  padding: 0;
  margin: 0;
}

figure.float-right + p + .separator:before {
  content: ' ';
  display: block;
  height: 20px;
  margin: 0 0 20px;
  border-bottom: 1px solid #eee;
}


/*
 * Action
 */

.actions {
  clear: both;
  margin: 28px 0 0;
}

/*
 * Share
 */

.share {
  clear: both;
  font: 15px/25px DINWebPro-Medium, Arial, sans-serif;
  text-align: right;
}

/*
 * Comments
 */

.comments {
  margin: 37px 0 0;
}

.comments:first-child {
  margin-top: 0;
}

  .comments-title {
    margin-bottom: 14px;
  }

/*
 * Project status
 */

.project-status {
  padding: 13px 0 0;
  margin: 0 0 -14px;
  font: 13px/1 Arial, sans-serif;
  text-align: right;
  text-transform: none;
  vertical-align: text-bottom;
  color: #a9a9a9;
}

/*
 * JavaScript links
 */

.js [data-href],
.js [data-href-new-window] {
  cursor: pointer;
}

.js tr[data-href]:hover td,
.js tr[data-href-new-window]:hover td,
.js tr[data-href]:hover th,
.js tr[data-href-new-window]:hover th {
  color: black;
}

.js tr[data-href]:active td,
.js tr[data-href-new-window]:active td,
.js tr[data-href]:active th,
.js tr[data-href-new-window]:active th {
  color: #999;
}

.js [data-href] a,
.js [data-href-new-window] a {
  text-decoration: none;
  color: inherit;
}

/*
 * Video wrapping
 */

.video-wrapper {
  margin: 20px 0 0;
  width: 474px;
  overflow: hidden;
}
.video-wrapper.wide {
  width: 642px;
}

/* ==========================================================================
   Clearfix
   ========================================================================== */

.cf {
  *zoom: 1;
}

.cf:before,
.cf:after {
  content: ' ';
  display: table;
}

.cf:after {
  clear: both;
}


/* ==========================================================================
   Hidden elements
   ========================================================================== */

.is-hidden {
  position: absolute !important;
  clip: rect(0 0 0 0);
}

/*
 * Redoute input
 */

.redoute {
  display: none;
}