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

/* Misc -------------------- */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing:    border-box;
  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,
.AlignRight40,
.AlignRight60,
.AlignRight100,
.AlignRight140 {
  display: inline-block;
}

.AlignRight20 {
  width: 20px;
}

.AlignRight40 {
  width: 40px;
}

.AlignRight60 {
  width: 60px;
}

.AlignRight100 {
  width: 100px;
}

.AlignRight140 {
  width: 140px;
}

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

.Hidden {
  clip: rect(1px 1px 1px 1px); /* IE6 & 7 */
  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 {
  -webkit-border-radius: 4px;
  -moz-border-radius:    4px;
  border-radius:         4px;
  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;  
}

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

.BtnPreamble:hover, 
.BtnPreamble:active {
  background:      #ffffff;
  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;
  -webkit-border-radius: 4px;
  -moz-border-radius:    4px;
  border-radius:         4px;
  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-bottom: 1px solid #003f60;
  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-top:       4px solid #003f60;
  display:          none;
  font-size:        14px;
  line-height:      25px;
  list-style-type:  none;
  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 a {
  display:   inline-block;
  padding:   5px 10px;
  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;
}

/* Preamble */
.PreambleHeader {
  background:      url(../images/preamble-header-01.small.jpg) 50% 35% no-repeat;
  background-size: cover;
  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 {
  -webkit-border-radius: 100%;
  -moz-border-radius:    100%;
  border-radius:         100%;
  height:                200px;
  width:                 200px;
}

/* Styles for code */
.Code {
  background-color:      #efefef;
  border:                1px solid #dedede;
  -webkit-border-radius: 4px;
  -moz-border-radius:    4px;
  border-radius:         4px;
  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:                          1px solid #dedede;
  -webkit-border-top-right-radius: 4px;
  -webkit-border-top-left-radius:  4px;
  -moz-border-radius-topright:     4px;
  -moz-border-radius-topleft:      4px;
  border-top-right-radius:         4px;
  border-top-left-radius:          4px;
  font-size:                       1.5em;
  letter-spacing:                  1px;
  padding:                         20px;
}

.EventContainer {
  background-color:                   #efefef;
  border:                             1px solid #dedede;
  -webkit-border-bottom-right-radius: 4px;
  -webkit-border-bottom-left-radius:  4px;
  -moz-border-radius-bottomright:     4px;
  -moz-border-radius-bottomleft:      4px;
  border-bottom-right-radius:         4px;
  border-bottom-left-radius:          4px;
  
}

.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 {
  color: #ff8f00;
}

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

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

.EventItemText {
  font-size: 1em;
  padding:   7px 0 0 0;
}

.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:     218px; 
  list-style: none;
  margin:     10px; 
  padding:    8px;
  width:      218px;
}

.Thumbs li:hover {
  -webkit-transition: -webkit-transform .15s linear;
  -webkit-transform:  scale(1.25);
  -moz-transform:     scale(1.25);
  position:           relative;
  z-index:            5;
}

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

.Polaroids li {
  -webkit-transform: rotate(-2deg);
  -moz-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) {
  -webkit-transform: rotate(2deg);
  -moz-transform:    rotate(2deg);
}

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

.Polaroids li:nth-child(5n) {
  -webkit-transform: rotate(5deg);
  -moz-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 {
  -webkit-transition: -webkit-transform .15s linear;
  -webkit-transform:  scale(1.25);
  -moz-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;
  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;
}

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

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

/* 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; 
}

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

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

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

  .Preamble div:nth-of-type(2) {
    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); 
    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);
    clip:     rect(1px, 1px, 1px, 1px);
    position: absolute;
  }
}

@media (max-width: 500px) {

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