@charset "utf-8";
/* ----- GENERATED FILE! Do NOT EDIT directly! -----
   Always edit and re-compile original {less}-file!
   ------------------------------------------------- 
   (c) Copyright FernUniversitaet in Hagen, ZDI
 */
/*****************************************************/
/*----------Kopf--------------*/
/****************************************************/
/*---Hintergrundbild Kopfbereich----*/
#logos {
  background: url(kopf_hintergrund.jpg) no-repeat top left;
}
#logos.style2012 {
  background: white;
  border: none;
  /* Neues Design schafft obere Linie zum Brotkrümelpfad hin wieder ab. */
}
#illustration.style2012 {
  height: 65px;
  /* height #logos == 80px lt. styles.css */
  margin-right: 15px;
  margin-left: 75px;
  box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.15);
  border-bottom-right-radius: 40px;
  text-align: right;
  /* Ueberstimmen alter Layoutregeln aus styles.css (float:right, position:absolute),
	   da in diesem Design das neue DIV ueber die volle Breite gehen soll (mit o.a. margins) */
  float: none;
  position: relative;
  overflow: hidden;
}
#illustration.style2012 img {
  margin-right: 15px;
}
#illustration.style2012 img[height="43"] {
  /* Höhe: 43px */
  margin-top: 11px;
}
#illustration.style2012 img[height="50"] {
  margin-top: 7px;
}
/*---Positionierung Logos----------*/
#fernunilogo {
  float: left;
  position: absolute;
  left: 0.5em;
  z-index: 3;
  margin-top: 8px;
}
#fakultaet {
  float: left;
  position: absolute;
  left: 6em;
  z-index: 3;
}
#brotkruemelpfad {
  width: 100%;
}
#kopf #brotkruemelpfad {
  width: 99.5%;
}
/*---Topmenueleiste ----*/
#balke {
  background-color: #339;
  box-shadow: 0 10px 10px #6666bb inset;
  border-radius: 0 1em 1em 0;
  color: white;
  width: 100%;
}
#kopf > #balke {
  width: 99.5%;
  left: 0;
}
#rubriken {
  width: 100%;
  overflow-x: hidden;
}
#rubriken li {
  margin-right: 0;
}
#rubriken li.loginname {
  float: right;
  font-weight: normal;
}
#rubriken li.loginname img {
  vertical-align: baseline;
  height: 0.9em;
}
#rubriken li a {
  color: #fff;
}
#rubriken #a a:hover,
#rubriken #b a:hover,
#rubriken #c a:hover,
#rubriken #d a:hover,
#rubriken #a a:focus,
#rubriken #b a:focus,
#rubriken #c a:focus,
#rubriken #d a:focus {
  background-color: #cccccc;
  color: #339;
}
#loginmenu {
  display: block;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.5s, visibility 0s 0.5s;
  z-index: 2;
  position: relative;
}
#loginmenu.showing {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.2s, visibility 0s;
}
#loginmenu div {
  position: absolute;
  right: 0;
  top: 2.2em;
  width: 25em;
  background: rgba(0, 0, 0, 0.85);
  color: #ffffff;
  padding: 1.5em;
  border-radius: 1em;
  box-shadow: 1px 1px 1em rgba(0, 0, 0, 0.3);
}
#loginmenu div::before {
  content: '';
  position: absolute;
  top: -20px;
  right: 3em;
  border: 10px solid transparent;
  border-bottom-color: rgba(0, 0, 0, 0.85);
}
#loginmenu div p.section {
  font-weight: bolder;
  margin: 1em 0 0.2em 0;
  border-bottom: 1px solid #396;
}
#loginmenu div p.section:first-child {
  margin-top: 0;
}
#loginmenu div ul {
  list-style-type: none;
}
#loginmenu div ul li:before {
  content: "– ";
}
#loginmenu div ul li {
  margin-bottom: 0.5em;
}
#loginmenu div ul li:last-child {
  margin-bottom: 0;
}
#loginmenu div ul li a,
#loginmenu div ul li a:visited,
#loginmenu div ul li a:active,
#loginmenu div ul li a:hover {
  color: #ffffff;
}
#loginmenu div ul li a:hover,
#loginmenu div ul li a:active {
  text-decoration: none;
}
#loginmenu #close-loginmenu {
  position: absolute;
  top: 2.95em;
  right: 0.75em;
  width: 1.5em;
  height: 1.5em;
}
#loginmenu #close-loginmenu line {
  stroke: #ffffff;
  stroke-width: 1px;
}
/********************************************************/
/*----------Inhalt----------/*
/*******************************************************/
/*---------vertikale rechte Rand unterhalb der Topmenueleiste------*/
#seite {
  padding: 0;
}
#kopf {
  padding-top: 5px;
}
#inhalt {
  /*right:0;*/
  right: auto;
  /* Wert 0 aus styles.css macht Probleme im IE bei überbreiten Seiten. Da fehlt dann der horiz. Scrollbalken und 
  				der Inhalt überlappt links das Menü und wird ggf. sogar am linken Seitenrand abgeschnitten!! */
  width: 83.5%;
  padding-right: 0;
  /*padding:1em 0.5em 2em 0.5em;*/
  border: none;
}
#seite > #inhalt {
  width: 79.5%;
  right: 0;
}
/*------Überschrift mit verkürzter Unterstreichung------*/
#inhalt > h1 {
  /* Nur direkt unterhalb von #inhalt, nicht fuer h1 innerhalb des #information-Blocks, also im Client-Content. */
  border-bottom: 2px solid #396;
}
#information h1,
h2 {
  margin: 1em 0 0.5em;
  padding: 0;
  /* Insb. linkes Padding f. h1 aus styles.css abschalten, das Padding unter der h1 abschalten und einheitliche
  Margins fuer beide Überschriften festlegen. Angaben zu h1 beziehen sich nur auf Überschriften innerhalb des
  Client Contents (#information), nicht auf die Überschrift darüber. */
}
/*-----Überschriften h3 und h4 unterscheiden---------*/
#inhalt h4 {
  font-style: oblique;
}
/*-----Textbereich - Listenpfeil------*/
#information .pfeil li {
  background: url(doppel_pfeil.gif) no-repeat 0 0.25em;
}
/*----Textbereich - linker Strich aus---*/
#information {
  border-left: none;
}
#information .ulToTable ul li {
  background-image: none;
  margin: 0;
  padding: 0;
}
/*override styles.css "#information li" background fuer Layout-Klasse asTableRow*/
.fussnote {
  font-size: 0.8em;
  border-top: 1px solid #396;
  padding-top: 0.4em;
  margin-top: 1em;
}
hr {
  border: none;
  border-bottom: 1px solid #396;
}
pre,
tt,
code {
  font-size: 1.4em;
}
pre tt,
pre code {
  font-size: 1em;
}
/*tt oder code innerhalb von pre: Nicht nochmal vergroessern, nur außerhalb von pre!*/
/********************************************************/
/*---------  text-block48 und text-block64  ------------*/
/********************************************************/
/* Wie text-block90, nur für 48px- bzw. 64px-Icons  */
/* Außerdem ein paar Anpassungen für text.block90 aus styles.css vorgenommen */
#information .text-block90 {
  border: 0px;
}
#information .text-block48,
#information .text-block64,
#information .text-block90,
#information .text-block48.imgrund img,
#information .text-block64.imgrund img,
#information .text-block90.imgrund img {
  border-radius: 10px;
}
#information .text-block48,
#information .text-block64 {
  clear: both;
  margin-left: 20px;
  margin-bottom: 20px;
  background-color: #e0e0e0;
  height: auto;
  padding: 1em 0.5em 1em 0;
  position: relative;
  /* Damit absolute Positionierung von close-Icons möglich ist */
}
#information .text-block48 img,
#information .text-block64 img {
  margin: 0 0 0 -20px;
  float: left;
  position: relative;
}
#information .text-block48 img.close,
#information .text-block64 img.close {
  width: auto;
  margin: 0;
  float: none;
  position: absolute;
  right: -10px;
  top: -10px;
}
#information .text-block48 svg.close,
#information .text-block64 svg.close {
  position: absolute;
  right: -10px;
  top: -10px;
}
#information .text-block48 svg.close circle,
#information .text-block64 svg.close circle {
  fill: rgba(0, 0, 0, 0.9);
  stroke: none;
}
#information .text-block48 svg.close line,
#information .text-block64 svg.close line {
  stroke: white;
  stroke-width: 1;
}
#information .text-block48 div div,
#information .text-block64 div div {
  margin-left: 0;
}
#information .text-block48 h2,
#information .text-block64 h2 {
  padding-top: 0;
  margin-top: 0;
}
#information .text-block48.frame,
#information .text-block64.frame {
  border: 3px solid #e0e0e0;
  background: none;
}
#information .text-block48.frame h2:first-child,
#information .text-block64.frame h2:first-child {
  color: navy;
}
#information .text-block48.red,
#information .text-block64.red {
  border: 1px solid red;
}
#information .text-block48.red h2:first-child,
#information .text-block64.red h2:first-child {
  color: red;
}
#information .text-block48.green,
#information .text-block64.green {
  border: 1px solid green;
}
#information .text-block48.green h2:first-child,
#information .text-block64.green h2:first-child {
  color: green;
}
#information .text-block48.yellow,
#information .text-block64.yellow {
  border: 1px solid #cc6600;
}
#information .text-block48.yellow h2:first-child,
#information .text-block64.yellow h2:first-child {
  color: #cc6600;
}
#information .text-block48 img {
  width: 48px;
}
#information .text-block48 div {
  margin-left: 48px;
}
#information .text-block64 {
  min-height: 7.5em;
}
#information .text-block64 img {
  width: 64px;
}
#information .text-block64 div {
  margin-left: 64px;
}
/********************************************/
/*---------Formate für Tabellen ------------*/
/********************************************/
th,
thead td,
tfoot td {
  font-weight: bold;
  background-color: #E8E8EA;
  white-space: nowrap;
}
/******************************************************/
/*---------Formate für WebAssign-Tabellen ------------*/
/******************************************************/
/* sicherstellen, dass die Tabelle unterhalb von rechts floatenden Elementen
wie einer ggf. rechts floatenden MOTD-Box angeordnet wird: */
#watable table,
#watable .kleineBox {
  clear: right;
}
#watable td table {
  margin: 0;
}
#watable td table td {
  border-style: none;
}
#watable table th {
  background-color: #339;
  color: white;
}
#watable table#ergebnisliste,
#watable table#aufgabenliste {
  border-collapse: collapse;
}
#watable.center td {
  text-align: center;
}
table.layout,
table.layout td,
table.layout th,
table[border="0"] td,
table[border="0"] th {
  border-style: none;
}
/********************************************************/
/*---------Menues------------/*
/*******************************************************/
/*--------Menue links-------*/
#navigation {
  /* Eigener Stil: Selektierter Menüpunkt  (Klasse am Link oder am LI)*/
}
#navigation .navigation-ueberschrift,
#navigation #navigation-ueberschrift {
  border-bottom: 2px solid #396;
  padding: 0.7em 0 0.2em 0.7em;
  color: #000;
  background: none;
  width: 80%;
}
#navigation #themennavigation,
#navigation .themennavigation {
  background: none;
  border: none;
}
#navigation a {
  color: #33C;
  text-decoration: none;
}
#navigation a:hover {
  color: #000;
}
#navigation a:focus {
  text-decoration: underline;
}
#navigation a.selected,
#navigation li.selected a {
  color: #000;
}
#navigation #lg-funktionen #menuVuLink a {
  font-weight: bold;
  color: #396;
}
#navigation #lg-funktionen #menuVuLink a:before {
  content: "» ";
}
#navigation #lg-funktionen #menuVuLink a:before,
#navigation #lg-funktionen #menuVuLink a:after {
  font-size: 1.3em;
  font-weight: normal;
}
#navigation ul.folding-arrows {
  font-size: 0.9em;
}
#navigation ul.folding-arrows ul {
  font-size: 1em;
}
/*---------Menue rechts----------*/
#zusatzinformation {
  height: 40em;
  width: 22%;
  padding-left: 0.5em;
  margin-top: 1em;
}
#zusatzinformation ul {
  width: 99%;
}
#zusatzinformation li ul {
  padding-top: 0.5em;
  margin-top: 0.2em;
  padding-left: 5px;
  border: none;
  border-top: 3px solid #ccc;
}
/********************************************************/
/*---------------------BOX  / MOTD -----------------*/
/*******************************************************/
#zusatzinformation fieldset,
fieldset.motd {
  padding: 0.5em 0.5em 0.5em 0.5em;
  width: 90%;
  border: medium double #A00;
  margin-bottom: 1em;
  margin-top: 0em;
  font: 1em Arial, Helvetica, sans-serif;
}
#information fieldset.motd {
  width: 30%;
  float: right;
  margin-left: 1em;
}
/* #information .clear_after_motd {clear:right;} */
#information fieldset.motd ul {
  list-style: none;
  margin: 0;
}
#information fieldset.motd ul li {
  margin: 0;
}
#zusatzinformation fieldset legend,
fieldset.motd legend {
  padding: 0 0.3em;
  font: bold 1em Verdana, Arial, Helvetica, sans-serif;
  color: #A00;
}
#zusatzinformation fieldset li,
fieldset.motd li {
  background: url(minus.gif) no-repeat 0 0.1em;
  padding-left: 12px;
  padding-bottom: 0.3em;
  font-weight: normal;
}
/*******************************************************/
/*------------------- Default Buttons -----------------*/
/*******************************************************/
button.default,
form > input:not([type="hidden"]) ~ button[type="submit"]:first-of-type {
  box-shadow: 0 0 0.2em #006EDB;
}
/*---- Elemente, die nur fuer Mobile-Version gedacht sind, ausblenden ---*/
.mobile,
#menubutton,
#menubuttonTablet,
#backlink,
.responsiveNotLarge {
  display: none;
}
#seite {
  border: none;
  width: 98%;
  min-width: 40em;
}
/* Mobile-Regel: Ab einem gewissen Punkt soll das Smartphone doch etwas auszoomen,
   weshalb extra kein Viewport auf device-width gesetzt ist. Da ohne diesen Viewport 
   aber oft zu breite virtuelle Seitenbreiten gesetzt werden, greift diese Regel und
   reduziert die Seitenbreite auf das oben definierte Minimum (nicht device-width!),
   und zwar genau dann, wenn die max-device-width dieses Minimum unterschreitet.*/
@media screen and (max-device-width: 40em) and (orientation: portrait) {
  #seite {
    width: 40em;
  }
}
@media screen and (max-width: 70em) {
  /* Elemente, die mit responsiveLargest markiert sind, sollen nur sichtbar sein, wenn die Seite breiter als
	   dieser größte Breakpoint für Responsive Design ist. */
  .responsiveLargest {
    display: none;
  }
  /* Als reflowable markierte Tabellen zum Einsparen von Breite in Block-Folge umwandeln,
		bereits ab dieser Fensterbreite, wenn zusätzlich als early klassifiziert.
		(Default ist ein Reflow erst beim nächst-kleineren Breakpoint) */
  table.reflowable.early,
  table.reflowable.early tbody,
  table.reflowable.early tr,
  table.reflowable.early td {
    display: block;
    width: 100%;
  }
}
@media screen and (max-width: 55em) {
  /* Elemente, die mit responsiveLarge markiert sind, sollen nur sichtbar sein, wenn die Seite breiter als
	   dieser große (zweitgrößte / Tablet-) Breakpoint für Responsive Design ist, d.h. nur bei Large- und Largest-Seiten, nicht mehr ab Medium. */
  .responsiveLarge {
    display: none;
  }
  .responsiveNotLarge {
    display: block;
  }
  td.responsiveNotLarge,
  th.responsiveNotLarge {
    display: table-cell;
  }
  span.responsiveNotLarge {
    display: inline;
  }
  /* Dreispaltiges Layout: Dritte (rechte) Spalte entfernen und (hier erstmal mit einfacher Schriftgröße) unter den Main-Content verschieben. */
  #information,
  #zusatzinformation {
    width: auto;
    padding-right: 0.5em;
    float: none;
  }
  #inhalt > #information {
    min-height: 1em;
  }
  #zusatzinformation {
    height: auto;
  }
  #zusatzinformation fieldset,
  fieldset.motd {
    width: auto;
  }
  html,
  body {
    height: 100%;
  }
  #inhalt {
    min-height: 140%;
    transition: width 0.5s;
  }
  #seite.disableMenuAnimation #inhalt {
    transition: none;
  }
  #seite.hidemenu > #inhalt {
    width: 100%;
  }
  #navigation {
    transition: opacity 0.5s;
  }
  #seite.disableMenuAnimation #navigation {
    transition: none;
  }
  #seite.hidemenu > #navigation {
    opacity: 0;
  }
  #menubuttonTablet {
    display: block;
  }
  #menubuttonTablet span::before {
    content: "<";
  }
  #seite.hidemenu #menubuttonTablet span::before {
    content: "";
  }
  #seite.hidemenu #menubuttonTablet span::after {
    content: ">";
  }
  /* "Nur" als reflowable markierte Tabellen zum Einsparen von Breite in Block-Folge umwandeln,
		sobald diese Seitenbreite "Large" unterschritten wurde (Default). */
  table.reflowable,
  table.reflowable tr,
  table.reflowable tr td {
    display: block;
    width: 100%;
  }
  textarea {
    width: 100%;
  }
}
@media screen and (max-width: 45em) {
  #kopf {
    padding-top: 0;
  }
  #seite > #inhalt {
    width: 100%;
    float: left;
  }
  /* Dreispaltiges Layout: In Ergänzung zu obiger Regel, die die dritte Spalte unter den Main-Content
       verschiebt, hier nun noch die Schriftgröße für Navigationslinks verdoppeln. */
  #zusatzinformation {
    font-size: 200%;
  }
  #zusatzinformation .motd {
    font-size: 50%;
  }
  #navigation {
    padding: 0.7em 0;
    background: rgba(0, 0, 0, 0.85);
    color: #ddd;
    font-size: 1.8em;
    box-shadow: 3px 2px 10px rgba(0, 0, 0, 0.4);
    border-radius: 1em;
    min-height: 100%;
    position: relative;
    z-index: 10;
    top: 0;
    left: -410px;
    width: 400px;
    transition: left 0.5s;
  }
  #navigation input,
  #navigation select,
  #navigation button {
    font-size: 0.9em;
  }
  #seite.disableMenuAnimation #navigation {
    transition: none;
  }
  #seite.mobilemenushowing #navigation {
    left: 0;
  }
  #navigation .themennavigation,
  #navigation .navigation-ueberschrift,
  #navigation #lg-fernuni,
  #navigation #lg-funktionen {
    padding-left: 0.7em;
    margin-left: 0;
  }
  #navigation .navigation-ueberschrift {
    color: #eee;
  }
  #navigation .themennavigation {
    width: auto;
    margin: 0 15px 0 0;
  }
  #navigation .themennavigation li {
    background-color: rgba(50, 50, 50, 0.9);
    background-image: none;
    box-shadow: 0 0 1em rgba(0, 0, 0, 0.2) inset;
    padding: 0.5em;
    width: auto;
    border-radius: 0.3em;
  }
  #navigation #lg-funktionen li {
    padding: 0.2em 0;
  }
  #navigation a,
  #navigation a:hover {
    color: white;
  }
  #navigation a.selected,
  #navigation li.selected a {
    color: #f66;
  }
  #navigation #fernunilogoMobile {
    margin-bottom: 1em;
  }
  #illustration.style2012 {
    margin-left: 0;
    /* Schatten nun bis ganz nach links */
  }
  #menubuttonTablet {
    display: none;
  }
  #menubutton {
    float: left;
    position: relative;
    margin: 11px;
    display: inline-block;
    width: 43px;
    height: 43px;
    background-color: #eee;
    border-radius: 10px;
  }
  #menubutton .bar {
    background-color: #339;
    box-shadow: 0 1px 3px #66b inset;
    width: 31px;
    height: 5px;
    margin: 7px 6px;
    border-radius: 5px;
  }
  #menubutton a {
    position: absolute;
    bottom: 0;
    top: 0;
    right: 0;
    left: 0;
  }
  #backlink {
    display: inline-block;
    float: left;
    margin-top: 11px;
    height: 43px;
    line-height: 43px;
    font-size: 14pt;
  }
  #backlink .chevron {
    font-size: 1.5em;
    float: left;
  }
  #loginmenu {
    font-size: 1.8em;
  }
  #loginmenu div {
    width: 40em;
    max-width: 80vw;
  }
  #loginmenu div ul li {
    margin-bottom: 1em;
  }
  #loginmenu div::before {
    top: -60px;
    border-width: 30px;
  }
  .mobile {
    display: block;
  }
  td.mobile,
  th.mobile {
    display: table-cell;
  }
  span.mobile {
    display: inline;
  }
  #brotkruemelpfad,
  #fernunilogo,
  .nonMobile {
    display: none;
  }
}
@media screen and (max-width: 45em) and (min-height: 25em) {
  #illustration.style2012 {
    left: 0;
    right: 2%;
    position: fixed;
    z-index: 11;
    background-color: rgba(255, 255, 255, 0.9);
  }
}