/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

@width-page-margin: 19px;
@width-column: 91px;
@width-date-teaser-number: 75px;
@width-date-teaser-text: 360px;

@height-header: 272px;
@height-nav: 55px;
@height-footer: 240px;
@height-footer-links: 63px;
@height-date-teaser: 78px;

@color-very-light-grey: #F2F2F2;
@color-text-footer: #969696;
@color-footer-links: #E6E6E6;
@color-footer-links-hover: #DBE22C;
@color-headline: #002068;
@color-subtitle: #71C2E5;
@color-text: black;
@color-border: #DDE3EA;

@font-face {
  font-family: OpenSans;
  src: url('../font/OpenSans-Regular.ttf');
}

@font-face {
  font-family: 'Monkey';
  src: url('../font/monkey.eot');
  src: url('../font/monkey.eot?#iefix') format('embedded-opentype'),
  url('../font/monkey.woff') format('woff'),
  url('../font/monkey.ttf') format('truetype'),
  url('../font/monkey.svg#Monkey') format('svg');
}

@font-face {
  font-family: MavenPro;
  src: url('../font/MavenPro-Regular.ttf');
}

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html,
button,
input,
select,
textarea {
  color: @color-text;
}

strong {
	font-weight: bolder;
}

html {
  font-size: 1em;
  line-height: 1.4;
  background: #dde3ea;
  font-family: OpenSans, Arial, sans-serif;
}

body {
  background: #dde3ea; /* Old browsers */
  background: -moz-linear-gradient(top, #f7f7f7 0%, #dde3ea 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f7f7f7), color-stop(100%, #dde3ea)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #f7f7f7 0%, #dde3ea 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #f7f7f7 0%, #dde3ea 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #f7f7f7 0%, #dde3ea 100%); /* IE10+ */
  background: linear-gradient(to bottom, #f7f7f7 0%, #dde3ea 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f7f7', endColorstr='#dde3ea', GradientType=0); /* IE6-9 */
}

h1 {
  font-family: Monkey, Arial, sans-serif;
  font-size: 50px;
  line-height: 1em;
  font-weight: normal;
  color: @color-headline;
  margin: 0 0 2*@width-page-margin 0;
}

h2 {
  font-family: MavenPro, Arial, sans-serif;
  font-size: 35px;
  color: @color-headline;
  margin: 0 0 @width-page-margin 0;
}

h3 {
  font-family: MavenPro, Arial, sans-serif;
  font-size: 30px;
  color: @color-headline;
  margin: 0 0 @width-page-margin 0;
}

h4 {
  font-family: MavenProBold, Arial, sans-serif;
  font-size: 17px;
  font-weight: bold;
  color: @color-subtitle;
  margin: 0 0 @width-page-margin 0;
}

#main {
  width: 2*@width-page-margin + 12*@width-column;
  margin: 0 auto;
}

header {
  width: 100%;
  height: @height-header;
  background: url(../icon/ESL_web_header.png) no-repeat;
  position: relative;
}

nav {
  width: 100%;
  padding: 0 (@width-page-margin + @width-column);
  background-color: #E0E0E0;
  height: @height-nav;
  line-height: @height-nav;
  border-bottom: 1px solid @color-very-light-grey;

  ul {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;

    .nav-projekt {
      background-image: url('../icon/ESL_web_projekt_off.png');
    }

    .nav-projekt:hover {
      background-image: url('../icon/ESL_web_projekt_on.png');

      ul {
        background-color: #71C2E5;
        display: block;

        a {
          color: white;
        }
      }

    }

    .nav-projekt.active {
      background-image: url('../icon/ESL_web_projekt_roll.png');
    }

    .nav-partner {
      background-image: url('../icon/ESL_web_partner_off.png');
    }

    .nav-partner:hover {
      background-image: url('../icon/ESL_web_partner_on.png');
    }

    .nav-partner.active {
      background-image: url('../icon/ESL_web_partner_roll.png');
    }

    .nav-news {
      background-image: url('../icon/ESL_web_news_off.png');
    }

    .nav-news:hover {
      background-image: url('../icon/ESL_web_news_on.png');
    }

    .nav-news.active {
      background-image: url('../icon/ESL_web_news_roll.png');
    }

    .nav-termine {
      background-image: url('../icon/ESL_web_termine_off.png');
    }

    .nav-termine:hover {
      background-image: url('../icon/ESL_web_termine_on.png');
    }

    .nav-termine.active {
      background-image: url('../icon/ESL_web_termine_roll.png');
    }

    .nav-ergebnisse {
      background-image: url('../icon/ESL_web_ergebnisse_off.png');
    }

    .nav-ergebnisse:hover {
      background-image: url('../icon/ESL_web_ergebnisse_on.png');
    }

    .nav-ergebnisse.active {
      background-image: url('../icon/ESL_web_ergebnisse_roll.png');
    }

    li {
      float: left;


      ul {
        position: absolute;
        top: @height-nav;
        border-top: solid 5px white;
        display: none;

        li {
          a {
            text-indent: 0;
            text-align: center;
            text-decoration: none;
            font-size: 14px;
            position: relative;
            text-transform: uppercase;
          }

          a:after {
            content: '/';
            position: absolute;
            right:0;
            top: 0;
            display: block;
            font-weight: normal;
            font-size: 25px;
          }

          a.active, a:hover {
            font-weight: bold;
          }
        }

        li:last-child a:after {
          display: none;
        }

      }
    }
  }

}

#content {
  background-color: #FFFFFF;
  padding: @height-nav @width-page-margin;
  min-height: 400px;

  a {
    color: @color-subtitle;
  }

  a:hover {
    color: @color-footer-links-hover;
  }

  .teaser {
    padding: 20px 0 30px 0;
    border-bottom: 4px solid @color-border;

    > h1, > h2, > h3, > h4, ul, ol, p, address {
      padding-left: 5*@width-column + 20px;
    }
    
    li {
    	margin-left: 20px;
    	margin-bottom: 10px;
    	list-style-type: square;
    }

    > img {
      display: block;
      float: left;
      width: 5*@width-column;
    }

    address {
      font-style: normal;

      h4 {
        color: #71C2E5;
        float: left;
        font-weight: normal;
      }

      span {
        padding-left: @width-column+13+5;
        display: block;
        position: relative;
      }

      span:before {
        content: '';
        display: block;
        position: absolute;
        top: 5px;
        left: @width-column;
        width: 13px;
        height: 13px;
        background-repeat: no-repeat;
        background-size: 13px 13px;
      }

      span.person:before {
        background-image: url('../icon/ESL_web_icon_person.png');
      }
      span.address:before {
        background-image: url('../icon/ESL_web_icon_address.png');
      }
      span.mail:before {
        background-image: url('../icon/ESL_web_icon_mail.png');
      }
      span.phone:before {
        background-image: url('../icon/ESL_web_icon_telefon.png');
      }
    }
  }

  .teaser:last-child {
    border-bottom: none;
  }

  .dates {
    margin-left: @width-column;
    padding: 20px 0 30px 0;
	
	&:after {
	    visibility: hidden;
	    display: block;
	    content: "";
	    clear: both;
	    height: 0;
	}

    .date {
      float: left;
      width: @width-date-teaser-number + @width-date-teaser-text;
      height: @height-date-teaser;
      position: relative;
      background-color: #E6E6E6;
      padding-left: @width-date-teaser-number + 10;
      margin-bottom: @width-page-margin;
      margin-right: 2*@width-page-margin;

      h1 {
        display: block;
        float: left;
        background-color: #DBE22C;
        position: absolute;
        top: 0;
        left: 0;
        width: @width-date-teaser-number;
        height: @height-date-teaser;
        line-height: @height-date-teaser;
        text-align: center;
        margin: 0;
        padding-left: 5px;
      }

      h2 {
        margin: 0;
        color: #333333;
        font-size: 35px;
        line-height: 1.3em;
      }

      p {
        margin: 0;
        color: #333333;
        font-size: 17px;
      }
      
      &.upcoming h2 {
      	color: lighten(#333333,30%);
      }

      &.upcoming p {
      	color: lighten(#333333,30%);
      }

    }
  }
}

footer {
  position: relative;
  width: 100%;
  height: @height-footer + 4px;
  background: url('../icon/ESL_web_footer.png') no-repeat;
  border-top: 4px solid @color-border;
}

/*
 * HEADER
 */
.logo {
  position: absolute;
  height: 133px;
  width: 355px;
  background: url(../icon/ESL_web_logor.png) no-repeat;
  top: 70px;
  left: 70px;
  line-height: 0;
  font-size: 0;
  color: transparent;
}

.bmbf {
  position: absolute;
  top: 0;
  right: @width-page-margin + (2*@width-column - 140) / 2;
  width: 140px;
  height: 100px;
  background-image: url('../icon/bmbf.png');
  background-repeat: no-repeat;
  text-indent: -9999px;
}

/*
 * Navigation
 */
nav a {
  float:left;
  width: 2*@width-column;
  height: @height-nav - 1;
  color: #969696;
  background-repeat: no-repeat;
  background-size: 2*@width-column @height-nav - 1;
  background-position: 50% 50%;
  text-indent: -9999px;
}



/*
 * Footer
 */
.partners {
  position: absolute;
  top: 40px;
  width: 100%;
  text-align: center;

  a {
    display: inline-block;
    height: 47px;
    width: 16%;
    text-indent: -9999em;
    background-size: 120px 47px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
  }

  .partner-bam {
    background-image: url('../icon/bam.png');
  }

  .partner-biba {
    background-image: url('../icon/biba.png');
  }

  .partner-adas {
    background-image: url('../icon/adas.png');
  }

  .partner-fraunhofer-iff {
    background-image: url('../icon/fraunhofer-iff.png');
  }

  .partner-panalpina {
    background-image: url('../icon/panalpina.png');
  }

  .partner-viaboxx {
    background-image: url('../icon/viaboxx.png');
  }
}

.copyright {
  position: absolute;
  color: @color-text-footer;
  top: 170px;
  left: @width-page-margin + @width-column;
  font-size: 14px;
}

.footer-news {
  position: absolute;
  top: 130px;
  left: @width-page-margin + 4*@width-column;

  div {
    display: inline-block;
    height: @height-footer-links;
    width: 2*@width-column - 5;
    padding: 0 2px 0 3px;
    font-size: 12px;
    text-align: center;

    a {
      background-color: @color-footer-links;
      color: @color-text-footer;
      display: table-cell;
      vertical-align: middle;
      height: @height-footer-links;
      width: 2*@width-column - 5;
      text-decoration: none;
    }

    a:hover {
      background-color: @color-footer-links-hover;
      color: white;
    }
  }

  div:hoover {
    color: white;
    background-color: #DBE22C;
  }
}

.footer-links {
  position: absolute;
  right: @width-page-margin;
  top: 130px;

  a {
    display: inline-block;
    width: @width-column;
    height: @height-footer-links;
    text-indent: -9999px;
    background-position: 50% 50%;
    background-size: @width-column - 5 63px;
    background-repeat: no-repeat;
    padding: 0 2px 0 3px;
  }

  a.impressum {
    background-image: url('../icon/ESL_web_impressum_off.png');
  }

  a.impressum:hover {
    background-image: url('../icon/ESL_web_impressum_roll.png');
  }

  a.contact {
    background-image: url('../icon/ESL_web_kontakt_off.png');
  }

  a.contact:hover {
    background-image: url('../icon/ESL_web_kontakt_roll.png');
  }

  a.links {
    background-image: url('../icon/ESL_web_links_off.png');
  }

  a.links:hover {
    background-image: url('../icon/ESL_web_links_roll.png');
  }
}




/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
 * Remove the gap between images, videos, audio and canvas and the bottom of
 * their containers: h5bp.com/i/440
 */

audio,
canvas,
img,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}