/*-------------------- MAIN ELEMENTS ---------------------------------------*/

@import url('https://fonts.googleapis.com/css?family=Montserrat|Open+Sans');

html {
        background: grey;
        font-family: 'Montserrat', Arial, Helvetica, sans-serif;
}

body {
        margin: 0em auto;
        max-width: 70em;
        position: relative;
        top: 4.2em;
        background: white;
        color: black;
        text-decoration: none;
}

a {
        color: black;
        text-decoration: none;
}

a:visited {
        color: #808080;
}

a:focus,
a:hover,
a:active {
        color: red;
}

/*-------------------- MAIN FOOTER ------------------------------------------*/

main {
        display: block;   /* für IE */
}

footer {
        margin-left: 2.0em;
        padding-bottom: 2.0em;
}

@media (max-width: 30em) {

         footer {
                 margin-left: 1.0em;
         }

}

/*-------------------- NAVIGATION -------------------------------------------*/

nav {
        background: white;
        position: fixed;
        top: 0em;
        overflow: hidden;
        width: 70em;
}

nav ul {
        display: flex;
        flex-direction: row;
        list-style: none;
        margin: 0.5em 0.5em 0.3em 0.0em;
        padding-left: 1.6em;
}

nav li {
       margin-right: 1.6em;
}

nav a {
        color: #000000;
        text-decoration: none;
        font-size: 2.0em;
        transition: all 0.15s ease-in;
}

nav a:focus,
nav a:hover,
nav a:active {
        color: red;
}

/* Tablet */
@media (max-width: 45em) {

         nav ul {
                 margin: 0.5em 0em 0.3em 0.5em;
         }

         nav li {
               font-size: 0.7em;
               margin: 1.0em 1.0em 0.5em 0em;
         }

}

/* Mobilgeräte */
@media (max-width: 30em) {

         nav ul {
                 padding-left: 0.7em;
         }

         nav li {
               font-size: 0.5em;
         }

}

/*-------------------- HEADINGS ---------------------------------------------*/

.h2 {
        font-size: 2.0em;
        color: red;
        margin: 0.5em 0em 0.3em 0em;
}

.h3 {
        font-size: 1.5em;
        color: red;
        margin: 0.2em 0em 0.4em 0em;
}

.h4 {
        font-size: 1.2em;
        color: black;
        margin: 0.7em 0em 0.4em 0em;
}

p {
        font-family: 'Open+Sans', Arial, Helvetica, sans-serif;
        font-size: 1.0em;
        color: black;
        margin: 0em 0em 0.2em 0em;
}

@media (max-width: 30em) {

         .h2 {
                 font-size: 1.8em;
         }

         .h3 {
                 font-size: 1.5em;
         }

         .h4 {
                 font-size: 1.2em;
         }

         p {
                 font-size: 0.8em;
         }

}

/*-------------------- HEADER -----------------------------------------------*/

header {
        display: block;   /* für IE */
        font-size: 1.5em;
        margin-top: -0.2em;
}

/* logo  */
.headlogo0 {
        position: relativ;
        margin-left: 1.5em;
        padding-top: 1.4em;
}
/* text near logo  */
.headtext0 {
        font-size: 2.8em;
        position: absolute;
        text-align: left;
        top: 17%;
        left: 2.8em;
}
/* text below  */
.headtext0ext {
        margin: 0.0em 0em 1.0em 30.0em;
        font-size: 0.5em;
}
/* logo  */
.headspace {
        position: relativ;
        padding-top: 0.8em;
}
/* upper left text in header image, Ergebnis letztes Kegeln  */
.headtext1 {
        position: absolute;
        text-align: left;
        top: 0%;
        margin-left: 1.5em;
}
/* upper right text in header image, nächstes Kegeln */
.headtext2 {
        position: absolute;
        text-align: right;
        top: 17%;
        right: 2.5%;
}

/* lower left text in header image, Link Mitgliederbereich  */
.headtext3 {
        position: absolute;
        text-align: left;
        bottom: 40%;
        margin-left: 1.5em;
}

/* lower left text in header image, Link Mitgliederbereich  */
.headtext4 {
        position: absolute;
        text-align: left;
        top: 95%;
        margin-left: 0em;
        color: red;
}

/* small head text  */
.headtextsmall {
        font-size: 0.6em;
        margin: 0em 0em -2.1em;
}

/* big head text  */
.headtextbig {
        font-size: 1.0em;
        margin: 0em 0em -0.6em;
}
/* logo Intimbereich */
.headlogointim {
        position: relativ;
        margin-left: 1.5em;
        padding-top: 7.1em;
}
/* header Intimbereich  */
.headtextintim {
        font-size: 2.8em;
        position: absolute;
        text-align: left;
        top: 67%;
        left: 2.8em;
}

@media (max-width: 60em) {

         /* logo  */
         .headlogo0 {
                 padding-top: 1.1em;
         }

         /* text near logo  */
         .headtext0 {
                 font-size: 2.1em;
                 left: 2.2em;
         }

         /* text below  */
         .headtext0ext {
                 margin: -1.7em 0em 1.0em 20.0em;
         }

         /* logo Intimbereich */
         .headlogointim {
                 padding-top: 3.1em;
         }

         /* Header Intimbereich  */
         .headtextintim {
                 font-size: 2.1em;
                 top: 53%;
                 left: 2.2em;
         }

         /* lower left text in header image, Link Mitgliederbereich  */
         .headtext3 {
                 visibility: hidden;
         }

}

@media (max-width: 45em) {

         /* logo  */
         .headlogo0 {
                 padding-top: 0.9em;
         }

         /* text near logo  */
         .headtext0 {
                 font-size: 1.6em;
                 left: 2.4em;
         }

         /* text below  */
         .headtext0ext {
                 margin: -2.1em 0em 1.0em 13.0em;
         }

         /* logo Intimbereich */
         .headlogointim {
                 padding-top: 3.1em;
         }

         /* Header Intimbereich  */
         .headtextintim {
                 font-size: 1.6em;
                 top: 55%;
                 left: 2.6em;
         }

}

@media (max-width: 30em) {

         /* Header */
         header {
                  font-size: 1.3em;
                  margin-top: -1.0em;
                  padding-bottom: 12.0em;
         }

         /* Header Intimbereich  */
         headerintim {
                  padding-bottom: 5.0em;
         }

         /* logo  */
         .headlogo0 {
                 margin-left: 1.0em;
         }

         /* text near logo  */
        .headtext0 {
                 font-size: 1.4em;
                 top: 40%;
                 left: 3.2em;
        }

         /* text below  */
         .headtext0ext {
                 margin: -3.0em 0em 1.0em 18.0em;
                 font-size: 0.4em;
         }

         /* upper left text in header image, Ergebnis letztes Kegeln  */
         .headtext1 {
                 top: 110%;
                 margin-left: 1.0em;
         }

         /* upper right text in header image, nächstes Kegeln */
         .headtext2 {
                 top: 485%;
                 margin-right: 0.5em;
         }

         /* logo Intimbereich */
         .headlogointim {
                 margin-left: 0.5em;
                 margin-top: -9.8em;
                 padding-top: 5.1em;
         }

         /* Header Intimbereich  */
         .headtextintim {
                 font-size: 1.4em;
                 margin-top: -3.0em;
                 left: 2.7em;
         }

}

/*-------------------- SCROLLEN ---------------------------------------------*/

.scroll {
        text-align: center;
        margin: 2.0em 0em -5.6em;
}

@media (max-width: 30em) {

        .scroll {
                 display: none;
        }

}

.scrollpos {
        position: relative;
        top: -3.0em;
}

.scrolllink {
        background: white;
        color: black;
        font-size: 1.7em;
        text-decoration: none;
        transition: all 0.1s ease-in;
        padding: 0em 0.6em;
}

/*-------------------- SECTIONS ---------------------------------------------*/

section {
        display: flex;
        flex-flow: row wrap;
        margin-left: 2.0em;
}

.sectiontitle {
        font-size: 3.0em;
        text-align: left;
        color: red;
        width: 100%;
        margin: 0.8em 0em 0.8em;
}

.sectiontitleintim {
        font-size: 3.0em;
        text-align: left;
        color: red;
        width: 100%;
        margin: 0.8em 0em 0.2em;
}

@media (max-width: 30em) {

        section {
                 margin-left: 1.0em;
        }

        .sectiontitle {
                 font-size: 2.4em;
                 margin: 0.5em 0em 0.8em;
        }

        .sectiontitleintim {
                 font-size: 2.4em;
                 margin: 0.5em 0em 0.8em;
        }

}

/*-------------------- ARTICLES ---------------------------------------------*/

article {
7        margin: 0em 2.0em 4.0em 0em;
}

.tour {
        width: 26em;
}

@media (max-width: 30em) {

        article {
                 margin: 0em 0em 2.0em 0em;
        }

}

/*-------------------- IMAGES -----------------------------------------------*/

/* image with flexible size  */
.imgflex {
        width: 100%;
        height: auto;
}

/* container holding image and text */
.imgcontainer {
        position: relative;
        text-align: left;
        color: red;
}

/* image in header of table */
.imgtable {
        width: 100%;
        height: 6.0em;
}

/*-------------------- COMMON TABLE SETTINGS --------------------------------*/

/* text in table image  */
.tabletext1 {
        position: absolute;
        text-align: left;
        top: 5%;
        left: 3.5%;
        font-size: 1.8em;
        color: white;
}

table,
th,
td {
        font-family: 'Open+Sans', Arial, Helvetica, sans-serif;
        font-size: 0.9em;
        border-collapse: collapse;
}

th,
caption {
        background-color: #666;
        color: #fff;
        border: 1px solid #666;
}

td {
        background-image: linear-gradient(#f9f9f9, #e3e3e3);
        vertical-align: top;
        text-align: right;
}

caption {
        font-size: 1.2em;
        border-radius: 0.5em 0.5em 0em 0em;
        padding: 0.5em 0em 0em 0em;
}

tfoot {
        font-weight: bold;
}

/*-------------------- DATE LISTS -------------------------------------------*/

table.dates,
td.dates {
        padding: 0.8em 1.2em;
}

table.dates  {
        margin: 0em 2.0em 0em 0em;
}

#dateslist td {
        padding: 0.8em 1.2em;
}

#dateslist td:nth-of-type(1) {
        width: 1.0em;
}

#dateslist td:nth-of-type(2) {
        width: 7.0em;
        text-align: left;
}

#dateslist td:nth-of-type(3) {
        max-width: 28em;
        text-align: left;
}

#dateslist td:nth-of-type(4) {
        display:none;
}

/*-------------------- RESULT LISTS ---------------------------------------*/

table.results {
        margin: 0em 3.0em 2.5em 0em;
        border: 1px solid #666;
}

#resultlistletztes td, th,
#resultlist td, th,
#ranglist td, th {
        padding: 0.6em 1.1em;
        border-right: 1px solid #666;
}

#resultlistletztes th:nth-of-type(2),
                   td:nth-of-type(2)  {
        text-align: left;
        padding-right: 5.0em;
}

#resultlist td:nth-of-type(2),
            th:nth-of-type(2),
#ranglist td:nth-of-type(2),
          th:nth-of-type(2)  {
        text-align: left;
}

#records {
        text-align: left;
}

/*-------------------- DOCUMENT LISTS -------------------------------------------*/

table.documents,
td.documents {
        padding: 0.8em 1.2em;
}

table.documents  {
        font-size: 1.1em;
        margin: 0em 2.0em 0em 0em;
}

#doclist td,
#doclistberichte td,
#docliststatistik td,
#doclistevents td {
        padding: 0.5em 0.8em;
}

#doclist td:nth-of-type(1),
#doclistberichte td:nth-of-type(1),
#docliststatistik td:nth-of-type(1),
#doclistevents td:nth-of-type(1) {
        width: 1.0em;
}

#doclist td:nth-of-type(2),
#doclistberichte td:nth-of-type(2),
#docliststatistik td:nth-of-type(2),
#doclistevents td:nth-of-type(2) {
        width: 13.5em;
        text-align: left;
        vertical-align: middle;
}
.doclistsub {
        font-size:0.6em;
        margin-top:0.5em;
}

@media (max-width: 30em) {

         #resultlistletztes td, th,
         #resultlist td, th {
                 padding: 0.8em 1.1em;
         }

         #ranglist td, th {
                 padding: 0.8em 0.7em;
         }

         #resultlist        th:nth-of-type(4),
                            td:nth-of-type(4),
                            th:nth-of-type(5),
                            td:nth-of-type(5),
                            th:nth-of-type(6),
                            td:nth-of-type(6),
                            th:nth-of-type(7),
                            td:nth-of-type(7) {
                 padding: 0.8em 0.5em;
         }

         #ranglist          th:nth-of-type(4),
                            td:nth-of-type(4),
                            th:nth-of-type(5),
                            td:nth-of-type(5),
                            th:nth-of-type(6),
                            td:nth-of-type(6),
                            th:nth-of-type(7),
                            td:nth-of-type(7) {
                 padding: 0.8em 0.5em;
         }

         table.documents  {
                 font-size: 1.0em;
         }

         #doclist td:nth-of-type(2),
         #doclistberichte td:nth-of-type(2),
         #docliststatistik td:nth-of-type(2),
         #doclistevents td:nth-of-type(2) {
                 width: 15.8em;
         }

}