/* name     TBI CSS 5.1
 * author   Richard Neuboeck <hawk@tbi.univie.ac.at>
 * web      http://www.tbi.univie.ac.at/~hawk
 */

/* RESET */
html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul, dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object, a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span, strong, sub, sup, tt, var, legend, fieldset {
	margin: 0;
	padding: 0;
}

img, fieldset {
	border: 0;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
    display: block;
    margin: 0;
    padding: 0;
}


/*
 *  DEFAULTS
 */
 
.chromeframe {
  height: 100%;
  background-color: white;
  text-align: center;
  vertical-align: center;
}
 
html {
  height: 100%;
}
 
body {
  background-color: rgb(220,220,220);
  background-image: url('/images/base/dotbracket_bg.png');
  background-position: top center;
  background-repeat: repeat-x;
  font-family: 'Open Sans', sans-serif;
  font-size: 100%;
  height: 100%;
}

div.wrap {
  margin: 0 auto;
  width: 1160px;
  background-image: url('/images/base/sideheader_bg.png');
  background-repeat: no-repeat;
  background-position: top left;
}

div.headwrap {
  margin: auto;
  width: 1000px;
  height: 149px;
}

div.contentwrap {
  position: relative; /* bug fix for topwrap - check in all browsers! */
  z-index: 10;
  margin: 0 auto;
  width: 1000px;
  background-image: url('/images/base/content_bg.png');
  background-repeat: no-repeat;
  background-position: top left;
  background-color: white;
}

/* HEADER */

header {
  background-image: url('/images/base/header_bg.png');
  background-repeat: no-repeat;
  background-position: top left;
  background-color: rgb(0,103,149);
  height: 120px;
}

header hgroup {
  margin-right: 361px;
  clear: right;
  color: white;
}

header hgroup h1 {
  font-size: 1.7em;
  font-weight: 400;
  text-align: right;
  line-height: 1.2em;
}

header hgroup h2 {
  font-size: 1.1em;
  font-weight: 400;
  text-align: right;
}

header img.unilogo {
  float: right;
  padding: 5px 5px 0 0;
}

/* NAVIGATION */

nav {
  height: 29px;
  overflow: hidden;
}

nav ul {
  list-style: none;
  text-align: center;
}

nav ul li {
  display: inline;
}

nav ul li a.selected {
  background-image: url('/images/base/sqr_red.png');
  background-repeat: no-repeat;
  background-position: left center;
}

nav ul li a {
  padding: 4px 40px 4px 17px;
  color: black;
  font-size: 0.8em;
  text-decoration: none;
  background-image: url('/images/base/sqr_blue.png');
  background-repeat: no-repeat;
  background-position: left center;
}

nav ul li a:hover {
  color: rgb(149,0,0);
  background-image: url('/images/base/sqr_red.png');
}

nav.sticky {
  z-index: 100;
  position: fixed;
  top: 0;
  margin: auto;
  width: 1000px;
  background-color: white;
  border-bottom: 1px solid rgb(0,103,149);
}

/* CONTENT */

section {
  clear: both;
  padding-top: 10px;
}

section.plusaside {
  clear: none;
  float: left;
  width: 780px;
}

section.col2 {
  column-count: 2;
  column-gap: 0.5em;
  column-rule: 1px solid rgb(210,210,210);
  column-fill: balanced;
  -moz-column-count: 2;
  -moz-column-gap: 0.5em;
  -moz-column-rule: 1px solid rgb(210,210,210);
  -moz-column-fill: balanced;
  -webkit-column-count: 2;
  -webkit-column-gap: 0.5em;
  -webkit-column-rule: 1px solid rgb(210,210,210);
  -webkit-column-fill: balanced;
}

section.col3 {
  column-count: 3;
  column-gap: 0.5em;
  column-rule: 1px solid rgb(210,210,210);
  column-fill: balanced;
  -moz-column-count: 3;
  -moz-column-gap: 0.5em;
  -moz-column-rule: 1px solid rgb(210,210,210);
  -moz-column-fill: balanced;
  -webkit-column-count: 3;
  -webkit-column-gap: 0.5em;
  -webkit-column-rule: 1px solid rgb(210,210,210);
  -webkit-column-fill: balanced;
}

section.wai {
  padding-top: 1px;
  vertical-align: middle;
  font-size: 0.7em;
  color: rgb(120,120,120);
}

section.wai span.caption {
  vertical-align: middle;
}

section.wai img {
  vertical-align: middle;
}

section.wai a {
  vertical-align: middle;
  text-decoration: none;
  font-style: italic;
  color: rgb(120,120,120);
}

section.wai a:hover {
  color: rgb(149,0,0);
}

section.wai div.breadcrumbs {
  float: left;
  margin: auto auto auto 25px;
  width: 55%;
  height: 22px;
}

section.wai div.appearance {
  float: right;
  margin: auto 25px auto auto;
  width: 35%;
  height: 22px;
  text-align: right;
}

article {
  padding: 10px 10px 15px 10px;
  font-size: 0.85em;
  line-height: 1.6em;
  overflow: hidden;
  /*column-break-after: always;
  -moz-column-break-after: always;
  -webkit-column-break-after: always;*/
}

article.software {
  margin-bottom: 30px;
  background-image: url('/images/base/down_red.png');
  background-position: top right;
  background-repeat: no-repeat;
}

article.gallery {
  text-align: center;
}

article:last-child {
  margin-bottom: 0;
  padding-bottom: 10px;
}

article h1 {
  margin-bottom: 10px;
  padding-left: 10px;
  border-bottom: 1px solid rgb(210,210,210);
  font-weight: 600;
  font-size: 1.3em;
  color: rgb(0,103,149);
  column-break-after: avoid;
  -moz-column-break-after: avoid;
  -webkit-column-break-after: avoid;
}

article h2 {
  margin-bottom: 10px;
  padding-left: 10px;
  border-bottom: 1px solid rgb(210,210,210);
  font-weight: 600;
  font-size: 1.1em;
  color: rgb(0,103,149);
  column-break-after: avoid;
  -moz-column-break-after: avoid;
  -webkit-column-break-after: avoid;
}

article h3 {
  margin-bottom: 10px;
  padding-left: 20px;
  border-bottom: 1px solid rgb(210,210,210);
  font-weight: 600;
  font-size: 1em;
  color: rgb(0,103,149);
  column-break-after: avoid;
  -moz-column-break-after: avoid;
  -webkit-column-break-after: avoid;
}

article img {
}

article img.right {
  float: right;
  padding: 2px 0 2px 4px;
}

article img.left {
  float: left;
  padding: 2px 4px 2px 0;
}

article img.center {
  display: block;
  text-align: center;
  padding: 2px 0;
  margin: auto;
}

article figure {
  margin: auto auto 15px auto;
  text-align: center;
}

article figure figcaption {
  font-weight: 600;
  font-size: 0.9em;
  text-align: center;
}

article a {
  color: rgb(149,0,0);
  text-decoration: none;
}

article a:hover {
  text-decoration: underline;
}

article p {
  margin-bottom: 15px;
}

article ul {
  margin-bottom: 15px;
  padding-left: 5px;
  list-style-type: disc;
  list-style-position: inside;
}

article ol {
  margin-bottom: 15px;
  padding-left: 5px;
  list-style-type: decimal;
  list-style-position: inside;
}

article pre {
  margin: 0 0 15px 10px;
  padding: 0 0 0 10px;
  border-left: 3px solid rgb(220,220,220);
  overflow-x: scroll;
}

article img.left {
  float: left;
  padding: 2px 10px 2px 0px;
  width: 364px;
}

article table {
  margin-bottom: 15px;
  width: 100%;
  border-collapse: collapse;
}

article table tr {
  border-bottom: 1px solid rgb(210,210,210);
}

article table tr.odd {
  background-color: rgb(247,247,247);
}

article table tr th {
  font-weight: 600;
  font-size: 0.9em;
  text-align: left;
  line-height: 1.9em;
}

article table tr td {
  padding: 2px;
  line-height: 1.9em;
}

article table.publications tr td {
  padding: 4px 2px;
  line-height: 1.2em;
}

article table.collaboration tr {
  border: none;
}

article table.collaboration tr:hover {
  background-color: rgb(231,238,241);
}

article div.employee {
  clear: both;
  margin: 10px 0 25px 0;
  /*height: 105px; /* 50/105 */
  overflow: hidden;
  line-height: 1.6em;
  vertical-align: middle;
  background-image: url('/images/base/down_red.png');
  background-position: top right;
  background-repeat: no-repeat;
}

article div.employee div.datatop {
  float: left;
  width: 100%;
  background-image: url('/images/base/employee_bg.png');
  background-position: top left;
  background-repeat: repeat-x;
}

article div.employee div.datatop img {
  float: left;
  width: 130px;
  height: 105px;
}

article div.employee div.datatop div.basic {
  float: left;
  margin-top: 29px;
  width: 40%;
}

article div.employee div.datatop div.basic div.name {
  float: left;
  margin-left: -12px;
  font-weight: 600;
}

article div.employee div.datatop div.basic div.position {
  float: right;
  font-size: 0.8em;
  text-align: right;
  color: rgb(120,120,120);
}

article div.employee div.datatop div.basic div.address {
  float: left;
  width: 100%;
  font-size: 0.9em;
  line-height: 1.4em;
}

article div.employee div.datatop div.more {
  float: right;
  margin-top: 29px;
  width: 40%;
  font-size: 0.9em;
}

article div.employee div.detail {
  float: left;
  width: 100%;
}

article div.employee div.what {
  float: left;
  width: 40px;
  font-size: 0.8em;
  color: rgb(120,120,120);
}

article div.employee div.databottom {
  clear: both;
  font-size: 0.9em;
}

article div.employee div.databottom div.detail {
  float: right;
  width: 40%;
}

article div.employee div.databottom div.what {
  float: left;
  width: 40px;
  font-size: 0.8em;
  color: rgb(120,120,120);
}

article div.tweet {
}

#gmapTBI {
  margin: 10px 0;
  width: 100%;
  height: 500px;
}

#gmapCollaboration {
  margin: 10px 0;
  width: 100%;
  height: 500px;
}

aside {
  padding: 10px;
  float: right;
  width: 200px;
  font-size: 0.8em;
  color: rgb(120,120,120);
}

aside a {
  color: rgb(149,0,0);
  text-decoration: none;
}

aside h1 {
  margin-bottom: 10px;
  padding-left: 10px;
  font-weight: 600;
  font-size: 1.2em;
  color: rgb(180,180,180);
  border-bottom: 1px solid rgb(210,210,210);
}

aside p {
  margin-left: 5px;
}

aside ul {
  margin-bottom: 10px;
  list-style-type: disc;
  list-style-position: inside;
}

aside ol {
  list-style-type: decimal;
  list-style-position: inside;
}

aside ul li {
  margin-left: 5px;
}

aside ul.menu {
  list-style: none;
}

aside ul.menu li a {
  background-image: url('/images/base/sqr_grey.png');
  background-position: left center;
  background-repeat: no-repeat;
  display: block;
  padding-left: 20px;
  color: rgb(149,0,0);
  font-size: 1em;
  text-decoration: none;
}

aside ul.menu li a:hover {
  background-image: url('/images/base/sqr_red.png');
}

aside img {
  width: 98%;
  padding: 2px 0;
  margin: auto;
}

aside img.mapicon {
  width: 19px;
}

aside p {
  padding: 3px 0;
}

/* FOOTER */

footer {
  z-index: 10;
  clear: both;
  margin: auto;
  width: 1160px;
  border-top: 2px solid rgb(0,103,149);
  background-image: url('/images/base/footer_bg.png');
  background-position: right top;
  background-repeat: no-repeat;
  min-height: 60px;
}

footer figure {
  margin: 8px auto auto 30px;
}

footer figure img {
  margin: 0 2px;
}

footer p a {
  margin-left: 34px;
  color: rgb(0,103,149);
  font-size: 0.8em;
  text-decoration: none;
}

footer p a:hover {
  color: rgb(149,0,0);
}

footer div.socialbar {
  margin: 8px auto auto 30px;
}

footer div.socialitem {
  float: left;
  display: inline-block;
  /*width: 60px;*/
  margin-right: 20px;
  overflow: hidden;
}

/* bugfix for facebook root div which breaks the line */
footer #fb-root {
  display: none;
}

/* bugfix for facebook like icon which is 4px below top border */
footer div.facebook {
  position: relative;
  top: -3px;
}

footer p.legalstuff {
  float: right;
  margin-right: 30px;
}

div.topwrap {
  z-index: 1;
  position: fixed;
  bottom: 0;
  width: 1160px;
  height: 3em;
}

div.topwrap a.top {
  float: right;
  display: block;
  width: 50px;
  height: 3em;
  background-image: url('/images/base/up_red.png');
  background-position: top center;
  background-repeat: no-repeat;
  line-height: 3.4em;
  color: rgb(149,0,0);
  font-size: 0.7em;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  vertical-align: bottom;
  opacity: 1;
  -webkit-transition: opacity 700ms linear;
  -moz-transition: opacity 700ms linear;
  transition: opacity 700ms linear;
}

div.topwrap a.top:hover {
  border-bottom: 1px solid rgb(149,0,0);
}

div.topwrap a.hidden {
  opacity: 0;
}

/*
 *  MEDIA QUERIES
 */
 
@media screen and (max-width: 1160px) {
  body {
    background-image: url('/images/base/dotbracket_alt.png');
  }
  
  div.wrap {
    background-image: none;
    width: 1000px;
  }
  
  footer {
    width: 1000px;
  }
}

@media screen and (max-width: 1000px) {
  div.wrap {
    width: 100%;
  }
  
  div.headwrap {
    height: auto;
  }
  
  div.contentwrap {
    background-image: none;
  }

  nav {
    height: auto;
    min-height: 29px;
  }
  
  nav ul li {
    display: block;
    float: left;
    margin-left: 10px;
  }
  
  nav ul li a {
    display: block;
    width: 50px;
    text-align: left;
  }

  section.plusaside {
    width: 73%;
  }
  
  article div.employee { 
    background-image: url('/images/base/down_gry.png');
  }
   
  aside {
    padding: 5px;
    width: 25%;
  }
  
  footer {
    width: 100%;
  }
  
  div.headwrap {
    width: 100%;
  }

  div.contentwrap {
    width: 100%;
  }
  
  header hgroup {
    margin-right: 33%;
  }
}

@media screen and (max-width: 800px) {
  section.col3 {
    column-count: 2;
    -moz-column-count: 2;
    -webkit-column-count: 2;
  }
  
  section.wai {
    display: none;
  }

  article div.employee div.datatop div.basic {
    width: 80%;
  }
  
  article div.employee div.datatop div.more {
    float: left;
    width: 100%;
  }
  
  article div.employee div.datatop div.more div.detail {
    width: 50%;
  }
  
  article div.employee div.databottom div.detail {
    float: left;
    width: 50%;
  }
}

@media screen and (max-width: 650px) {
  header img.unilogo {
    display: none;
  }
  
  header hgroup {
    padding-top: 48px;
    margin-right: 10px;
  }
  
  section.plusaside {
    float: none;
    width: 100%;
  }
  
  section.col2 {
    column-count: 1;
    -moz-column-count: 1;
    -webkit-column-count: 1;
  }
  
  section.col3 {
    column-count: 1;
    -moz-column-count: 1;
    -webkit-column-count: 1;
  }

  article img {
    width: 98%;
  }

  article img.left {
    float: none;
    padding: auto;
    width: 98%;
  }
  
  article div.employee div.datatop div.basic {
    width: 100%;
  }
  
  article div.employee div.datatop div.basic div.name {
    margin: auto;
  }
  
  article div.employee div.datatop div.more div.detail {
    width: 100%;
  }
  
  article div.employee div.databottom div.detail {
    width: 100%;
  }

  aside {
    float: none;
    margin: auto;
    width: 80%;
  }
}

@media screen and (max-width: 480px) {
  header hgroup {
    padding-top: 10px;
    margin-right: 10px;
  }
  
  nav ul li {
    width: 45%;
  }
  
  nav ul li a {
    width: 80%;
  }
  
  article img.right {
    float: none;
    padding: 0;
  }

  article img.left {
    float: none;
    padding: 0;
  }
    
  aside {
    float: none;
  }
}