@import url("https://fonts.googleapis.com/css?family=Quantico|Cinzel|Roboto:400,500,700");

.cll {clear: left;}

html {
  font-size: 12px;
}

#no_css3 {
  position: fixed;
  bottom: 0;
  background: wheat;
  color: maroon;
  z-index: 1000;
  width: 100%;
  text-align: center;
  margin: 0;
  padding: 1ex;
}

/* DEFAULTS */
body {
  font: 1.6rem/2.56rem "Ubuntu","SegoeUI","Segoe UI","Verdana","Arial",sans-serif;
  -webkit-font-variant-ligatures: common-ligatures;         /* for iOS and Safari 6 */
  font-variant-ligatures: common-ligatures;                 /* for up-to-date browsers, including IE10 and Opera 21 */
  -moz-font-feature-settings: "kern=1";                     /* pre-Firefox 14+ */
  -webkit-font-feature-settings: "kern";
  -moz-font-feature-settings: "kern";                       /* Firefox 14+ */
  font-feature-settings: "kern";                            /* standard */
  font-kerning: normal;                                     /* Safari 7+, Firefox 24+, Chrome 33(?)+, Opera 21+ */
  margin: 0;
  padding: 0;
  background: url("zurich.jpg") no-repeat center center fixed #222;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  color: silver;
}
body#true {
  background: url("zurich-blur.jpg") no-repeat center center fixed #222;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  color: silver;
  padding-top: 7vh!important;
}

#welcome-image {
  float: right;
  width: 15vw;
  height: 15vw;
  margin: 0 0 1ex 1ex;
  box-shadow: 0.5ex 0.5ex 1em rgba(0,0,0,0.666);
  background: transparent;
  transition: background-color 1s ease;
  }

h1 {
  color: rgba(255,255,255,0.8);
  text-align: center;
  font: normal 6em/1.1em Cinzel,"Segoe UI",Helvetica,"Times New Roman",serif;
  text-shadow: 0.1ex 0.1ex 1px rgba(0,0,0,0.666);
}

footer {
  background: #112233;
  color: #AAA;
  margin: 0;
  padding: 2ex 0 5em 0;
  text-align: center;
}
footer > p a {
  display: block;
  margin: 2ex auto 0 auto;
  padding: 1ex;
  background: url("up.png") center no-repeat transparent;
  background-size: 3ex;
  width: 3ex;
  height: 3ex;
  text-decoration: none;
  border-radius: 3ex;
  border: none;
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}
footer a:link,
footer a:visited {
  color: inherit;
  text-decoration: underline;
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}
footer > p a span {display: none;}
footer > p a:hover,
footer > p a:active,
footer > p a:focus {
  outline: none;
  background-color: rgba(255,255,255,0.25);
  -webkit-transition: background-color 1s ease-out;
  -moz-transition: background-color 1s ease-out;
  -o-transition: background-color 1s ease-out;
  transition: background-color 1s ease-out;
}

#home-visual {
  background: transparent;
  text-align: center;
  height: 90vh;
}

/* MOBILES AND SMALL SCREEN */
@media only screen and (max-width: 800px) {
  header { min-height: 10ex; }

  nav { position: fixed; top: 0; left: 0; width: 100vw; background: rgba(0,0,0,0.75); }
  nav dl { font-size: 14px; display: flex; flex-flow: row wrap; }
  nav dl dt { padding: 0 1ex; flex-grow: 1; text-align: center; }
  nav dl img { width: 3ex; height: 3ex; display: block; margin: 0 auto; }
  nav dl a { color: white; text-decoration: none; }

  main { padding: 0; }

  #home-visual h1 {
    margin: 10vh 0;
    padding: 0;
    color: #EEE;
    text-shadow: 1px 1px 1ex black;
    font-size: 40px;
    text-shadow: 0.1ex 0.1ex 1px rgba(0,0,0,0.666);
    }
  #home-visual h2 {
    margin: 0;
    padding: 2vh 0 1vh 0;
    font: normal 24px Cinzel,"Segoe UI",Helvetica,"Times New Roman",serif;
    color: #EEE;
    text-shadow: 0.1ex 0.1ex 1px rgba(0,0,0,0.666);
  }
  #home-visual img {
    width: 4em;
    height: 4em;
    background: transparent;
    -webkit-transition: background-color 1s ease-out;
    -moz-transition: background-color 1s ease-out;
    -o-transition: background-color 1s ease-out;
    transition: background-color 1s ease-out;
    border-radius: 2em;
  }

  main .inner {
    color: #555;
    background: #F8F8F8;
    margin: 0;
    padding: 3ex;
    font: 100 14px/20px Roboto,"Helvetica Neue","HelveticaNeue",SegoeUI,"Segoe UI",Verdana,Arial,sans-serif;
  }
  main h2 {
    margin: 0;
    padding: 2ex 0 0 0;
    font: normal 18px/24px Cinzel,"Times New Roman",Times,serif;
    color: #333;
  }
  #signature {
    height: 4ex;
    background: url("unterschrift.gif") top left no-repeat transparent;
    background-size: contain;
  }
  #signature i {display: none;}

  main .inner h3 {
    background: url("top-circle.png") center left no-repeat transparent;
    background-size: 2.5ex;
    padding: 0.2ex 0 0.2ex 2em;
    font-weight: 500;
  }
  main .inner h3.closed { background-image: url("down-circle.png"); }

    #bio table {
      table-layout: fixed;
      width: 100%;
      margin: 0 auto;
    }
    #bio table td {
      vertical-align: top;
      background: transparent;
      transition: background 1s ease;
    }
    #bio table tr:hover {
      background: #F0F0F0;
      transition: background 1s ease;
    }
    #vita td.first {width: 30%;}
    #vita [rowspan] {
      background: url("/img/self.big.jpg") center no-repeat #F8F8F8;
      background-size: contain;
      width: 20%;
    }
    #bio #carreer td:first-child {width: 33%;}

    main h4 {
      font: normal 1.2em Cinzel,"Segoe UI",Helvetica,"Times New Roman",serif;
      margin: 1em 0;
    }

    .downloads {
      width: 100%;
      border-collapse: collapse;
    }
    .downloads td {vertical-align: top;}

    .preview {
      width: 10em;
      float: left;
      text-align: center;
      margin: 0 2ex 1em 0;
      border-radius: 1ex;
    }
    .preview a { display: inline-block; border: 1px solid silver; padding: 1ex; margin: 1ex; width: calc(100% - 2ex); }

    #carreer ul { margin: 0; padding: 0; list-style: circle inside; }

    #contactform {
      width: 100%;
    }
    #contactform fieldset {
      border: none;
      background: transparent;
    }
    #contactform textarea {
      font: 1em "courier new",courier, monospace;
      width: 100%;
      max-width: 35em;
      height: 12ex;
      display: block;
      resize: vertical;
    }
    #contactform input[type=submit] {
      background: url("envelope.png") 2ex center no-repeat #345;
      background-size: 2.5ex 2.5ex;
      color: #F8F8F8;
      margin: 1em 0;
      padding: 1ex 2.5ex 1ex 6ex;
      border-radius: 1ex;
      border: 1px solid #345;
      font: inherit;
      font-size: 80%;
      transition: background-color 1s ease;
    }
    #contactform input[type=submit]:hover {
      background-color: #012;
      color: white;
      transition: background-color 1s ease;
      cursor: pointer;
    }


  footer { font-size: 80%; }
}

/* DESKTOPS */
@media only screen and (min-width: 800px) {
    body {
      overflow-y: scroll;                                       /* always show Scrollbars, avoiding "content-jumping" */
      min-width: 800px;
    }

    h1 {
      margin: 17vh 0 3vh 0;
      padding: 0;
    }

    #loginform {
      width: 33%;
      min-width: 18em;
      margin: 8% auto;
      margin: 10vh auto;
      background: rgba(255,255,255,0.5);
      border: none;
      padding: 3ex;
      -webkit-box-shadow: 10px 10px 20px 0px black;
      -moz-box-shadow: 10px 10px 20px 0px black;
      box-shadow: 10px 10px 20px 0px black;
    }
    #loginform fieldset {
      border: none;
      margin: 0;
      padding: 1ex;
      color: black;
      font: 1em/1.2em Quantico,SegoeUI,"Segoe UI"
      }
    #loginform legend {
      font-weight: bold;
      font-size: 133%;
      padding:0 0 1ex 0;
    }
    #loginform label {display: block;}
    #loginform input[type=password]  {
      padding: 1ex;
      border: 1px solid silver;
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      border-radius: 10px;
      font-size: 2ex;
      width: 40%;
      margin: 0;
      background: url("panorama.zurich-blur.jpg") no-repeat center center fixed rgba(0,0,0,0.75)!important;
      color: white;
    }
    /* Chrome, Chromium and other webkit-based browsers needs a quite dirty hack for transparency: */
    @-webkit-keyframes autofill {
        to {
          color: white;
          background: url("zurich-blur.jpg") no-repeat center center fixed rgba(0,0,0,0.75);
        }
    }
    input:-webkit-autofill {
        -webkit-animation-name: autofill;
        -webkit-animation-fill-mode: both;
    }

    #loginform input[type=password]:focus {
      box-shadow: 0 0 5px 1px black inset;
      border-color: white;
    }

    #loginform input[type=submit] {
      border: 1px solid black;
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      border-radius: 10px;
      font-size: 2ex;
      font-weight: bold;
      margin: 0;
      padding: 1ex;
      background: transparent;
      color: black;
      width: 6em;
    }
    #loginform input[type=submit]:hover {
      background-color: rgba(0,128,0,0.5);
      transition: background-color 1s ease-out;
    }
    #loginform .error {
      border: 1px solid maroon;
      text-align: center;
      font-weight: bold;
      background: wheat;
    }

    #loginform input:focus {outline: none;}


    /* ================ */
    /* LOGGED IN STYLES */
    /* ================ */

    header .inner {
      width: 70%;
      min-width: 20em;
      max-width: 1000px;
      margin: 0 auto;
      position: relative;
    }
    header {
      background: #123;
      width: 100%;
      position: fixed;
      z-index: 999;
      top: 0;
      left: 0;
      text-align: center;
      box-shadow: 0 1px 10px black;
    }
    header h1 {
      color: white;
      font-size: 1.5em;
      text-align: left;
      margin: 0;
      padding: 0;
    }

    nav {display:block;}

    #true dl {
      margin: 0 auto;
      padding: 2vh 0;
      display: table;
    }
    dl dt {
      display: table-cell;
    }
    dl dt img {
      width: 2ex;
      height: 2ex;
      opacity: 0.75;
      float: left;
      margin-right: 1ex;
      }
    dl dt a:link,
    dl dt a:visited {
      border: 1px solid rgba(0,0,0,0.5);
      display: block;
      color: silver;
      text-decoration: none;
      font: 1em/1.2em Quantico,SegoeUI,"Segoe UI";
      margin: 0 1ex 0 0;
      padding: 1.5ex 1ex;
      background: transparent;
      -webkit-transition: background-color 1s ease-out;
      -moz-transition: background-color 1s ease-out;
      -o-transition: background-color 1s ease-out;
      transition: background-color 1s ease-out;
    }
    dl dt a:active,
    dl dt a:hover,
    dl dt a:focus {
      outline: none;
      color: white;
      background: rgba(1,9,17,0.5);
      -webkit-transition: background-color 1s ease-out;
      -moz-transition: background-color 1s ease-out;
      -o-transition: background-color 1s ease-out;
      transition: background-color 1s ease-out;
    }
    dl dt a:active img,
    dl dt a:hover img,
    dl dt a:focus img {opacity: 1;}


    dl #logout a:active,
    dl #logout a:hover,
    dl #logout a:focus {
      background: #610;
      -webkit-transition: border-color 1s ease-out;
      -moz-transition: border-color 1s ease-out;
      -o-transition: border-color 1s ease-out;
      transition: border-color 1s ease-out;
      -webkit-transition: background-color 1s ease-out;
      -moz-transition: background-color 1s ease-out;
      -o-transition: background-color 1s ease-out;
      transition: background-color 1s ease-out;
    }

    dl #active_item  a {
      color: #E57240;
      }

    #logout {
      text-align: right;
      clear: both;
    }

    #home-visual {
      background: transparent;
      text-align: center;
      height: 90vh;
    }
    #home-visual h1 {
      margin: 20vh 0 10vh 0;
      padding: 0;
      color: #EEE;
      text-shadow: 1px 1px 1ex black;
      font-size: 10vh;
      white-space: nowrap;
      text-shadow: 0.1ex 0.1ex 1px rgba(0,0,0,0.666);
      }
    #home-visual h2 {
      margin: 0;
      padding: 2vh 0 1vh 0;
      font: normal 7.5vh/1em Cinzel,"Segoe UI",Helvetica,"Times New Roman",serif;
      color: #EEE;
      text-shadow: 0.1ex 0.1ex 1px rgba(0,0,0,0.666);
    }
    #home-visual img {
      width: 4em;
      height: 4em;
      background: transparent;
      -webkit-transition: background-color 1s ease-out;
      -moz-transition: background-color 1s ease-out;
      -o-transition: background-color 1s ease-out;
      transition: background-color 1s ease-out;
      border-radius: 2em;
    }
    #home-visual a:hover img {
      background: black;
      -webkit-transition: background-color 1s ease-out;
      -moz-transition: background-color 1s ease-out;
      -o-transition: background-color 1s ease-out;
      transition: background-color 1s ease-out;
    }
    #pic_vita {
      width: 20vh;
      height: 20vh;
    }

    main .inner {
      color: #555;
      background: #F8F8F8;
      margin: 0;
      padding: 2ex 20vw;
      font: 100 3vh/3ex Roboto,"Helvetica Neue","HelveticaNeue",SegoeUI,"Segoe UI",Verdana,Arial,sans-serif;
    }
    main h2 {
      margin: 0;
      padding: 2ex 0 0 0;
      font: normal 8vh/1em Cinzel,"Times New Roman",Times,serif;
      color: #333;
    }
    #signature {
      height: 4ex;
      background: url("unterschrift.gif") top left no-repeat transparent;
      background-size: contain;
    }
    #signature i {display: none;}

    main .inner h3 {
      background: url("top-circle.png") center left no-repeat transparent;
      background-size: 2.5ex;
      padding: 0.2ex 0 0.2ex 2em;
      cursor: pointer;
      font-weight: 500;
      transition: background 1s ease;
    }
    main .inner h3.closed {
      background-image: url("down-circle.png");
      transition: background 1s ease;
    }
    main .inner h3:hover {
      background-color: #EEE;
      transition: background 1s ease;
    }

    main ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    main ul li {
      margin: 1ex 0 0 1em;
      padding: 1ex;
      transition: all 1s ease;
      border-left: 1em solid #F0F0F0;
    }
    main ul li:hover {
      box-shadow: 0 0 1ex rgba(0,0,0,0.333);
      border-color: #E57240;
      transition: all 1s ease;
    }
    main table ul {list-style: square;}
    main table ul li,
    main table ul li:hover {
      margin: 0 0 0 1em;
      padding: 0;
      background-size: 1.5ex 1.5ex;
      border: none;
      box-shadow: none;
    }

    #bio table {
      table-layout: fixed;
      width: 100%;
      margin: 0 auto;
    }
    #bio table td {
      vertical-align: top;
      background: transparent;
      transition: background 1s ease;
    }
    #bio table tr:hover {
      background: #F0F0F0;
      transition: background 1s ease;
    }
    #vita td.first {width: 30%;}
    #vita [rowspan] {
      background: url("/img/self.big.jpg") center no-repeat #F8F8F8;
      background-size: contain;
      width: 20%;
    }
    #bio #carreer td:first-child {width: 33%;}

    main h4 {
      font: normal 1.2em Cinzel,"Segoe UI",Helvetica,"Times New Roman",serif;
      margin: 1em 0;
    }

    .downloads {
      width: 100%;
      border-collapse: collapse;
    }
    .downloads td {vertical-align: top;}

    .preview {
      width: 10em;
      float: left;
      text-align: center;
      margin: 0 2ex 1em 0;
      border-radius: 1ex;
    }
    .preview:hover {background: #F0F0F0;}
    .preview img {cursor: pointer;}

    #contactform {
      width: 100%;
    }
    #contactform fieldset {
      border: none;
      background: transparent;
    }
    #contactform textarea {
      font: 1em "courier new",courier, monospace;
      width: 100%;
      max-width: 35em;
      height: 12ex;
      display: block;
      resize: vertical;
    }
    #contactform input[type=submit] {
      background: url("envelope.png") 2ex center no-repeat #345;
      background-size: 2.5ex 2.5ex;
      color: #F8F8F8;
      margin: 1em 0;
      padding: 1ex 2.5ex 1ex 6ex;
      border-radius: 1ex;
      border: 1px solid #345;
      font: inherit;
      font-size: 80%;
      transition: background-color 1s ease;
    }
    #contactform input[type=submit]:hover {
      background-color: #012;
      color: white;
      transition: background-color 1s ease;
      cursor: pointer;
    }

    #sended {
      background: url("check.png") 0.5ex center no-repeat transparent;
      border: 1px solid #E57240;
      padding: 1ex 1ex 1ex 3em;
      background-size: 2em 2em;
    }
    #fm-error {
      background: url("cross-circle.png") 0.5ex center no-repeat transparent;
      border: 1px solid #E57240;
      padding: 1ex 1ex 1ex 3em;
      background-size: 2em 2em;
    }

    #true > iframe {display: none;}
    #SkypeButton_Call_marko_thuemmler_1 {
      width: 3em;
      }

    footer {
      background: #112233;
      color: #AAA;
      margin: 0;
      padding: 2ex 0 5em 0;
      text-align: center;
    }
    footer .inner {
      display: table;
      width: 60%;
      min-width: 700px;
      margin: 2em auto 0 auto;
    }
    footer .inner div {
      display: table-cell;
      font-family: Quantico,SegoeUI,"Segoe UI","Helvetica","Times New Roman",times,serif;
      font-size: 1em;
      line-height: 2ex;
      padding: 0 2ex;
    }
    footer .inner div {
      text-align: left;
      -moz-transform: rotate(-0deg);
      -ms-transform: rotate(-0deg);
      -o-transform: rotate(-0deg);
      -webkit-transform: rotate(-0deg);
      transform: rotate(-0deg);
    }
    footer > p a {
      display: block;
      margin: 2ex auto 0 auto;
      padding: 1ex;
      background: url("up.png") center no-repeat transparent;
      background-size: 3ex;
      width: 3ex;
      height: 3ex;
      text-decoration: none;
      border-radius: 3ex;
      border: none;
      -webkit-transition: all 0.5s ease-out;
      -moz-transition: all 0.5s ease-out;
      -o-transition: all 0.5s ease-out;
      transition: all 0.5s ease-out;
    }
    footer a:link,
    footer a:visited {
      color: inherit;
      text-decoration: underline;
      -webkit-transition: all 0.5s ease-out;
      -moz-transition: all 0.5s ease-out;
      -o-transition: all 0.5s ease-out;
      transition: all 0.5s ease-out;
    }
    footer a:active,
    footer a:hover,
    footer a:focus {
      outline: none;
      color: white;
      text-shadow: 0 0 3px rgba(255,255,255,0.5);
      text-decoration: none;
      -webkit-transition: color 1s ease-out;
      -moz-transition: color 1s ease-out;
      -o-transition: color 1s ease-out;
      transition: color 1s ease-out;
    }
    footer > p a span {display: none;}
    footer > p a:hover,
    footer > p a:active,
    footer > p a:focus {
      outline: none;
      background-color: rgba(255,255,255,0.25);
      -webkit-transition: background-color 1s ease-out;
      -moz-transition: background-color 1s ease-out;
      -o-transition: background-color 1s ease-out;
      transition: background-color 1s ease-out;
    }
}