/*Farben*/
/*NEU*/
/* Schriftfarbe: #000F7E > #FFFF00*/
/* Background:  #00865C > #bf00d8*/
/* Background Bild: static/images/hintergrund.png */
/* Anmeldung:  #8E0042 (#7bff88)   */
/* /static/icons/reload.png Farbe: wie Schriftfarbe */

p {
    margin: 0;
    padding: 0;
}

a {
    margin: 0;
    padding: 0;
/*    text-decoration: none;*/
}
a.link {
    color: #FFFF00;   
/*    text-decoration: none; */
}
a {
    color: #FFFF00;   
/*    text-decoration: none; */
}
a.visited {
    color: #FFFF00;
}

div.h1 {
    color: #FFFF00;
    font-size: 8rem;
    text-align: center;
    margin: 0;
    padding: 0;
    clear: both;  
    font-weight: 700;
/*    margin-bottom: 2rem;*/
}
div.h2 {
    font-size: 4rem;
    color: #FFFF00;
    clear: both;
}
div.h3 {
    font-size: 2rem; 
    color: #FFFF00;
    clear: both;
/*    margin-top: 3rem;*/
}
div.h4 {
    font-size: 1.3rem;
    color: #FFFF00;
    clear: both;
}
div.h4 p {
    padding-top: .5rem;
    padding-bottom: .5rem;

}
div.input {
    font-size: 1.3rem;
    clear: both;
/*    margin-top: 4rem;*/
}
/*Für DIV's horizontal gemittet*/
/*Labels*/
.music_label {
    font-size: 1rem;
    display: inline-block;
/*    height: 5rem;*/
}
.light {
    font-weight: 100;
}
.regular {
    font-weight: 400;
}
.bold {
    font-weight: 700;
}
.center {
    margin: auto;
    width: 60%;
    text-align: center;

}
.right {
    float: right;
    clear: both;
    text-align: right;    
    margin-right: 4rem;
}
.left {
    clear: both;
    margin-left: 4rem;
}
body {
    font-family: 'Antonio', 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #bf00d8;
}
.lineup_entry {
    /* margin: auto; */
    /* margin: 0;
    padding: 0;
    line-height: 2.5rem; */
}
#lineup_title {
  margin-bottom: 2rem;
}
.button {
    display: block;
    cursor: pointer;
    margin-top: 4rem;
}
#goto_anmeldung {
    color: #FFFF00;
}

div.in_eigener_sache {
/*    background-color: #bf00d8;*/
    font-weight: bold;
    font-size: 170%;
    border: 4px solid red;
    width: 85%;
    padding: 5px;
}
#logo {
    margin: 0 auto;
    margin-left: auto;
    margin-right: auto;    
}
#logo a {
    text-decoration: none;
}
#logo a.link {
    text-decoration: none;
}
#logo img {
    width: 150px;
}


/*LOGIN*/
#login {
    margin: 40px 0px 0px 0px;
    /*padding:  0px 0px 0px 30px;*/
    /*margin-left: 30px;*/
}
#login h1 {
    color: #FFFF00;
    padding: 0px 0px 0px 30px;
}
#login.edit {
    /*position: relative;*/
    /*position: absolute;*/
    top: 20px;
    background-color: #F8F9FB;
    clear: both;
    line-height: 1.7em;
    padding: 0px 0px 0px 30px;
    /*overflow: auto;*/
    margin-bottom: 10px;
}
#login div.entry .label {
    float: left;
    clear: left;
    width: 250px;
    width: 100px;
}
#login div.entry input {
    width: 250px;
}
#logged_in_user {
    position: absolute;
    right: 20px;
    top: 10px;
    /*display: block;*/
    /*float: right;*/
    /*margin-right: 20px;*/
}
/*LOGIN*/

#balken {
    display: none;
    padding: 8px 15px 8px 15px;
    background-color: #ebe8e1;
    color: #5b6080;
    text-align: left;
    font-weight: bold;
    font-size: 200%;
}
#text_body {
/*    margin-top: 8rem;*/
/*    text-align: left;*/
    /*margin: 20px 15px auto 15px;*/
/*    font-size: 110%;*/
    /*padding: 0px 0px 0px 10px;*/
    /*font-size: 120%;*/
}
#text_body input.text_input {
    color: #bf00d8;
    margin-right: 4px;
    margin-top: 10px;
    font-family: 'Antonio', sans-serif;
    font-size: 1.5rem;
    background-color: #ffff03;  
    height: 3rem;
    padding-left: .5rem;
    margin-right: .9rem;
    width: 16.5rem;
    text-align: left;
}
#begleitung_button {
    display: inline-block;
    color: #bf00d8;
    margin-right: 4px;
    margin-top: 10px;
    font-family: 'Antonio', sans-serif;
    font-size: 1.5rem;
    background-color: #ffff03;  
    height: 38px;
    padding: 10px 0px 0px .5rem;
    margin-right: .9rem;
    width: 16rem;
    cursor: pointer;
}
#begleitung_button {
    background-image: url("/static/images/icons/arrow_down.png");
    background-repeat: no-repeat;
    background-size: .7em;
    background-position: 235px 23px;
/*    padding-bottom: .3rem;*/
}
#begleitung_pulldown {
    position: relative;
    margin-top: 12px;
    display: block;
    background-color: #ffff03;;
    width: 5rem;
    text-align: center;
    float: right;
    z-index: 1000;
    display: none;

}
#begleitung_number {
    margin-left: 6.6rem;
}

#guestlist_table {
    font-family: sans-serif, "Helvetica Neue", "Lucida Grande", Arial;
    font-size: 120%;
    color: #FFFF00;
}
#guestlist_table th, 
#guestlist_table td {
    padding: 5px;
    margin: 0;
    /*padding-left: 10px;*/
    /*padding-right: 10px;*/
    font-size: 80%;
}
.message.info {
    display: block;
    background-color: #f4b495;
    font-size: 130%;
    font-weight: bold;
    border-radius: 3px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    left: 0px;
}

.message.error {
    display: block;
    background-color: #f4b495;
    font-size: 130%;
    font-weight: 700;
    border-radius: 5px;
    left: 0px;
}




/*CONTENT*/
/*KANN VERMUTLICH HIER GELÖSCHT WERDEN*/
#content_wrapper {
    background-image: url("https://xtratec.ch/static/images/hintergrund.png");
    background-repeat: repeat-y;

    background-size: contain;

    width: 840px;

    height: 2000px;
    margin: 0 auto;
/*    overflow: hiden;*/
}

/*Start Footer*/
#footer {
/*    margin-top: 10rem*/
}


/*MENU*/
/*Start Meldungen*/
span.error {
    background-color: #D7816D;
}

span.info {
    background-color: #D7CB00;
}
/*Stop Meldungen*/

#wrapper {
    overflow: auto;
}

/*Navigation*/
#navigation {
    /*width: 45%;*/
    height: 90px;
    /*margin-bottom: 10px;*/
    /*margin: 20px 20px 20px 20px;*/
    margin: 0px;
    padding: 20px 30px 10px 30px;
    background-color: #e1e1e1;
}




/*Messages*/
.message {
    position: absolute;
    top: 50px;
    left: 330px;
    min-width: 100px;
    max-width: 700px;
    padding: 20px;
    z-index: 100;
    word-wrap: break-word;
    /*font-size: 90%;*/
    line-height: 1.5em;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    display: none;
    color: black;
}



#captcha_error {
    color: red;
    font-size: 140%;
    font-weight: bold;
    display: none;
}
#turing {
    vertical-align: top;
    margin-top: 7px;
}
#turing_captcha {
    position: relative;
    top: 9px;
    overflow: hidden;
    float: right;
    right: 65px;
}
#turing_captcha_img {
    height: 48px;
    width: 217px;
}
#reload_captcha_img {
    height: 40px;
    width: 40px;
    cursor: pointer;

}

/*ENDE BK LISTE*/
/*Fehlertext*/
div.validation_error {
    color: black;
    position: absolute;
    font-size: 1rem;
    background: #FFA9A9;
/*    border-radius: .4em;*/
    padding: 4px 8px 4px 8px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    z-index: 1000;
}
/*Pfeil*/
div.validation_error:after { content: '';
     position: absolute;
     left: 0;
     top: 50%;
     width: 0;
     height: 0;
     border: 4px solid transparent;
     border-right-color: #FFA9A9;
     border-left: 0;
     margin-top: 6px;
     margin-left: -4px;
}
/*input-Felder*/
.validation_error {
    background-color: #FFA9A9;
}
#validation_error {
    position: fixed;
    top: 8px;
    right: 320px;
    padding: 4px;
    background-color: #FFA9A9;
    font-weight: bold;
    font-size: 110%;
    /*display: none;*/
}

#validation_error ul {
    margin: 0;
    margin-left: 1em;
    padding: 0;
}

#guestlist {
    background-color: #bf00d8;
    color: #FFFF00;
}
.save_the_date {
    display: block;
    width: 100px;
    margin: auto;
    /* margin-top: 5px; */
    /* margin-bottom: 5px; */
}
.vertical_space {
    display: block;
    margin-top: 5px;
    margin-bottom: 5px;
}

/*MOBILE*/
/*Normal Screen*/
/*Device Width < max-width*/
/*@media (max-width: 450px) {*/
@media (max-width: 850px) {
/*@media (max-width: 800px) {*/
    body {
/*        font-size: 80%;*/
        font-size: 62.5%;
    }
    #content_wrapper {
    /*    border: 3px solid black;*/
        background-image: url("/static/images/hintergrund.png");
        background-repeat: repeat-y;

    /*    damit horizontal der ganze Inhalt des Bildes im div*/
        background-size: contain;

    /*    das ist nicht nötig?*/
    /*    background-position: center;*/
        
    /*    darf nicht prozentual sein*/
        width: 22rem;

    /*    damit unten kein Rand entsteht*/
        height: 2000px;
    /*    height: 110vh;*/
        margin: 0 auto;
        overflow: hiden;
    }
    #text_body {
/*        margin-top: 6rem;*/
    }
    div.h1 {
        font-size: 6rem;
    }
    div.h2 {
        font-size: 3rem;
    }
    div.h3 {
        font-size: 1.5rem;
        margin-top: 0rem;
    }
    div.h4 {
        font-size: 1.3rem;
    }
    .right {
        margin-right: 1.4rem;
    }
    .left {
        margin-left: 1.4rem;
    }
    .center {
/*        text-align: left;*/
        width: 20rem;
    }
    .music_label {
        font-size: .1rem;
        display: none;
/*        display: inline-block;*/
/*        height: 3rem;*/
   }
    #index {
        padding: 0;
    }
    .input {
        margin-left: 3rem;
    }

    .lineup_entry {
        margin: 0;
        padding: 0;
/*        line-height: 3.5rem;*/
        line-height: 52px;

    }

    #turing_captcha {
        right: 52px;
    }
    #reload_captcha_img {
        width: 30px;
        height: 30px;
        margin-right: 20px;
    }
    .button {
/*        margin-top: 6rem;*/
        margin-left: 20px;
/*        text-decoration: underline;*/
    }
    #absenden {
        color: #FFFF00;
        margin-left: 0rem;
        text-align: left;
    }
/*    Arrow Down*/
    #begleitung_button {
        background-position: bottom 10px right 10px;
    }
    #lineup_title {
        margin-bottom: 0px;
/*      margin-bottom: 1rem;*/
    }

    .message.error {
        font-size: 1rem;
    }

}