/*
Theme : Operating Systems and Distributed Systems
Author: Klemens Kittan
*/

/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v34-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/open-sans-v34-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v34-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v34-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v34-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v34-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* Misc -------------------- */
* {
  box-sizing: border-box;
  margin:     0;
  padding:    0;
}

body {
  background-color: #ffffff;
  color:            #333333;
  font-family:      "Open Sans", Arial, sans-serif;
  font-size:        16px;
}

a {
  color:           #2c81b0;
  text-decoration: none;
}

a:hover,
a:focus {
  color:           #2c81b0;
  text-decoration: underline;
}

blockquote footer {
  color:     #777777;
  display:   block;
  font-size: 0.9em;
}

blockquote footer:before {
  content: '\2014 \00A0';
}

h3 {
  background:     url('../images/hr-title-separator.png') 0 100% no-repeat;
  font-size:      1.5em;
  font-weight:    normal;
  margin-bottom:  20px;
  padding-bottom: 10px;
}

h4 {
  font-size:      1.2em;
  margin-bottom:  10px;
}

h5 {
  font-size:      1em;
  margin-bottom:  5px;
}

img {
  max-width: 100%;
  height:    auto;
}

strong {
  font-weight: bold;
}

p,
ul,
ol {
  line-height: 25px;
}

figcaption {
  line-height: 25px;
  font-size:   14px;
}

/* Classes */
.AlignRight20,
.AlignRight30,
.AlignRight40,
.AlignRight60,
.AlignRight100,
.AlignRight140,
.AlignRight180,
.AlignRight200 {
  display: inline-block;
}

.AlignRight20 {
  width: 20px;
}

.AlignRight30 {
  width: 30px;
}

.AlignRight40 {
  width: 40px;
}

.AlignRight60 {
  width: 60px;
}

.AlignRight100 {
  width: 100px;
}

.AlignRight140 {
  width: 140px;
}

.AlignRight180 {
  width: 180px;
}

.AlignRight200 {
  width: 200px;
}

.AlignCenter {
  text-align: center;
}

.Figcaption {
  border-bottom:  1px solid #dedede;
  padding-bottom: 10px;
  margin:         10px 0;
  display:        block;
}

.Hidden {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute;
}

.PaddingRight5 {
  padding: 0 5px 0 0;
}

/* Styles for ul */
.NoListStyle {
  list-style: none;
}

.PaddingLeft {
  padding: 0 0 0 20px;
}

/* Buttons */
.Btn {
  border-radius: 5px;
  display:       inline-block;
  font-size:     1.1em;
  font-weight:   bold;
  margin:        1em 0 1em 0;
  padding:       0.6em 1em;
}

.BtnDefault {
  background: #ffffff;
  border:     1px solid #003f60;
  color:      #003f60;
}

.BtnDefault:hover,
.BtnDefault:active {
  background:      #003f60;
  color:           #ffffff;
  text-decoration: none;
}

.BtnDefaultActive {
  background: #003f60;
  color:      #ffffff;
}

.BtnReadMore {
  margin: 0 0 60px 0;
}

.BtnPreamble {
  background:    #a7d754;
  border:        1px solid #ffffff;
  color:         #ffffff;
  margin-bottom: 0;
}

.BtnPreamble:hover,
.BtnPreamble:active {
  background:      #ffffff;
  border:          1px solid #a7d754;
  color:           #a7d754;
  text-decoration: none;
}

.BtnGroup {
  float: left;
}

.BtnGroup > .Btn {
  margin: 0;
}

.BtnGroup .Btn+.Btn {
  margin-left: -5px;
}

.BtnGroup > .Btn:first-child:not(:last-child) {
  border-top-right-radius:    0;
  border-bottom-right-radius: 0;
}

.BtnGroup > .Btn:not(:first-child):not(:last-child) {
  border-radius: 0;
}

.BtnGroup > .Btn:last-child:not(:first-child) {
  border-top-left-radius:    0;
  border-bottom-left-radius: 0;
}

input {
  background:    #dedede;
  border-radius: 5px;
  border:        0;
  font-family:   "Open Sans", sans-serif;
  font-size:     16px;
  outline:       0;
  padding:       7px;
  width:         200px;
}

input[type=submit] {
  background:  #003f60;
  box-shadow:  none;
  color:       #ffffff;
  cursor:      pointer;
  line-height: 25px;
  padding:     5px 18px;
  text-shadow: none;
  width:       auto;
}

input[type=radio] {
  display: none;
}

/* Grid */
.Clearfix:after {
  clear:      both;
  content:    ".";
  display:    block;
  height:     0;
  visibility: hidden;
}

.Column1,
.Column2,
.Column3,
.Column4,
.Column5,
.Column6,
.Column7,
.Column8,
.Column9,
.Column10,
.Column11,
.Column12 {
  float:   left;
  padding: 0 15px;
}

.Column1 {
  width: 8.33333333%;
}

.Column2 {
  width: 16.66666667%;
}

.Column3 {
  width: 25%;
}

.Column4 {
  width: 33.33333333%;
}

.Column5 {
  width: 41.66666667%;
}

.Column6 {
  width: 50%;
}

.Column7 {
  width: 58.33333333%;
}

.Column8 {
  width: 66.66666667%;
}

.Column9 {
  width: 75%;
}

.Column10 {
  width: 83.33333333%;
}

.Column11 {
  width: 91.66666667%;
}

.Column12 {
  width: 100%;
}

.ContentLayout {
  margin:    0 auto;
  max-width: 960px;
  width:     auto;
}

.Wrapper {
  padding: 0 10px 0 10px;
}

/* Header -------------------- */
#PageHeader {
  border-top: 6px solid #003f60;
  width:      100%;
}

#LogoRow {
  min-height: 190px;
  width:      100%;
}

#LogoRow a {
  color:       #003f60;
  font-family: "Georgia","Times New Roman",Times,sans-serif;
  font-size:   1.7em;
}

#LogoRow a:hover,
#LogoRow a:focus {
  color:           #003f60;
  text-decoration: none;
}

#LogoRow .Column {
  float: left;
  width: auto;
}

#LogoRow #LogoRowColumn1 {
  padding: 42px 35px 0 0;
}

#LogoRow #LogoRowColumn2 {
  padding-top: 83px;
}

/* Navigation -------------------- */
#Navigation {
  border-bottom: 1px solid #003f60;
  border-top:    1px solid #003f60;
  width:         100%;
}

#NavigationRow {
  width: 100%;
}

#NavigationRow a {
  color:           #333333;
  text-decoration: none;
}

#NavigationRow a:hover,
#NavigationRow a:focus {
  color:           #2c81b0;
  text-decoration: none;
}

#NavigationRow .TopLevel {
  font-size:       16px;
  line-height:     60px;
  list-style-type: none;
}

#NavigationRow .TopLevel li {
  border-top:   3px solid #ffffff;
  cursor:       pointer;
  display:      block;
  float:        left;
  margin-right: 30px;
}

#NavigationRow li:hover,
#NavigationRow li:focus {
  border-top: 3px solid #003f60;
}

#NavigationRow li:last-child {
  float:        right;
  margin-right: 0;
}

#NavigationRow .TopLevel li:last-child:hover,
#NavigationRow .TopLevel li:last-child:focus {
  border-top: 3px solid #ffffff;
}

#NavigationRow .TopLevel .SubLevel li:last-child:hover,
#NavigationRow .TopLevel .SubLevel li:last-child:focus {
  border-top: none;
}

#NavigationRow .TopLevel li:hover .SubLevel,
#NavigationRow .TopLevel li:focus .SubLevel {
  display: block;
}

#NavigationRow .TopLevel .Selected {
  border-top: 3px solid #003f60;
  color:      #003f60;
}

#NavigationRow .TopLevel .Selected > a {
  color: #2c81b0;
}

#NavigationRow .TopLevel li .SubLevel {
  background-color: #efefef;
  border-radius:    5px;
  border-top:       4px solid #003f60;
  border-bottom:    1px solid #003f60;
  border-left:      1px solid #003f60;
  border-right:     1px solid #003f60;
  box-shadow:       2px 2px 5px 0px #888888;
  display:          none;
  font-size:        14px;
  line-height:      25px;
  list-style-type:  none;
  padding:          0px 5px;
  position:         absolute;
  z-index:          1000;
}

#NavigationRow .TopLevel li .SubLevel li {
  border-bottom: 1px solid #dedede;
  border-top:    none;
  cursor:        pointer;
  display:       block;
  float:         none;
  margin:        0;
}

#NavigationRow .TopLevel li .SubLevel li:last-child {
  border-bottom: none;
}

#NavigationRow .TopLevel li .SubLevel li a {
  display:   inline-block;
  padding:   5px;
  min-width: 140px;
}

#NavigationRow .Search {
  width: auto;
}

/* Content -------------------- */
#Content {
  width: 100%;
}

#ContentRow article,
.ContentLayout article {
  padding-bottom: 60px;
}

#ContentRow article:nth-of-type(1),
.ContentLayout article:nth-of-type(1) {
  padding-top: 60px;
}

#ContentRow article .ImageItem,
.ContentLayout article .ImageItem {
  padding: 20px 20px 20px 0;
}

#ContentRow article section {
  padding-bottom: 40px;
}

#ContentRow article section:last-child {
  padding-bottom: 0px;
}

/* Preamble */
.PreambleHeader {
  background:      url(../images/preamble-header-01.small.jpg) 50% 26% no-repeat;
  background-size: cover;
/*  background-attachment: fixed; */
  min-height:      450px;
  opacity:         0.9;
}

.Preamble h3 {
  background:     none;
  font-size:      1.7em;
  font-weight:    bold;
  letter-spacing: 2px;
  margin:         0;
  padding:        0 0 30px 0;
}

.Preamble div {
  margin:     60px 0;
  text-align: center;
}

.Preamble div:nth-of-type(2) {
  margin: 0 0 60px 0;
}

.Preamble img {
  border-radius: 100%;
  height:        200px;
  width:         200px;
}

/* Styles for code */
.Code {
  background-color: #efefef;
  border:           1px solid #dedede;
  border-radius:    5px;
  margin:           10px 0;
  padding:          0 10px;
  word-break:       break-all;
  word-wrap:        break-word;
}

/* Styles for events */
.Events {
  background-color: #dedede;
}

.Events div {
  background-color: #efefef;
  border-top:       1px solid #dedede;
  padding:          10px 20px;
}

.Events h3 {
  background: none;
  border:     0;
  margin:     0;
  padding:    20px;
}

.Events p {
  font-size:   14px;
  line-height: 20px;
}

.Events span {
  font-size: 1.2em;
}

/* Styles for events */
.EventHead {
  background-color:        #dedede;
  border-top-right-radius: 5px;
  border-top-left-radius:  5px;
  font-size:               1.5em;
  letter-spacing:          1px;
  padding:                 20px;
}

.EventContainer {
  background-color:           #efefef;
  border:                     1px solid #dedede;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius:  5px;

}

.EventItmes {
  padding: 0 20px;
}

.EventItem {
  border-bottom: 1px solid #dedede;
  padding:       20px 0;
}

.EventItemLast {
  border-bottom: 0;
}

.EventItemTitle {
  color:          #ff8f00;
  display:        block;
  font-size:      1.1em;
  letter-spacing: 1px;
  padding:        0 0 12px 0;
}

.EventItemTitle a,
.EventItemText a {
  color: #ff8f00;
}

.EventItemTitle a:hover,
.EventItemTitle a:focus,
.EventItemText a:hover,
.EventItemText a:focus {
  color:           #ff8f00;
  text-decoration: underline;
}

.EventItmeDate,
.EventItemLocation,
.EventItemText {
  font-size: 0.9em;
  display:   block;
  padding:   0 0 7px 0;
}

.EventItemText {
  font-size: 1em;
}

.EventItmeDate span {
  padding-left: 10px;
}

.EventItemLocation span {
  padding-left: 18px;
}

/* Styles for the side: ipv6 activities */
.Left {
  float:   left;
  padding: 0;
  width:   50px;
}

.Right {
  border-left: 1px solid #ff8f00;
  float:       left;
  padding:     0 0 0 20px;
  width:       90%;
}

/* Styles for photo galleries */
.Thumbs li {
  background:     #ffffff;
  border:         1px solid #dedede;
  box-shadow:     4px 4px 8px -4px rgba(0, 0, 0, .35);
  float:          left;
  height:         auto;
  list-style:     none;
  margin:         10px;
  padding:        8px;
  padding-bottom: 2px;
  width:          218px;
}

.Thumbs li:hover {
  transition-duration: 0.25s;
  transform:           scale(1.25);
  position:            relative;
  z-index:             5;
}

.Polaroids figcaption {
  text-align: center;
  width:      218px;
}

.Polaroids li {
  transform:  rotate(-2deg);
  background: #ffffff;
  border:     1px solid #dedede;
  box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .35);
  float:      left;
  list-style: none;
  margin:     10px;
  padding:    8px;
  width:      218px;
}

.Polaroids li:nth-child(even) {
  transform: rotate(2deg);
}

.Polaroids li:nth-child(3n) {
  transform: none;
  position:  relative;
  top:       -5px;
}

.Polaroids li:nth-child(5n) {
  transform: rotate(5deg);
  position:  relative;
  right:     5px;
}

.Polaroids li:nth-child(8n) {
  position: relative;
  top:      8px;
  right:    5px;
}

.Polaroids li:nth-child(11n) {
  position: relative;
  top:      3px;
  left:     -5px;
}

.Polaroids li:hover {
  transition-duration: 0.25s;
  transform:           scale(1.25);
  position:            relative;
  z-index:             5;
}

/* Styles for main images */
.Images figure {
  margin:   3em 0 3em 0;
  overflow: hidden;
  position: relative;
}

.Images figcaption {
  background: rgba(0, 0, 0, .7);
  color:      #dedede;
  bottom:     5px;
  padding:    10px 20px;
  position:   absolute;
  text-align: left;
  width:      100%;
}

/* Styles for tables */
.SemesterTable {
  border-collapse: collapse;
  border-spacing:  0px;
  table-layout:    fixed;
  width:           960px;
}

.SemesterTable caption {
  background-color: #656e70;
  color:            #ffffff;
  border-bottom:    2px solid #ffffff;
  font-weight:      bold;
  padding:          10px 5px 10px 10px;
  text-align:       left;
  vertical-align:   top;
}

.SemesterTable th {
  background-color: #dedede;
  border-bottom:    2px solid #ffffff;
  padding:          5px 5px 5px 10px;
  text-align:       left;
  vertical-align:   top;
}

.SemesterTable th:last-child {
  padding-right: 10px;
}

.SemesterTable td {
  background-color: #efefef;
  border-bottom:    2px solid #ffffff;
  padding:          5px 5px 5px 10px;
  text-align:       left;
  vertical-align:   top;
}

.SemesterTable td:last-child {
  padding-right: 10px;
}

.SemesterTable tr:last-child td {
  border-bottom: none;
}

.SemesterTable .DatumRow {
  width: 15%;
}

.SemesterTable .NameRow {
  width: 25%;
}

.IPv6Row td {
  background-color: #ff8f00;
}

.CCRow td {
  background-color: #19b0ff;
}

.CCRow a {
  color: #002b5c;
  text-decoration: underline;
}

.CCRow a:hover,
.CCRow a:focus {
  color: #000;
}

/* Footer -------------------- */
#PageFooter {
  background-color: #003f60;
  color:            #ffffff;
  width:            100%;
}

#FooterRow {
  width: 100%;
}

#FooterRow a {
  color:     #ff8f00;
  font-size: 0.9em;
}

#FooterRow a:hover,
#FooterRow a:focus {
  color:           #ff8f00;
  text-decoration: underline;
}

#FooterRow .Column {
  float:   left;
  padding: 40px 10px;
  width:   33.33333333%;
}

#FooterRow .Column:nth-of-type(1) {
  padding-left: 0;
}

#FooterRow .Column:nth-of-type(3) {
  padding-right: 0;
}

#FooterRow .Column h3 {
  background:     none;
  font-size:      1em;
  letter-spacing: 1px;
  margin:         0;
  padding:        0 0 30px 0;
  text-transform: uppercase;
}

#FooterRow .Column p {
  font-size:      0.9em;
  line-height:    20px;
  padding-bottom: 10px;
}

#FooterRow .Column ul {
  line-height: 20px;
}

#FooterRow .Column ul li {
/*
  background: url(../images/arrows-right-icon.png) left 3px no-repeat;
*/
  display:    block;
/*
  padding:    0 0 8px 20px;
*/
  width:      auto;
}

/* Copyright -------------------- */
#Copyright {
  background-color: #00293e;
  color: #ffffff;
  font-size: 0.9em;
  width: 100%;
}

#CopyrightRow {
  padding: 20px 0 20px 0;
  width:   100%;
}

#CopyrightRow a {
  color: #ff8f00;
  font-size: 0.9em;
}

#CopyrightRow a:hover,
#CopyrightRow a:focus {
  color: #ff8f00;
  text-decoration: underline;
}

/* Flexbox ----------------- */
.flex-container {
  display: flex;
  width: 100%;
}

.flex-group {
    width: 50%;
}

/* Responsive Webdesign -------------------- */
@media (max-width: 970px) {

  /* Grid */
  .Column12Small {
    float:   none;
    padding: 0;
    width:   100%;
  }

  /* Preamble */
  .PreambleHeader {
    min-height: 300px;
  }

  .Preamble div:nth-of-type(3) {
    margin: 0;
  }
}

@media (max-width: 750px) {

  /* Header */
  #LogoRow a {
    font-size: 1.4em;
  }

  /* Footer */
  #FooterRow .Column {
    float:   none;
    padding: 40px 0 0 0;
    width:   100%;
  }

  #FooterRow .Column:nth-of-type(3) {
    padding: 40px 0 40px 0;
  }
}

@media (max-width: 740px) {

  /* Preamble */
  .PreambleHeader {
    min-height: 250px;
  }

  /* Navigation */
  #NavigationRow .Search {
    clip:     rect(1px, 1px, 1px, 1px);
    position: absolute;
  }
}

@media (max-width: 610px) {

  /* Header */
  #LogoRow {
    min-height: 0;
  }

  #LogoRow .Column {
    float: none;
    width: 100%;
  }

  #LogoRow #LogoRowColumn1 {
    padding:    20px 0 0 0;
    text-align: center;
  }

  #LogoRow #LogoRowColumn2 {
    padding:    20px 0;
    text-align: center;
  }

  /* Navigation */
  #NavigationRow .TopLevel {
    font-size:       14px;
    line-height:     50px;
    list-style-type: none;
  }

  #NavigationRow .TopLevel li {
    border-top:   3px solid #ffffff;
    cursor:       pointer;
    display:      block;
    float:        left;
    margin-right: 10px;
  }

  #NavigationRow .TopLevel li .SubLevel {
    font-size:   12px;
    line-height: 20px;
  }

  #NavigationRow .TopLevel li .SubLevel li a {
    display: inline-block;
    padding: 3px 8px;
    width:   150px;
  }

  /* Content */
  .Right {
    width: 85%;
  }
}

@media (max-width: 599px) {

  /* Preamble */
  .PreambleHeader {
    clip:     rect(1px, 1px, 1px, 1px);
    position: absolute;
  }
}

@media (max-width: 500px) {

  /* Content */
  .Right {
    width: 80%;
  }
}