/* 
 * HTML5 ? Boilerplate
 *
 * What follows is the result of much research on cross-browser styling. 
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 *
 * Detailed information about this CSS: h5bp.com/css
 * 
 * ==|== normalize ==========================================================
 */


/* =============================================================================
   HTML5 display definitions
   ========================================================================== */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }

/* =============================================================================
   Base
   ========================================================================== */

/*
 * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
 * 2. Force vertical scrollbar in non-IE
 * 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
 */

html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

body { margin: 0; font-size: 13px; line-height: 1.231; }

body, button, input, select, textarea { font-family: sans-serif; color: #222; }

/* 
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate
 * Also: hot pink! (or customize the background color to match your design)
 */

 /*
::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
::selection { background: #fe57a1; color: #fff; text-shadow: none; }
*/

/* =============================================================================
   Links
   ========================================================================== */

a { color: #00e; }
a:visited { color: #551a8b; }
a:hover { color: #06e; }
a:focus { outline: thin dotted; }

/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover, a:active { outline: 0; }


/* =============================================================================
   Typography
   ========================================================================== */

abbr[title] { border-bottom: 1px dotted; }

b, strong { font-weight: bold; }

blockquote { margin: 1em 40px; }

dfn { font-style: italic; }

/*hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }*/

ins { background: #ff9; color: #000; text-decoration: none; }

mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }

/* Redeclare monospace font family: h5bp.com/j */
pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }

/* Improve readability of pre-formatted text in all browsers */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }

q { quotes: none; }
q:before, q:after { content: ""; content: none; }

small { font-size: 85%; }

/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }


/* =============================================================================
   Lists
   ========================================================================== */

ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol, footer ul, footer ol, #content ul.nolist, #content ol.nolist {
  list-style: none; list-style-image: none; margin: 0; padding: 0; }


/* =============================================================================
   Embedded content
   ========================================================================== */

/*
 * 1. Improve image quality when scaled in IE7: h5bp.com/d
 * 2. Remove the gap between images and borders on image containers: h5bp.com/e 
 */

img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }

/*
 * Correct overflow not hidden in IE9 
 */

svg:not(:root) { overflow: hidden; }


/* =============================================================================
   Figures
   ========================================================================== */

figure { margin: 0; }


/* =============================================================================
   Forms
   ========================================================================== */

form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }

/* Indicate that 'label' will shift focus to the associated form element */
label { cursor: pointer; }

/* 
 * 1. Correct color not inheriting in IE6/7/8/9 
 * 2. Correct alignment displayed oddly in IE6/7 
 */

legend { border: 0; *margin-left: -7px; padding: 0; }

/*
 * 1. Correct font-size not inheriting in all browsers
 * 2. Remove margins in FF3/4 S5 Chrome
 * 3. Define consistent vertical alignment display in all browsers
 */

button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }

/*
 * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
 * 2. Correct inner spacing displayed oddly in IE6/7
 */

button, input { line-height: normal; *overflow: visible; }

/*
 * Reintroduce inner spacing in 'table' to avoid overlap and whitespace issues in IE6/7
 */

table button, table input { *overflow: auto; }

/*
 * 1. Display hand cursor for clickable form elements
 * 2. Allow styling of clickable form elements in iOS
 */

button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }

/*
 * Consistent box sizing and appearance
 */

input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

/* 
 * Remove inner padding and border in FF3/4: h5bp.com/l 
 */

button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

/* 
 * 1. Remove default vertical scrollbar in IE6/7/8/9 
 * 2. Allow only vertical resizing
 */

textarea { overflow: auto; vertical-align: top; resize: vertical; }

/* Colors for form validity */
input:valid, textarea:valid {  }
input:invalid, textarea:invalid { background-color: #f0dddd; }


/* =============================================================================
   Tables
   ========================================================================== */

table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }


/* ==|== primary styles =====================================================
   Author: 
   ========================================================================== */
















/* ==|== non-semantic helper classes ========================================
   Please define your styles before this section.
   ========================================================================== */

/* For image replacement */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }

/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* Contain floats: h5bp.com/q */ 
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }



/* ==|== media queries ======================================================
   PLACEHOLDER Media Queries for Responsive Design.
   These override the primary ('mobile first') styles
   Modify as content requires.
   ========================================================================== */

/* Not used at all at this point, see 30-print.css */
/*
@media only screen and (min-width: 480px) {
  * Style adjustments for viewports 480px and over go here *

}

@media only screen and (min-width: 768px) {
  * Style adjustments for viewports 768px and over go here *

}
*/



/* ==|== print styles =======================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */
 
@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after, a[href^="/"] { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}

/* Anpassungsstyles, die benoetigt werden damit der Text aussieht wie frueher */
#content p { text-align: justify } /* !! */
#content .center { text-align: center; }

#content .small { font-size: 80%; line-height: 130%; }

#content ul { list-style-image: url(/shared/img/fresh.design/arrowbg.menu.png); }

#content img.weisser-rahmen { border: 14px solid white; }

#content .clear-left { clear: left; }

/* Striche werden ab und zu verwendet */
#content hr { display: block; }

a.go:before {
	content: "\bb"; /* unicode » */
	display: inline-block;
	padding-right: 2px;
	text-decoration: none;
	font-weight: bold;
}

/* TODO: Dafuer sorgen dass Pfeile nicht abgeschnitten werden vom Linktext bei Zeilenumbruch! */
/* #content a.go { white-space: nowrap; } */
/* -> 2021 entfernt, scheint nicht wirklich noetig zu sein. */

/* a.go old style */
/*
a.arrow,
a.go {
	background-position: center left;
	background-repeat: no-repeat;
	padding-left: 13px;
}

a.arrow:link,
a.arrow:visited,
a.go:link,
a.go:visited {
	background-image: url(/shared/img/fresh.design/arrowbg.a.png);
}

a.arrow:hover,
a.arrow:active,
a.arrow:focus,
a.go:hover,
a.go:active,
a.go:focus {
	background-image: url(/shared/img/fresh.design/arrowbg-hot.a.png);
}*/

/**
 * t29v6 Grey Style, 08.01.2012
 *
 * Hauptdatei des technikum29.de Version 6-Designs.
 *
 **/

body.design-v2 {
	/* Hintergrund oben horizontal, fuer unten siehe footer css files */
	background: #cbc5bd url("/shared/img-v6/bg-v2.body.png") repeat-x;
}

body.design-bg2016-v2 { /* attention, renamed class */
	/* Testweise erreichbar unter http://bg-test1.design.technikum29.de */
	/* Neuer Hintergrund ab 2016, noch nicht aktiv: */
	background: #d0d8dd url("/shared/img-v6/bg2016-v2.body.png") repeat-x;
}

body.design-2017-06-26 {
	/* Neuer Hintergrund ab 2017-06-26 */
	background: #d0d8dd url("/shared/img-v6/bg2017-06-26.body.svg") repeat-x;
}

.clear { clear: both; }


/* Testweise Futura-Ersatzschrift */ 
/* eingebunden im HTML */
/*@import url(https://fonts.googleapis.com/css?family=Nunito);*/


body, input { /* font */
	font-family: "Tahoma", "Trebuchet MS", 'Nunito', Verdana, Helvetica, Arial, sans-serif;
}
    /* rausgenommen */
::-moz-selection{background:#07a;color:#fff;text-shadow:none}
::selection{background:#07a;color:#fff;text-shadow:none}


nav.horizontal a, nav.side .u1 > li > a {
	/*font-family: "Futura Std Book", "Trebuchet MS";*/
	font-family: "Tahoma", Nunito, , Verdana, Helvetica, Arial, sans-serif;
}

#container {
	width: 1200px;
	margin: 16px auto;
	background-color: #F7F7F7; /* Hintergrundfarbe des Textes ("Blatt") */
	position: relative;
	padding-top: 104px;
	overflow: hidden; /* #background-color-container */
	box-shadow: 1px 1px 2px 1px rgba(0,0,0,.5);
}

/* Generelle Grundlagen */
h1, h2 { margin: 0; padding: 0; }
html.js .no-js, html.no-js .js, hr { display: none; }
nav li { display: inline; }
nav a { display: block; text-decoration: none; }
nav a:focus { outline: none; }

/* Content */
#content {
	padding: 60px 40px 60px; /* 25.12.2013: Oben mehr Platz */
	width: 860px;
	float: left;
	color: black;
}

/* Hintergrund nach ganz unten durchschleifen */
#background-color-container {
	background-color: #dfeaf0;
	float: left;
	width: 100%;
	position: relative;
	left: 940px;
}

section.sidebar, #content {
	position: relative;
	left: -940px;
}

/**
 * t29v6 Design header.css
 * $Id$
 * In dieser Datei:
 *
 *   header.banner = Hauptnavigation (beinhaltet nav.horizontal, nav.top)
 *   h1 = Banner (Bild, ganz oben)
 *   nav.horizontal = Horizontal-Hauptnavigation (mit Aufklapp)
 *   nav.top = Metanavigation (Sprachwahl, Suche)
 *
 **/

/* Header */
header.banner {
	position: absolute;
	top: 0; left: 0; /*z-index: 1;*//* aus wegen nav.horizontal klappmenue*/
	height: 107px; width: 100%;
	text-align: right;
	
	/*border-bottom: 1px solid #5d5c58;*/
	background: url("/shared/img-v6/line.header-footer.png") bottom left repeat-x;
}

h1 { display: inline; }
h1 a {
	position: absolute;
	top: 10px; left: 10px; z-index: 2;
	text-indent: -9999px;
	width: 310px; height: 84px;
}

body.lang-de h1 a { background-image: url("/shared/img-v6/banner.de.svg"); }
body.lang-en h1 a { background-image: url("/shared/img-v6/banner.en.svg"); }

/* Horizontal Navigation (Hauptnavigation) */
nav.horizontal {
	position: absolute;
	right: 0; bottom: 0;
	/*margin: 1em;*/ margin-right: 2em;
}

nav.horizontal .u1 > li {
	display: inline-block;
	/*margin-left: 1em;*/
	position: relative;
}

nav.horizontal .u1 > li > a {
	padding: 7px;
	margin-bottom: 3px;
}

nav.horizontal .u1 > li.has-submenu > a {
	padding-bottom: 10px;
	margin-bottom: 0;
}

nav.horizontal .u1 > li:hover > a {
	background-color: white;
}

nav.horizontal .u1 > li.active > a,
nav.horizontal .u2 > li.active > a {
	/*color: #6F2A41; *//* gedecktes bordot */
	color: #E90015; /* knalliges Rot von rechter Navi */
}

nav.horizontal a {
	/*font: 15px "Futura Std Book";*/
	font-size: 17px;
	/*font-weight: bold;*/
	/*text-transform: uppercase;*/
	/*color: #124b6b;*/
}

nav.horizontal a.hidden-in-nav {
	/* Items which shall not be visible in the header navigation display */
	display: none;
}

/* Aufklappnavigation der Horizontalen Navi */
nav.horizontal .u2 { display: none; } 
nav.horizontal .u1 > li:hover .u2, nav.horizontal .u1 li.dev-force-open .u2 {
	display: block;
}

/* devel: Menu statisch anzeigen */
/*nav.horizontal li.current.active .u2 { display: block; }*/


nav.horizontal .u2 {
	position: absolute;
	z-index: 100; /* Ueber allem */
	left: 0; /* top: 0; */
	text-align: left;
	width: 23em;
	background-color: white;
	border-bottom: 3px solid #888;
}

nav.horizontal li.open-to-left .u2 {
	left: inherit;
	right: 0;
}

nav.horizontal .u2 a {
	padding: .2em .9em;
}

nav.horizontal .u2 a:hover {
	background-color: #efefef;
}

nav.horizontal .u2 > li.has-submenu {
	display: block;
	margin: 1em 0;
}

nav.horizontal .u3 > li > a {
	padding-left: 1.9em;
	font-weight: normal;
}

nav.horizontal ul.rich-text a {
	padding-top: .7em; padding-bottom: .7em;
}

nav.horizontal ul.rich-text a:after {
	content: ".";
	display: block;
	clear: left;
	height: 0; line-height: 0;
	visibility: hidden;
}

nav.horizontal ul.rich-text img {
	float: left;
	margin-right: 10px;
	/*display: none;*/ /* ausblenden */ /* warum ausblenden? */
}

nav.horizontal ul.rich-text a:hover img {
	box-shadow: 0px 0px 4px #1a5160;
	/*outline: 1px solid #1a5160;*/
}

nav.horizontal ul.rich-text a em {
	display: block;
	color: black;
	text-transform: none;
	font-weight: normal;
	font-style: normal;
	font-size: 13px; /* like body */
}

nav.horizontal li.small-screen-only {
	display: none;
}

/* Farben */
nav.horizontal a, nav.top li.active a, nav.side a {
	color: #1a5160;
	/*font-weight: bold;*/
	opacity: .8;
}

/* Topnavigation (Nebenheadernavigation) */
nav.top {
	position: absolute;
	right: 0; top: 0;
	margin: 1em; margin-right: 2em;
}

nav.top, nav.top input, nav.top a {
	/*font: 15px "Futura Std Medium";*/
	font-size: 17px;
	/*text-transform: uppercase;*/
	color: #757575;
	/*font-weight: bold;*/
}

nav.top form, nav.top ul {
	display: inline-block;
	position: relative;
}

nav.top form {
	/* Suche, solange sie noch nicht fertig ist, ausblenden. */
	/*display: none;*/ /* Online gegangen im Maerz 2013 */
}

nav.top input.text, nav.top input.text.defaultvalue {
	border: 1px solid transparent; background: transparent;
	/*width: 4em; text-align: right;
	padding-right: 22px;*/
	border: 2px solid #d8d8d8;
	width: 10em; padding-left: .3em;
}
nav.top input.text:focus, nav.top input.text.no-defaultvalue {
/*	text-align: left; width: 8em;
	border: 1px solid #bababa;*/
	background-color: white;
	text-transform: none;
	color: #000;
}
nav.top input.button {
	display: block;
	text-indent: -999px; border: none;
	background: url("/shared/img-v6/lupe.png") no-repeat;
	width: 13px; height: 13px;
	position: absolute; right: 0px; top: 4px;
	
	display: none;
}

nav.top a {
	display: inline-block;
	margin-right: 1em;
}
nav.top li.active a {
	/* Aktuell ausgewaehlte Farben */
	/*color: #124b6b;*/
	border-bottom: 2px solid #E90015; /* war gedeckte Farbe #6F2A41 */
}


/**
 * t29v6 Design sidebar.css
 * $Id$
 * In dieser Datei:
 *
 *   section.sidebar = Sidebar-Bereiche (.top, .botom)
 *   nav.side = Inhaltsnavigation (Tour),
 *              JavaScript-Menue (static, fixed, stick-*, ...),
 *              Sidebar-Buttons
 *
 **/

/* Rechtsnavi */
section.sidebar {
	width: 210px;
	padding: 25px; padding-top: 35px;
	/*background-color: #dfeaf0;*/  /* Die uebernimmt der Container*/
	float: left;
}

/* Navigationsleiste */
nav.side .guide-only { display: none; } /* Nur in nav.guide anzeigen */

nav.side .u1 > li > a {
	/*font: 18px "Futura Std Book";*/
	font-size: 23px; /* font-weight: bold; */
	/*text-transform: uppercase; */
	/*color: #124b6b;*/
	margin: 0 -25px;
	padding: 5px 25px;
}

/* 25.12.2013: Kapitel durch Linien abtrennen */
nav.side .u1 > li > a {
	padding-top: 19px;
	border-top: 2px solid /*#A07F60;*/ rgba(173,148,125,.8);
}
nav.side .u1 > li.first > a {
	border-top: none; /* Nicht ueber erstem Eintrag (Computer History) */ 
}

nav.side .u2 {
	margin: 0 0 20px 0;
}

nav.side .u2 > li > a {
	/*text-transform: uppercase; */
	font-size: 17px;
	margin: 0 -25px;
	padding: 5px 25px;
}

nav.side .u2 > li.active > a {
	color: #E90015; /* hellblau:  #40a8e2; */
	/*font-weight: bold;*/
}

nav.side .u3 {
	margin-left: 12px;
	margin-bottom: 12px;
}

nav.side .u3 { display: none; }
nav.side .u2 > li.active .u3 { display: block; }

nav.side .u3 > li > a {
	font-size: 14px;
	margin: 0 -25px 0 -40px;
	padding: 1px 25px 1px 40px;
	opacity: .9;
	/*text-transform: uppercase;*/
}

nav.side .u3 > li.active > a,
nav.side .u4 > li.active > a {
	color: #e90015;
	/*font-weight: bold;*/
}

/* 4. Ebene, wird derzeit nicht aktiv verwendet (nur fuer .u4.geraete) */
nav.side .u4 {
	margin-left: 8px;
	margin-bottom: 8px;
}

nav.side .u4 > li > a {
	font-size: 12px;
	margin: 0 -32px 0 -48px;
	padding: 1px 32px 1px 48px;
}

/* nav.side .geraete-Listen */
nav.side .geraete a {
	text-transform: none !important;
	opacity: .5 !important;
}

nav a:hover, nav ul.rich-text li:hover a, nav a:focus, nav ul.rich-text li:focus a {
	color: #A12A40;
	background-color: white;
}

/* Nav-Hover-Transistions */
nav a, nav a:link, nav a:visited, nav a:hover, nav a:focus {
	/*-webkit-transition: color,background-color .18s cubic-bezier(0.420, 0.000, 0.580, 1.000);
	-moz-transition: color,background-color .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);
	-ms-transition: color,background-color .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);
	-o-transition: color,background-color .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);
	transition: color,background-color .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);
	*/
}


/* Scroll-Zust�nde der Navigationsleiste
 * Siehe Script, es gibt:
 *   html.no-js             - Ausgangslage ohne Javascript
 *   html.mini-menu         - Anzeige nur der aktiven Komponenten
 *   html.static-menu       - Default mit Javascript
 *   html.fixed-menu        - Umgeschaltet auf fix
 *   html.stick-top-menu    - Zwischensituation wenn fix und ganz hochgescrollt (wie static-menu)
 *   html.stick-bottom-menu - Zwischensituation wenn fix und ganz runtergescrollt (absolut positioniert)
 */
html.static-menu nav.side, html.stick-top-menu nav.side {
	/* Ein/Ausblendeffekt fuer .get-menu-Button erzeugen  */
	/* http://www.colorzilla.com/gradient-editor */
	background: -moz-linear-gradient(top,  rgba(223,234,240,1) 0%, rgba(223,234,240,1) 82%, rgba(223,234,240,0) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(223,234,240,1)), color-stop(82%,rgba(223,234,240,1)), color-stop(100%,rgba(223,234,240,0))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(223,234,240,1) 0%,rgba(223,234,240,1) 82%,rgba(223,234,240,0) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(223,234,240,1) 0%,rgba(223,234,240,1) 82%,rgba(223,234,240,0) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(223,234,240,1) 0%,rgba(223,234,240,1) 82%,rgba(223,234,240,0) 100%); /* IE10+ */
	background: linear-gradient(top,  rgba(223,234,240,1) 0%,rgba(223,234,240,1) 82%,rgba(223,234,240,0) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dfeaf0', endColorstr='#00dfeaf0',GradientType=0 ); /* IE6-9 */

	padding-bottom: 200%; /* sic! die 82% aus dem gradient muessen unterhalb der Navi anfangen*/
	position: relative; z-index: 10;
}

html.fixed-menu nav.side {
	position: fixed;
	width: 210px;
	top: 15px;
}

html.stick-bottom-menu nav.side {
	position: absolute;
	width: 210px;
	/* Top-Wert durch JS gesetzt. */
}

html.mini-menu nav.side li { display: none; }
html.mini-menu nav.side li.active,
html.mini-menu nav.side li.active > ul.u3 > li,
html.mini-menu nav.side li.active > ul.u4 > li {
	display: inline;
}


/* Buttons in Navigationsleiste */
section.sidebar .button {
	display: block;
	cursor: pointer;

	/*font: 14px "Myriad Pro Light";*/
	font-size: 17px; /*  25.12.2013: .button.collapsed-menu in Navigation drinnnen */
	/*text-transform: uppercase; */
	color: #a07f60;
	/*font-weight: bold;*/
}

section.sidebar .button:hover {
	background-color: white;
}

section.sidebar .button.get-menu {
	/* Men�-runterhol-Button */
	position: fixed; z-index: 1;
	bottom: 0; margin: 0 -25px;
	padding: 15px 25px;
	text-align: center; width: 210px;
}

section.sidebar .button.collapse-menu {
	/* Ein/Ausklapp-Button */
	/* Seit 25.12.2013 direkt zwischen den Navigationselemten, jeweils
       nach li.collapsible-button-after. */
	/*margin: 3em -25px 0 -25px;
	padding: 5px 25px;*/
	padding: 5px 25px;
	margin: 0 -25px;
	margin-top:  -10px;
	margin-bottom: 20px;
}

html.fixed-menu nav.side .button.collapse-menu,
html.stick-bottom-menu nav.side .button.collapse-menu {
	display: none;
}


section.sidebar .button.for-geraete {
	/* Geraete content collapse button */
	position: relative;
	top: -27px; right: -140px;
	width: 70px; margin-top: 0;
}

body.collapsed-menu-u3 section.sidebar .button.for-geraete { display: none; }

/* Untere Sidebar */
section.sidebar.bottom {
	position: absolute;
	bottom: 0; left: 0;
}

section.sidebar.bottom .button.get-menu {
	position: static;
	margin-bottom: -25px;
}

html.button-stick-bottom section.sidebar.top .button.get-menu {
	display: none;
}

/**
 * t29v6 Design footer.css
 * $Id$
 * In dieser Datei:
 *
 *   footer = Container fuer alles im unteren Bereich (nav.guide, nav.rel, div.right)
 *   nav.guide = Beam-Navigation
 *   nav.rel = Relationale Navigation
 *   footer .right = Copyright-Bereich
 *
 **/

/* Footer innerhalb des Blattes, mit Navigationselementen */
footer.in-sheet {
	clear: both; padding-top: 1px; /* um margin innerer elemente an der oberkante beginnen zu lassen */
	height: 104px; width: 100%;
	/* temp. um Navi-Kram zu uebermalen: */
	position: relative; z-index: 20;
	
	/*border-top: 1px solid #5d5c58;*/
	background: transparent url("/shared/img-v6/line.header-footer.png") top left repeat-x;
	/* bgcolor was #f1f1f1  - transparent gesetzt um nur an einer stelle die farbe austauschen zu muessen */
	
	/* "Hacky" bugfix, um "Menue einblenden"-Button zu uebertuenchen: Doch farbe setzen */
	background-color: #f7f7f7;
}

/* "Beam Navigation" nav.guide */
nav.guide {
	position: absolute;
	z-index: 5; /* ueber nav.rel */
	top: -5px; left: -5px; /* damit bullets rausschauen */
	width: 870px; margin: 0 40px; /* wie #content, in breite ein paar px mehr wegen ueberstehenden bullets */
	/* width:900px, aber 10px Toleranz damit der Beam nicht umbricht wenn
       eine ungerade Anzahl an Items vorhanden ist (1px Toleranz wuerde schon reichen) */
}
nav.guide ul, nav.guide li { display: inline; }
nav.guide a {
	float: left;
	position: relative;
}

nav.guide a:hover, nav.guide a:focus {
	background-color: inherit; /* Overwrite nav a:hover bg white */
}

nav.guide .text {
	display: block;
	/*font: 12px "Futura Std Book";*/
	font-size: 12px; font-weight: bold;
	text-transform: uppercase;
	color: #5d5c58;
	position: absolute;
	top: -19px; left: 0;
	white-space: nowrap;
}

nav.guide a.higher-text .text {
	/* Labeltexte, die die default dargestellten Texte (.visible)
	   beim Hovern ueberpinseln und daher hoeher dargestellt werden */
	top: -34px;
}

nav.guide .bullet {
	width: 0; height: 0;
	border: 2px solid #5d5c58;
	padding: 4px;
	margin: 1px;
	display: inline-block;
	border-radius: 6px;
	position: relative;
}

nav.guide .visible > a > .bullet {
	border-width: 6px;
	padding: 0;
}


nav.guide a { opacity: 0; }
nav.guide li.visible > a,
nav.guide a:hover, nav.guide a:focus { opacity: 1; }

/*
nav.guide .bullet, nav.guide .text { visibility: hidden; }
nav.guide li.visible > a > .bullet,
nav.guide .visible > a > .text,
nav.guide a:hover .bullet, nav.guide a:hover .text,
nav.guide a:focus .bullet, nav.guide a:focus .text {
	visibility:visible;
}
*/


/*
html.csstransitions nav.guide .bullet, html.csstransitions nav.guide .text {
	visibility: visible; opacity: 0;
	-webkit-transition: opacity .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);
	-moz-transition: opacity .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);
	-ms-transition: opacity .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);
	-o-transition: opacity .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);
	transition: opacity .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);
}
html.csstransitions nav.guide li.visible > a > .bullet, html.csstransitions nav.guide .visible > a >  .text,
html.csstransitions nav.guide a:hover .bullet, html.csstransitions nav.guide a:hover  .text,
html.csstransitions nav.guide a:focus .bullet, html.csstransitions nav.guide a:focus .text {
	opacity: 1;
	-webkit-transition: opacity .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);
	-moz-transition: opacity .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);
	-ms-transition: opacity .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);
	-o-transition: opacity .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);
	transition: opacity .25s cubic-bezier(0.420, 0.000, 0.580, 1.000);
}
*/

nav.guide a:hover .bullet, nav.guide a:focus .bullet {

}

/* Guide-Nav Juni 2014 revisited: Mittlerweile hat sich so viel geaendert, dass 
 * ein paar Anpassungen/Ausblendungen noetig sind. Moeglicherweise ist das hier nicht
 * ganz sauber sondern sollte im CSS gemacht werden:
 */
nav.guide li.button-box {
	display: none;
}

/*nav.guide .current > a > .text { color: #40a8e2; }*/

/* Relationale Navigation */
nav.rel {
	position: relative;
	margin: 26px 70px 0;
	width: 800px;
}

nav.rel.empty {
	/* Do not take space - bigfooter will take it  */
	display: none;
}

nav.rel li {
	position: absolute;
	top: 0;
}

nav.rel li.prev { left: 0; }
nav.rel li.next { right: 0; }

nav.rel a {
	/*font: 12px "Futura Std Medium";*/
	text-transform: uppercase;
	display: inline-block;
	padding: 10px;
	line-height: 17px;
	font-size: 14px;
	color: rgba(65,111,124,.85); /*#416f7c;*/
	/*background-color: #dfe9f0;*/
	
	font-weight: bold;
	
	position: relative;
	/*height: 40px; *//* wegen arrow: height+2*padding=arrowheight */
	
	/* Zweizeilig bei langen Linktexten, etwa programmierbare */
	max-width: 27em;
}

nav.rel strong {
	display: block;
	font-weight: normal;
	/*opacity: .7;*/
}

nav.rel li.prev a { text-align: right; padding-right: 16px; }
nav.rel li.next a { text-align: left;  padding-left: 16px; }

nav.rel a:after {
	content: ""; width: 0;
	display: block;
	position: absolute;
	top: 0;
	border-top: 27px solid transparent;
	border-bottom: 27px solid transparent;
	border-left: 24px solid #307588;
	border-right: 24px solid #307588;
	opacity: .4;
}

nav.rel a:focus:after, nav.rel a:active:after {
/*	border-left-color: #40a8e2;
	border-right-color: #40a8e2;*/
}

nav.rel .next a:after {
	right: -24px;
	border-right: none;
}

nav.rel .prev a:after {
	left: -24px;
	border-left: none;
}
/*
nav.rel a:hover {
	background-color: #dfe9f0;
}

nav.rel a:active, nav.rel a:focus {
	background-color: #40a8e2;
	color: white;
}
*/

nav.rel a:hover {
	background-color: transparent;
}

nav.rel a:hover:after {
	opacity: 1;
	border-left-color: #A12A40;
	border-right-color: #A12A40;
}



/* Footer Icon-Sammlung und so */
/*
footer .right {
	position: absolute;
	top: 2px;
	right: 0;
	width: 230px;
	padding: 15px;
	text-align: right;
}

footer .right img.logo {
	float: right;
	width:30px;
	padding-left: 10px;
	padding-right: 11px;
}

footer .right div.icons {
	clear: left;
	padding-top: 8px;
}

footer .right .icons a { opacity: .5; }
footer .right .icons a:hover, footer .right .icons a:focus { opacity: 1; }
*/

/* Post-Footer */
footer.attached {
	margin-top: -122px;
	padding: 130px 0 30px;
	
	color: white;
	font-size: 14px;
}

body.design-v2 {
	/* old */
	/* @embed */ background: #307588 url("/shared/img-v6/bg-v2.body-footer.png") top left repeat-x;
}

body.design-2017-06-26 footer.attached {
	/* @embed */ background: #7c949c url("/shared/img-v6/bg2017-06-26.body-footer.svg") top left repeat-x;
	color: white;
}

footer.attached div.legacy {
	/* Text von alter Homepage (eine Zeile), �bergangsweise */
	text-align: center;
	font-size: 15px;
}

footer.attached div.bigfooter {
	max-width: 1200px;
	margin: 0 auto;
}

footer.attached div.bigfooter ul {
	padding-left: 40px;
}

footer.in-sheet div.bigfooter {
	padding-left: 30px;
	padding-top: 15px; /* sheet: 40px padding */
}

div.bigfooter {
	/* body ist 13, #content 15 */
	font-size: 14px;
}

/* Bigfooter, der wahlweise nach footer.attached oder footer.in-sheet kommt */

footer div.bigfooter ul {
	/*width: 1170px;*/
	/*margin: 10px auto 20px;*/
	/* padding: 0 20px; *//* ueberfluessig, Breite allein reguliert schon */
}

footer div.bigfooter li {
	width: 390px;
	margin-right: 10px;
	float: left;
}

footer div.bigfooter .block,
footer div.bigfooter .block:link,
footer div.bigfooter .block:visited {
	display: block;
	padding: 10px;
	
	/* optionaler Effekt: Beim Hovern nicht ueber "ganze Breite" gehen */
	display: inline-block;

	text-decoration: none;
	color: inherit;
}

/* Versuch, zu schauen ob die Teile sich mit Hintergrundfarbe abheben lassen.
   Sieht kastig aus.  */
/*
body.design-2017-06-26 footer div.bigfooter .block,
body.design-2017-06-26 footer div.bigfooter .block:link,
body.design-2017-06-26 footer div.bigfooter .block:visited {
	background-color: #53676f;
}
*/

footer.attached div.bigfooter .block:hover {
	background-color: rgba(255,255,255,.1);
	/* ganz subtiler Schatten */
	box-shadow: 0 3px 10px rgba(255, 255, 255, 0.05);
}

footer.in-sheet div.bigfooter .block,
footer.in-sheet div.bigfooter .block:link,
footer.in-sheet div.bigfooter .block:visited {
	opacity: .6;
}

footer.in-sheet div.bigfooter .block:hover {
	opacity: .9;
	background-color: white;
}

footer.attached div.bigfooter a u,
footer.attached div.bigfooter a.u:link,
footer.attached div.bigfooter a.u:visited,
footer.attached div.bigfooter a.block:link u,
footer.attached div.bigfooter a.block:visited u {
	color: #BAF1FF;
}

footer.in-sheet div.bigfooter a u,
footer.in-sheet div.bigfooter a.u:link,
footer.in-sheet div.bigfooter a.u:visited,
footer.in-sheet div.bigfooter a.block:link u,
footer.in-sheet div.bigfooter a.block:visited u {
	color: #205B6B;
}

footer.attached div.bigfooter a.u:hover,
footer.attached div.bigfooter a.u:hover,
footer.attached div.bigfooter a.block:hover u,
footer.attached div.bigfooter a.block:focus u {
	color: #3DD8FF;
}

footer.in-sheet div.bigfooter a.u:hover,
footer.in-sheet div.bigfooter a.u:focus,
footer.in-sheet div.bigfooter a.block:hover u,
footer.in-sheet div.bigfooter a.block:focus u {
	color: #882224;
}

/* By means of javascript, the in-sheet footer is cloned to the original position
   for the mobile viewports. Disable the this clone view generally
   (this is reversed again in mobile.css). */
footer.attached.for-mobile {
	display: none;
}

footer div.bigfooter i {
	display: block;
	float: left;
	text-indent: -9999px;
}

footer div.bigfooter img {
	/* Nur uebergangsweise fuer das "Haus", der Faulheit wegen */
	float: left;
}

footer div.bigfooter span.p {
	display: block;
	margin-left: 80px;
	margin-top: 0px;
	line-height: 115%;
}

footer div.bigfooter li {
	width: 240px;
	margin-bottom: 10px; /* Fuer den In-Sheet-Abstand nach unten */
}

footer div.bigfooter li.haus {
	width: 510px;
}

footer div.bigfooter li.haus span.p {
	margin-left: 225px;
}

footer.in-sheet div.bigfooter li.haus img {
	opacity: .3;
}


footer div.bigfooter li.logo i {
	/* @embed */ background-image: url("/shared/img-v6/logo.footer.png");
	width: 36px; height: 46px;
}
footer.in-sheet div.bigfooter li.logo i {
	/* @embed */ background-image: url("/shared/img-v6/logo-dark.footer.png");
}

footer div.bigfooter li.logo span.p {
	margin-left: 47px;
	margin-top: 7px;
}

footer div.bigfooter li.copy {
	width: 370px;
}

footer div.bigfooter li.copy i {
	/* @embed */ background-image: url("/shared/img-v6/cc-icon2.png");
	width: 100px; height: 42px;
	opacity: .4; /* Todo: Unauffaelligeres Logo finden */
}
footer div.bigfooter li.copy span.p {
	margin-left: 110px;
	margin-top: 5px;
}

/* Creative Commons icon with pure CSS, on dark background */
footer i.cc {
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 100% 100% 100% 100%;
    display: inline-block;
    font-family: arial;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 18px;
    padding: 2px;
    text-align: center;
    width: 18px;
}


/*
  This goes along with js-v6/modules/admin-buttons.js
  Introduced in March 2016 
*/

section#admin-buttons {
    background: #f7f7f6 none repeat scroll 0 0;
    border-top: 2px inset #656565;
    color: #6c6c6c;
    padding: 1em;
    text-align: center;
    margin-top: 5em;
}



/**
 * t29v6 Design content.css
 * $Id$
 * In dieser Datei:
 *
 *   #content = Inhaltsbereich
 *              h2, h3, h4 Ueberschriften
 *              Blockdesign, etc.
 *
 *   .messages = Logging, zentralisiert (siehe logging.php, template.php und log.js)
 **/

#content {
	font-family: "Tahoma", "Trebuchet MS", Verdana, "DejaVu Sans", "Bitstream Vera Sans", Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 130%;
	text-align: justify;
}

h2 {
    font-weight: bold;
    font-size: 160%;
    line-height: 125%; /* wird sonst relativ zu falscher schriftgroesse vererbt */
    margin: 0 0 0.7em 0;
    padding: 0;
}

#content h2, #content h3, #content h4 {
    /* Seit 04.01.2010: Neues Ueberschriftenlayout. Soll aber nur
       auf Homepage genutzt werden, nicht etwa auf dev. oder so...! */
    font-weight: normal;
    font-family: "Tahoma", "Trebuchet MS", , Verdana, "DejaVu Sans", "Bitstream Vera Sans", Helvetica, Arial, sans-serif;
    font-size: 180%;
    border-bottom: 3px double #aaa;
    text-align: left; /* irgendwie meinen browser sonst `justify` */
}

/* Seit 18.02.2014: "Quirks", Heribert will Linien haben, die aussehen
   wie Ueberschriften, um eine Art Rahmung zu erhalten. */
#content hr.h3-like {
	border: none;
	border-bottom: 3px double #aaa;
}

#content h3 {
    /* Und das gleiche auch fuer Unter-Ueberschriften */
    font-size: 140%;
	margin: 1em 0 0.3em;
	padding-top: 1em; /* Padding damit Direktlink zu h3 nach oben Luft hat */
}

#content h4 {
	font-weight: bold;
	font-size: 100%;
	border-bottom: 1px solid #aaa;
	margin: 2.3em 0 1em;
}

#content h5 {
	font-weight: bold;
	font-size: 100%;
	border: none;
	margin: 0;
}

#content a:link, #content a:visited {
	color: #205b6b;
	text-decoration: underline;
}

#content a:hover, #content a:focus {
	color: #882224;
}

/**
 *  Logging
 **/

.messages.panel.empty {
	/* Hide empty message boxes */
	display: none;
}

.messages.panel {
	margin-bottom: 20px;
	/* Sometimes there is stuff with margin-top: -...; at the top.
	   Make sure we overlay. (Example: Robotik, english translation) */
	position: relative;
	z-index: 100;
}

.messages.panel > li {
	margin-bottom: 5px;
	background-color: #FCF8E3;
	border: 1px solid #FBEED5;
	border-radius: 4px 4px 4px 4px;
	margin-bottom: 20px;
	padding: 8px 35px 8px 14px;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

.messages.panel p { margin: 2px 0; }
.messages.panel button.close {
	float: right;
}

.messages.panel .panel-hide { display: none; }

.messages.panel h2, #content .messages.panel h2 {
	font-size: 120%;
	font-weight: bold;
	font-family: inherit;
	border: none;
	border-bottom: 1px solid #aaa;
	margin: 0;
	margin-bottom: 5px;
}

.messages.footer {
	/* sollte eigentlich gar nicht dargestellt werden, sondern von log.js
	   in den .messages.panel-Bereich verschoben werden. */
	opacity: .8;
}

/**
 * CSS-basierte Icons und Pikotgramme, die auf der Website Verwendung finden
 **/

/**
 * Date Icon, Mai 2013 vor allem fuer Startseite, Termine
 * 
 * Usage:
 *   <p class="date"><em>2013</em> 15. Mai</p>
 * 
 * Nutze <p class="date rot"> fuer rotes Emblem.
 *
 **/

p.date {
	margin: 0; padding: 0;
	background: url(/shared/img-v6/date.sprite.png);
	background-repeat: no-repeat;
	height: 45px;
	text-align: center !important; /* Yes this is bad praxise, but it must be centered under all conditions. */
	width: 32px;
	padding-left: 5px; padding-right: 5px;
	font: 11px/11px "Helvetica Neue",Helvetica,Arial,Verdana,Geneva,sans-serif;
	color: #333333;
	text-transform: uppercase;
	font-weight: bold;
}

p.date.rot {
	background-position: 0 -49px;
}

p.date em {
	/* Jahr/Text im gruenen bzw. roten Bereich oben */
	color: white;
	font-style: normal;
	display: block;
	line-height: 15px;
	margin-bottom: 3px;
}

p.date.left {
	float: left;
	margin-right: 10px;
}

/*
   Allgemeine Hinweisboxen, zB. fuer das /lib/simplepassword.php-Sytem
   genutzt. Den pagestyles/termine.css abgeschaut. Von der HTML-Struktur
   den bootstrap div.panel's abgeschaut.
   -- Sven, 2017-01-17
 */

#content div.panel {
	border: .5em solid #edf0f2;
	margin: 2em 0;
}

#content div.panel div.panel-heading {
	background-color: #edf0f2;
}

#content div.panel div.panel-heading {
	padding: .2em 1em;
}

#content div.panel div.panel-body {
	padding: 1em;
}

#content div.alert h4 {
    font-weight: bold;
    font-size: 113%;
    font-family: inherit;
    border: none;
    color: #1A5160;    
    margin-top: 0;
}

#content div.alert-success,
#content div.alert-success h4 {
	color: #3c763d;
	background-color: #dff0d8;
/*	border: #d6e9c6;*/
}


form.inline {
    display: inline;
}

/* Language negotiation based on JS */
body.lang-de .only-en,
body.lang-en .only-de {
	display: none;
}

/**********************************************************************\
|       _         _         _                                          |
|      /\ \     /\ \      / /\          technikum29.de  Common Styles  |
|      \_\ \   /  \ \    / /  \         Version 5.8                    |
|      /\__ \ / /\ \ \  / / /\ \                                       |
|     / /_ \ \\/_/\ \ \/_/ /\ \ \       Diese CSS-Datei implementiert  |
|    / / /\ \ \   / / /\ \ \_\ \ \      das Konzept, alle "Spezial-    |
|   / / /  \/_/  / / /  \ \/__\ \ \     styles" von alen Seiten an     |
|  / / /        / / /  _ \_____\ \ \    einer Stelle zu sammeln. Das   |
| / / /        / / /_/\_\       \ \ \   erh�ht die Ladezeit der Seiten |
|/_/ /        / /_____/ /        \ \ \  nur minimal, vermindert den    |
|\_\/         \________/          \_\/  Wartungsaufwand aber enorm.    |
|                                       Dieses Konzept wurde seit      |
| Version 5.7 erfolgreich angewandt. Mittlerweile sind alle anderen    |
| Zusatz-Stylesheets hier migriert, und zwar extra.css, details.css    |
| sowie print.css.                                                     |
|                                                                      |
| $Id::                                                              $ |
|                                                                      |
+----------------------------------------------------------------------+
|                                                                      |
| Changelog seit v5.7:                                                 |
|                                                                      |
|   v5.7FINAL: eingef�hrt                                              |
|   v5.7.11:   Univac-Spezialstyle neu                                 |
|   v5.7.14:   .desc-right zur�ck ins Leben gerufen                    |
|   v5.7.15:   .bordered zum allgemeineren Rahmenelement               |
|   v5.8.0:    Erheblich aufger�umt, details.css migriert, umgestellt. |
|              Zu jedem Spezialstyle gibt es jetzt einen Pflicht-      |
|              kasten, der ausgef�llt werden soll, der �bersicht       |
|              halber.                                                 |
|                                                                      |
\**********************************************************************/












/* EOF */

/**
 * t29v6 Design static-coles.css
 * $Id$
 * In dieser Datei:
 *
 *   #content .cols = Statische Zweispaltigkeit (wird vllt noch durch
 *                    ein Column Framework ersetzt)
 *
 **/


/**********************************************************************\
| SPEZIAL STYLE                                                        |
+----------------------------------------------------------------------+
| F�r:                 Fax- und Schreibtechnik, Startseite,            |
|                      DEC-Geschichte                                  |
|                         /de/kommunikationstechnik/faxtechnik.shtm    |
|                         /de/index.shtml                              |
|                         /de/geraete/dec-geschichte.shtm              |
|                         /en/devices/dec-history.shtm                 |
| In Benutzung seit:   Prinzipiell seit Ewigkeiten (v5.0?)             |
|                      Startseite nutzt Stil mit seit v5.7             |
| Besonderheiten:      Mehrspaltiger Inhalt (Originalzitat), nach      |
|                      dem simplen Schema:                             |
|                                                                      |
|   <div class="cols">                                                 |
|       <div class="leftcol">linke spalte</div>                        |
|       <div class="rightcol">rechte spalte</div>                      |
|   </div>                                                             |
|                                                                      |
| Zuletzt ge�ndert:    zur v5.7 vielleicht                             |
|                                                                      |
\**********************************************************************/

#content .cols {
    /* Mehrspaltiger Inhalt. */
}

#content .cols .leftcol, #content .cols .rightcol {
    padding: 5px 7px;
/*  border: 3px dashed red;*/
}

#content .cols .leftcol {
    float: left; width: 47%;
}

#content .cols .rightcol {
    float: right; width: 47%;
}

#content blockquote, .content blockquote {
    /* bis jetzt nur genutzt in <faxtechnik> */
    /* Und <blockquote> auf einer WANG-Extraseite, Bedienungsanleitung */
    margin: 5px 0px;
    padding: 0px;
    color: #2F319D;
    text-align: justify;
}
/**
 * t29v6 Design v5blocks.css
 * $Id$
 * In dieser Datei:
 *
 *   #content table, #content dl = 
 *              Legacy-Blockelemente-Layout von v5 und vorher.
 *
 **/


/**********************************************************************\
| CENTRAL COMMON STYLES: TABLE LAYOUT FROM details.css                 |
+----------------------------------------------------------------------+
| Hier ist das Tabellenlayout der ehemaligen details.css. Es wird      |
| (basism��ig) mittlerweile auch auf anderen Seiten genutzt, unter     |
| anderem die Univac9400-Kosten-Seite (seit v5.8).                     |
|                                                                      |
| Begrenzt auf #content, damit andere Seiten in dev.t29.de oder        |
| �hnlichem verschont bleiben.                                         |
|                                                                      |
| Das CSS ist uralt (stammt wohl noch von v5.0 und vorher) und wurde   |
| seit dem nie ver�ndert (wie die Details-Seiten ;-) )                 |
|                                                                      |
\**********************************************************************/


#content table.t29-details td,
#content table.t29-details,
#content table.t29-details tr {
    font: 12px Verdana;
}

#content table.t29-details {
    border-spacing: 1px;
    border-collapse: separate;
}

#content table.t29-details p {
    text-align: justify;
    line-height: 120%;
}

#content table.t29-details p.center {
    margin: 5px 0px;
    text-align: center;
}

#content table.t29-details td b {
    display: block;
}

#content table.t29-details td.b, #content table.t29-details td.b a {
    font-weight: bold;
}

#content table.t29-details {
    background-color: #7090C0;
}

#content table.t29-details td {
    padding: 2px;
    vertical-align: middle;
    text-align: center;
    background-color: #F7FDFF;
}

#content table.t29-details td.left { text-align: left; }

#content table.t29-details th {
    padding: 2px;
    text-align: center;
    background-color: #BED0E5;
}

#content table.t29-details .bemerkungen {
    vertical-align: middle;
    text-align: justify;
}


/**********************************************************************\
| SPEZIAL STYLE                                                        |
+----------------------------------------------------------------------+
| F�r:                 DEC-Geschichte                                  |
|                         /de/geraete/dec-geschichte.shtm              |
|                         /en/devices/dec-history.shtm                 |
| In Benutzung seit:   Wohl schon recht lange.     (v5.0?)             |
| Besonderheiten:      Definitionslisten ohne Einschub und mit dick-   |
|                      gedrucktem <dt>.                                |
|                                                                      |
| Zuletzt ge�ndert:    zur v5.7 vielleicht                             |
|                                                                      |
\**********************************************************************/

#content dt {
    margin-top: 1.2em;
    font-weight: bold;
    display: block;
}

#content dd {
    text-align: justify;
    margin: 0; padding: 0;
}




/**
 * t29v6 Design javascript.css
 * $Id$
 * In dieser Datei:
 *
 *   #img-license-tag, h2 a.anchor = 
 *        Elemente, die dynamisch per JavaScript eingebunden werden.
 *
 * Natuerlich gibt es noch vielen anderen dynamischen Inhalt. Z.B. das 
 * v6-Menue (sidebar.css) oder das t29.tr-Translation System. Oder
 * seitenspezifische Sachen, siehe unter pagestyles/.
 *
 * Diese Datei dient als Sammelplatz fuer dynamische Elemente, die auf
 * der ganzen Seite Verwendung finden.
 *
 **/
 
/**********************************************************************\
| CENTRAL COMMON STYLES: Copyright boxes for pictures                  |
+----------------------------------------------------------------------+
| Diese CSS-Anweidungen formatieren dynamisch erzeugten HTML-Code      |
| durch das neue copyright-boxes-system (licensing.js)                 |
| Eingefuehrt August 2010.                                             |
\**********************************************************************/

#img-license-tag  {
	display: none;
	position: absolute;
	/*background-color: rgba(0,0,0, 0.5);*//* Fuer CSS3 ist die Zeit noch nicht reif */
	background-image: url(/shared/img/fresh.design/bg.copyright-box.png);
	color: white;
}

#img-license-tag p {
	margin: 0;
	padding: 1em;
	text-align: center;
}

#img-license-tag:hover {
	display: block;
	background-color: black;
}

#img-license-tag a:link, #img-license-tag a:visited {
	color: #eee;
}

#img-license-tag a:hover, #img-license-tag a:active {
	color: white;
}

/**********************************************************************\
| CENTRAL COMMON STYLES: Heading anchors (Javascript driven)           |
+----------------------------------------------------------------------+
| Eingefuehrt August 2010.                                             |
\**********************************************************************/
#content h2 a.anchor, #content h3 a.anchor, #content .linkable a.anchor {
	text-decoration: none;
	color: #ddd;
	visibility: hidden;
}

#content h2:hover a.anchor, #content h3:hover a.anchor, #content .linkable:hover a.anchor {
	visibility: visible;
}

/**
 * t29v6 Design bildboxen.css
 * $Id$
 * In dieser Datei:
 *
 *   #content .box, #content .left, .right, .center, .auto-bildbreite,
 *   .clear-after, .bordered, .desc-left, .desc-right =
 *       Vielleicht der wichtigste Teil aller Styles: Das Bildboxen-
 *       Konzept von v5.
 *
 **/

/**********************************************************************\
| CENTRAL COMMON STYLES: BILDBOXEN ("Imageboxen")                      |
+----------------------------------------------------------------------+
|
** Bildboxen ("Imageboxen")
** Das Bildboxen-Konzept wird auf ausnahmslos allen Inhalts- und Extraseiten
** genutzt. Aufbau eines .right/.left/.center-Bildbeschreibungs-Gebildes:
** <div class="[box] [links|rechts|center]"> (box f�r fakultativen Abstand oben/unten)
**    <img ... />
**    <[div|p] class="bildtext"> (Bildtextklasse nicht mehr zwingend n�tig)
**       <p>Viel Text...</p>
**    </[div|p]>
**    <div class="clear">&nbsp;</div> (Damit das Bild nicht weitergeht)
** </div>
** Dazu existieren Erweiterungen: img.nomargin-bottom bei weniger Text als Bild,
** .center .bildtext-bildbreite, damit zentrale Texte genauso breit wie die
** Bilder werden.
|
\**********************************************************************/

#content .box, .content .box {
    /* .box als allgemeine Klasse fuer abstandswuerdige */
    /* Objekte (.center/.right/.left zum Beispiel) */
    margin-top: 3em;
    margin-bottom: 3em;
}

#content .left img,
.content .left img,
.content .left-img img /* fuer mehr klarheit bei vielen klassen */ {
    /* Links ausgerichtetes Bild mit Abstand drumherum */
    float: left;
    margin: 0 2em 2em 0;
}

#content .right img,
.content .right img,
.content .right-img img /* fuer mehr klarheit bei vielen klassen */ {
    /* Rechts ausgerichtetes Bild mit Abstand drumherum */
    float: right;
    margin: 0 0 2em 2em;
}

#content .center img,
.content .center img,
.content .center-img img /* fuer mehr klarheit bei vielen klassen */ {
    /* Mittig ausgerichtetes Bild mit Abstand drunter */
    margin: 0 0 0.3em 0;
}

#content img.nomargin, .content img.nomargin {
    /* Links/rechts/mittig ausgerichtetes Bild mit exiplit keinem Abstand */
    margin: 0;
}

#content .left img.nomargin-bottom, #content .right img.nomargin-bottom,
.content .left img.nomargin-bottom, #content .right img.nomargin-bottom,
#content .nomargin-bottom {
    /* Zur absoluten Perfektion: Kein Abstand unter dem Bild bei links/rechts-fliessendem
       (nur machbar, wenn der Text nicht umbrechen wird, weil er einfach zu kurz ist).
       Dadurch wird der viel zu grosse Abstand unter einer .box verhindert, den ein
       .clear dann erzeugt. */
    margin-bottom: 0;
}

#content .left .bildtext, .content .left .bildtext,
#content .right .bildtext, .content .right .bildtext {
    /* p.bildtext oder div.bildtext: Kein Abstand! */
    text-align: justify;
    /* Im Endeffekt ist .bildtext hier unnoetig! */
}

#content .center .bildtext, .content .center .bildtext {
    /* p.bildtext oder div.bildtext im center = Abgrenzung links/rechts */
    text-align: justify;
    margin-left: 10%;
    margin-right: 10%;
}

#content .center .bildtext-bildbreite, .content .center .bildtext-bildbreite {
    /* Text zentriert unter dem Bild in der Breite des Bildes */
    text-align: justify;
    margin-left: auto;
    margin-right: auto;
}

/* 
    28. April 2013: Linksausgerichteter Text, Blocksatz in Bereichen bewusst durchbrechen
*/

.content .no-blocksatz, .content .no-blocksatz p {
	text-align: left;
}

/*
    03. Januar 2010: Erweiterung des Konzeptes um automatische Bildbreiten (fuer .box.center),
    Breiten der Bilder werden zur Laufzeit durch /shared/js/auto-bildbreite.js ausgelesen.
*/

#content .auto-bildbreite, #content .manuelle-bildbreite {
	/* manuell etwa auf der Gamma 10 Seite, wo mehrere Bilder nebeneinandergepfuscht sind */
	margin-left: auto;
	margin-right: auto;
}

#content .auto-bildbreite  p.bildtext, #content .manuelle-bildbreite  p.bildtext,
#content .auto-bildbreite  div.bildtext , #content .manuelle-bildbreite div.bildtext {
	/* Saemtliche Abstaende abschalten, weil Breite des gesamten <div class="box">-Elements
       durch ein JavaScript geregelt wird */
	margin-left: 0;
	margin-right: 0;
}

/*
    03. Januar 2010: In Konstrukten wie
	  <div class="box left">
	     <img ... />
		 <p class="bildtext">foo bar</p>
		 <div class="clear">&nbsp;</div>
	  </div>
	kann ab sofort das clear-Element weggelassen werden zugunsten einer einfachen Klasse
	  <div class="box left clear-after">
	     <img .../>
		 <p class="bildtext">foo bar</p>
	  </div>
	Realisiert wird das ueber einen kruden CSS-Hack. Muss noch getestet werden, ob der ueberall
	laeuft.
*/

#content .clear-after {
	display: inline-table;
	/* CSS-Hack to hide from IE-mac \*/
	height: 1%;
	display: block;
	/* IE mac is wayne, isn't it!? */
}

html>body #content .clear-after {
	height: auto;
}

#content .clear-after:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

#content .inline-block { display: inline-block; }





/*
   Mehr oder weniger "halboffizielle" Rahmen um class="box [right|left|center]"-Bilder.
   Verwendung als Zusatzklasse zu box.
   
   Feststellung 04.10.2009: Box-Modell zu speziell, um Rahmen hinzuzufuegen
*/

#content .bordered, .content .bordered {
    border: 1px solid #094099;
	padding: 2em;
}

#content .bordered img, .content .bordered img {
}

/* ehemaliger Spezialstyle auf der Startseite,
   jetzt genutzt nur auf der Lehrerinfo-Seite fuer Bildunterschrift. */
#content div.desc-right, #content div.desc-left,
#content div.desc-right.auto-bildbreite, #content div.desc-left.auto-bildbreite {
    /* rechts gefloatetes thumbnail mit Beschreibungstext */
    float: right;
    margin: 0pt 0pt 2em 2em;
/*  width: 236px; */
/*  border: 1px solid #7090C0;
    background-color: #EBEBEB; */
    border: 1px solid #094099;
    padding: 1em;
}

#content div.desc-left, #content  div.desc-left.auto-bildbreite {
	float: left;
	margin: 0pt 2em 2em 0pt;
}

div.desc-right img {
}

div.desc-right p, div.desc-left p {
    /* Damit der Text nicht �ber die ganze Fensterbreite geht,
       <p style="width: Bildbreite;"> n�tig. */
    margin: 1em 0 0 0; padding: 0;
    font-size: 90%;
    text-align: left;
}

#content div.desc-right.borderless, #content div.desc-left.borderless {
	border: none; /* ja, ziemlich bescheuert sorum */
}

/**
 * Buttons in the t29 User inteface
 * 
 * Es gibt einige konkurrierende Button-Stile, die im Laufe der Zeit im t29-Layout
 * angefertigt wurden:
 * 
 *   - t29tr Translation System (/en/dev/translation/editor.css): Die im folgenden
 *     stehenden Shadow-Buttons, die auch etwas an Twitter Bootstrap erinnern
 * 
 *   - t29v6 Sidebar Buttons: Leichtgewichtige 2D-Buttons im "Metro-Style", die auch
 *     auf der Startseite (/shared/css-v6/pagestyles/startseite.css) verwendung finden
 *     (Buttonleisten)
 * 
 *   - Diverse einfach so gestylte <button>-Tags, z.B. bei pagestyles/anmeldung.css.
 * 
 **/


/**** 
 * 
 * Hinzugefügt am 20.06.2013, funktioniert aber aus irgendeinem obskuren Grund nicht
 * 
 * 
 ****/


/*
  CSS3 Buttons
  http://www.webdesignerwall.com/tutorials/css3-gradient-buttons/
*/
#content a.3dbutton {
	display: inline-block;
	zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
	*display: inline;
	vertical-align: baseline;
	margin: 0 2px;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: 14px/100% Arial, Helvetica, sans-serif;
	padding: .5em 2em .55em;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	-webkit-border-radius: .5em; 
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
#content a.3dbutton:hover {
	text-decoration: none;
}
#content a.3dbutton:active {
	position: relative;
	top: 1px;
}

#content a.3dbutton.bigrounded {
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	border-radius: 2em;
}
#content a.3dbutton.medium {
	font-size: 12px;
	padding: .4em 1.5em .42em;
}
#content a.3dbutton.small {
	font-size: 11px;
	padding: .2em 1em .275em;
}

/* color styles - !important nachtraeglich, wg. zu schwachen selektoren
---------------------------------------------- */

/* black */
#content a.3dbutton.black {
	color: #d7d7d7 !important;
	border: solid 1px #333 !important;
	background: #333 !important;
	background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000)) !important;
	background: -moz-linear-gradient(top,  #666,  #000) !important;
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000') !important;
}
#content a.3dbutton.black:hover {
	background: #000 !important;
	background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000)) !important;
	background: -moz-linear-gradient(top,  #444,  #000) !important;
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#000000') !important;
}
#content a.3dbutton.black:active {
	color: #666 !important;
	background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444)) !important;
	background: -moz-linear-gradient(top,  #000,  #444) !important;
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666') !important;
}

/*
 * Diese CSS-File sammelt Styles, die vermutlich keinen langen Bestand
 * haben. Sie gehoeren eigentlich an andere Stelle und sind vor allem
 * angelegt worden, um mit heisser Nadel gestrickten Designvorstellungen
 * Heriberts gerecht zu werden. Damit ist die Wahrscheinlichkeit gross,
 * dass sie bald nicht mehr zur Anwendung kommen.
 */

/*
  Logobild statt Textueberschrift am 26.12.2013 fuer IBM 1130,
  nicht in ibm1130.css da Heribert in Univac ausprobieren will.
 */

.text-ersatz {
    border-bottom: 3px double #AAAAAA;
    /*height: 21px;*/
    overflow: visible;
    text-align: center;
}


/*
 * Termine in der Seiten-Navigationsleiste, am 22.04.2014
 * auf allen Seiten.
 */
section.sidebar a.alertbox {
	background-color: #EDF0F2;
	margin: -35px -25px 15px;
	padding: 35px 25px;
	
	text-decoration: none;
}

section.sidebar a.alertbox span {
	display: block;
	margin-top: 8px;
	color: #696969;
}
/**
 * Layout in diesem Modul wird auf den Seiten
 *  - robotik-ferienkurs
 *  - physical-computing
 * verwendet. Das war bis Dez 2016 als pagestyle umgesetzt,
 * da es aber jetzt mehrere Seiten sind, als Modul.
 *
 **/

/*section.sidebar a.button.termine {
	display: none !important;
}*/

/* Ein Logo ohne */
body.kursseite h1 a {
	background-image: url("/shared/img-v6/banner.svg");
}


/* Neues Design ab Juni 2015, Experiment-Styles */

body.kursseite section.sidebar a.termine {
	/* zugehoerig zur normalen Homepage */
	display: none;
}

@media all and (min-width: 940px) {
	body.kursseite header.teaser-nicht-mobil {
		position: relative;
		overflow: hidden;
		margin: 30px -40px 30px;
	}

	body.kursseite header.teaser-nicht-mobil h2,    /*Robotik*/
	body.kursseite #content header.teaser-nicht-mobil h2 {
		border: none !important;
		position: absolute;
		bottom: 0; left: 0;
		width: 80%;      
		padding: 0.3em 10%;
		margin: 0;
		background-color: rgba(255,255,255,.6); 
		color: #0006ff;     
	
	
		font-size: 280%;    /* vorher 250%;*/
		text-align: center;
	}

	/* Physical-Computing */
	body.kursseite #content header.teaser-nicht-mobil.physical-computing h2 {
		color: #0006ff;
		background-color: rgba(224, 242, 254, .7);/*vorher .8*/
	}

	/* Zwischenueberschrift: "Club der digitalen Denker" */
	body.kursseite #content header.teaser-nicht-mobil.digitale-denker h2 { 
		font-size: 180%;
		color: white;
		background: linear-gradient(to bottom, rgba(0, 0, 0, 0.08) 0%,rgba(0,0,0,1) 100%);
	}

	body.kursseite header.teaser-nicht-mobil.physical-computing::before {
		/* css3 hack to get img inset box-shadow */
		display:block;
		content:'';
		position:absolute;
		width:100%;
		height:100%;
		box-shadow: 0 -20px 59px -4px rgba(0, 0, 0, 0.35) inset;
	}
}/* media min-width: mobile */
@media all and (max-width: 940px) {
	body.kursseite header.teaser-nicht-mobil img {
		display: none;
	}
}


/* sidebar */
body.kursseite section.sidebar div.text-block,
body.kursseite section.sidebar div.bild-block {
	margin-top: 2em;
	margin-bottom: 2em;
}

body.kursseite section.sidebar div.text-block a,
body.kursseite section.sidebar div.bild-block a {
	display: inline !important;
}

body.kursseite section.sidebar div.text-block {
	margin: -15px -25px 15px;
	padding: 35px 25px;
}

body.kursseite section.sidebar div.bild-block img {
	width: 100%;
	max-width: 300px; /* tablet */
}

body.kursseite section.sidebar div.bild-block .bildtext {
	margin-top: .5em;
}

body.kursseite section.sidebar div.alertbox {
	background-color: #edf0f2;
	margin: -35px -25px 15px;
}

body.kursseite section.sidebar div.text-block li {
	display: block;
	margin: .4em 0;
}

/* Auf Wunsch von Heribert sollen Kursseiten-Floatbilder weniger Abstand
   drumherum haben. Das liegt daran, weil sie so klein sind. Ist ein
   ziemlich kruder Design-Fix */
body.kursseite #content .left img,
body.kursseite #content .right img {
	margin-bottom: 1em; /* Standard in Bildboxen sind 2em */
}

/* Mobile Sidebar, nur auf senkrechtem Tablet... */
@media all and (max-width: 940px) and (min-width: 600px) {
	body.kursseite section.sidebar div.text-block,
	body.kursseite section.sidebar div.bild-block {
		margin: .5em;
		padding: .5em;
		width: 300px;
		/*outline: 1px solid red;*/

		display: inline-block;
		vertical-align: top;
	}
}

/* Wie auf Startseite */
body.kursseite #content h3 {
    border: medium none;
    color: #1a5160;
    font-family: inherit;
    font-size: 113%;
    font-weight: bold;
}


/**
 * Dieses CSS sammelt die neuen Teaser-Klassen fuer Überschriften, die von überbreiten Bildern
 * begleitet werden.
 * 
 * Es sollte im ursprünglichen t29-v6-Design von 2011 auf jeder Seite ganz oben *einen* Teaser
 * geben. Dazu kam es aber nie.
 * 
 * Ich habe sie dann irgendwann auf der t29-Devzone http://www.technikum29.de/dev/ aktiviert.
 * 
 * Später wollte Heribert sie dann auf den Kursseiten (Robotik usw.) haben.
 * 
 * Von dort sind sie Ende 2017 doch wieder auf die restliche Website übergegangen.
 **/


/* teaser, von devzone kopiert */
body header.teaser {
	position: relative;
	overflow: hidden;
	margin: 30px -40px 30px;
}

/* Wenn mehrere dieser Teaser auf einer Seite (eine verrueckte Sache, die Berti
   im Sept 2017 ploetzlich wollte: Nur den ersten mit dem fancigen Margin aussatten) */
body header.teaser.seitenstart {
	margin: -60px -40px 40px;
}


body header.teaser h2,    /*Robotik*/
body #content header.teaser h2 {
	border: none !important;
	position: absolute;
	bottom: 0; left: 0;
	width: 80%;      
	padding: 0.3em 10%;
	margin: 0;
	background-color: rgba(255,255,255,.6); 
	color: #0006ff;     
	
	
	font-size: 280%;    /* vorher 250%;*/
	text-align: center;
	font-weight: inherit;
}

body header.teaser h2 span.subtext {
	display: block;
	font-size: 60%;
	line-height: 100%;
	
}
@media print {
     /**************************************************************\
    *  TTTTT EEEE CCCC H  H N   N III K  K U  U M   M    222   999   *
    *    T   E    C    H  H NN  N  I  K K  U  U MM MM   2   2 9   9  *
    *    T   EEE  C    HHHH N N N  I  KK   U  U M M M      2  99999  *
    *    T   E    C    H  H N  NN  I  K K  U  U M   M     2      9   *
    *    T   EEEE CCCC H  H N   N III K  K UUUU M   M   22222   9    *
    *                                                                *
    *                        P R I N T    C S S                      *
     \**************************************************************/
     
   /**
    * Die print.css gibts schon seit v5. Erst 2013 wurde sie auf v6
    * portiert. Im HTML5 01-boilerplate werden bereits viele Print-Styles
    * gemacht, die hier ueberschrieben werden muessen.
    * 
    **/

    body, #content {
        color: #000;
        font: 100% "Times New Roman",Times,serif;
    }
    
    .hidden {
        display: none;
    }
    
    img {
        border: none;
        page-break-after: avoid; /* weil Bildtexte fast immer hinterm Bild stehen */
    }
    
    h1, h1 a {
        margin: 0; padding: 6px 0;
	width: 100%;
        text-align: center;
    
        font: 180% Arial,Verdana,Helvetica,sans-serif;
    }
    
    h1 a {
        text-indent: 0;
        color: #AAA !important;
        text-decoration: none !important;
    }
    
    h1 a:after {
        content: "Museum für Rechner-, Computer- und Kommunikationstechnik" !important;
	display: block;
	
	font-size: 40%;
        border-bottom: 1px solid #AAA;
        margin-bottom: 10px; margin-top: 0;
        text-align: center;
    }
    
    h2 {
        font-size: 150%;
        margin: 10px 0 10px 0;
        padding: 0;
    }
    
    h2, h3 {
        page-break-after: avoid;
    }
    
    header.teaser h2 {
        background-color: white !important;
    }
    
    header.banner, section.sidebar, footer.in-sheet {
        display: none;
    }
    
    #background-color-container, #content, section.sidebar {
       float: none; left: auto;
    }
    
    #content {
	padding: 0;
    }
    
    #copyright {
        margin: 1em 0;
        font-size: 80%;
        text-align: center;
    }
    
    
    #content .box {
       page-break-inside: avoid;
    }
    
    /***** TEXT *****/
    
    p {
        text-align: justify;
        line-height: 110%;
    }
    
    a:link, a:visited {
        color: #000;
        text-decoration: none;
    }
} /* end of @media print */

/**
 * Media Queries for responsive webdesign
 * Fuer kleine Browserfenster sowie mobile Endgeraete.
 **/

/**
 * Schmaler als die "Blattmetapher" 1200px: Blattmetapher aufgeben und Ueberbleibsel
 * des Seitenhintergrundes ausblenden. Zur Ladezeitoptimierung braucht der auch gar
 * nicht mehr geladen werden.
 * Experimentell den Footer auch nicht mit der dunkeln Hintergrundfarbe machen, weil
 * er sonst sehr aufdringlich ist.
 *
 **/
@media all and (max-width: 1250px) { /* was: 1199px */
	body {
		background: #F4F4F4; /* BG von footer.attached */
	}

	#container {
		margin-top: 0;
		box-shadow: none;
	}
	
	footer.in-sheet.empty-footer {
		height: 2px; /* Nur Linie anzeigen, keine weisse Flaeche */
	}
	
	/* If we have a Javascript capable browser, display the cloned footer as the
	   in-sheet footer looks ugly. */
	html.js footer.in-sheet div.bigfooter {
		display: none;
	}
	html.js footer.attached.for-mobile {
		display: block;
	}

	/* mache Eintraege schmaler. Das hier sollte eigentlich gemeinsam bei footer.css stehen... */
	footer div.bigfooter li.haus {
		width: 300px;
	}
	footer div.bigfooter li.copy {
		width: 290px;
	}
	footer div.bigfooter li.logo {
		width: 240px;
	}

	footer div.bigfooter li.haus img {
		width: 100px;
	}
	footer div.bigfooter li.haus span.p {
		margin-left: 118px;
	}
}

/**
 * Schmaler als 940px: Tablet-Design. Menue unten darstellen, keine Menuescrollfunktionen,
 * Menuepunkte nebeneinander (sieht huebsch aus).
 *
 **/
@media all and (max-width: 940px) {
	/* menue unten darstellen, Menuescrollfunktionen deaktivieren */
	#container {
		width: 940px;
	}

	/* Header-Navigation */
	header.banner {
		height: auto;
		background: none;
		text-align: left;
	}

	nav.horizontal {
		position: relative;
		top: auto; bottom: auto;
		margin: 105px 0 0 0;
		text-align: center;

		/* testweise: */
		background-color: #f1f1f1;
		border-bottom: 2px solid #d2d2d2;
		border-top: 2px solid #d2d2d2;
	}
	nav.horizontal .u1 > li > a {
		margin-bottom: 0; /* kein Abstand zu nav.horizontal */
		padding: 9px; /* groessere Klickflaechen */
	}

	li.small-screen-only {
		display: inline-block !important;
	}
	
	#background-color-container, #content, section.sidebar {
		float: none;
		left: auto;
		background-color: transparent;
	}

	section.sidebar {
		width: 100%;
		background-color: #dfeaf0;
	}
	section.sidebar nav.side .u1 > li > a {
		/* u1-Trenner abschalten */
		border-top: none;
		padding-top: 0;
	}
	
	/* clearfix */
	#content:after, section.sidebar:after { content: ""; display: table; clear: both; }
	
	nav.side { /* Quick and dirty */
		padding-bottom: 15px !important;
	}
	
	.button { display: none !important; } /* Quick and dirty */
	
	/* Spalten */
	section.sidebar ul.u1 > li {
		float: left;
		padding: 24px;
		width: 250px;
	}
	
	/* ist nicht mehr empty wg bigfooter */
	/* footer.in-sheet.empty-footer { display: none; } */
}

/**
 * Schmaller als 600px: Handy-Design, alles einspaltig!
 *
 **/
@media all and (max-width: 600px) {
	#container {
		padding-top: 240px; /* wg grossem Header, to be fixed */
	}
	#container, #content, section.sidebar, #background-color-container {
		width: inherit;
	}
	#content {
		padding: 1.5em 1em;
	}

	#container h1 {
		display: block;
		position: absolute;
		top: 0; left: 0; width: 100%;
	}

	#container h1 a {
		/* Banner in der Mitte anzeigen */
		display: block;
		position: relative; top: 0; left: 0;
		width: 80%; max-width: 310px;
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 100% auto;
		margin: 0 auto;
	}

	nav.horizontal {
		/* Less distance to logo */
		margin: 90px 0 0 0;
		border-bottom: none;
	}

	nav.top {
		position: relative;
		margin: 0; padding: .5em 0;
		border-bottom: 2px solid #d2d2d2;
		background-color: #ebebeb;
		text-align: center;
	}

	nav.rel {
		width: 100%;
		margin: 26px 0 0;
		text-align: center;
	}
	nav.rel li {
		position: relative;
	}

	footer.in-sheet {
		height: auto;
		min-height: 100px; /* wenn Vorherige/Nächste umbricht */
	}

	footer.attached div.bigfooter ul,
	footer div.bigfooter li {
		padding: 0;
		width: 100% !important;
	}

	footer.in-sheet div.bigfooter {
		padding-left: .4em;
	}


	/* Mehrspaltige Contents. Overwrite dank #container */
	#container div.startseiten-boxen,
	#container div.startseiten-boxen .cols,
	#container div.startseiten-boxen .leftcol, 
	#container div.startseiten-boxen .rightcol,
	#content div.cols,
	#content div.cols .leftcol,
	#content div.cols .rightcol,
	#content div.desc-left,
	#content div.desc-right  {
		float: none;
		width: inherit;
		padding: 0 !important;
	}

	/* Box-System einspaltig machen, aber NUR wo
	   nicht "mobile-keep" steht! */
	#content .auto-bildbreite:not(.mobile) img,
	#content .center:not(.mobile) img,
	#content .left:not(.mobile) img,
	#content .right:not(.mobile) img,
	#content div.desc-left:not(.mobile) img,
	#content div.desc-right:not(.mobile) img {
		float: none;
		display: block; margin: 0 auto; /* for small images */
		max-width: 100%;
		height: auto;
	}

	#content div.desc-left,
	#content div.desc-right,
	#content .auto-bildbreite {
		width: 100% !important;
		margin: 1em 0;
	}

}