body {
    /* source: https://unsplash.com/photos/w5bRFnMoTbs */
    background: url("../img/background.jpg") no-repeat fixed center center;
    background-size: cover;
    font-family: Montserrat;
    font-size: 75%;
}

#manual-events-list ul, #manual-events-list ol {
    margin-bottom: 2.5em;
    list-style-position: inside;
}

#manual-events-list ul {
    list-style-type: none;
    padding: 0;
    text-align: left;
    margin-top: 10px;
    margin-bottom: 10px;
}
#manual-events-list ul li {
    height: 23px;
}

#manual-events-list ul li .triggerEventBtn {
    border-radius: 50%;
    display: inline-block;
    background-color: #dcdcdc;
    height: 16px;
    width: 16px;
    border: 1px solid #d3d3d3;
    text-align: center;
    line-height: 20px;
    margin-right: 8px;
    padding: 0px 0px 3px 3px;
    -webkit-box-shadow: 3px 2px 8px 0px rgba(50, 50, 50, 0.169);
    -moz-box-shadow:    3px 2px 8px 0px rgba(50, 50, 50, 0.169);
    box-shadow:         3px 2px 8px 0px rgba(50, 50, 50, 0.169);
}
#manual-events-list ul li .triggerEventBtn:hover {
    background-color: #ccc;
    border: 1px solid #bababa;
    cursor: pointer;
 }


#manual-events-list ol {
    list-style: decimal-leading-zero outside;
}

#manual-events-list li {
    margin-bottom: 5px;
}

/* Tabs mit radio-Buttons */
.tabbed figure {
    display: block;
    margin-left: 0;
    border-bottom: 1px solid silver;
    clear: both;
}

.tabbed > input,
.tabbed figure > div { display: none; }

.tabbed figure>div {
    padding-left: 12px;
    width: 100%;
    border: 1px solid silver;
    background: #fff;
    line-height: 1.5em;
    letter-spacing: 0.3px;
    color: #444;
}
#tab1:checked ~ figure .tab1,
#tab2:checked ~ figure .tab2,
#tab3:checked ~ figure .tab3 { display: block; }

nav label {
    float: left;
    padding: 15px 15px;
    border-top: 1px solid silver;
    border-right: 1px solid silver;
    background: #142f5e;
    color: #eee;
}

nav label:nth-child(1) { border-left: 1px solid silver; }
nav label:hover { background: hsl(210,50%,40%); }
nav label:active { background: #ffffff; }

#tab1:checked ~ nav label[for="tab1"],
#tab2:checked ~ nav label[for="tab2"],
#tab3:checked ~ nav label[for="tab3"] {
    background: white;
    color: #111;
    position: relative;
    border-bottom: none;
}

#tab1:checked ~ nav label[for="tab1"]:after,
#tab2:checked ~ nav label[for="tab2"]:after,
#tab3:checked ~ nav label[for="tab3"]:after {
    content: "";
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
    background: white;
    left: 0;
    bottom: -1px;
}

.logo {
    width: 190px;
    height: 60px;
    background: url("../img/logo-190x60-plus-padding-inverted.png") no-repeat;
    margin: 30px auto;
    background-size: contain;
}

.content-block {
    width: 80%;
    max-width: 600px;
    min-width: 400px;
    padding: 20px;
    background: #fff;
    border-radius: 5px;
    margin: 0 auto;
    text-align: center;
}

.content-block-emoji {
    height: 40px;
}

.content-block h1 {
    text-align: center;
    color: #000;
    font-size: 18px;
    margin-top: 0;
    margin-bottom: 20px;
}

.content-block h3 {
    text-align: center;
    color: gray;
    font-weight: normal;
}

a, a:link, a:visited, a:hover, a:active {
    color: gray;
}
.sample-links-container {
    width: 100%;
    display: table;
    padding-top: 15px;
}
.sample-links-container > * {
    width: 33%;
    text-align: center;
    display: table-cell;
}

.sample-links-container > *:hover {
    color: #00a818;
}
::-webkit-scrollbar {
    width: 12px;
}

/* Track */
::-webkit-scrollbar-track {
    background: rgba(0,0,0,0);
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #ccc;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #ddd;
}