html {
    background-color:#000;
    font-size:30px;
    font-family:"DejaVu Sans";
}

body {
    margin:0px;
    pading:0px;
    font-size:20px;
}

a, a:active, a:focus {
    outline: none;
}

td {
    width:auto;
    text-align:left;
}

/***********************************************************************************/
/*
table {
    font-size:20px;
}
*/
.table-date {
    font-weight:bold;
    color:#fff;
    padding: 0px 8px 0px 16px;
}

.table-location {
    font-weight:bold;
    padding: 0px 16px 0px 8px;
}

.table-description {
    padding: 0px 16px 8px 8px;
}

/***********************************************************************************/

.container {
    box-shadow: 0px 1px  rgba(200,96,32,0.6);
/*    min-height:200px;*/
    margin: 0px;
    padding: 74px 0px 4px 0px;
/*    font-size:20px;*/
}

.container h1 {
    font-size:32px;
    margin: 16px 0px;
    padding: 0px 0px 0px 8px;
}

.container p,a {
    margin: 0px;
    padding: 0px 0px 0px 16px;
    outline: none;
}
div.scroll-container {
    background-color: #333;
    overflow: auto;
    white-space: nowrap;
    padding: 10px;
}

    div.scroll-container img {
        padding: 10px;
    }

img {
    pointer-events: none;
}

/***********************************************************************************/

.footer {
    background-color:#000;
    position:fixed;
    z-index:2;
    bottom:0;
    width:100%;
    box-shadow:0px -1px  #C86020;
    font-size:12px;
    text-align:center;
    margin: auto;
    padding: 4px 4px 4px 4px;
}

.footer a,
.footer p {
    padding: 4px 4px 4px 4px;
}

/***********************************************************************************/

.topbar {
    background-color:#000;
    position:fixed;
    width:100%;
    z-index:2;
    top:0;
    width:100%;
    overflow:hidden;
    font-size:30px;
    box-shadow: 0px 3px  rgba(200,96,32,0.6), 0px 2px #c86020;
}

.topbar .topbar-logo {
    float:left;
    padding:16px 16px;
    width:auto;
    text-decoration:none;
    margin: 0px 0px 0px 64px;
}


.topbar .topbar-logo img {
    position:absolute;
    left:0;
    top:0;
    padding:0px;
    width:auto;
    text-decoration:none;
}

.topbar .topbar-label {
    float:right;
    padding:16px 12px;
    width:auto;
    text-decoration:none;
    color:#fff;
}

.topbar .topbar-item {
    float:right;
    padding:16px 12px;
    width:auto;
    text-decoration:none;
}

.topbar .topbar-logo:hover {
    background-color:#C86020;
}

.topbar .topbar-item:hover {
    background-color:#C86020;
}

.topbar .topbar-item:active {
    color:#FFF;
}

/***********************************************************************************/

.sidebar {
    position:fixed;
    top:0;
    left:0;  
    width:60%;
    height:auto;
    background-color: #222;
    overflow:auto;
    z-index:3;
    animation:animate-opacity 0.4s;
}

.sidebar .sidebar-item {
    width:auto;
    display:block;
    padding:8px 16px;
    text-decoration:none;
}

.sidebar .sidebar-item:hover {
    background-color:#C86020;
}

.sidebar .sidebar-item:active {
    color:#FFF;
}

.sidebar-hidelarge {
    display:none;
}

/*****************************  Colapsible buttons ******************/

.collapsible {
  background-color: #742709;
  color: #FFE8E8;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  font-size: 18px;
}

.active, .collapsible:hover {
    background-color: #E84F13;
}

.content {
    padding: 4px 2px;
    display: none;
    overflow: hidden;
    background-color: #FFE8E8;
} 

.content a {
    font-size:14px;
    color: #EF8040;
    margin: 4px 0px 0px 2px;
}

.content p {
    font-size:14px;
    color: #EF8040;
    margin: 12px 0px 0px 2px;
}

.content a:active {
    outline: none;
}

/***********************************************************************************/

.col_lukas {
    color:#EF8040;
}

/***********************************************************************************/

@keyframes animate-opacity {
    from {opacity:0}
    to   {opacity:1}
}


/*********** definitions for large screen *************/
@media (max-width:800px) {
    table {
	font-size:14px;
    }
    .only-on-smallscreen {
	display:block;
    }
    .only-on-largescreen {
	display:none;
    }
    .container {
	font-size:14px;
    }
}

/*********** definitions for large screen *************/
@media (min-width:801px) {
    table {
	font-size:20px;
    }
    .only-on-smallscreen {
	display:none;
    }
    .only-on-largescreen {
	display:block;
    }
    .container {
	font-size:20px;
    }
}