/* --- verwendete Farben und Schriften

- Hintergrund: #f4f4f4
- Links im Menü: #555555, 11px
- Schrift: #000000, Verdana, 12px
- Überschriften (hellgrün):

*/

/* --- allgemein */

 a:link { color:#000000; text-decoration:none; }
 a:visited { color:#000000; text-decoration:none; }
 a:hover { color:#CC0000; text-decoration:underline; }
 a:active { color:#ff0000; text-decoration:none; }
 a:focus { color:#ff0000; text-decoration:none; }

 body { color:black; scrollbar-DarkShadow-Color:#000000; scrollbar-Track-Color:#F4F4F4; scrollbar-Face-Color:#F4F4F4; scrollbar-Shadow-Color:#000000; scrollbar-Highlight-Color:#F4F4F4; scrollbar-3dLight-Color:#000000; scrollbar-Arrow-Color:#000000; border:0; text-align:center; background-color:#f4f4f4 }

html {
    overflow-y: scroll;
}


/* --- Seitenaufbau und Rahmen */

table.maintable { border-collapse:collapse; empty-cells:show; border:0px; background-color:#FFFFFF; vertical-align:center;  }
table.maintable2 { border-collapse:collapse; empty-cells:show; border:1px; background-color:#FFFFFF; vertical-align:center;  }

td { border:1px;}

table.maintable2 td {
	border: 1px;
}

td.rahmen_ol { background-image:url(../pics/rm_1.gif); width:26px; height:26px; }
td.rahmen_om { background-image:url(../pics/rm_o.gif); width:900px; height:26px }
td.rahmen_or { background-image:url(../pics/rm_2.gif); width:26px; height:26px }
td.rahmen_l { background-image:url(../pics/rm_l.gif); width:26px }
td.rahmen_r { background-image:url(../pics/rm_r.gif); width:26px }
td.rahmen_ul { background-image:url(../pics/rm_4.gif); width:26px; height:26px }
td.rahmen_um { background-image:url(../pics/rm_u.gif); width:900px; height:26px }
td.rahmen_ur { background-image:url(../pics/rm_3.gif); width:26px; height:26px }

td.logo { width:900px; height:130px }
td.menu { width:150px; padding:10px; vertical-align:top; background-color:#D8D8D8;}
td.contentmain {
	width:550px;
	height:400px;
	padding:10px;
	border:1px solid #C0C0C0;
	color: #CC0000;
}
td.content {
	width:720px;
	height:400px;
	padding:10px;
	border:1px solid #C0C0C0;
	color: #CC0000;
}
td.footer { width:720px; padding:10px; text-align:center; }

td.back { background-repeat:repeat; background-position:center center; padding:10px; width:720px; height:400px; padding:10px; border:1px solid #C0C0C0; vertical-align:top}


/* --- Links im Menue */

a.menu { font-size:12px; padding-left:10px; margin-left:15px; background-image:url(../pics/pfeil.gif); background-repeat:no-repeat; background-position:left top; color:#555555; display:inline-block; float:left; text-align:left;}
a.menu2 { font-size:10px; font-style:italic; margin-left:25px; padding-left:15px; background-image:url(../pics/pfeil.gif); background-repeat:no-repeat; background-position:left; color:#555555 }

a.menu-open { font-size:11px; padding-left:10px; margin-left:15px; background-image:url(../pics/pfeil.gif); background-repeat:no-repeat; background-position:left; color:#336600; }
a.menu2-open { font-size:11px; margin-left:25px; padding-left:15px; background-image:url(../pics/pfeil.gif); background-repeat:no-repeat; background-position:left; color:#336600 }

a.menuu { font-size:11px; color:#555555 }
a.menuu-open { font-size:11px; color:#336600 }


/* --- Textformatierung */

p,a,th,ul,li,h4,td { font-family:Verdana; font-size:12px; color:rgb(54,54,54); font-weight:100;  }
h1,h2,h3 { font-family:Verdana; font-weight:900; color:#336600 }
hr { color:#555555 }
h1 { font-size:16px; }
h2 { font-size:14px; height:35; background-image:url(../pics/h-bg2.gif); background-repeat:no-repeat; background-position:left; margin-top:4px; padding-left:35px; padding-top:6px; }
h4 { font-weight:bold; margin:2px; }
h5 {font-family:Helvetica; font-size:16px; color:#F00 }
p,li { text-align:justify }
li { line-height:15px }

p.copyright { font-size:9px; text-align:center }
p.subtext { font-size:9px; text-align:center }
p.image { text-align:center; font-style:italic }
p.footer { text-align:center;}

a.hotpress { color:#990000; margin-bottom }

a.head2_link { color:#000000; font-weight:bold; vertical-align:top }


/* --- Tabellen im Text */

table.text { border-collapse:collapse; empty-cells:show; }
th {
	border:1px solid #C0C0C0;
	padding:4px;
	font-size:12px;
	font-weight:bold;
	background-color:rgb(216, 216, 216);
	color: #CC0000;
}
td.text-h { border:1px solid #C0C0C0; background-color:rgb(240, 245, 250); padding:4px; }
td.text-d { border:1px solid #C0C0C0; background-color:rgb(222, 232, 242); padding:4px; }
td.text-s { border:1px solid #C0C0C0; background-color:rgb(240, 245, 250); padding:2px; font-family:Verdana; font-size:10px; color:rgb(0,0,0); font-weight:100; }
td.text-sy { border:1px solid #C0C0C0; background-color:rgb(255, 255, 000); padding:2px; font-family:Verdana; font-size:10px; color:rgb(0,0,0); font-weight:100; }

td.invis { border:0px; padding:4px; vertical-align:top; padding-right:15px; padding-top:15px}

td.prod-logo { text-align:center; padding-top:15px; border:0px }
td.balken { background-color:#BED2BD; padding:4px }


/* --- Kalender */

td.year { width:80px; text-align:center; background-color:rgb(240, 245, 250); }
td.year-open { width:80px; font-weight:bold; text-align:center; background-color:rgb(216, 216, 216)}

td.month { width:40px; padding:5px; text-align:center; background-color:rgb(240, 245, 250); }
td.month-event { width:40px; font-weight:bold; text-align:center; background-color:rgb(216, 216, 216); }

table.event {  border-collapse:collapse; border:1px solid rgb(152,168,184)}
td.event-head { background-color:rgb(216, 216, 216); padding:5px;  }
td.event { padding:5px; padding-top:10px; padding-bottom:10px; background-color:rgb(240, 245, 250); border:1px solid rgb(152,168,184) }

p.title { font-size:14px; font-weight:bold; }
a.a-calendar { font-size:14px; color:#336600; font-weight:bold; }
a.a-month { color:#336600; }


/* --- Sonstige Formatierungen ---*/

table.content { padding-left:4px; padding-top:16px; padding-right:4px; padding-bottom:4px; border-collapse:collapse; vertical-align:center;}

.head { font-family:Verdana, san serif; font-size: 14px; font-weight:900; color: #555555  }

.head2 {font-family: Verdana, san serif; font-size: 12px; font-weight:900; color: #555555  }

.head2_link {font-family: Verdana, san serif; font-size: 12px; font-weight:900; color: #CC0000}

.text {font-family: Verdana, san serif; font-size: 12px; font-weight:500; color: #CC0000; line-height: 16px  }

.text_b {font-family: Verdana, san serif; font-size: 14px; font-weight:800; color: #000000; line-height: 17px  }

.big_text {font-family: Verdana, san serif; font-size: 16px; font-weight:900; color: #336600; line-height: 19px  }
.big_text_1 {font-family: Verdana, san serif; font-size: 15px; font-weight:800; color: #336600; line-height: 18px  }
.link {font-family: Verdana, san serif; font-size: 12px; font-weight:500; color: #CC0000; line-height: 16px  }
.link_b {font-family: Verdana, san serif; font-size: 12px; font-weight:800; color: #CC0000; line-height: 16px  }
.cal_link {font-family: Verdana, san serif; font-size: 12px; font-weight:500; color: #336600; line-height: 16px  }

.little  {font-family: Verdana, san serif; font-size: 9px; font-weight:100; color: #555555  }

.littleb {font-family: Verdana, san serif; font-size: 9px; font-weight:100;  color: #555555; text-decoration: underline  }

td.contenttablehead {font-size:15px; color:rgb(0,0,0); background-color:rgb(191,218,229); font-weight:bold; border: 1px solid rgb(152,168,184); padding:4px;}

table.content { padding-left:4px; padding-top:16px; padding-right:4px; padding-bottom:4px; border-collapse:collapse; vertical-align:center;}

tr.coloredtablehead {font-size:15px; font-weight:900; background-color:rgb(216, 216, 216);}

tr.coloredtablerow1:hover {font-size:12px; font-weight:500; background-color:rgb(216, 216, 216);}

tr.coloredtablerow1 {font-size:12px; font-weight:500; background-color:rgb(240, 245, 250);}

tr.coloredtablerow2:hover {font-size:12px; font-weight:500; background-color:rgb(216, 216, 216); }

tr.coloredtablerow2 {font-size:12px; font-weight:500; background-color:rgb(222, 232, 242);}

td.tdrahmen1/* blauwert*/ {border:1px rgb(152, 168, 184) solid; padding:4px; vertical-align:center;}

td.tdrahmen2/* blauwert*/ {border:1px rgb(152, 168, 184) solid; padding:4px; padding-left:15px; vertical-align:center;}

td.tdrahmen3/* blauwert*/ {border:1px rgb(152, 168, 184) solid; padding:4px; padding-left:30px; vertical-align:center;}

td.tdrahmen4/* blauwert*/ {border:1px rgb(152, 168, 184) solid; padding:4px; vertical-align:center; font-weight: bold}

td.mark/* blauwert*/ {border:1px rgb(152, 168, 184) solid; padding:4px; vertical-align:center; background-color:rgb(221, 153, 0);}
.text {font-family: Verdana, san serif; font-size: 12px; font-weight:500; color: #000000; line-height: 16px  }

.text_b {font-family: Verdana, san serif; font-size: 14px; font-weight:800; color: #000000; line-height: 17px  }

.big_text {font-family: Verdana, san serif; font-size: 16px; font-weight:900; color: #336600; line-height: 19px  }
.big_text_1 {font-family: Verdana, san serif; font-size: 15px; font-weight:800; color: #336600; line-height: 18px  }

tr.coloredtablehead {font-size:15px; font-weight:900; background-color:rgb(216, 216, 216);}

tr.coloredtablerow1:hover {font-size:12px; font-weight:500; background-color:rgb(216, 216, 216);}

tr.coloredtablerow1 {font-size:12px; font-weight:500; background-color:rgb(240, 245, 250);}

tr.coloredtablerow2:hover {font-size:12px; font-weight:500; background-color:rgb(216, 216, 216); }

tr.coloredtablerow2 {font-size:12px; font-weight:500; background-color:rgb(222, 232, 242);}

td.tdrahmen1/* blauwert*/ {border:1px rgb(152, 168, 184) solid; padding:4px; vertical-align:center;}

td.tdrahmen2/* blauwert*/ {border:1px rgb(152, 168, 184) solid; padding:4px; padding-left:15px; vertical-align:center;}

td.tdrahmen3/* blauwert*/ {border:1px rgb(152, 168, 184) solid; padding:4px; padding-left:30px; vertical-align:center;}

td.mark/* blauwert*/ {border:1px rgb(152, 168, 184) solid; padding:4px; vertical-align:center; background-color:rgb(221, 153, 0);}

/*
 * Training Materials section
 * the content on the training materials section has an extra CSS class 'content-training-materials'
 */
.menu.breadcrumb {
  background: none;
  color: #fff;
  position: relative;
  margin-left: 0;
  margin-right: 5px;
  padding-left: 15px;
}

.menu.breadcrumb:nth-child(n+2):before {
  content:'\00BB';
  position: absolute;
  left: 0;
  top: 0;
}

/* Overview page */
.content-training-materials .playlist,
.content-training-materials .episode {
  padding: 10px 0;
}

.content-training-materials .playlist__image,
.content-training-materials .playlist__info,
.content-training-materials .episode__image,
.content-training-materials .episode__info {
  display: inline-block;
  vertical-align: top;
}

/* image is 320px wide */
.content-training-materials .playlist__image {
  background-position: center;
  height: 175px;
  margin-right: 10px;
  position: relative;
  width: 320px;
}

.content-training-materials .playlist__image__link-to-course {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}

.content-training-materials .playlist__image__attribution {
  bottom: 5px;
  color: #FFF;
  font-size: 80%;
  position: absolute;
  right: 5px;
}

.content-training-materials .playlist__info {
  width: 415px; /* 750 (container) - 335 (image) */
}

.content-training-materials .playlist__title {
  background: none;
  height: auto;
  margin-bottom: 5px;
  padding: 0;
}

.content-training-materials .playlist__title a,
.content-training-materials .episode__title a {
  font-family: Verdana;
  font-weight: 900;
  color: #336600;
}

.content-training-materials .playlist__number-of-episodes {
  color: #666;
  margin: 0;
}

.content-training-materials .playlist__description {
  color:rgb(54,54,54);
  margin: 5px 0 12px;
}

.content-training-materials .playlist__description p:first-child {
  margin-top: 0;
}

/* Course page */
.content-training-materials .playlist-header {
  margin-bottom: 10px;
  position: relative;
}

.content-training-materials .playlist-header__title-description {
  left: 20px;
  position: absolute;
  top: 7px;
}

.content-training-materials .playlist-header__title {
  color: #FFF;
  text-shadow: 2px 2px 3px #000;
}

.content-training-materials .playlist-header__description {
  background-color: rgba(0, 0 ,0 ,.5);
  border-left: 2px solid #000;
  color: #FFF;
  line-height: 1.4;
  max-width: 475px;
  padding: 10px;
  text-shadow: 1px 1px 2px #000;
}

.content-training-materials .playlist-header__description p {
  margin: 0;
}

.content-training-materials .playlist-header__description p,
.content-training-materials .playlist-header__description a,
.content-training-materials .playlist-header__description ul,
.content-training-materials .playlist-header__description li {
  color: #FFF;
  line-height: 1.4;
  text-shadow: 1px 1px 2px #000;
}

.content-training-materials .playlist-header .playlist__image__attribution {
  left: 5px;
  right: auto;
}

.content-training-materials .playlist-header__slides {
  bottom: 15px;
  position: absolute;
  right: 15px;
}

.content-training-materials .playlist-header__slides__title {
  color: #FFF;
  line-height: 1.4;
  text-shadow: 2px 2px 3px #000;
  text-align: right;
  margin-right: 5px;
}

.content-training-materials .playlist-header__slides__links {
  list-style: none;
  list-style-image: none;
  margin: 10px 0 0 0;
}

.content-training-materials .playlist-header__slides__links li {
  background-color: rgba(0, 0 ,0 ,.5);
  border-right: 2px solid #000;
  line-height: 1.4;
  list-style: none;
  list-style-image: none;
  margin: 5px;
  padding: 5px 10px;
  text-align: right;
}

.content-training-materials .playlist-header__slides__link:link,
.content-training-materials .playlist-header__slides__link:visited {
  color: #FFF;
  text-shadow: 1px 1px 2px #000;
}

.content-training-materials .playlist-header__slides__link:hover {

}

.content-training-materials .episode__image {
  border: 1px solid #D8D8D8;
  margin-right: 10px;
  padding: 2px;
  width: 120px;
}

.content-training-materials .episode__info {
  width: 614px; /* 750 (container) - 136 (image) */
}

.content-training-materials .episode__title {
  background: none;
  height: auto;
  margin-bottom: 7px;
  padding: 0;
}

.content-training-materials .episode__duration {
  color: #666;
  margin: 8px 0;
}

.content-training-materials .episode__description {
  color:rgb(54,54,54);
  line-height: 1.4;
  margin-top: 8px;
}

/* Episode page */
.episode-view .episode__video,
.episode-view .episode__bookmarks,
.episode-view .episode-info-container,
.episode-view .episode__context,
.episode-view .episode__date-published,
.episode-view .episode__duration {
  display: inline-block;
  vertical-align: top;
}

.episode-view .episode-video-container {
  background-color: #d8d8d8;
  color: #555;
  margin-bottom: 20px;
}

.episode-view .episode__video {
  width: 480px; /* same as YouTube iframe */
}

.episode-view .episode__bookmarks {
  max-height: 340px; /* Youtube iframe height - padding (20px) */
  overflow-y: auto;
  padding: 10px 10px 10px 7px;
  width: 248px; /* 750 - 480 - padding (17) */
}

.episode-view .episode__bookmarks h3,
.episode-view .episode__context h3 {
  color: #555;
  font-size: 12px;
  margin: 0;
}

.episode-view .episode__bookmarks ul,
.episode-view .episode__context ul {
  list-style-image: none;
  list-style: none;
  margin: 8px 0;
  padding: 0;
}

.episode-view .bookmark,
.episode-view .episode__context li {
  border-bottom: 1px dashed #c0c0c0;
  color: #555;
  font-size: 11px;
  line-height: 1.4;
  padding: 4px 0;
  position: relative;
}

.episode-view .episode__context li {
  font-weight: bold;
}

.episode-view .bookmark:first-child,
.episode-view .episode__context li:first-child {
  padding-top: 0;
}

.episode-view .bookmark:last-child,
.episode-view .episode__context li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.episode-view .bookmark__number {
  display: block;
  position: absolute;
  width: 25px;
}

.episode-view .bookmark__title {
  display: block;
  padding-left: 25px; /* equal to width on .bookmark__number */
}

.episode-view .bookmark__timestamp-link,
.episode-view .episode__context li a {
  color: #555;
  font-size: 11px;
  font-weight: normal;
}

.episode-view .episode-info-container {
  margin-right: 10px;
  width: 470px; /* same as YouTube iframe */
}

.episode-view .episode-info-container h1 {
  margin-top: 0;
}

.episode-view .episode__slides {
  margin-top: 8px;
}

.episode-view .episode__slides p {
  color: #666;
  margin: 0;
}

.episode-view .episode__slides ul {
  list-style: none;
  list-style-image: none;
  margin: 0;
  padding: 0;
}

.episode-view .episode__slides p,
.episode-view .episode__slides p + ul,
.episode-view .episode__slides li {
  display: inline-block;
  vertical-align: middle;
}

.episode-view .episode__slides li {
  position: relative;
}

.episode-view .episode__slides ul li:first-child .episode__slides__link:link,
.episode-view .episode__slides ul li:first-child .episode__slides__link:visited {
  margin-left: 5px;
}

.episode-view .episode__slides ul li:nth-child(n+2):after {
  color: #666;
  content: '|';
  position: absolute;
  top: -1px;
  left: 0;
}

.episode__slides__link:link,
.episode__slides__link:visited {
  color: #666;
  display: inline-block;
  margin: 0 5px 0 10px;
}

.episode__slides__link:hover {
  color: rgb(54,54,54);
}

.episode__description {
  margin-bottom: 10px;
}

.episode-view .episode__context {
  border-left: 1px solid #d8d8d8;
  margin-left: -4px;
  padding: 0 10px;
  width: 248px; /* 750 - 480 - padding (20) */
}

.episode-view .episode__context h3 {
  margin-top: 0;
}

.episode-view .episode__date-published {
  color: #666;
  margin: 0;
  text-align: left;
  width: 50%;
}

.episode-view .episode__duration {
  margin: 0;
  text-align: right;
  width: 50%;
}

.episode-view .episode__context .episode__duration {
  color: #999;
  font-weight: normal;
  width: auto;
}