/* style.css - die-dozenten.de - angepasst an Vorlage 4 */

/* Asap Font-Faces bleiben gleich */
@font-face {
  font-family: 'Asap';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/asap-v7-latin-regular.eot');
  src: local('Asap Regular'), local('Asap-Regular'),
       url('../fonts/asap-v7-latin-regular.eot?#iefix') format('embedded-opentype'),
       url('../fonts/asap-v7-latin-regular.woff2') format('woff2'),
       url('../fonts/asap-v7-latin-regular.woff') format('woff'),
       url('../fonts/asap-v7-latin-regular.ttf') format('truetype'),
       url('../fonts/asap-v7-latin-regular.svg#Asap') format('svg');
}

@font-face {
  font-family: 'Asap';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/asap-v7-latin-italic.eot');
  src: local('Asap Italic'), local('Asap-Italic'),
       url('../fonts/asap-v7-latin-italic.eot?#iefix') format('embedded-opentype'),
       url('../fonts/asap-v7-latin-italic.woff2') format('woff2'),
       url('../fonts/asap-v7-latin-italic.woff') format('woff'),
       url('../fonts/asap-v7-latin-italic.ttf') format('truetype'),
       url('../fonts/asap-v7-latin-italic.svg#Asap') format('svg');
}

@font-face {
  font-family: 'Asap';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/asap-v7-latin-500.eot');
  src: local('Asap Medium'), local('Asap-Medium'),
       url('../fonts/asap-v7-latin-500.eot?#iefix') format('embedded-opentype'),
       url('../fonts/asap-v7-latin-500.woff2') format('woff2'),
       url('../fonts/asap-v7-latin-500.woff') format('woff'),
       url('../fonts/asap-v7-latin-500.ttf') format('truetype'),
       url('../fonts/asap-v7-latin-500.svg#Asap') format('svg');
}

@font-face {
  font-family: 'Asap';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/asap-v7-latin-500italic.eot');
  src: local('Asap Medium Italic'), local('Asap-MediumItalic'),
       url('../fonts/asap-v7-latin-500italic.eot?#iefix') format('embedded-opentype'),
       url('../fonts/asap-v7-latin-500italic.woff2') format('woff2'),
       url('../fonts/asap-v7-latin-500italic.woff') format('woff'),
       url('../fonts/asap-v7-latin-500italic.ttf') format('truetype'),
       url('../fonts/asap-v7-latin-500italic.svg#Asap') format('svg');
}

@font-face {
  font-family: 'Asap';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/asap-v7-latin-600.eot');
  src: local('Asap SemiBold'), local('Asap-SemiBold'),
       url('../fonts/asap-v7-latin-600.eot?#iefix') format('embedded-opentype'),
       url('../fonts/asap-v7-latin-600.woff2') format('woff2'),
       url('../fonts/asap-v7-latin-600.woff') format('woff'),
       url('../fonts/asap-v7-latin-600.ttf') format('truetype'),
       url('../fonts/asap-v7-latin-600.svg#Asap') format('svg');
}

@font-face {
  font-family: 'Asap';
  font-style: italic;
  font-weight: 600;
  src: url('../fonts/asap-v7-latin-600italic.eot');
  src: local('Asap SemiBold Italic'), local('Asap-SemiBoldItalic'),
       url('../fonts/asap-v7-latin-600italic.eot?#iefix') format('embedded-opentype'),
       url('../fonts/asap-v7-latin-600italic.woff2') format('woff2'),
       url('../fonts/asap-v7-latin-600italic.woff') format('woff'),
       url('../fonts/asap-v7-latin-600italic.ttf') format('truetype'),
       url('../fonts/asap-v7-latin-600italic.svg#Asap') format('svg');
}

@font-face {
  font-family: 'Asap';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/asap-v7-latin-700.eot');
  src: local('Asap Bold'), local('Asap-Bold'),
       url('../fonts/asap-v7-latin-700.eot?#iefix') format('embedded-opentype'),
       url('../fonts/asap-v7-latin-700.woff2') format('woff2'),
       url('../fonts/asap-v7-latin-700.woff') format('woff'),
       url('../fonts/asap-v7-latin-700.ttf') format('truetype'),
       url('../fonts/asap-v7-latin-700.svg#Asap') format('svg');
}

@font-face {
  font-family: 'Asap';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/asap-v7-latin-700italic.eot');
  src: local('Asap Bold Italic'), local('Asap-BoldItalic'),
       url('../fonts/asap-v7-latin-700italic.eot?#iefix') format('embedded-opentype'),
       url('../fonts/asap-v7-latin-700italic.woff2') format('woff2'),
       url('../fonts/asap-v7-latin-700italic.woff') format('woff'),
       url('../fonts/asap-v7-latin-700italic.ttf') format('truetype'),
       url('../fonts/asap-v7-latin-700italic.svg#Asap') format('svg');
}

/* Reset und Basis */
* {
    margin: 0;
    padding: 0;
    border: 0;
    outline: none;
}

html, body {
    width: 100%;
    height: 100%;
}

body {
    font-family: verdana, arial;
    font-size: 11px;
    color: #888888;
    margin: 0;
    padding: 0;
    background-color: #444444;
    cursor: default;
}

a {
    cursor: pointer;
}

.clear {
    clear: both;
}

.hidden {
    display: none;
}

.break {
    padding-bottom: 14px;
}

.dbreak {
    padding-bottom: 28px;
}

/* Text-Klassen */
.text {
    font-family: verdana, arial;
    font-size: 11px;
    color: #333333;
}

.text_hell {
    font-family: verdana, arial;
    font-size: 11px;
    color: #888888;
}

.aktiv {
    font-family: verdana, arial;
    font-size: 11px;
    color: #990000;
}

.ueberschrift {
    font-family: verdana, arial;
    font-weight: bold;
    font-size: 11px;
    color: #333333;
}

.copy {
    font-family: arial;
    font-size: 10px;
    color: #888888;
}

.copy_aktiv {
    font-family: arial;
    font-size: 10px;
    color: #990000;
}

.copy9 {
    font-family: arial;
    font-size: 9px;
    color: #333333;
}

.gray10 {
    font-family: verdana, arial;
    font-size: 10px;
    color: #888888;
}

.white {
    font-family: verdana, arial;
    font-size: 14px;
    color: #FFFFFF;
    font-weight: bold;
}

.hell11 {
    font-family: verdana, arial;
    font-size: 11px;
    color: #eeeeee;
}

/* Rahmen und Linien */
.line {
    font-family: arial;
    font-size: 5px;
    color: gray;
}

.rand {
    border: 1pt #DDDDDD solid;
}

/* Bilder */
.aktuelles {
    margin: 0 0 0 0;
    border: 1px solid #990000;
    background: none;
}

a.pic img {
    margin: 0 0 0 0;
    border: 1px solid #bbbbbb;
    background: none;
    transition: all 0.3s ease;
}

a.pic:hover img {
    margin: 0 0 0 0;
    border: 1px solid #990000;
    background: none;
}

/* Links */
a:link {
    font-family: verdana, arial;
    font-size: 11px;
    color: #555555;
    text-decoration: none;
}

a:visited {
    font-family: verdana, arial;
    font-size: 11px;
    color: #555555;
    text-decoration: none;
}

a:hover {
    font-family: verdana, arial;
    color: #990000;
    font-size: 11px;
    text-decoration: none;
}

a:action {
    font-family: verdana, arial;
    color: #990000;
    text-decoration: none;
}

/* Wrapper */
.wrapper {
    position: relative;
    width: 750px;
    margin: 50px auto 0 auto;
}

.wrapper * {
    font-family: "Asap", verdana, arial;
    text-decoration: none;
}

/* Page */
.page {
    width: 750px;
    min-height: 400px;
    padding: 0;
    margin: 0;
    background: #FFFFFF;
}

/* Navigation */
.nav {
    float: left;
    width: 180px;
    padding: 0 20px 0 0;
    background-color: #E9E9D1;
}

.nav ul {
    background: none;
}

.nav ul ul {
    background: none;
}

.nav li {
    list-style-type: none;
}

.nav a {
    display: block;
    height: 20px;
    line-height: 20px;
    font-size: 11px;
    color: #555555;
    padding: 5px 0;
    transition: all 0.3s ease;
}

.nav li li a {
    background: none;
    padding: 3px 0 3px 16px;
    font-size: 10px;
}

.nav a:hover,
.nav_act,
.nav_sub_act {
    color: #990000;
}

.nav_act {
    font-weight: bold;
    color: #990000;
}

.nav_logo {
    margin-top: 20px;
    padding: 20px 0;
    text-align: center;
}

.nav_logo img {
    max-width: 180px;
    height: auto;
    border: 1px solid #bbbbbb;
}

/* Content */
.content {
    position: relative;
    float: left;
    width: 550px;
    background: #ffffff;
    padding: 10px;
}

.content * {
    font-size: 11px;
    line-height: 17px;
    color: #333333;
}

.content h1 {
    font-weight: bold;
    text-transform: uppercase;
    padding: 0 0 10px 0;
    font-size: 11px;
    color: #333333;
}

.content h2 {
    font-size: 11px;
    font-weight: bold;
}

.content b {
    font-weight: bold;
    color: #333333;
}

/* Item Sections */
.item_0 {
    margin: 10px 0;
    padding: 10px;
    background-color: #f5f5f5;
    border: 1px solid #DDDDDD;
}

.item_0_txt {
    float: left;
    width: 500px;
    padding: 0 10px 0 0;
}

.item_0_txt b {
    display: block;
    margin: 8px 0 5px 0;
    font-weight: bold;
    color: #333333;
}

.item_0_img {
    float: left;
    width: 210px;
    height: 150px;
    padding: 10px 0 0 0;
    overflow: hidden;
}

.item_0_img img {
    width: 210px;
    border: 1px solid #bbbbbb;
}

.item_1 {
    margin: 10px 0;
    padding: 10px;
    background-color: #f9f9f9;
}

.item_1 h1 {
    border-bottom: 1px solid #DDDDDD;
    padding-bottom: 5px;
    margin-bottom: 10px;
}

.item_1 b {
    color: #990000;
    font-weight: bold;
}

/* Event Section */
.event {
    display: inline-block;
    width: 100%;
    margin: 10px 0;
    background-color: #ffffff;
    border: 1px solid #DDDDDD;
}

.event_inner {
    padding: 10px;
}

.event h2 {
    width: 100%;
    height: auto;
    font-weight: bold;
    padding: 0 0 10px 0;
    line-height: 20px;
    border-bottom: 1px solid #DDDDDD;
    margin-bottom: 10px;
}

.event h2 span {
    display: block;
    width: 100%;
    float: none;
    font-size: 11px;
    text-transform: uppercase;
    color: #333333;
}

.event h2 span.event_outer_title {
    float: none;
    width: 100%;
}

.event_txt {
    float: left;
    width: 500px;
    padding: 0;
}

.event_txt_inner {
    width: 100%;
    height: auto;
}

.event_txt_inner b {
    color: #990000;
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
}

.event_txt_more {
    text-decoration: underline;
    color: #990000;
}

.event_img {
    float: left;
    width: 210px;
    padding: 0;
    height: 150px;
    overflow: hidden;
}

.event_img img {
    width: 210px;
    border: 1px solid #bbbbbb;
}

/* Footer */
.footer,
.footer_fix {
    position: relative;
    height: auto;
    padding: 10px;
    background: #333333;
}

.footer div {
    position: absolute;
    right: 10px;
    top: 10px;
}

.footer *,
.footer_fix * {
    font-size: 10px;
    line-height: 20px;
    color: #888888;
    text-decoration: none;
}

.footer div a {
    margin: 0 5px;
    color: #888888;
    transition: all 0.3s ease;
}

.footer div a:hover {
    color: #990000;
}

/* Spezielle Layout-Klassen */
.main-table {
    width: 750px;
    height: auto;
    background-color: #FFFFFF;
}

.content-table {
    width: 100%;
    height: auto;
    background-color: #ffffff;
}

.sparten-bg {
    background-color: #E9E9D1;
}

.logo-container {
    text-align: center;
    padding: 20px 0;
}

.logo-img {
    max-width: 100%;
    height: auto;
    border: 1px solid #bbbbbb;
}

/* Icon Boxen */
.icon-box {
    width: 62px;
    height: 62px;
    border: 1px solid #bbbbbb;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    transition: all 0.3s ease;
}

.icon-box:hover {
    border: 1px solid #990000;
    background: #ffffff;
}

.icon-box:hover svg {
    fill: #990000;
    stroke: #990000;
}

.icon-box:hover svg path,
.icon-box:hover svg line,
.icon-box:hover svg circle,
.icon-box:hover svg rect {
    stroke: #990000;
}

.icon-box:hover svg circle[fill],
.icon-box:hover svg path[fill],
.icon-box:hover svg rect[fill] {
    fill: #990000;
}

/* Scroll Area */
.scroll-area {
    height: 380px;
    overflow-y: scroll;
    padding: 10px;
}

h3 {
    font-family: verdana, arial;
    font-weight: bold;
    font-size: 11px;
    color: #990000;
    margin-top: 15px;
    margin-bottom: 8px;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .wrapper {
        width: 100%;
        margin: 20px auto 0 auto;
        padding: 0 10px;
    }

    .page {
        width: 100%;
    }

    .nav {
        float: none;
        width: 100%;
        padding: 10px;
        margin-bottom: 10px;
    }

    .content {
        float: none;
        width: 100%;
        padding: 10px;
    }

    .item_0_txt {
        width: 100%;
        padding: 0;
    }

    .event_txt {
        width: 100%;
    }

    .footer div {
        position: static;
        margin-top: 10px;
        text-align: center;
    }
}