@charset 'utf-8';
@import url(reset.css);
@import url(defaults.css);

/*

    Projekt: MyMembership zentrada.de
    Datei: screen.css
    Author: Carolin Schwank

    2019-16763: Zentrada-Network Upgrade Mobile

*/


/* ----------------------------------------------------- Page layout */

/* Basics */

html, body { height: 98%; }

body {
    background: url(../images/bgPage.png) repeat-x 0 -50px #D2CEC7;
    font-family: Arial, Helvetica, 'sans serif';
    font-size: 14px;
    text-align: center;
}

/* a { text-decoration: underline; outline: none } */
a { outline: none; }
a:link { color: #000; }
a:visited { color: #666  }
a:hover { color: #999 }
a:active { color: #999 }
strong { font-weight: bold; color: #333; }
em {  }
p { line-height: 20px;margin: 0 0 15px 0; }
#content ul { line-height: 20px;margin: 0 0 15px 0; }
.indent { padding-left: 20px; }
.clear { clear: both; }

#wrapper {
    background-color: #FFF;
    min-height: 98%;
    height: auto !important;
    height: 98%;
    margin: 0 auto -120px;
    text-align: left;
    width: 980px;
}

/* Headerbereich oberhalb der Hauptnavigation */

/*
#header         { background: url(../images/headerNetworkGroup.gif) no-repeat 740px bottom;height: 101px;position: relative;}
*/

#header {
/*    background: url(../images/networkGroup.png) no-repeat right 22px; */
    position: relative;
    width: 980px;
}

/*
#logo           { padding: 0 0 0 36px;}
*/
#logo {
    float: left;
    position: relative;
    width: 241px;
    height: 90px;
}
/*
#topNav         { position: absolute;top: 4px;left: 260px; }
*/
#header #topNav {
    float: right;
    width: 720px;
    height: 85px;
}

/*
#topNav li      { display: inline;padding: 0 6px;}
#topNav a       { color: #837F77;font-size: 11px;font-weight: bold; }
#topNav a:hover { color: #7B7976; }
* */

#header ul#utilityNav {
    position: relative;
    float: left;
    padding-top: 3px;
    text-align: right;
    width: 380px;
}

#header ul#utilityNav li {
    display: inline;
    font-size: 11px;
}

#header ul#utilityNav li.info:after, #header ul#utilityNav li.kontakt:after {
    content: " |"
}

#header ul#utilityNav a {
    color:#333;
    font-size: 11px;
    line-height: 16px;
    text-decoration: underline;
}

#header ul#utilityNav a:hover {
    color:#E10A80;
}

#header ul#portalNav {
    position: relative;
    float: right;
    padding: 5px 0 5px 0;
}

#header ul#portalNav li {
    display: inline;
}

#header ul#portalNav a {
    color:#333;
    display: block;
    float: left;
    font-size: 11px;
    font-weight: bold;
    line-height: 16px;
    margin-left: 10px;
    padding-left: 17px;
    text-decoration: none;
}

#header ul#portalNav a:hover {
    color:#E10A80;
    text-decoration: none;
}

#header ul#portalNav li.de a { background: url(../images/iconDE.gif) no-repeat 0 0; }
#header ul#portalNav li.uk a { background: url(../images/iconUK.gif) no-repeat 0 0; }
#header ul#portalNav li.es a { background: url(../images/iconES.gif) no-repeat 0 0; }
#header ul#portalNav li.pl a { background: url(../images/iconPL.gif) no-repeat 0 0; }
#header ul#portalNav li.hu a { background: url(../images/iconHU.gif) no-repeat 0 0; }
#header ul#portalNav li.fr a { background: url(../images/iconFR.gif) no-repeat 0 0; }
#header ul#portalNav li.nl a { background: url(../images/iconNL.gif) no-repeat 0 0; }
#header ul#portalNav li.it a { background: url(../images/iconIT.gif) no-repeat 0 0; }
#header ul#portalNav li.eu a { background: url(../images/iconEU.gif) no-repeat 0 0; }

#yellowStripe {
    background: url(../images/bgYellow.gif) repeat-x 0 0;
    height: 7px;
}

#logoTS {
    position: absolute;
    left: 855px;
    top: 9px;
}



/* Hauptnavigation */

/*
#mainNav                       { background: url(../images/bgTopClosure.gif) repeat-x left top; height: 45px;padding-top:14px; }
#mainNav ul                    { background: url(../images/bgMainNav.gif) repeat-x left top;height: 31px; }
#mainNav ul li                 { background: url(../images/mainNavTrenner.gif) no-repeat right bottom transparent;display: block;float:left;line-height: 29px;font-size: 12px;font-weight: bold; }
#mainNav ul li span            { background: url(../images/mainNavTrenner.gif) no-repeat right bottom transparent;display: block;padding: 0 16px; }
#mainNav ul li a               { background: url(../images/bgMainNav.gif) repeat-x -10px 0;color: #585652;display: block;text-decoration: none;text-shadow: #FFF 1px 1px; }
#mainNav ul li a.first         { background: url(../images/bgMainNav.gif) repeat-x 0 0;  }
#mainNav ul li a:hover         { color: #000; }
#mainNav ul li a.first.current { background: url(../images/bgMainNavCurrent.gif) no-repeat 0 0 transparent;display:block; }
#mainNav ul li a.current       { background: url(../images/bgMainNavCurrent.gif) no-repeat -10px 0 transparent;color:#000;display:block; }
*/


#mainNav {
    background-color: #f3eee4;
    padding-top: 6px;
    position: relative;
}

#mainNav ul {
    background: url(../images/bgMainNav.gif) repeat-x left bottom #ece6dc;
    border-top: 1px solid #d5cec1;
}

#mainNav ul li {
    display: inline;
}

#mainNav ul a {
    border-right: 1px solid #b7b3ac;
    color: #585652;
    display: block;
    float:left;
    font-size: 11px;
    font-weight: bold;
    padding: 0 15px;
    text-decoration: none;
    text-shadow: #FFF 1px 1px;
    line-height: 28px;
}

#mainNav a:hover {
    color: #252424;
}


#mainNav a.active {
    background: url(../images/bgMainNavActive.gif) repeat-x left top #fff;
    border-right: 1px solid #b7b3ac;
    border-bottom: 1px solid #fff;
    color: #585652;
    display: block;
    float:left;
    font-size: 11px;
    font-weight: bold;
    line-height: 28px;
    padding: 0 15px;
    text-decoration: none;
    text-shadow: #ddd 1px 1px;
}






/*
    ---------------------------------------------------------------------------
    Flexible Button:
    ----------------

    ---------------------------------------------------------------------------
*/

button                              { border:none;background:none;font-family:Arial;font-size:12px;padding:0;margin:0;width:auto;overflow:visible;text-align:center;white-space:nowrap; }

/* einzeilig */

button.singleSpaced span,
button.singleSpaced em                   { display:block;height:28px;line-height:28px;margin:0; }

button.grey.singleSpaced span            { padding-left:18px;background:url(../images/bgButtonLeftGrau.png) no-repeat 0 0; }
button.grey.singleSpaced em              { color: #333;font-style:normal;font-weight:bold;padding-right:18px;background:url(../images/bgButtonRightGrau.png) no-repeat 100% 0; }
/*button.grey.singleSpaced:hover em         { background:url(../images/bgButtonRightGrauH.png) no-repeat 100% 0;  }
button.grey.singleSpaced:hover span         { background:url(../images/bgButtonLeftGrauH.png) no-repeat 0 0;  } */

button.magenta.singleSpaced span         { padding-left:18px;background:url(../images/bgButtonLeftMagenta.png) no-repeat 0 0; }
button.magenta.singleSpaced em           { color: #FFF;font-style:normal;font-weight:bold;padding-right:18px;background:url(../images/bgButtonRightMagenta.png) no-repeat 100% 0; }
/*button.magenta.singleSpaced:hover em     { background:url(../images/bgButtonRightMagentaH.png) no-repeat 100% 0; }
button.magenta.singleSpaced:hover span   { background:url(../images/bgButtonLeftMagentaH.png) no-repeat 0 0; }*/

/*button.magenta.singleSpaced, button.grey.singleSpaced { cursor:default; }*/

/* zweizeilig */

button.doubleSpaced span,
/*button.doubleSpaced em                  { display:block;height:50px;line-height:16px;margin:0; }*/
button.doubleSpaced em                  { display:block;height:50px;line-height:110%;margin:0; }

button.grey.doubleSpaced span           { padding-left:18px;background:url(../images/bgButtonLeftGrau2.png) no-repeat 0 0; }
button.grey.doubleSpaced em             { color: #333;font-style:normal;font-weight:bold;padding-right:18px;padding-top:8px;background:url(../images/bgButtonRightGrau2.png) no-repeat 100% 0; }
/*button.grey.doubleSpaced:hover em       { background:url(../images/bgButtonRightGrau2H.png) no-repeat 100% 0; }
button.grey.doubleSpaced:hover span     { padding-left:18px;background:url(../images/bgButtonLeftGrau2H.png) no-repeat 0 0; }   */

button.magenta.doubleSpaced span        { padding-left:18px;background:url(../images/bgButtonLeftMagenta2.png) no-repeat 0 0; }
button.magenta.doubleSpaced em          { color: #FFF;font-style:normal;font-weight:bold;padding-right:18px;padding-top:8px;background:url(../images/bgButtonRightMagenta2.png) no-repeat 100% 0; }
/*button.magenta.doubleSpaced:hover em    { background:url(../images/bgButtonRightMagenta2H.png) no-repeat 100% 0; }
button.magenta.doubleSpaced:hover span  { padding-left:18px;background:url(../images/bgButtonLeftMagenta2H.png) no-repeat 0 0; }    */

/*button.magenta.doubleSpaced, button.grey.doubleSpaced { cursor:default; }*/

a.noLine { text-decoration: none; }

/*
    ---------------------------------------------------------------------------
    Content-Bereich:
    ----------------
    Hier können bei verschiedenen Länderportalen Änderungen vorkommen,
    falls die Felderbeschriftung zu lang wird. In dem Fall am besten diesen
    Bereich in eine neue Stylesheetdatei kopieren und im Header unter dem
    screen.css platzieren, damit die Formatierungen hier überschrieben werden.
    ---------------------------------------------------------------------------
*/

#content { margin: 40px 0 30px 36px; width: 320px; }

#content h1 { color: #E2007A;font-size: 20px;font-weight: normal;line-height: 28px;margin: 0 0 15px 0; }
#content h3 { color: #837F77;font-size: 14px;font-weight: bold;line-height: 20px;margin: 0 0 15px 0; }
#content h2 { color: #E2007A;font-size: 14px;font-weight: bold;line-height: 20px;margin: 0 0 15px 0; }

/* Werbeseite */

#content #werbeVorteile {
    float: left;
    margin-top: 60px;
    width: 320px;
}

#content #werbeVorteile li {
    background: url(../images/iconCheckWhite.gif) no-repeat 0 6px;
    line-height: 30px;
    padding-left: 25px;
}

#content #werbeVideo { margin-bottom: 20px; }
#content #werbeButton { text-align: right; width: 750px; }

/* Formulare allgemein */

/* #content .formArea input.text    { border: 1px solid;border-top-color: #AFACA7;border-right-color: #7B7976;border-bottom-color: #7B7976;border-left-color: #AFACA7;color: #7B7976;font-style: normal;font-family: Arial;font-size: 14px;padding: 4px 3px;width: 240px; } */
#content .formArea input.text    { border: 1px solid;border-top-color: #AFACA7;border-right-color: #7B7976;border-bottom-color: #7B7976;border-left-color: #AFACA7;color: #7B7976;font-style: normal;font-family: Arial;font-size: 14px;padding: 4px 3px;width: 240px; }

#content .formArea select        { border: 1px solid;border-top-color: #AFACA7;border-right-color: #7B7976;border-bottom-color: #7B7976;border-left-color: #AFACA7;color: #7B7976;font-style: normal;font-family: Arial;font-size: 14px;padding: 4px 3px; }
#content .formArea select#anrede { width: 80px; }
#content .formArea select#land   { width: 248px; }

#content .formArea .formcol_1 div,
#content .formArea .formcol_2 div  { margin-bottom: 10px; }

#content .formArea input.text.norm   { width: 240px; }
#content .formArea input.text.spec_1 { width: 80px; }
#content .formArea input.text:hover  { background-color: #F9F8F8; }
/* #content .formArea label             { line-height: 24px; float: left; width: 120px; } */
#content .formArea label             { line-height: 24px; width: 120px; }

#content .formArea input.error     { border: 1px solid #E2007A; }
#content .formArea label.error     { color: #E2007A;font-style: normal; }
#content .formArea label.mandatory { font-weight: bold; }
p.error { color: #E2007A;font-style: italic; }

/* Platzierung für Seite "Login" */

#content .formArea.login            { margin-top: 30px; }
/* #content .formArea.login .formcol_1 { float: left;width: 400px; } */
#content .formArea.login .formcol_1 { float: left;width: 300px; }
#content .formArea.login .formcol_2 { float: right;margin-right:40px;margin-top: 3px;width: 440px; }
#content .formArea.login button     { margin: 0 0 0 118px; }
#content .formArea.login a.pwLink   { color: #999; display: block; font-size: 11px; font-style: italic;margin: 10px 0 0 120px; }

/* Platzierung für Seite "Registrierung" */

#content .formArea.registrierung             { margin-top: 0px; }
/* #content .formArea.registrierung .formcol_1  { float: left;width: 400px; } */
#content .formArea.registrierung .formcol_1  { float: left;width: 300px; }
/* #content .formArea.registrierung .formcol_2  { float: right;margin-right: 40px;margin-top:35px;width: 440px; } */
#content .formArea.registrierung .formcol_2  { float: right;margin-right: 40px;width: 440px; }
#content .formArea.registrierung button      { margin: 0 0 0 118px; }
#content .formArea.registrierung .agbCheck   { font-size: 10px;margin: 0 0 10px 118px; }
#content .formArea.registrierung .agbCheck p { line-height: 12px;margin: -18px 0 0 25px; }

/* -----------------------
Zahlarten OHNE Tabelle
------------------------ */

/* Zahlarten allgemein */

/* #content div.payment    { width: 700px; } */
#content div.payment    { width: 320px; }
#content div.payment dl { clear: both;line-height: 140%;margin: 0 0 15px 0;width: 220px; }
#content div.payment dt { float: left; }
#content div.payment dd { text-align: right; }

/* Zahlarten Zusammenfassung */

/* #content div.payment.resume                     { width: 722px; font-size: 16px; } */
#content div.payment.resume                     { width: 320px; font-size: 16px; }
#content div.payment.resume h3.resume           { color: #000;font-size: 20px;font-weight: normal;margin: 0 0 3px 0; }
#content div.payment.resume .details .memberPic { float: left; width: 115px; margin-right: 10px; }
#content div.payment.resume .details            { float: left; }
#content div.payment.resume .details div        { float: right; width: 320px; }
/* #content div.payment.resume .detailsRightCol    { float: right; } */


/* Zahlarten Navigation */

#content div.payment ul           { margin: 0; }
#content div.payment li           { background-color: #F0ECE5;border-top: 1px solid #AFACA7;border-left: 1px solid #AFACA7;display: block;float: left;margin: 0;padding: 2px 10px; }
#content div.payment li.current   { background-color: #AFACA7; }
#content div.payment li.current a { color: #FFF;font-weight:bold;text-decoration: none; }
#content div.payment li.last { border-right: 1px solid #AFACA7; }

/* Zahlarten Payment-Details */

#content div.payment.paymentDesc { border: 1px solid #AFACA7;padding: 15px 10px; font-size: 16px; }
#content div.paymentDesc form    { text-align:left; }
#content div.paymentDesc h5      { color: #7B7976;font-size: 16px;font-weight: bold;margin: 0 0 10px 0; }
#content div.paymentDesc h6      { color: #7B7976;font-size: 14px;font-weight: bold;margin: 0 0 10px 0; }


/* Vergleichstabelle nach Abschluss der Registrierung */

table.compare { border-top: 1px solid #AAA599;font-size: 12px;margin-right:20px; }
table.compare th { border-bottom: 1px solid #AAA599;font-weight: bold;padding: 6px 0;text-align: center; }
/* table.compare th.premium { background-color: #E2007A; color: #FFF; } */
table.compare th.premium { background-color: #3EBA34; color: #FFF; }
table.compare th.basic   { background-color: #D2CEC7; color: #000; }
table.compare th .price  { font-size: 16px; }
table.compare big { display: block;font-size: 14px;margin-bottom: 6px;text-transform: uppercase; }
table.compare sup { display:block;font-size: 10px;letter-spacing: 0.01em;vertical-align: super; }
table.compare td  { line-height: 18px;padding: 5px 5px }
table.compare td.stripeCol1    { background-color: #F0F0F0; }
table.compare td.stripeCol2    { background-color: #FFF000;text-align: center;vertical-align: middle; }
table.compare td.stripeCol2_2  { background-color: #FBF7AF;text-align: center;vertical-align: middle; }
table.compare td.stripeCol3    { background-color: #E2DDD6; text-align: center;vertical-align: middle; }
table.compare td.stripeCol3_2  { background-color: #F0EBE2;text-align: center;vertical-align: middle; }
table.compare td.button  { border-top: 1px solid #AAA599;line-height: 18px;padding: 10px 10px;text-align: center;vertical-align: middle; }
button.greenButton {
    -moz-font-feature-settings: normal;
    -moz-font-language-override: normal;
    background-color: #3EBA34 !important;
    background-image: -moz-linear-gradient(center top , #65D35C, #0C9A01) !important;
    border: 1px solid #777777;
    border-radius: 0.2em 0.2em 0.2em 0.2em;
    color: #FFFFFF !important;
    cursor: pointer;
    display: inline-block;
    font-family: Arial,Helvetica;
    font-size: 1em;
    font-size-adjust: none;
    font-stretch: normal;
    font-style: normal;
    font-variant: normal;
    font-weight: bold !important;
    line-height: 2em;
    /* margin: 1.5em 0.75em 0 0; */
    overflow: visible;
    padding: 0 1.5em;
    text-decoration: none !important;
    text-shadow: none !important;
    white-space: nowrap;
}


.tableLeft { float: left;width: 540px; }

/* Aufforderung nach Abschluss der Registrierung */

.invite { color: #E2007A;float: left;margin-top: 60px;width: 300px; }
.invite p { font-size: 18px;line-height: 24px; }
.invite .zm { background: url(../images/bgZentrada-magazin.png) no-repeat #FFF;float:right;margin-left:10px;margin-top:-30px;padding:3px;width:126px;}
.invite .zmText { text-align: right;font-size:16px;font-weight:bold;line-height: 20px;margin: 80px 10px 0 0; }

/* Auswahl der Laufzeit Schritt 1/3 */

table.period { border-top: 1px solid #AAA599;font-size: 12px;margin-right:20px; }
table.period th { border-bottom: 1px solid #AAA599;font-weight: bold;padding: 6px 0;text-align: center; }
table.period th.highlight{ background-color: #E2007A; color: #FFF; }
table.period th.normal  { background-color: #D2CEC7; color: #000; }
table.period th .price  { font-size: 16px; }
table.period big { display: block;font-size: 14px;text-transform: uppercase; }
table.period td  { line-height: 18px;padding: 5px 5px }
table.period td.stripeCol1    { background-color: #F0F0F0; }
table.period td.stripeColNormal    { background-color: #E2DDD6; text-align: center;vertical-align: middle; }
table.period td.stripeColNormal_2  { background-color: #F0EBE2;text-align: center;vertical-align: middle; }
table.period td.stripeColHighlight    { background-color: #FFF000;text-align: center;vertical-align: middle; }
table.period td.stripeColHighlight_2  { background-color: #FBF7AF;text-align: center;vertical-align: middle; }
table.period small      { display: block;font-size:10px;line-height:13px; }
table.period td.button  { border-top: 1px solid #AAA599;line-height: 18px;padding: 10px 10px;text-align: center;vertical-align: middle; }

/* Layer für AGBs auf der Registrierseite */

.agbLayer { font-size: 11px;line-height: 18px;text-align: left; }
.agbLayer h1 { color: #E2007A;font-size: 14px;font-weight: bold;margin-bottom: 5px; }
.agbLayer h3 { color: #000;font-size: 12px;font-weight: bold;margin: 8px 0 5px 0; }
.agbLayer ol { display:block;list-style: decimal;padding-left: 28px; }
.agbLayer li { margin-bottom: 5px; }

/* Diverse Contentstyles für Einzelheiten */

.uid {
    font-size: 10px;
    margin:2px 0 0 120px;
    line-height:12px
}

/* Ende des Content-Bereichs */

/* Footer */

#footer, .push { height: 120px; }
#footer { margin: 0 auto;width: 980px; }

#footerWerbung { background-color: #FFF;padding:0 17px; }
#footer3Cols, #footer2Cols, #footer1Col       { background-position: 0 10px;background-repeat: no-repeat;height: 90px;position: relative;  }
#footer3Cols a, #footer2Cols a, #footer1Col a { display: block;float: left;height: 76px;text-indent: -3000px; }
#footer3Cols a { width: 310px;margin: 10px 3px 0 0; }
#footer2Cols a { width: 470px;margin: 10px 0 0 0; }
#footer1Col a  { width: 950px;margin: 10px 0 0 0; }

#footerNav            { background: url(../images/bgShadow.png) no-repeat top left;padding: 10px 0 20px 0;margin: 0 auto;width: 980px;text-align: center; }
#footerNav li         { display: inline;padding: 0 6px; }
#footerNav li a       { color: #837F77;font-size: 10px;font-weight: bold;text-transform: uppercase; }
#footerNav li a:hover { color: #AAA599; }


.formcheck {
    font-size:smaller;
    color: red;
}