/* Minification failed. Returning unminified contents.
(3909,62): run-time error CSS1062: Expected semicolon or closing curly-brace, found '!important'
(3918,62): run-time error CSS1062: Expected semicolon or closing curly-brace, found '!important'
(3933,59): run-time error CSS1062: Expected semicolon or closing curly-brace, found '!important'
(3954,59): run-time error CSS1062: Expected semicolon or closing curly-brace, found '!important'
(4022,38): run-time error CSS1034: Expected closing parenthesis, found ','
(4022,38): run-time error CSS1042: Expected function, found ','
(4022,42): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')'
 */
/*
	HTML5 Reset :: style.css
	----------------------------------------------------------
	We have learned much from/been inspired by/taken code where offered from:
	
	Eric Meyer					:: http://meyerweb.com
	HTML5 Doctor				:: http://html5doctor.com
	and the HTML5 Boilerplate	:: http://html5boilerplate.com
	
-------------------------------------------------------------------------------*/

/* Let's default this puppy out
-------------------------------------------------------------------------------*/

html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video, details, summary {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}									

/* consider resetting the default cursor: https://gist.github.com/murtaugh/5247154 */

article, aside, figure, footer, header, hgroup, nav, section, details, summary {display: block;}

/* Responsive images and other embedded objects
   Note: keeping IMG here will cause problems if you're using foreground images as sprites.
   If this default setting for images is causing issues, you might want to replace it with a .responsive class instead. */
img,
object,
embed {max-width: 100%;}

/* force a vertical scrollbar to prevent a jumpy page */
html {overflow-y: scroll;}

/* we use a lot of ULs that aren't bulleted. 
	don't forget to restore the bullets within content. */
ul {list-style: none;}

blockquote, q {quotes: none;}

blockquote:before, 
blockquote:after, 
q:before, 
q:after {content: ''; content: none;}

a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent;}

del {text-decoration: line-through;}

abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;}

/* tables still need cellspacing="0" in the markup */
table {border-collapse: collapse; border-spacing: 0;}
th {font-weight: bold; vertical-align: bottom;}
td {font-weight: normal; vertical-align: top;}

hr {display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0;}

input, select {vertical-align: middle;}

pre {
	white-space: pre; /* CSS2 */
	white-space: pre-wrap; /* CSS 2.1 */
	white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
	word-wrap: break-word; /* IE */
}

input[type="radio"] {vertical-align: middle;}       /* changed, 20180225 - from top to middle, please check */
input[type="checkbox"] {vertical-align: middle;}    /* changed, 20181010 - from BOTTOM to MIDDLE, please check */
.ie7 input[type="checkbox"] {vertical-align: baseline;}
.ie6 input {vertical-align: text-bottom;}

select, input, textarea {font: 99% sans-serif;}

table {font-size: inherit; font: 100%;}

small {font-size: 85%;}

strong {font-weight: bold;}

td, td img {vertical-align: top;} 

/* Make sure sup and sub don't screw with your line-heights
	gist.github.com/413930 */
sub, sup {font-size: 75%; line-height: 0; position: relative;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}

/* standardize any monospaced elements */
pre, code, kbd, samp {font-family: monospace, sans-serif;}

/* hand cursor on clickable elements */
.clickable,
label, 
input[type=button], 
input[type=submit], 
button {cursor: pointer;}

/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea {margin: 0;}

/* make buttons play nice in IE */
button {width: auto; overflow: visible;}
 
/* scale images in IE7 more attractively */
.ie7 img {-ms-interpolation-mode: bicubic;}

/* prevent BG image flicker upon hover */
.ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}

/* let's clear some floats */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }  
.clearfix:after { clear: both; }  
.clearfix { zoom: 1; }  
/* Styles for basic forms
-----------------------------------------------------------*/
fieldset {
    border: 1px solid #ddd;
    padding: 0 1.4em 1.4em 1.4em;
    margin: 0 0 1.5em 0;
}

legend {
    font-size: 1.2em;
    font-weight: bold;
}

textarea {
    min-height: 2em;
}

.editor-label {
    margin: 1em 0 0 0;
}

.editor-field {
    margin: 0.5em 0 0 0;
}


/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error {
    color: #f00;
}

.field-validation-valid {
    display: none;
}

.input-validation-error {
    border: 1px solid #f00;
    background-color: #fee;
}

.validation-summary-errors {
    
}






.validation-summary-errors li, .validation-single-error {
    color: #FFFFFF;
    /*font-size: 1.33em;
    line-height: 1.5em;*/ /* DELETE!? */
	padding: 0.6em 0.6em 0.6em 0.6em;
	background-color: #ff3d30;     
    margin: 0;
    text-align: center;
}
@media only screen and (min-width: 961px) {
    .validation-single-error {  font-size: 1.33em;padding: 0.6em 0.6em 0.6em 0.6em; }
}
@media only screen and (min-width: 1280px) {
    .validation-single-error { font-size: 1.5em; padding: 0.6em 0.6em 0.6em 0.6em; }
}

.validation-single-error a { color: #000000; text-decoration: underline; }


/* 
* error-panel is mainly used in inline cases, like profile-edit etc.
*/
.validation-error-panel
{
    color: #FFFFFF;
	padding: 0.6em 0.6em 0.6em 0.6em;
	margin: 0.2em 0 0 0;
	background-color: #ff3d30;     /*D80D20*/
    border-radius: 0.4em;
    -moz-border-radius:0.4em;     /* D61F26 BROWSER: FireFox */
    -khtml-border-radius:0.4em;   /* BROWSER: Konqueror */
    -webkit-border-radius:0.4em;  /* BROWSER: webkit */	 
    font-weight: bold;
    display: inline-block;
}
.validation-error-panel li
{
    margin:0.2em 0 0.2em 1.3em;
    padding:0;
    font-weight: normal;
    list-style-type: disc;
}

/* delete, old!?*/
.validation-summary-OK li, .validation-single-OK 
{
    font-size: 1.33em;
    line-height: 1.5em;
    color: #FFFFFF;
	padding: 0.6em 0.6em 0.6em 0.6em;
	background-color: #4dc901;    
    /*font-weight: bold;*/
    margin: 0;
    text-align: center;
}

@media only screen and (min-width: 961px) {
    .validation-single-OK  {  font-size: 1.5em;padding: 0.6em 0.6em 0.6em 0.6em; }
}
@media only screen and (min-width: 1280px) {
    .validation-single-OK { font-size: 1.66em; padding: 0.6em 0.6em 0.6em 0.6em; }
}



/* final, new, 2018 */
.validation-OK 
{
	background-color: #4dc901;    
    color: #FFFFFF;
	padding: 0.7em 0.7em 0.6em 0.7em;
    margin: 0;
    text-align: center;
    border-radius: 0.3em; -moz-border-radius:0.3em; -khtml-border-radius:0.3em; -webkit-border-radius:0.3em;  
    font-size: 1.0em;
}

/* final, new, 2018 */
.validation-info 
{
    background-color: #FFFD83; /*#FBFDAB;*/ /* FAFFCC line-height: 1.5em;*/
    color: #404a59;             /* setting text color explicitly, so in case of links etc. we have a real text color, e.g. if we make a validation-info clickable */
	padding: 0.7em 0.7em 0.6em 0.7em;	  
	margin: 0.3em 0 0.3em 0;
    text-align: center;
    border-radius: 0.3em; -moz-border-radius:0.3em; -khtml-border-radius:0.3em; -webkit-border-radius:0.3em;  
    font-size: 1.0em;
}

/* final, new 2018 */
.validation-error {
    background-color: #ff3d30;   
    color: #FFFFFF;
	padding: 0.7em 0.7em 0.6em 0.7em;
    margin: 0;
    text-align: center;
    border-radius: 0.3em; -moz-border-radius:0.3em; -khtml-border-radius:0.3em; -webkit-border-radius:0.3em;  
    font-size: 1.0em;
}

@media only screen and (min-width: 961px) {
    .validation-info {  font-size: 1.16em;    }
    .validation-OK {  font-size: 1.16em;    }
    .validation-error {  font-size: 1.16em;    }
}

@media only screen and (min-width: 1280px) {
    .validation-info {  font-size: 1.33em;    }
    .validation-OK {  font-size: 1.33em;    }
    .validation-error {  font-size: 1.33em;    }
}






.validation-summary-valid { /* used by jQuery*/
    display: none;
}



/* *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
*
*
* LL specific CSS
*
* - definition of STANDARD tags and their config / setting up everything we need...
*
* *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** */

body{
	font-family: Arial, Tahoma, Verdana, Sans-serif;
	font-size: 12px;
    color: #404a59; /* base text color, original: 505a69 - as of 2018, mobile optimized color with more black/dark*/
	background-color: #ffffff; 
	/*line-height: 1.5em;*/
	width: 100%;
}

select, input, input[type=text], input[type=password], textarea, select {
	border: solid 1px #CaC7C4;  /* good: E6E5E3- original:eae7e4  - dark1:aaa7a4*/
    border-radius: 0.4em; -moz-border-radius:0.4em; -khtml-border-radius:0.4em; -webkit-border-radius:0.4em;  
    padding: 0.5em;
    color: #404a59;
}


select:focus, input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus {
	border: solid 1px #c71c75;  /* good: E6E5E3- original:eae7e4  - dark1:aaa7a4*/
    /*box-shadow: rgba(0,0,0, 0.1) 0px 0px 18px;  
    -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 18px;  
    -o-box-shadow: rgba(0,0,0, 0.1) 0px 0px 18px;  
    -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 18px;  	*/
}

input:focus
{
	
}

select { cursor:pointer; }







    

a, a:visited
{
    text-decoration: none;
    color: #0ec9d5;
}

a:hover {
    color: #c71c75;
}



address
{
    font-style: normal;
}

fieldset {
    padding: 0;
	margin: 0;
	border: 0;
}


/* PH1 -> PopupHeadline-H1 -> is used somewhere we coudln't use a regular h1 because of SEO reasons, on public pages for example */
h1.big, h1.lead, .PH1
{
    font-family: Georgia, "Times New Roman";
    font-size: 2.5em;
    font-weight: normal;
    padding: 0.25em 0 0em 0;
    line-height: 1.0;
}/*depr*/
h1.HxUnderlined
{
    padding-bottom: 0.40em;
    border-bottom: 2px dotted #C0CaC1;
}

.PH2
{
    font-family: Georgia, "Times New Roman";
    font-size: 2.0em;
    font-weight: normal;
    padding: 0.5em 0 0.5em 0;
}



h1
{
    font-family: Georgia, "Times New Roman";
    font-size: 1.66em;
    font-weight: normal;
}

h2
{
    font-family:  Arial, Tahoma, Verdana, Sans-serif;
    font-size: 1.5em;
    padding: 1.0em 0 0.50em 0;
    font-weight: normal;
}
h2.preHeadline
{
    font-size: 1.0em;
}
h3
{
    font-family:  Arial, Tahoma, Verdana, Sans-serif;
    font-size: 1.42em;
    padding: 1.0em 0 0.33em 0;
    font-weight: normal;
}
h4
{
    font-family:  Arial, Tahoma, Verdana, Sans-serif;
    font-size: 1.33em;
    padding: 1.0em 0 0.50em 0;
    font-weight: normal;
}


h1.arial, h2.arial, h3.arial, h4.arial, .noserif
{
    font-family:  Arial, Tahoma, Verdana, Sans-serif;
}
h1.serif, h2.serif, h3.serif, h4.serif, .serif
{
    font-family: Georgia, "Times New Roman";
}


.HeadlineAction
{
    font-family:  Arial, Tahoma, Verdana, Sans-serif;
    font-size: 0.66em;
    color: #000000;
}



ul 
{
    list-style: none;
}
ul li {
	padding: 0.0em 0em 0.25em 0.0em;
	margin: 0.5em 0em 0em 1.5em;
}



table
{
    text-align: left;
    vertical-align: top;
}

td, th
{
    text-align: left;
    vertical-align: top;
    padding: 0;
    margin: 0;
}
tr
{
    padding: 0;
    /*border-bottom: 1px solid #DCDCDC;*/
}

/* special version for listing of bubble items */
td.bubbleItemPlace {    padding: 0.33em 0 0.33em 0; }
td.bubbleItemText {     vertical-align: middle;    padding: 0.33em 0 0.33em 0; /*font-size: 1.16em;*/}


@media only screen and (min-width: 961px) {
    td.bubbleItemText       { font-size: 1.16em;    vertical-align: middle;    padding: 0.33em 0 0.33em 0; /*font-size: 1.33em;*/ }
}

@media only screen and (min-width: 1280px) {
    td.bubbleItemText       { font-size: 1.33em;  }
}





/* *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
*
*
* LL specific CSS
*
* - HTML5 classes for specific sections
*
* *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** */


header
{
    z-index: 500;
    border-top: 5px solid #0ec9d5;
    border-bottom: 4px solid #eae7e4;
    position: fixed;    /* pin header to top of page in smalles view */
    top: 0;
    left: 0;
    background-color: #FFFFFF;
    width: 100%;
}

.headerAttach
{
    padding: 0.0em 0 0 0;
    border-bottom: 4px solid #eae7e4;
    background-color: #F6F5F3;
    text-align: center;
}
 
header #Logo                { float: left; margin: 0.66em 0 0.33em 0.5em; width: 80px;  }
header #FunctionBox         { float: right; margin: 0.33em 0.5em 0.33em 0; border: 0px solid #FF0000; padding: 0;  }
header #NavMePicThumb, #MenuMePicThumb       { width: 22px;    height: 22px; }

header .Logo-full           { display: none; visibility: hidden; float: left; margin: 1.0em 0 0.33em 0.5em; width: 132px; }
header .Logo-heartonly      { float: left; margin: 0.66em 0 0.33em 0.5em; width: 17px; height: 20px; }
header .hamburgerIcon       { font-size: 2.3em;font-weight: bold;line-height: 1px;margin: 0 10px 0 5px;padding: 0;vertical-align: super; }


@media only screen and (min-width: 961px) 
{
    header { border-top: 10px solid #0ec9d5; border-bottom: 7px solid #eae7e4; }
    .headerAttach { border-bottom: 8px solid #eae7e4; }

    header #Logo            { width: 132px; margin: 0.66em 0 0.66em 0.75em; }  
    header #FunctionBox     { margin: 0.33em 0.5em 0.33em 0em; }
    header #NavMePicThumb   { width: 44px; height: 44px; }
    header .hamburgerIcon   { font-size: 4.8em; }
    
    header .Logo-full           { display: inline; visibility: visible;  }
    header .Logo-heartonly      { display: none; visibility: hidden; }
}




.NavToggleMenu
{
    position:absolute; 
    border-left: 1px dotted #0ec9d5; /*#0ec9d5; */
    border-bottom: 1px dotted #0ec9d5; 
    border-top: 5px solid #0ec9d5; 
    width: 25em; 
    background: #FFFFFF; 
    right: 0px;
    top: -5px;    /* required because of border-top placement! */
    visibility: hidden;
    z-index: 1000;
}
.NavToggleMenu ul 
{
    margin: 0; padding: 0;
}
.NavToggleMenu ul li {
	list-style-type: none;
    display: block;        /* important to show all in one row!*/
	border-bottom: 2px dotted #E5E5E5;
    margin: 0 0 0.0em 0;
    font-size: 1.3em;    
}
.NavToggleMenu ul li a
{
    font-size: 1.0em;           
    display: block;
    padding: 1.0em 0 0.5em 0.5em;
}
.NavToggleMenu li.username
{
    font-size: 1.33em;           
    display: block;
    padding: 1.0em 0 0.5em 0.5em;
   border: 1px solid #00FF00;
   border: none;
}
.NavToggleMenu ul li a.SecondaryFunction {
	color: #999999;
	font-size: 1.1em;
}
.NavToggleMenu ul li.ProfileFirstRow
{
    padding: 0.25em 0.5em 0.25em 0.25em; margin: 0.15em 0.15em 0 0.15em; border:none;
    font-weight: bold;
}
.NavToggleMenu ul a.CloseX
{
    color: #888888;
    /*font-weight: bold;*/
    padding-right: 1.0em;
    text-align: right;
    font-size: 0.9em;
}
.NavToggleMenu ul li.last 
{
    font-size: 1.0em;
}
.NavToggleMenu ul li.NoBorder
{
 	border-bottom: none;
}
.NavToggleMenu ul li a:hover
{
}


@media only screen and (min-width: 961px) {    /* currently footer does not fill all above width>1000px */
    .NavToggleMenu     {   border-top: 10px solid #0ec9d5; top: -10px;    /* required because of border-top placement! */	}   
}




/* **************************************************************************************** */
/* old - delete - 201803 */
nav .content
{
    background-color: #FFFFFF;
    width: 1000px;
	margin: 0px auto 0px auto;
	padding: 0.1em 0em 0.1em 0.1em;
}


footer {
    background-color: #f6f5f3; padding-bottom: 2.0em;
}
footer .content{
    width: 90%; margin: 0% auto 0% auto;	color: #404a59;
}
@media only screen and (min-width: 1000px) {    /* currently footer does not fill all above width>1000px */
    footer .content     {   width: 1000px;margin: 0% auto 0% auto;	}   
}

footer .linkbox {
    display: inline;
    width: 100%;
    margin-bottom: 1.5em;
    float: left;
}

footer h4 {
    color: #404a59;
    font-size: 1.33em;
    padding: 1.75em 0 0.8em 0;
    font-weight: normal;
}
footer ul 
{
    list-style: none;
}
footer ul li {
	list-style-type: none;
	padding: 0em 0em 0.6em 0em;
	margin: 0em;
}
footer a {
    text-decoration: none;
    color: #0ec9d5;
}

footer .countryLinkList
{
    text-align: center;   
}

@media only screen and (min-width: 481px) {
    footer .linkbox { width: 49%; margin-bottom: 2.0em; }
}
@media only screen and (min-width: 961px) {
    footer .linkbox { width: 32%; margin-bottom: 3.33em; }  
}
@media only screen and (min-width: 1280px) {
    footer .linkbox { width: 24%; margin-bottom: 3.33em; }
}




/* *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
*
*
* LL specific CSS
*
* - generic CSS classes for general purpose use
*
* *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** */


.AjaxContainer                  { padding: 0;margin: 0;border: none; }

.layStd-2-22                    { float:left;width: 0%; visibility:hidden; display: none; padding: 0; margin: 0;}
.layStd-2-78, .layStd-2-75      { float:left;width: 100%;  padding: 0; margin: 0;}

@media only screen and (min-width: 961px) {
    .layStd-2-22 { width: 21%; visibility:visible; display: block; padding: 0 1% 0 0;}  
    .layStd-2-75 { width: 75%; }  
    .layStd-2-78 { width: 78%; }  

}



/* ************* NEW STANDARD / responsive layout for ALL pages, basic version - last update: 2018 - check & delete old stuff - FINAL version for all new css stuff now, in all responsive pages / 20180316*/
.layout-2-full    
{
    width: 97%; 
    margin: 0 auto 0 auto;      /* the margin-top because of pinned header is added by using pin-space-class, see below */
    line-height: 1.5em;
}

.layout-2-profile { /* a dedicated layout-2 version for userprofile etc for MEMBER MODE!*/
    width: 100%;
    margin: 0 auto 0 auto;
    line-height: 1.5em;
}

.layout-2-mailbox    
{
    width: 99%; 
    margin: 0 auto 0 auto;      /* the margin-top because of pinned header is added by using pin-space-class, see below */
    line-height: 1.5em;
}

.layout-2-pin-space         { margin: 4.0em auto 1.0em auto; }   /* extra class for MEMBER-pages head/bar pin - for margin of pinned header! 20180318 */
.layout-2-pin-space-guest   { margin-top: 3.7em; }   /* due to different headbar sizes we have separated pin-spaces for GUEST vs. MEMBER-pages */ /* CHECK THIS, maybe potential bug in combination with layout because here we have NO margin-left/right:auto anywhere?!!

/* new responsive layout for PUBLIC-PROFILE-SEO ("pps") pages, */
.layout-2-pps
{
    width: 97%; 
    margin: 4.0em auto 0 auto;      /* margin top because of pinned header! 20171131*/
    line-height: 1.5em;
}

@media only screen and (min-width: 481px) {
    .layout-2-full      { width: 97%; margin: 0 auto 0 auto; }
    .layout-2-profile   { width: 100%; margin: 0 auto 0 auto; /*max-width: 600px;*/}
    .layout-2-pin-space         { margin: 4.0em auto 1.0em auto; }   /* extra class for MEMBER-pages head/bar pin - for margin of pinned header! 20180318 */
    .layout-2-mailbox   { width: 99%; margin: 0 auto 0 auto; }
    .layout-2-pps       { width: 97%; margin: 0 auto 0 auto; }
}

@media only screen and (min-width: 761px) {
    .layout-2-profile   {    /*max-width: 600px;*/ }
    .layout-2-pin-space         {    margin-top: 4.0em;   }                           /* ATTENTION: this extra breaking point is required because of the flipping navigation at 761 - FIX IT IN THE FUTURE!*/
}

@media only screen and (min-width: 961px) {
    .layout-2-full              { width: 90%; margin: 0 auto 0 auto;   }       
    .layout-2-profile           { width: 90%; margin: 0 auto 0 auto;   }       
    .layout-2-mailbox           { width: 99%; margin: 0 auto 0 auto; }
    .layout-2-pin-space         { margin: 6.2em auto 2.0em auto;   }                           /* margin top because of pinned header! 20171131, ZERO MARGIN at the bottom, so we do not have a white border in the app!*/
    .layout-2-pin-space-guest   { margin-top: 5.8em;   }                           /* margin top because of pinned header! 20171131*/
    .layout-2-pps               { width: 80%; margin: 0 auto 0 auto;   }       
}
@media only screen and (min-width: 1280px) {
    .layout-2-full      { width: 80%; margin: 0 auto 0 auto; }
    .layout-2-profile   { width: 80%; margin: 0 auto 0 auto; }       
    .layout-2-mailbox   { width: 90%; margin: 0 auto 0 auto; }
    .layout-2-pin-space         { margin: 6.2em auto 2.0em auto;   }                           /* margin top because of pinned header! 20171131, ZERO MARGIN at the bottom, so we do not have a white border in the app!*/
    .layout-2-pin-space-guest   { margin-top: 5.8em;   }                           /* margin top because of pinned header! 20171131*/
    .layout-2-pps       { width: 60%; margin: 0 auto 0 auto; }
}
@media only screen and (min-width: 1920px) {
    .layout-2-mailbox   { width: 80%; margin: 0 auto 0 auto; }
    .layout-2-pin-space         { margin: 6.2em auto 2.0em auto;   }                           /* margin top because of pinned header! 20171131, ZERO MARGIN at the bottom, so we do not have a white border in the app!*/
    .layout-2-pin-space-guest   { margin-top: 5.8em;   }                           /* margin top because of pinned header! 20171131*/

}


.page-begin-end-space   /* OLD - check and delete this! content pages locstring --> can be removed after rewriting contecnt pages */
{
    margin-top: 3.0em;
    margin-bottom: 10.0em;
}


.layout-2-full-teaser
{
    clear: both;
    margin: 0 auto 15% auto;
    padding: 1em 0 1em 0;
    background-color: #0ec9d5;
    box-shadow: 0.0em 0.2em 0.3em 0.01em #AFAFAF;			/* a little bit of small shadow around the buttons may look nice?? */
	-moz-box-shadow: 0.0em 0.2em 0.3em 0.01em #AFAFAF;
	-khtml-box-shadow: 0.0em 0.2em 0.3em 0.01em #AFAFAF;
    -webkit-box-shadow: 0.0em 0.2em 0.3em 0.01em #AFAFAF;      	     
    color: #FFFFFF;
    text-align: center; 
}
@media only screen and (min-width: 481px) {
    .layout-2-full-teaser { margin: 0 auto 10% auto;}
}
@media only screen and (min-width: 961px) {
    .layout-2-full-teaser { margin: 0 auto 5% auto; }
}
@media only screen and (min-width: 1280px) {
    .layout-2-full-teaser { margin: 0 auto 5% auto;}
}

.layout-2-full-teaser.noFX {     margin: 0; box-shadow: 0; }

.layout-2-full-teaser .heroText
{
    text-align: center; 
    font-family: Arial, Verdana, Tahoma;
    font-size: 2em;
    padding: 0.5em 0 0.5em 0;
    text-shadow: 1px 1px 3px rgba(190, 190, 190, 1);
}

.layout-2-full-teaser .submit-light, .layout-2-full .submit-light
{
    background-color: #346789;
    text-align: center;
    font-size: 1.5em;
    font-weight: bold;
    background-color: #FFFFFF;
    color: #0ec9d5;
    border-radius: 0.5em;
    -moz-border-radius:0.5em;     /* BROWSER: FireFox */
    -khtml-border-radius:0.5em;   /* BROWSER: Konqueror */
    -webkit-border-radius:0.5em;  /* BROWSER: webkit */	 
    margin: 0.5em 0 0.5em 0;
    text-decoration: none;
    padding: 0.75em 1.5em 0.75em 1.5em;
    text-transform: uppercase;   
    display: inline-block;
}

@media only screen and (min-width: 481px) {
    .layout-2-full-teaser .heroText { font-size: 2em; padding: 0.5em 0 0.5em 0;}
    .layout-2-full-teaser .submit-light, .layout-2-full .submit-light { font-size: 1.75em; padding: 0.75em 1.5em 0.75em 1.5em; }    
}
@media only screen and (min-width: 961px) {
    .layout-2-full-teaser .heroText { font-size: 3em; padding: 0.5em 0 0.5em 0; }
}
@media only screen and (min-width: 1280px) {
    .layout-2-full-teaser .heroText { font-size: 3.5em; padding: 0.5em 0 0.5em 0;}
    .layout-2-full-teaser .submit-light, .layout-2-full .submit-light { font-size: 2.0em; padding: 0.75em 1.5em 0.75em 1.5em; }    
}

.HeroTextDark1
{
    background-color: #e6e5e3;
    color: #404a59;
    box-shadow: 0.0em 0.1em 0.3em 0.01em #BFBFBF;			/* a little bit of small shadow around the buttons may look nice?? */
	-moz-box-shadow: 0.0em 0.1em 0.3em 0.01em #BFBFBF;
	-khtml-box-shadow: 0.0em 0.1em 0.3em 0.01em #BFBFBF;
    -webkit-box-shadow: 0.0em 0.1em 0.3em 0.01em #BFBFBF;      	     
}

.layout-2-full .std-title, .layout-2-profile .std-title       /* std-title is NEW responsive/ultimate version, for SINGLE pages / headines / etc., mainly used in SignUp and for Content pages! ;-) */
{
	font-family:Georgia,"TimesNewRoman";
    font-size:2.0em;
    font-weight:normal;
    padding:0;
    margin: 1.5em 0 0.5em 0;
    line-height:1.16em;
}

.layout-2-full .std-subtitle, .layout-2-profile .std-subtitle  {     /* std-title is NEW responsive/ultimate version, for SINGLE pages / headines / etc., mainly used in SignUp and for Content pages! ;-) */
	font-family:Georgia,"TimesNewRoman";
    font-size:1.66em;
    font-weight:normal;
    padding:0;
    margin: 0.5em 0 0.33em 0;
    line-height:1.16em;
}

.layout-2-full .std-paragraph, .layout-2-profile .std-paragraph{
    font-size: 1.5em;
    line-height: 1.33em;
    padding: 0;
    margin: 0;
}
.layout-2-full h2 { font-size: 1.66em; line-height: 1.116em; margin: 0 0 0.25em 0;}
.layout-2-full h3 { font-size: 1.33em; line-height: 1.116em; margin: 0 0 0.25em 0;}

@media only screen and (min-width: 481px) {
    .layout-2-full .std-title, .layout-2-profile .std-title         { font-size: 3.0em; padding: 0.25em 0 0.25em 0; margin: 1.0em 0 0.25em 0;} /* remind the 1.0em for margin-top at this reslution!*/
    .layout-2-full .std-subtitle, .layout-2-profile .std-subtitle   { font-size: 2.0em; padding: 0.25em 0 0.25em 0; margin: 0em 0 0.25em 0;}
    .layout-2-full .std-paragraph, .layout-2-profile .std-paragraph     { font-size: 1.66em; }
    .layout-2-full h2 { font-size: 2.0em; }
    .layout-2-full h3 { font-size: 1.66em; }
}
@media only screen and (min-width: 961px) {
    .layout-2-full .std-title, .layout-2-profile .std-title         { font-size: 4em; padding: 0.25em 0 0.5em 0; margin: 0 0 0.5em 0;}
    .layout-2-full .std-subtitle, .layout-2-profile .std-subtitle   { font-size: 2.66em; padding: 0.33em 0 0.33em 0; margin: 0 0 0.33em 0;}
    .layout-2-full h2 { font-size: 2.2em; }
    .layout-2-full h3{ font-size: 1.88em; }
}
@media only screen and (min-width: 1280px) {
    .layout-2-full .std-title, .layout-2-profile .std-title         { font-size: 4em; padding: 0.25em 0 0.5em 0; margin: 0 0 0.5em 0;}
    .layout-2-full .std-subtitle, .layout-2-profile .std-subtitle   { font-size: 2.66em; padding: 0.16em 0 0.33em 0; margin: 0 0 0.33em 0;}
    .layout-2-full h2 { font-size: 2.4em; }
    .layout-2-full h3 { font-size: 2.1em; }
}



a.std-single-button, .std-single-button
{
    padding: 0.75em 1.5em 0.75em 1.5em;
    margin: 0.5em 0 0 0;
    font-size: 1.5em;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
	background-color: #78cd00; /*#00AB00;*/ /*30AB30*/
	color: #FFF; 
	border: solid 2px #78cd00;          /* ATTENTION: exactly in this order to make it looking good!*/
	border-bottom: 3px solid #58bd00;  	
    border-radius: 0.40em;
    -moz-border-radius:0.40em;     /* BROWSER: FireFox */
    -khtml-border-radius: 0.40em;   /* BROWSER: Konqueror */
    -webkit-border-radius: 0.40em;  /* BROWSER: webkit */	 
    display: inline-block;
}

.std-single-button-LLcol
{
    background-color: #0ec9d5; 
	color: #FFF; 
	border: solid 2px #0ec9d5; 
	border-bottom: 3px solid #01bcca;  
}


.std-single-button-secondary2
{
    padding: 0.66em 1em 0.66em 1em; /* 0.75em 3em 0.75em 3em;*/
    background-color: #0ec9d5; 
	color: #FFF; 
	border: solid 2px #0ec9d5; 
	border-bottom: 3px solid #01bcca;  
	display: inline-block;
	font-size: 1.16em;
}

@media only screen and (min-width: 481px) {
    .std-single-button {    font-size: 2.0em;   padding: 1.0em 3em 1.0em 3em;    }
    .std-single-button-secondary2   {   font-size: 1.33em; padding: 1.0em 1.5em 1.0em 1.5em; }
}






/* check this, maybe to be deleted! used mainly in OLD signup proces*/

.LL-input-label
{
    width: 90%;    
    font-size: 133%; /* 1.0em, or 1.2 for high lines */
    font-size: 1.5em;
    padding: 0 0 0.025em 0;
    /*margin: 0.2em 0 0.2em 0;*/
    margin: 0 0 0.5em 0;
    display: block;
    line-height: 1.16em;
}
.LL-std-input
{
    width: 90%;
    font-size: 180%; /* 1.0em, or 1.2 for high lines */
    margin: 0 auto 1.0em auto;
    display: block;
}

.LL-std-input-small
{
    width: 90%;
    font-size: 150%; /* 1.0em, or 1.2 for high lines */
    margin: 0 auto 1.0em auto;
    display: block;
}

.LL-std-input-select
{
    width: auto;
    font-size: 180%; /* 1.0em, or 1.2 for high lines */
    margin: 0 auto 1.0em auto;
    /*display: block;*/
}

@media only screen and (min-width: 481px) {
    .LL-input-label { width: 90%; font-size: 180%; padding: 0 0 1.0em 0; margin: 0.0em 0 0em 0; }
    .LL-std-input   { width: 90%; font-size: 200%; padding: 1.0em; margin: 0 0 1.5em 0; }
    .LL-std-input-small   { width: 90%; font-size: 150%; padding: 1.0em; margin: 0 0 1.5em 0; }
}

@media only screen and (min-width: 961px) {
    .LL-input-label { width: 30%; font-size: 200%; padding: 0 0 1.0em 0; margin: 0.0em 0 1.25em 0; display: inline-block; }
    .LL-std-input { width: 60%; font-size : 220%; padding: 1.0em; margin: 0.0em 0 1.25em 0;  display: inline-block; }
    .LL-std-input-small   { width: 60%; font-size: 150%; padding: 1.0em; margin: 0 0 1.5em 0; }
}

@media only screen and (min-width: 1280px) {
    .LL-input-label { width: 30%; font-size: 240%; padding: 0 0 1.25em 0; margin: 0.0em 0 1.0em 0; display: inline-block; }
    .LL-std-input { width: 60%; font-size: 260%; padding: 1.0em; margin: 0.0em 0 1.5em 0;  display: inline-block;}    
    .LL-std-input-small   { width: 50%; font-size: 150%; padding: 1.0em; margin: 0 0 1.5em 0; display: inline-block; }
    .LL-std-input-select { width: auto; font-size: 280%; padding: 0.75em; margin: 0.0em 0 0.0em 0; display: inline; }
}






.Autosize {
    -webkit-transition: height 0.1s;
    -moz-transition: height 0.1s;
    transition: height 0.1s;
}


/* NEW breadcrumb stuff as of 2018 - cool new design ;-) */
.BreadcrumbNav-2
{
    border-bottom: 1px dotted #DFDFDF;
    border-top: 1px dotted #DFDFDF;
    padding: 0.5em 0 0.5em 0;
    margin: 0;
    font-size: 90%;
}




/* delete if possible */
.bubbleList {
    margin: 0.5em 0px 0.5em 0px;
}
.bubbleItem24 {
    border: none;
    padding: 6px 12px 6px 12px;
    margin: -3px 0.5em 0px 0px;
    font-weight: bold;
    font-size: 133%;
    text-align: center;
    vertical-align: middle;
    border-radius: 25px;
    -moz-border-radius:25px;     
    -khtml-border-radius:25px;   
    -webkit-border-radius:25px;  
	 box-shadow: rgba(0,0,0, 0.2) 0px 0px 3px;  
    -moz-box-shadow: rgba(0,0,0, 0.2) 0px 0px 3px;  
    -o-box-shadow: 0 0 3px #E0E0E0;    
    -khtml-box-shadow: rgba(0,0,0, 0.2) 0px 0px 3px;   
    -webkit-box-shadow: rgba(0,0,0, 0.2) 0px 0px 3px;  	 
    color: #FFFFFF;
    background-color: #0ec9d5;
    display: inline-block;
}

.bubbleItem24.OKbubble {
    padding: 8px 12px 8px 12px;
}

.bubbleItem24.GrayBubble {
    background-color: #777777;
}



/* centerpanel for various stuff */
.centerPanel-v2 {
    width: 100%;
	margin: 0px auto 0px auto;	
	padding: 0;
}
@media only screen and (min-width: 481px)
{
    .centerPanel-v2 { width: 100%; }
}
@media only screen and (min-width: 961px)
{
    .centerPanel-v2 { width: 80%; }
}
@media only screen and (min-width: 1280px)
{
    .centerPanel-v2 { width: 60%; }
}

.center
{
    text-align: center;
}



.CityList-headline      { margin: 5% 0% 1% 0; padding: 0 0 0.5% 0;}
.CityList-a             { float: left;	width: 97%;		margin: 0% 1em 0% 0;}

@media only screen and (min-width: 461px)
{
    .CityList-a { width: 47%; }
}
@media only screen and (min-width: 961px)
{
    .CityList-a { width: 30%; }
}
@media only screen and (min-width: 1280px)
{
    .CityList-a { width: 24%; }
}


.CitySelector               { border: 10px solid #000000;} /* ???????????? TODO: check/delete*/
.CitySelectorRow            { padding: 0.5em 0 0.5em 0; border-bottom: 1px dotted #E0EaE1; display: block; clear:both;}
.CitySelectorRow:hover      { background-color: #FBFDAB;} /*background-color:#FBFDCD*/
.CitySelectorName           { float: left;  width: 40%; color: #404a59; font-size:1.16em; /* font-weight:bold */ }
.CitySelectorName .TextHit  { border-bottom: 1px dotted #0ec9d5; font-weight:bold;}
.CitySelectorState          { float: left; color: #404a59; font-size:0.9em; }
.CitySelectorAction         { float: right; width: 15%; text-align: center; font-size:1.0em; background-color: #AAAAAA; color: #FFFFFF; padding: 0.3em 1.0em 0.3em 1.0em; border-radius: 0.3em; -moz-border-radius:0.3em; -khtml-border-radius:0.3em; -webkit-border-radius:0.3em;  box-shadow: 0 0 3px #b4b4b4;	-moz-box-shadow: 0 0 3px #b4b4b4;		-khtml-box-shadow: 0 0 3px #b4b4b4;     -webkit-box-shadow: 0 0 3px #b4b4b4; }
.CitySelectorRow .last      { border: none; }
.CitySelectorRowAbroadSep   { float: none; color: #AAAAAA; padding: 0.5em 0.6em 0.5em 0.1em; margin: 1em 0em 0.5em 0em; font-weight: bold; background-color: #F7F7F7; border-radius: 0.4em; -moz-border-radius:0.4em; -khtml-border-radius:0.4em; -webkit-border-radius:0.4em; }
.CitySelectorRow:hover .CitySelectorAction     {  background-color: #0ec9d5; color: #FFFFFF;  }

@media only screen and (min-width: 961px){
    .CitySelectorName       { font-size:150%; }
    .CitySelectorState      { font-size:150%; }
    .CitySelectorAction     { font-size:150%; width: 10%; padding: 0.5em 0.5em 0.5em 0.5em;}
}

.CitySelectorPopupVersion
{
    position: absolute;
    margin: 0.5em 0 0 0;
    border: 1px solid #EAEAEA;
    left: 0;
    visibility: hidden;
    background-color: #FFFFFF;
    border-radius: 3px;
    -moz-border-radius:3px;     /* BROWSER: FireFox */
    -khtml-border-radius:3px;   /* BROWSER: Konqueror */
    -webkit-border-radius:3px;  /* BROWSER: webkit */    
	box-shadow: 0 0 15px #DDDDDD;			-moz-box-shadow: 0 0 15px #DDDDDD;		-o-box-shadow: 0 0 15px #DDDDDD;-khtml-box-shadow: 0 0 15px #DDDDDD;     -webkit-box-shadow: 0 0 15px #DDDDDD;
	width: 99%;         
}
.CitySelectorPopupVersion .CitySelectorRow                { padding: 0.5em 0.5em 0.5em 0.5em; }
.CitySelectorPopupVersion .CitySelectorName               { font-size: 1.16em; text-align: left; }
.CitySelectorPopupVersion .CitySelectorName .TextHit      { border-bottom: 1px dotted #0ec9d5; font-weight: bold;}
.CitySelectorPopupVersion .CitySelectorState              { font-size: 0.9em; text-align: left; vertical-align: middle; }
.CitySelectorPopupVersion .CitySelectorAction             { width: 15%; font-size:1.0em; }
.CitySelectorPopupVersion .CitySelectorRowAbroadSep       { text-align: left; padding: 0.4em 0.6em 0.3em 0.6em;  margin: 1em 0em 0.5em 0em; font-weight: bold; color: #AAAAAA; background-color: #F7F7F7; border-radius: 0.4em; -moz-border-radius:0.4em; -khtml-border-radius:0.4em; -webkit-border-radius:0.4em; }

@media only screen and (min-width: 961px){
    .CitySelectorPopupVersion       {         left: 10%; position: absolute; width: 80%; margin: 0.5em auto 0 auto;}

    .CitySelectorPopupVersion .CitySelectorName       { font-size:150%; }
    .CitySelectorPopupVersion .CitySelectorState      { font-size:150%; }
    .CitySelectorPopupVersion .CitySelectorAction     { font-size:150%; }

}







.CheckOutStepBar                {    padding: 0 0 0.8em 0;    margin: 0.5em 0 0em 0;     }
.CheckOutStepFooter             {    padding: 0 0 2em 0;    margin: 0.5em 0 2em 0;     border-bottom: 2px dotted #E0EaE1;}
.CheckOutStepBar .CheckOutStep  {    display: block; font-size: 1.33em; padding: 0.0em 1.33em 0.33em 0em;    margin: 0 0em 0 0;    text-align: left;  }

.CheckOutStepBar .activeStep    {  color: #c71c75;  border-radius: 3px;-moz-border-radius:3px;-khtml-border-radius:3px;-webkit-border-radius:3px;}


@media only screen and (min-width: 761px) {
    .CheckOutStepBar                {    margin: 1.0em 0 1.0em 0; text-align: center; border-bottom: 2px dotted #E0EaE1;  }
    .CheckOutStepBar .CheckOutStep  {    display: inline;    font-size: 1.66em; padding: 0.7em 1.33em 0.7em 0em;    margin: 0 2.5em 0 0;      }
}

@media only screen and (min-width: 961px) {
    .CheckOutStepBar                {    margin: 1.5em 0 1.5em 0;}
    .CheckOutStepBar .CheckOutStep  {    margin: 0 5em 0 0;}
}

@media only screen and (min-width: 1280px) {
    .CheckOutStepBar                {    margin: 1.5em 0 1.5em 0;}
    }





.CheckBoxList-tile10 {
	margin: 0 1.0em 1.0em 0;
	width: 128px;
	padding: 0.5em 1.0em 0.5em 1.0em;
    text-align: center;
    cursor:pointer; 	
    border: dotted 2px #E0EaE1;
    display: inline-block;
}

.CheckBoxList-tile10 img {
	width: 128px;
	height: 128px;
}

.CheckBoxList-tile10:hover {	border-color: #c71c75;	color: #c71c75;}
.CheckBoxList-tile10.selected {	border-color: #c71c75;	color: #c71c75;}
.CheckBoxList-tile10.NOTselected {	border-color: #E0EaE1;	color: #404a59;}
.CheckBoxList-tile10 input[type="radio"] { display: none; }  /* this one should be a relict from the giftpopupbox? */


.CheckBoxList-Std-10                        { display:inline-block; padding: 0.4em; width: 93%; border: dotted 2px #E0EaE1; vertical-align: middle;font-size: 1.6em; margin: 0 0 0.75em 0;}
.CheckBoxList-Std-10 input[type="checkbox"] { margin: 0 0.4em 0.0em 0; }  
.CheckBoxList-Std-10:hover                  {	border-color: #c71c75;	color: #c71c75;}
.CheckBoxList-Std-10.selected               {	border-color: #c71c75;	color: #c71c75;}
.CheckBoxList-Std-10.NoBorderSmallFont               {	border:none; padding: 0.2em; margin-bottom: 0.2em;  } /* ATTENTION: we set this 1.0 here because of the DOM structure, since this element is used at other places, so its somewhat tricky*/
.CheckBoxList-Std-10.smallfont              { font-size: 1.16em; }

@media only screen and (min-width: 481px) {
    .CheckBoxList-Std-10                        { padding: 0.4em; width: 95%; }
    .CheckBoxList-Std-10 input[type="checkbox"] { margin: 0 0.4em 0 0; }  
}
@media only screen and (min-width: 961px) {
    .CheckBoxList-Std-10                        { font-size:180%; }
    .CheckBoxList-Std-10 input[type="checkbox"] { }  
    .CheckBoxList-Std-10.smallfont   { font-size: 1.5em; }
}
@media only screen and (min-width: 1280px) {
    .CheckBoxList-Std-10                        { padding: 0.75em 0.5em 0.75em 0.5em;  width: 100%; border: dotted 2px #E0EaE1; vertical-align: middle;font-size: 2.4em; margin: 0 0 0.75em 0;}
    .CheckBoxList-Std-10 input[type="checkbox"] { margin: 0 0.5em 0 0; }  
}














.contentBox-full                {    width: 100%; padding: 0% 0% 5em 0;    margin: 0 0 0 0; float: left; }
.contentBox-full div            {    }
.contentBox-full div.ico        {    float: left; border: 0px solid #FF0000; }
.contentBox-full h2             {    font-size: 2em; line-height: 1.16em; padding: 0.0em 0em 0.33em 0em; font-family: Georgia, "Times New Roman"; }
.contentBox-full .textColumn {    width: 100%; font-size: 1.3em; line-height: 1.33em; border: 0px solid #00FF00; }
.contentBox-full .h2QuestionTeaser   {    display: inline-block; color: #FFFFFF; padding: 0.1em 0.4em 0.0em 0.4em;  font-size: 1em; margin: 0.0em 0 0.33em 0; background-color: #0ec9d5; border-radius: 0.2em; -moz-border-radius:0.2em; -khtml-border-radius:0.2em; -webkit-border-radius:0.2em; }


@media only screen and (min-width: 481px) {
    .contentBox-full .textColumn{    width: 100%; font-size: 1.3em; line-height: 1.33em; }
    .contentBox-full h2 { font-size: 2.16em;  line-height: 1.3em; }
    .contentBox-full .h2QuestionTeaser      {      font-size: 1em; margin: 0.0em 0 0.5em 0; padding: 0.2em 0.5em 0.1em 0.5em; }
}
@media only screen and (min-width: 961px) {
    .contentBox-full .textColumn{    width: 100%; font-size: 1.5em; line-height: 1.4em; }
    .contentBox-full h2 { font-size: 2.66em; line-height: 1.25em; }
    .contentBox-full .h2QuestionTeaser      {    font-size: 1.16em; margin: 0.0em 0 0.5em 0; padding: 0.4em 1.0em 0.4em 1.0em;   }
}
@media only screen and (min-width: 1280px) {
    .contentBox-full .textColumn{    width: 100%; font-size: 1.66em; line-height: 1.5em; }
    .contentBox-full h2 { font-size: 4em; margin: 0; }
    .contentBox-full .h2QuestionTeaser      {      font-size: 1.33em; margin: 0.0em 0 1.0em 0; padding: 0.4em 1.0em 0.2em 1.0em; }
}



.contentBox-full ul             {    clear:both;   list-style: none; margin: 0;    display: inline; width: 50%;}
.contentBox-full ul li          {    text-align: left;    margin: 0;    padding: 0; font-size: 1.25em; }



/*
default page, question table - OLD */
.QuestionAnswerTable 
{
    width: 70%;
    margin: 0px auto 0px auto;
    padding: 0.25em 0 0.25em 1%;
    display: block;
    text-align: left;
    border-bottom: 1px dotted #C0C0C0;
}
@media only screen and (min-width: 481px) 
{
    QuestionAnswerTable { width: 50%; }
}
.QuestionAnswerTable .firstChar
{
    color: #FF0000;
    display: inline-block;
    margin-right: 2em;
}


 
/*
control bar, standard - used for the arrangement of controls e.g. on pages like /search
*/
.ControlBar-Std
{
    /*background-color: #FAFAFA;*/
    /*border-top: 2px dotted #E0EaE1;*/ /*E5E5E5, C0CaC1 */
    /*border-bottom: 2px dotted #E0EaE1; */ /*E5E5E5, C0CaC1 */
    /*padding: 0.5em 0 0.5em 0; */ /*FS20180706 */
    font-size: 1.16em;
    text-align: center;
}

.ControlBar-Std .controlOption               { display: inline-block;  margin: 0 0.66em 0.66em 0.0em; border: 0px solid #FF0000; }
.ControlBar-Std .controlOption .Location     { width: 9em; margin: 0 0.5em 0 0;}
.ControlBar-Std .controlOption .Radius       { width: 6em; margin: 0 0 0 0;}
.ControlBar-Std label.dropdown              { }
.ControlBar-Std label.forCheckbox           { margin: 0.0em 1.0em 0.0em 0; padding: 0 0 0.0em 0.5em; word-wrap: break;}



.div-line-std        {    border-bottom: 2px dotted #E0EaE1;    margin: 0;    padding: 0;}
.div-line-std.top1   {    margin: 2em 0 0 0;    padding: 0;}
.div-line-thin       {    border-bottom: 1px dotted #E0EaE1;    margin: 0;    padding: 0;}


 
/*
fileinput, used for fileuploads (me/settings/foto and uplaod/fbsignup etc.)
*/ 
.Fileinput-v2 {
	border: solid 1px #DaD7D4;  /* good: E6E5E3- original:eae7e4  - dark1:aaa7a4*/
    border-radius: 0.4em;  -moz-border-radius:0.4em; -khtml-border-radius:0.4em; -webkit-border-radius:0.4em; 
    padding: 0.5em 0.5em 0.4em 0.5em;
    color: #404a59;
    width: 93%;
    font-size: 1.60em;
    display: none;
}
@media only screen and (min-width: 481px) {
   .Fileinput-v2 { width: 95%; }
}

@media only screen and (min-width: 961px) 
{
   .Fileinput-v2 { width: 80%; }
}

@media only screen and (min-width: 1280px) 
{
    .Fileinput-v2 { width: 60%; font-size: 2.4em; }
}

 
 
 /*
*
* Fotobox Popup on page "/user/USERNAME"
*
*/

.FotoboxContent{
    /*width: 300px;*/
    clear: both; 
    text-align: center;
    /*float:left;*/
    /*margin-bottom: 10px;*/
}

.FotoboxBrowseLeft {
    width: 65px; 
    float:left; 
    text-align: left; 
    /*padding: 0 0 0 50%;*/
}
.FotoboxBrowseRight {
    width: 65px; 
    float:left; 
    text-align: right; 
    /*padding: 0 50% 0 0;*/
}
.FotoboxBottom{
    clear: both; 
	border-top: 2px dotted #E0EaE1;
	margin: 1em 0 0 0; 
    padding: 1em 0 0 0; 
    text-align: center;
}


.foto-24 { height: 24px;width: 24px; }
.foto-32 { height: 32px;width: 32px;     border-radius: 0.2em; }
.foto-44 { height: 44px;width: 44px; }
.foto-48 { height: 48px;width: 48px; }
.foto-60 { height: 60px;width: 60px; }
.foto-80 { height: 80px;width: 80px; }
.foto-156 { height: 156px; width: 156px; }
.foto-226 { height: 226px; width: 226px; }
.foto-283 { height: 283px; width: 283px; }


.foto-24-border, .foto-32-border 
{
    padding: 0;
    margin: 0;
    border: solid 1px #EAEAEA;
}

    
.foto-44-border, .foto-80-border {
    padding: 2px; 
    border: solid 1px #EAEAEA;
    border-radius: 2px;
    -moz-border-radius:2px;     /* BROWSER: FireFox */
    -khtml-border-radius:2px;   /* BROWSER: Konqueror */
    -webkit-border-radius:2px;  /* BROWSER: webkit */    
	box-shadow: 0 0 5px #EFEFEF;			    /* discuss: should be deleted?!, we are applaying shadow to fotos always based on random CSS/ID*/
	-moz-box-shadow: 0 0 5px #EFEFEF;		
    -o-box-shadow: 0 0 5px #EFEFEF;
	-khtml-box-shadow: 0 0 5px #EFEFEF;     
	-webkit-box-shadow: 0 0 5px #EFEFEF;         
}

.foto-44-border-inv-placeholder {
    padding: 2px; 
    border: solid 1px #FFFFFF;
    display: inline-block;
}
.foto-44-border.list-10, .foto-80-border.list-10
{
    margin: 0 10px 10px 0;
}
.foto-44-border.list-0, .foto-80-border.list-0
{
    margin: 0;
    padding: 0;
}
/* DELETE: OLD: List-10!?*/



.foto-pp-283-blur1
{
    width: 100%;
    height: 100%;
    box-shadow: 0 0 15px #AFAFAF;			
	-moz-box-shadow: 0 0 15px #AFAFAF;		
    -o-box-shadow: 0 0 15px #AFAFAF;
	-khtml-box-shadow: 0 0 15px #AFAFAF;     
	-webkit-box-shadow: 0 0 15px #AFAFAF;   
	
	border: solid 0px #FFFFFF;
    border-radius: 3px;
    -moz-border-radius:3px;     /* BROWSER: FireFox */
    -khtml-border-radius:3px;   /* BROWSER: Konqueror */
    -webkit-border-radius:3px;  /* BROWSER: webkit */   	   
    margin: 0 0 1.0em 0;
}


@media only screen and (min-width: 481px) {
   .foto-pp-283-blur1 { width: 100%; height: 100%; }
}

@media only screen and (min-width: 961px) 
{
   .foto-pp-283-blur1 { width: 80%; height: 80%;}
}

@media only screen and (min-width: 1280px) 
{
    .foto-pp-283-blur1 { width: 60%; height: 60%;}
}






.FotoUploadClickArea {
    display: block;
    width: 96%;
    text-align: center;
    border: 2px dotted #0ec9d5;
    padding: 0.5em 0 0.5em 0;
    margin: 0 auto 0 auto;
}
.FotoUploadClickArea:hover{
    border: 2px dotted #c71c75;
}

.FotoUploadClickArea:hover span{
    background-color: #c71c75;
    border-color: #c71c75;
}


.FotoUploadListEntry {
    margin: 0 0 1.0em 0;
    padding: 0 0 1.0em 0;
    border-bottom: 2px dotted #EAEAEA;
    vertical-align: top;
}

.FotoUploadListEntry img
{
    margin: 0;
    padding: 0;
    width: 50px;
    height: 50px;
	box-shadow: 0 0 5px #DFDFDF;			
	-moz-box-shadow: 0 0 5px #DFDFDF;		
    -o-box-shadow: 0 0 5px #DFDFDF;
	-khtml-box-shadow: 0 0 5px #DFDFDF;     
	-webkit-box-shadow: 0 0 5px #DFDFDF;      
    border: solid 0px #FFFFFF;
    border-radius: 3px;
    -moz-border-radius:3px;     /* BROWSER: FireFox */
    -khtml-border-radius:3px;   /* BROWSER: Konqueror */
    -webkit-border-radius:3px;  /* BROWSER: webkit */   
    display: inline;
    vertical-align: top;
}



@media only screen and (min-width: 481px) {
   .FotoUploadListEntry img {  width: 80px; height: 80px; margin: 0 0.5em 0 0;}
}

@media only screen and (min-width: 961px) 
{
    .FotoUploadListEntry img {  width: 120px; height: 120px; margin: 0 2.0em 0 0;}

}
@media only screen and (min-width: 1280px) 
{
    .FotoUploadListEntry img {  margin: 0 5.0em 0 0;}
}







/* DELETE ?!**/  
.Gift-10-64
{
    width: 50px;
    margin: 0 2.0em 0.0em 0;
    padding: 0;
}
.Gift-10.last {	margin-right: 0;}





.Gift-10 
{
    vertical-align: top;
	margin: 0 0 0.5em 0;
	padding: 0.33em 0 0.125em 0;
    text-align: center;
    cursor:pointer; 	
    border: dotted 2px #E0EaE1;
/*    width: 60px; */
    display: inline-block;
}

.Gift-10 img            { width: 32px;  height: 32px;   }

.Gift-10:hover          {	border-color: #c71c75;	color: #c71c75;}
.Gift-10.selected       {	border-color: #c71c75;	color: #c71c75;}
.Gift-10.NOTselected    {	border-color: #E0EaE1;	color: #404a59;}
.Gift-10 input[type="radio"] { display: none; }
.Gift-10 .numCoins      {   display: block;   padding: 0; font-size: 0.7em; margin: 0; }
.Gift-10 .description   {   display: none;  font-size:0.75em; line-height: 1.0em; }
.Gift-10 .season        {   display: block; color: #D80D20; text-align: center; font-size:0.75em; margin: 0; line-height: 1.0em;}
.Gift-10 .clicklabel    {   display: block; width: 100%; border: 0px solid #FF00FF; }


@media only screen and (min-width: 961px) {
    .Gift-10 { margin: 0 1% 0 0; padding: 0 1% 0 1%;  }
    .Gift-10 img {width: 64px;height: 64px;}
}

@media only screen and (min-width: 1280px) {
    .Gift-10 {width: 175px;}
    .Gift-10 img { width: 128px; height: 128px; }
}


.icoPay
{
    background-image:url("/images/ico-checkoutprods.jpg"); 
    background-repeat: no-repeat;
}



/* 20080224 - updated -  */
.HeaderBottomLine-shaddow
{
    box-shadow: 0 1px 3px 1px #CACACA;			
	-moz-box-shadow: 0 1px 3px 1px #CACACA;
	-khtml-box-shadow: 0 1px 3px 1px #CACACA;
    -webkit-box-shadow: 0 1px 3px 1px #CACACA;
}



.IsOnline       { color: #FFFFFF; font-size: 0.8em; font-weight: bold; padding: 0.5em 0.8em 0.5em 0.8em; margin: 0; background-color: #4dc901; border-radius: 0.3em; -moz-border-radius:0.3em; -khtml-border-radius:0.3em; -webkit-border-radius:0.3em; }
.IsOffline      { color: #FEFEFE; font-size: 0.8em; padding: 0.5em 0.8em 0.5em 0.8em; margin: 0; background-color: #B7B7B7; border-radius: 0.3em; -moz-border-radius:0.3em; -khtml-border-radius:0.3em; -webkit-border-radius:0.3em;}
.IsOffline.red  { color: #FFFFFF; padding: 0.4em 0.6em 0.3em 0.6em; font-weight: bold; margin: 0; background-color: #ff3d30; border-radius: 0.3em; -moz-border-radius:0.3em; -khtml-border-radius:0.3em; -webkit-border-radius:0.3em; }
.IsOffline.yellow { color: #202a39; padding: 0.5em 0.8em 0.5em 0.8em; margin: 0; background-color: #FFFD83; border-radius: 0.3em; -moz-border-radius:0.3em; -khtml-border-radius:0.3em; -webkit-border-radius:0.3em;}

@media only screen and (min-width: 961px) { 
    .IsOnline, .IsOffline, .IsOfflineRED  { font-size: 1.0em;  }
}

@media only screen and (min-width: 1280px) {
    .IsOnline, .IsOffline, .IsOfflineRED  { font-size: 1.0em;  }
} 





.linklist 
{
    clear: both;
    list-style: none;
    margin: 0.5em 0em 0.5em 0em;
    text-align: center;
}
.linklist a {
	list-style-type: none;
	padding: 0em 0.75em 0.6em 0em;
	margin: 0.0em 0em 0em 0em;
	
}


.LLcolor        {	color: #0ec9d5;}
.LLbackground    {	background-color: #0ec9d5;}
.LLred      {	color: #ff3d30;} /* #D61F26 */
.LLgreen        {	color: #10AA00; }
.LLpink         {	color: #c71c75; }
.LLlightgray    {   color: #909aA9; }
.LLYellow       { color: #FFFD83;  }
.LLyellowBox    { 
    background-color:#FFFD83;
    border: 1px solid #F8F8CB;	
	padding: 6px 6px 6px 6px;    
	/*text-align: center;*/
	margin: 0px 0px 0px 0;
}


.LL-link-submit
{
    border: none;
    font-weight: normal;
    background-color: #FFFFFF;
    text-decoration: none;
    padding: 0.2em 1.0em 0.2em 1.0em;
    color: #0ec9d5;
}
.LL-link-submit:hover{	color: #c71c75;}


/* CHECK THIS, to be replaced wih popup-submit / 2018 ?*/
.LL-std-submit, a.LL-std-submit
{
    font-size: 1.16em;
    font-weight: bold;
    background-color: #0ec9d5;
    color: #FFFFFF;
    border: solid 2px #0ec9d5; /* same color as background due rendering issues */
    border-radius: 2em;
    -moz-border-radius:2em;     /* BROWSER: FireFox */
    -khtml-border-radius:2em;   /* BROWSER: Konqueror */
    -webkit-border-radius   :2em;  /* BROWSER: webkit */	 
    text-decoration: none;
    padding: 0.2em 1.0em 0.2em 1.0em;
    text-transform:uppercase;


    box-shadow: 0 0 3px #b4b4b4;			/* a little bit of small shadow around the buttons may look nice?? */
	-moz-box-shadow: 0 0 3px #b4b4b4;		
	-khtml-box-shadow: 0 0 3px #b4b4b4;     
	-webkit-box-shadow: 0 0 3px #b4b4b4;

    
}

.LL-std-submit.red { border: solid 2px #c71c75; background-color: #c71c75; padding: 0.2em 1.0em 0.2em 1.0em;}


/* check if we really want to keep this!*/
.LL-std-submit.tiny     { font-size: 1.0em;  padding: 0em 0.5em 0em 0.5em; text-transform:none; font-weight: normal;}
.LL-std-submit.small    { font-size: 1.16em; padding: 0em 0.5em 0em 0.5em; text-transform:none; }
.LL-std-submit.big      { font-size: 1.5em;  padding: 0.25em 1.33em 0.25em 1.33em; }
.LL-std-submit.bigXL    { font-size: 2.0em;  padding: 0.25em 1.33em 0.25em 1.33em; }
   


.MessageInputPanel {
    width: 98%;
	padding: 0;
    margin: 0;
    position: fixed;
    bottom: 1.5%;
    margin: 0 auto 0 auto;
}

.MessageInputPanel .TextInput
{
    width: 72%;
    height: 4em;
    font-size: 1.33em;
    line-height: 1.25em;
    display:inline-block;
    border-radius: 0.3em; -moz-border-radius:0.3em; -khtml-border-radius:0.3em; -webkit-border-radius:0.3em; 
    background-color:#F9F9F9;
    overflow-y: auto;
    overflow-x: hidden;
}

.MessageInputPanel .SendButton
{
    background-color: #0ec9d5; color:#FFFFFF; border-radius: 0.3em; -moz-border-radius:0.3em; -khtml-border-radius:0.3em; -webkit-border-radius:0.3em; 
    
    box-shadow: 0 0 4px 1px #A0A0A0;	-moz-box-shadow: 0 0 4px 1px #A0A0A0;		-khtml-box-shadow: 0 0 4px 1px #A0A0A0;     -webkit-box-shadow: 0 0 4px 1px #A0A0A0;    
    font-size: 1.16em; 
    font-weight:bold;
    cursor:pointer; 
    height: 5em; 
    width: 20%; 
    padding: 0%;
    float:right;

    display: flex;
    justify-content: center;
    align-items: center;
}

.MessageInputPanel .SendButton:active, .MessageInputPanel .SendButton:hover
{
    background-color: #c71c75;
}

.Mailbox-ConversationAvatarPanel
{
    margin:0; border-bottom: 2px dotted #EAEAEA; 
    padding: 0 1.0em 1.0em 0;
    text-align: right;
}





.MailThread
{
    margin: 0 0 0.5em 0;
}

.MailThread .post               { position:relative; font-size: 1.16em; text-align: left; padding: 0.8em 1.0em 0.8em 1.0em; display:inline-block; border-radius: 0.66em; -moz-border-radius:0.66em; -khtml-border-radius:0.66em; -webkit-border-radius:0.66em; }
.MailThread .Woman              { background-color: #fde6e6; border: 1px solid #ffe1e1; }
.MailThread .Man                { background-color: #ebeefb; border: 1px solid #e7e9ff; }
.MailThread .NoBackground       { background-color: transparent; border: none; padding-top:0; padding-bottom:0;}
.MailThread .GiftImage          { width: 50px; margin: 0 1.0em 0.0em 1.0em; padding: 0; }
.MailThread.DaySeparatorBar     { background-color: #F7F7F7; text-align: center; padding: 0.3em 0.0em 0.3em 0.0em; margin: 1.0em auto 1.0em auto; width: 80%; font-size:0.9em; color: #707a89; font-weight:bold; }

.MailThread .post .LLlightgray
{
    position: absolute;
    top: 0;
    font-size: 0.8em;
    color: #9E9E9E;
}




.MailThread .avatar
{
    width: 28%;
    display: inline-block;
    float: left;
    padding: 1.5em 0 1.5em 0;
    margin: 0em 0 2.5em 0;
}

.MailThread .avatarimg{    float:left; margin: 0 0.5em 0 0; min-width:32px; }
.MailThread .avatartext{    float:left;    margin: 0 0 0 1.0em;}
.MailThread .avatartext h4{    margin: 0;      padding: 0 0 0.2em 0;}

.ChatpartnerListAvatarRow               {border-bottom: 1px dotted #E0EaE1;padding: 0.5em 0 0.2em 0;margin: 0 0 0.4em 0;vertical-align:top;width: 100%;}
.ChatpartnerListAvatarRow:hover, 
.ChatpartnerListAvatarRow_fixedhover    { background-color: #EFEFEF; border-radius: 0.4em; -moz-border-radius:0.4em; -khtml-border-radius:0.4em; -webkit-border-radius:0.4em; }
.ChatpartnerListAvatarRow h4            { padding: 0; margin: 0; vertical-align:top; }
/*.MailboxChatpartnerListAvatarRow h4:hover, .MailboxChatpartnerListAvatarRow a:hover { color:#FFFFFF; }*/

div#MailboxGallery { }

.Mailbox-MailPane       { padding:0; border:none; margin: 0; }

.MailboxGift-24         { width: 24px;  height: 24px;   }
.MailboxGift-32         { width: 32px;  height: 32px;   }

.Mailbox-AvatarCol      { width: 100%; display: inline-block; }
.Mailbox-TextCol        { width: 100%; font-size: 1.16em; display: inline-block; vertical-align: top; }
.Mailbox-FunctionCol    { width: 100%; display: inline-block; position:absolute; top:15%; right: 1%; }

.Mailbox-YellowSign     { font-size: 1.0em; background-color: #FFFD83; color: #404a59; padding: 0.7em 0.7em 0.6em 0.7em; margin: 0.3em 0 0.3em 0;text-align: center;border-radius: 0.3em; -moz-border-radius:0.3em; -khtml-border-radius:0.3em; -webkit-border-radius:0.3em;  font-size: 1.0em;}

@media only screen and (min-width: 481px) {
    .MessageInputPanel .TextInput { width: 80%;}
    .MessageInputPanel .SendButton { width: 15%; }
}

@media only screen and (min-width: 761px) {
    .Mailbox-AvatarCol      { width: 32%; }
    .Mailbox-TextCol        { width: 39%; font-size: 1.16em; }
    .Mailbox-FunctionCol    { width: 25%;  }
    .MessageInputPanel .TextInput { width: 85%;}
    .MessageInputPanel .SendButton { width: 10%; }
    .Mailbox-ConversationAvatarPanel { text-align: center; }
}

@media only screen and (min-width: 961px) {
    .Mailbox-MailPane       {padding-left:1.5%; border-left: 2px dotted #646464; margin-left: 1%;}
    .Mailbox-AvatarCol      { width: 32%; }
    .Mailbox-TextCol        { width: 39%; font-size: 1.16em; }
    .Mailbox-FunctionCol    { width: 25%; }

    .MailThread .post           { padding: 0.8em 1.25em 0.8em 1.25em; }
    .MailThread.DaySeparatorBar { width: 40%;  }
    .MailThread .NoBackground   { background-color: transparent; border: none; padding-top:0; padding-bottom:0;}

    .MessageInputPanel { width: 74%;    }
    .MessageInputPanel .TextInput { width: 85%;}
    .MessageInputPanel .SendButton { width: 10%; font-size:1.5em; height: 4em; }
}

@media only screen and (min-width: 1280px) {
    .MailboxGift-32         { width: 40px;  height: 40px;   }
    .Mailbox-AvatarCol      { width: 32%; }
    .Mailbox-TextCol        { width: 39%; font-size: 1.25em; }
    .Mailbox-FunctionCol    { width: 25%; }

    .MessageInputPanel { width: 68%;    }
    .MessageInputPanel .TextInput { width: 87%;}
    .MessageInputPanel .SendButton { width: 10%; font-size:1.5em;}
} 
@media only screen and (min-width: 1920px) {
    .Mailbox-AvatarCol      { width: 32%; }
    .Mailbox-TextCol        { width: 39%; font-size: 1.33em; }
    .Mailbox-FunctionCol    { width: 25%; }

    .MessageInputPanel { width: 60%;    }
    .MessageInputPanel .TextInput { width: 89%;}
    .MessageInputPanel .SendButton { width: 8%; font-size:1.5em;}
} 





.nof 
{
    clear: both;
}
/* cf -> "Clearfix" */
.cf:after
{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

/* check Page-Std-Headlien -> should be deleted! is currently the standard headline-formatting for all member/logged-in sites */
.Page-Std-Headline
{
    font-family: Georgia, "Times New Roman"; font-size: 1.5em; font-weight: normal;    margin: 0 0 0.4em 0;    padding: 0 0 0.2em 0; line-height: 1.0em;
}

.Page-Std-Headline.noMargin
{
    margin: 0 0 0 0;
}

.Page-Std-Headline.dotted, .LL-std-border, .PH1.dotted, .dottedHeadline {   border-bottom: 2px dotted #C0CaC1; /*E5E5E5, C0CaC1 */  }

@media only screen and (min-width: 761px) 
{
    .Page-Std-Headline  { font-family: Georgia, "Times New Roman"; font-size: 1.75em; font-weight: normal;    margin: 0 0 0.4em 0;    padding: 0 0 0.2em 0; line-height: 1.0em; }
}

@media only screen and (min-width: 961px) 
{
    .Page-Std-Headline  {  font-size: 2.0em; font-weight: normal; margin: 0 0 0.75em 0; padding: 0 0 0.4em 0; }
}

@media only screen and (min-width: 1280px) 
{

}   




















.Pager-Std-20 {      margin: 1.5em 0 1.0em 0;     text-align: center; }
.Pager-Std-20 a {
    padding: 7px 12px 6px 12px;
    background-color: #FFFFFF;
    margin: 0 0.5em 0 0.5em;
    font-size: 1.33em;
    font-weight: normal;
    border-radius: 2px;         /* explicit rounded boxes for the pager-box-links! */
    -moz-border-radius:2px;     /* BROWSER: FireFox */
    -khtml-border-radius:2px;   /* BROWSER: Konqueror */
    -webkit-border-radius:2px;  /* BROWSER: webkit */	
    border: 1px dotted #0ec9d5;
    display: inline-block;
}
.Pager-Std-20 a:hover{    background-color: #c71c75;    color: #FFFFFF; border-color: #c71c75;}
.Pager-Std-20 a.hit, .Pager-Std-20 a.hit:hover{    background-color: #0ec9d5;    font-weight: bold;    color: #FFFFFF; border-color: #0ec9d5;}
.Pager-Std-20 span.spacer{    padding: 0.0em 0.0em 0 0em  ; background-color: #FFFFFF;   color: #0ec9d5; font-size: 2.0em;}



.Pager-City-20 {      margin: 2.5em 0px 2.0em 0px;}
.Pager-City-20 a {
    padding: 3px 6px 3px 6px;
    background-color: #FFFFFF;
    margin: 0px 0.5em 0px 0px;
    font-size: 1.0em;
    font-weight: normal;
    border-radius: 2px;         
    -moz-border-radius:2px;     
    -khtml-border-radius:2px;   
    -webkit-border-radius:2px; 
}
.Pager-City-20 a:hover{    background-color: #c71c75;    color: #FFFFFF;}
.Pager-City-20 a.hit{    background-color: #0ec9d5;    font-weight: bold;    color: #FFFFFF;}
.Pager-City-20 span.spacer{    padding: 7px 0.5em 6px 0em  ; background-color: #FFFFFF;   color: #0ec9d5;}


@media only screen and (min-width: 1280px) {
    .Pager-Std-20 a { padding: 1.0em 1.3em 0.9em 1.3em;   }
}



.PinkBubble-small
{
    width: 1.0em;
    height: 1.0em;
    padding: 0.2em 0.40em 0.4em 0.30em;
    text-align: center;
    border-radius: 20px;
    -moz-border-radius:20px;     /* BROWSER: FireFox */
    -khtml-border-radius:20px;   /* BROWSER: Konqueror */
    -webkit-border-radius:20px;  /* BROWSER: webkit */	    
	background-color: #c71c75;    
	color: #ffffff;
	font-weight: bold;
	display: inline-block;
}

.PinkBubble-small:hover
{
	background-color: #ffffff;    
	color: #c71c75;
}

.PinkBubble-dot
{
    width: 0.4em;
    height: 0.4em;
    padding: 0.1em 0.1em 0.1em 0.1em;
    margin: 0.1em 0.1em 0.1em 0.3em;
    text-align: center;
    border-radius: 20px;
    -moz-border-radius:20px;     /* BROWSER: FireFox */
    -khtml-border-radius:20px;   /* BROWSER: Konqueror */
    -webkit-border-radius:20px;  /* BROWSER: webkit */	    
	background-color: #c71c75;    
	color: #ffffff;
	font-weight: bold;
	display: inline-block;
}




.PopupBackground {
	background-color: #202020;
	filter: alpha(opacity=80);
	opacity: 0.80;
	-moz-opacity: 0.80;
    width:100%; 
    height: 100%; 
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 998;
    visibility: hidden;	
}

.Popup {
    z-index: 999;
	visibility: hidden;	                /* yes, the default value is HIDDEN */
	box-shadow: 0 0 20px #383838;	-moz-box-shadow: 0 0 20px #383838;		-khtml-box-shadow: 0 0 20px #383838;     -webkit-box-shadow: 0 0 20px #383838;
    border-radius: 0.2em; -moz-border-radius:0.2em; -khtml-border-radius:0.2em; -webkit-border-radius:0.2em; 
    background-color: #FFFFFF;
    position: absolute;             /* default is absolute, so we user can scroll-away the popup */
    width: 95%;                     
    left: 0%;
    right: 0%;
    top: 1%;
    margin: 0 auto 0px auto;
    padding: 0;
    line-height: 1.5em;
    font-size: 1.16em;
}
.Popup-relative { position: relative; }
.Popup-fixed { position: fixed; }
.PopupXXL { width: 100%; }

.Popup ul {    list-style: none;    margin: 0;    padding: 0;   }
.Popup ul li {	padding: 0 0 0.0em 0;    margin: 0em 0 1.0em 0; }
.Popup label {	 }
.Popup input[type=text], .Popup input[type=password] {    padding: 0.5em;    font-size: 130%;    width: 90%; }
.Popup h1   { font-size: 1.75em; color: #0ec9d5; font-family: Georgia, "Times New Roman"; padding: 0 0 0em 0; line-height: 1.0; margin: 0 0 0.66em 0;}

/*.Popup button, .Popup-submit, a.Popup-submit -  ATTENTION: from now on, we have removed the prefix 'a' before the dot! 20182028 */
.Popup button, .Popup-submit, a.Popup-submit, a.Popup-submit-tiny
{
    font-size: 1.16em;      /* ATTENTION: in case of popup, we supply a fontsize !!!!!!!!!!!!!!!!! keep in mind when processing popups etc.*/
    font-weight: bold;
    background-color: #0ec9d5;
    color: #FFFFFF;
    border: solid 2px #0ec9d5; /* same color as background due rendering issues */
    border-radius: 0.3em; -moz-border-radius:0.3em; -khtml-border-radius:0.3em; -webkit-border-radius:0.3em;  
    text-decoration: none;
    padding: 0.2em 1.0em 0.2em 1.0em;
    text-transform:uppercase;
    box-shadow: 0 0 3px 1px #D0D0D0;	-moz-box-shadow: 0 0 3px 1px #D0D0D0;		-khtml-box-shadow: 0 0 3px 1px #D0D0D0;     -webkit-box-shadow: 0 0 3px 1px #D0D0D0;    
    display: inline-block;
    text-align: center;
    cursor:pointer;
}

.Popup-submit-secondary     { background-color: #B0B0B0; color: #FFF; border: none; }
.Popup-submit-tiny          { font-size: 1.0em;    padding: 0.1em 0.5em 0.1em 0.5em; background-color: #0ec9d5; color: #FFF;}
a.Popup-submit-thin          { font-size: 1.0em; font-weight: normal;   padding: 0.1em 0.5em 0.1em 0.5em; background-color: #0ec9d5; color: #FFF; text-transform:lowercase; }

.Popup-submit-black         { background-color: #222222; color: #FFF; border: none; font-weight: bold; padding: 0.5em 0.8em 0.5em 0.8em; border-radius: 0.3em; -moz-border-radius:0.3em; -khtml-border-radius:0.3em; -webkit-border-radius:0.3em;  }
.Popup-submit-black:hover   { background-color: #c71c75; color:#FFF; }
.Popup-submit-darkgray         { background-color: #616161;  color: #FFF; border-color: #616161; }

.Popup-submit-outline {

    background-color: #346789;
    background-color: #FFFFFF;
    color: #0ec9d5;
    box-shadow: none;	-moz-box-shadow: none;		-khtml-box-shadow: none;     -webkit-box-shadow: none;
}

.Popup button:hover, .Popup-submit:hover, .Popup-submit-tiny:hover, a.Popup-submit:hover, a.Popup-submit-tiny:hover, a.Popup-submit-thin:hover {    background-color: #c71c75;    color: #FFFFFF; border: solid 2px #c71c75; } /* hvering for all buttons and links in popups... */

.PopupHeadline                      { padding: 10px 15px 8px 15px; background-color: #0ec9d5; color: #FFFFFF; }
.PopupHeadlineText                  { font-size: 120%; }
.PopupHeadline a                    { color: #FFFFFF; }
.PopupCloseX                        { font-size: 150%; float: right; padding: 0.1em; }
.PopupContent                       { padding: 10px 15px 10px 15px; }
.PopupContent .SendMailTextArea     { width: 96%; height: 10em; font-size: 1.20em; line-height: 1.1em; resize: false; }
.PopupBottomButtonLine              { text-align: center; margin: 2.0em 0 0.5em 0; }
.PopupBottomButtonLine span         { display:inline-block; }
.Popup-subtext                      { text-align: left; font-size: 0.8em; line-height: 1.0em; margin: 0 0 0.5em 0;}

@media only screen and (min-width: 481px) {
   .PopupHeadlineText { font-size: 130%; }
   .Popup { width: 90%; top: 2%; }
   .Popup label { width: 25%; display: inline-block;}
   .Popup input[type=text], .Popup input[type=password] { width: 60%; font-size: 130%; padding: 0.5em; }
   .PopupContent .SendMailTextArea     { width: 96%; font-size: 1.2em; line-height: 1.16em;}
   .Popup-subtext                      { font-size: 0.9em; line-height: 1.1em; margin: 0 0 0.5em 0;}
}

@media only screen and (min-width: 761px) {
   .PopupContent .SendMailTextArea     { width: 97%; }
}

@media only screen and (min-width: 961px) {
   .Popup                                           { width: 80%; top: 3%; }
   .Popup label                                     { font-size: 150%; width: 30%; display: inline-block; }
   .Popup button, .Popup-submit, a.Popup-submit     { font-size: 1.5em;  padding: 0.25em 1.33em 0.25em 1.33em; } /* font size derived as em from above */
   .Popup input[type=text], .Popup input[type=password] { width: 60%; font-size: 150%; padding: 0.5em 0.5em 0.5em 0.5em; }
   .Popup h1                                        { font-size: 2.0em; margin: 0 0 0.5em 0;  }
   .PopupXXL                                        { width: 95%; }
   .Popup-submit-tiny, a.Popup-submit-tiny          { font-size: 1.25em;  padding: 0.15em 0.8em 0.15em 0.8em; }
   .Popup-submit-thin, a.Popup-submit-thin          { font-size: 1.0em; padding: 0.1em 0.5em 0.1em 0.5em; }
   .PopupContent .SendMailTextArea                  { width: 97%; height: 12em; font-size: 1.33em; line-height: 1.16em;}
   .Popup-subtext                                   { font-size: 1.0em; margin: 0 0 0.75em 0; }
}

@media only screen and (min-width: 1280px) 
{
    .Popup                                          { width: 60%; top: 5%; border-radius: 0.3em; -moz-border-radius:0.3em; -khtml-border-radius:0.3em; -webkit-border-radius:0.3em; }
    .Popup label                                    { font-size: 160%; width: 30%; display: inline-block; }
    .Popup input[type=text], .Popup input[type=password] { width: 60%; font-size: 160%; padding: 0.6em 0.6em 0.6em 0.6em; }    
    .Popup button, .Popup-submit, a.Popup-submit    { font-size: 1.66em;  } /* font size derived as em from above */ 
    .Popup h1                                       { font-size: 2.66em; padding: 0 0 0em 0; line-height: 1.0; margin: 0 0 0.5em 0;  }
    .PopupXXL                                       { width: 90%; }
    .Popup-submit-tiny, a.Popup-submit-tiny         { font-size: 1.25em;  padding: 0.15em 0.8em 0.15em 0.8em; }
    .Popup-submit-thin, a.Popup-submit-thin         { font-size: 1.25em; padding: 0.25em 0.75em 0.25em 0.66em; }
    .PopupContent .SendMailTextArea                 { width: 98%; height: 15em; font-size: 1.6em; line-height: 1.33em;}
    .PopupHeadline                                  { padding: 25px 20px 15px 20px; }
    .PopupHeadline a                                { color: #FFFFFF; }
    .PopupHeadlineText                              { font-size: 160%; }
    .PopupCloseX                                    { font-size: 200%; }
    .PopupContent                                   { padding: 15px 20px 20px 20px; }    
}






/* ########################## */


.ProfileEditHeadline        {    font-family: Georgia, "Times New Roman";    font-size: 3.33em;    font-weight: normal;    padding: 0;}



/* new FORM EDIT input stuff / 2018 / new sign up etc*/
.FormEditBlock {
    width: 100%;
    margin: 0 0.0em 1.0em 0.0em;
    padding: 0 0 1.0em 0;
    border-bottom: 1px dotted #D0DaD1;
    text-align: left;
}
.FormEditBlock.NoSeperatorLine {
    border-bottom: none;
}

.FormEditBlock .description {
    margin: 0 0% 0.5em 0;
    font-size: 1.5em;
    vertical-align: top;
    width: 40%;
    display: inline-block; 
    line-height: 1.5em;
    vertical-align: middle;
}
    
.FormEditBlock .content {
    margin: 0;
    font-size: 1.33em;
    line-height: 1.5em;   
    width: 50%;
    display: inline-block;
    vertical-align: middle;
}

.FormEditBlock .infotext        { font-size: 1.0em; display: block; margin: 0.33em 0 0 0;} 
.FormEditBlock .width-100        { width: 100%; } 
.FormEditBlock .contentFullWidth     { width:100%; }
.FormEditBlock .descriptionFullWidth     { width:100%; }

.FormEditBlock .contentFullWidth textarea    { width:94%; }

.FormEditBlock .description-smallfont   { font-size: 1.16em; }
.FormEditBlock .content-smallfont   { font-size: 1.16em; }

select#ddlEducationBox
{
    width: 90%;
}

@media only screen and (min-width: 481px) {

    .FormEditBlock .description     { font-size: 2.0em; }
    .FormEditBlock .content         { font-size: 1.66em; }
    .FormEditBlock .description-smallfont   { font-size: 1.16em; }
    .FormEditBlock .content-smallfont   { font-size: 1.16em; }
    select#ddlEducationBox              { width: 70%; }
}

@media only screen and (min-width: 761px) {
    .FormEditBlock .description             { display: inline-block; width: 42%; font-size: 2.0em; }
    .FormEditBlock .descriptionFullWidth    { width:42%; }
    .FormEditBlock .content                 { display: inline-block; width: 55%;  font-size: 1.66em; }
    .FormEditBlock .contentFullWidth        { width:55%; }

    .FormEditBlock .description-smallfont   { font-size: 1.16em; }
    .FormEditBlock .content-smallfont   { font-size: 1.16em; }
    select#ddlEducationBox              { width: 80%; }
}

@media only screen and (min-width: 961px) 
{
    .FormEditBlock                  { margin: 0 0.0em 1.66em 0.0em; padding: 0 0 1.66em 0; }
    .FormEditBlock .description     { display: inline-block; width: 42%; font-size: 2.5em; margin: 0 0 0.33em 0; padding: 0 0 0.25em 0;}
    .FormEditBlock .content         { display: inline-block; width: 55%; font-size: 2.33em; margin: 0; padding: 0; }
    .FormEditBlock .infotext        { font-size: 1.5em;  } 

    .FormEditBlock .description-smallfont   { font-size: 1.5em; }
    .FormEditBlock .content-smallfont   { font-size: 1.5em; }
    select#ddlEducationBox              { width: 70%; }
}








.ProductBox {
	width: 97%;
	margin: 0 0 3% 0;
	padding: 1%;
	border-radius: 2px;
    -moz-border-radius:2px;     /* BROWSER: FireFox */
    -khtml-border-radius:2px;   /* BROWSER: Konqueror */
    -webkit-border-radius:2px;  /* BROWSER: webkit */	
    text-align: left;
    cursor:pointer; 	
    border: dotted 2px #E0EaE1;
}

.ProductBoxLinkContainer                    {color: #404a59;}
.ProductBox .backcolor                      { background-color: #FFFFFF;}
.ProductBox.last                            {  margin-right: 0;    }   
.ProductBox:hover, .ProductBox.selected     { border-color: #c71c75; color: #c71c75;}
.ProductBox:hover span { background-color: #c71c75; border-color:#c71c75;}

.ProductBox .pretext                        { font-size:0.8em; display: block; margin: 0; padding: 0;color: #909aA9; vertical-align: top; }
.ProductBox:hover .pretext  { color:#c71c75;}

.ProductBox .numCoins                       { font-size: 2.0em; display:inline-block; width: 49%; font-family: Georgia, "Times New Roman";  padding: 0.1em 0 0.1em 0; vertical-align: top; }
.ProductBox .description                    { font-size:1.16em; display:inline-block; width: 49%; color: #404a59; text-align: left;  padding: 0.1em 0 0.1em 0; vertical-align: top; font-weight: bold; }
.ProductBox .ButtonRow                      { text-align: right; margin: 0; padding: 0 0em 0.005em 0.5em; vertical-align: top;  }

@media only screen and (min-width: 761px) 
{
    .ProductBox .pretext                    { font-size:0.9em;  }
    .ProductBox .numCoins                   { font-size: 3.0em; }
    .ProductBox .description                { font-size:1.66em; }
}
@media only screen and (min-width: 961px) 
{
    .ProductBox                             { width: 32%; display:inline-block; margin: 0 1% 2% 0; padding: 0; text-align: center; float:left;}
    .ProductBox .backcolor                  { background-color: #fafafa;}           
    .ProductBox .numCoins                   { display:block; width:100%; margin: 0.25em 0 0.25em 0; }
    .ProductBox .description                { font-size:1.16em; display:block; width:100%; text-align: center; margin: 0.5em 0 0.25em 0; font-weight: normal;  }
    .ProductBox .ButtonRow                  { text-align: center; padding: 0.5em 0 1.0em 0; }
}
@media only screen and (min-width: 1280px) 
{
    .ProductBox .numCoins                   { font-size: 3.0em; }
    .ProductBox .description                { font-size:1.25em;   }
    .ProductBox .ButtonRow                  {   }
}





.QuestionAnswerOptions
{
    margin: 0px 0px 0px 2.0em;   
    padding: 0 0 1.0em 0;
    font-size: 1.16em;
    line-height: 1.66em;
}


 .QuestionAnswerOptions input[type="radio"]
{
    margin: 0 0.5em 0.20em 0;
    
}
 .QuestionAnswerOptions input[type="radio"]:focus
{
}

.QuestionAnswerOptions input[type="checkbox"]
{
    margin: 0 0.5em 0.40em 0;
    
}

.QuestionAnswerOptions .QAC
{
    width:  80%; 
    height: 2em;
}



.RoundBox30 {
    border-radius: 3px;
    -moz-border-radius:3px;     /* BROWSER: FireFox */
    -khtml-border-radius:3px;   /* BROWSER: Konqueror */
    -webkit-border-radius:3px;  /* BROWSER: webkit */	
}


/*
* SearchResult container: Used on /search as well as on other parts, always where a search result is displayed/needed
*/
.SearchResult
{
    text-align: justify;
}



/* NEWSFEED use row, single version */
.SR-row                     { margin-bottom: 1.75em;    padding-bottom: 0.75em;}
.SR-row.dotted              { border-bottom: 2px dotted #E0EaE1;}
.SR-row.NoBorder            { border:none;}

.SR-foto                    { width: 14%; float:left; }
.SR-content                 { width: 86%; float:left; }
.SR-text                    { font-size: 1.16em; margin-top: 0.75em; }

.SR-foto img { border: 1px solid #FFFFFF; width: 40px; height: 40px; }
.SR-gift { width: 64px; height: 64px; }

.SR-row h4.username         {    margin: 0 0 0.25em 0;    padding: 0;  }



@media only screen and (min-width: 761px) 
{
    .SR-foto img                { border: 2px solid #FFFFFF; width: 60px; height: 60px; } 
 }


@media only screen and (min-width: 961px) 
{
    .SR-foto                    { width: 13%; float:left; }
    .SR-content                 { width: 87%; float:left; }
    .SR-foto img                { border: 2px solid #FFFFFF; width: 80px; height: 80px; } 
    .SR-gift                    { width: 64px; height: 64px; }
}






/* ROWS for /search.aspx result ("SR") --> new in 2018 and used therefore */
.SR-big-row                         { width: 100%; margin: 0 0.0em 2.00em 0;    padding: 0; display: inline-block; vertical-align: top;}
.SR-big-foto                        { margin: 0 2% 1% 0;  display: inline-block;vertical-align: top; }
.SR-big-foto img                    { width: 50px; height: 50px;   border-radius: 0.3em;-moz-border-radius: 0.3em; -khtml-border-radius:  0.3em;   -webkit-border-radius:  0.3em;}
.SR-big-headline                    { width: 80%;  display: inline-block; }
.SR-big-headline .username          { margin: 0 0 0.25em 0;     font-size: 1.33em; }
.SR-big-text                        { font-size:1.16em; margin: 0; text-align: left; word-break: break-all; }
.SR-big-statinfo                    { margin: 0; font-size: 0.9em; display: block;}
.SR-big-row .ActionButtonRow        { text-align: center; margin: 0.66em 0 0 0; }
.SR-big-row .seperatorRow           { border-bottom: 2px dotted #E0EaE1; margin: 1.5em 0em 0em 0em;  }
.SR-big-row .button                 { display: inline-block;font-size: 1.00em; background-color: #0ec9d5;color: #FFFFFF; padding: 0.2em 1.0em 0.2em 1.0em; margin: 0 0.25em 0 0.25em; text-transform:uppercase; border-radius: 0.3em; -moz-border-radius:0.3em; -khtml-border-radius:0.3em; -webkit-border-radius:0.3em;  text-decoration: none; box-shadow: 0 0 4px 0px #b4b4b4;	-moz-box-shadow: 0 0 4px 0px #b4b4b4;		-khtml-box-shadow: 0 0 4px 0px #b4b4b4;     -webkit-box-shadow: 0 0 4px 0px #b4b4b4;  }
.SR-big-row .buttonSubtext          { display: none; visibility: hidden; }
.SR-big-row .SecondaryButton        { background-color: #505050;     background-color: #0ec9d5; 	color: #FFF; }

.SR-big-row .button:hover           { background-color: #c71c75; }

.SR-big-row .FavNowButton           { font-size: 0.8em; background-color: #fff; color:#A0A0A0; border: 1px dotted #A0A0A0;  box-shadow: none; -moz-box-shadow: none; -khtml-box-shadow: none; -webkit-box-shadow: none;}
.SR-big-row .FavNowButton:hover           { border: 1px dotted #10AA00; background-color:#fff; }
.SR-big-row .MarkedAsFavStatus           { color:#10AA00; border: 1px solid #10AA00;}
.SR-big-row .MarkedAsFavStatus:hover        { color:#10AA00; border: 1px solid #10AA00;}


@media only screen and (min-width: 481px) {
}
/* attention: in case of search galery, we break each single search result row already at 761!! */
@media only screen and (min-width: 761px) {
    .SR-big-row                     { width: 228px; margin: 0 0.0em 2.00em 0;    padding-bottom: 0.75em; display: inline-block; vertical-align: top; }
    .SR-big-foto                    { margin: 0 0 0.66em 0;   }
    .SR-big-foto img                { width: 226px; height: 226px;}
    .SR-big-headline                { width: 100%;  display: inline-block; }
    .SR-big-headline .username      { margin: 0 0 0.25em 0;     font-size: 1.33em; }
    .SR-big-text                    { font-size:1.16em; text-align: left; margin: 0.25em 0 0 0;}
    .SR-big-statinfo                { margin: 0.16em 0 0 0; font-size:1.00em; }
    .SR-big-row .ActionButtonRow    {  }
    .SR-big-row .seperatorRow       { margin: 1.5em 1.5em 0em 1.0em;  }
    .SR-big-row .button             { font-size: 1.16em; display: inline-block; margin: 1% 0 1% 0; width: 80%; text-transform:none; }
    .SR-big-row .buttonSubtext      { display: inline; visibility: visible; }
    .SR-big-row .FavNowButton       { font-size: 1.0em; }
}



/* new / 2018 - should be used in2018?! only for SEO!?*/
.SR2-std-row                     { width: 245px; margin: 0 0em 2.00em 0;    padding-bottom: 0.75em; display: inline-block; vertical-align:top;}
.SR2-std-row.dotted              { border-bottom: 2px dotted #E0EaE1;}
.SR2-std-row.NoBorder            { border:none;}
.SR2-std-foto                    { }
.SR2-std-foto img                 { width: 226px; height: 226px; }
.SR2-std-foto .boxEnd            { background-position: -2px -182px; height:14px; width:240px; margin: 0;  /* displays just the optical ending bar at the end of each block, background is also in icoset1-png file! */ }
.SR2-std-content                 { width: 95%; }
.SR2-std-text                    { font-size:1.16em;    margin: 0.75em 0 0.0em 0; line-height: 1.33em;}
.SR2-std-content .username         { margin: 0 0 0.25em 0;     font-size: 1.33em; }



.SR-mini                {   float:left;    }
.SR-mini-content        {   float:left;     /*width: 80%;*/ margin: 0 0 0 1.0em;}
.SR-mini-content h4, .SR-mini-username     {   margin: 0;  padding: 0 0 0.2em 0;}

/* SearchResult-PublicProfile-Foto/Content etc. -> is an extra class because of space reasons, is used mainly by searchResultRowForSEO.cshtml */
.SR-pp-foto             {    float:left;    width: 15%;}
.SR-pp-foto .IcoFotoBoxEnd-70 { background-position: -0px -250px; height:14px; width:88px; margin: 0.20em 0 0 0;}
.SR-pp-content          {     float:left;     width: 85%; }
/* ^^ old !? check this, should be deleed!*/


div#tooltip {
    position: absolute;
    background-color: #FFFFFF;
    
    z-index: 138;
    font-weight: bold;
    font-size: 1.33em;
    border: solid 1px #0ec9d5;
    /*border: solid 1px #c71c75;*/
    border-radius: 4px;
    -moz-border-radius:4px;     /* BROWSER: FireFox */
    -khtml-border-radius:4px;   /* BROWSER: Konqueror */
    -webkit-border-radius:4px;  /* BROWSER: webkit */	
    box-shadow: 0 0 5px #CFCFCF;			
    -moz-box-shadow: 0 0 5px #CFCFCF;		
    -khtml-box-shadow: 0 0 5px #CFCFCF;     
    -webkit-box-shadow: 0 0 5px #CFCFCF; 
    display:inline;
    word-wrap:break-word;
    word-break:break-word;
    padding: 0.5em;
}



/* NR = NewsfeedRow, a single version, just the three colums for message display: left: actiontype, middle: gift/empty, right: action-link */
.NR-col1, .NR-col1-40, .NR-col1-70, .NR-col1-30 {     width: 97%; vertical-align: middle; text-align: left; display:inline-block; }
.NR-col2, .NR-col2-40 {    width : 97%; vertical-align: middle; text-align: center; display:inline-block; padding: 0.5em; }
.NR-col3, .NR-col3-18 {    width : 97%;   vertical-align: middle; text-align: right; display:inline-block;}       /* check if this is correct with the % */
.NR-col1-HideIfSmall                            { display: none; visibility: hidden; }



.NR-col-top             { vertical-align: top; }
.NR-QuestionText {  font-weight: bold; font-style: italic; text-align: left;}

@media only screen and (min-width: 961px) 
{
    .NR-col1            {  width: 48%; vertical-align: middle; display:inline-block;}
    .NR-col1-40         {  width: 39%; vertical-align: middle; display:inline-block;}
    .NR-col1-30         {  width: 29%; vertical-align: middle; display:inline-block;}
    .NR-col1-70         {  width: 69%; vertical-align: middle;display:inline-block;}
    .NR-col1-HideIfSmall    { width: 19%; display: inline-block; visibility: visible; }
    
    .NR-col2            {  width: 19%; vertical-align: middle;display:inline-block;}
    .NR-col2-40        {   width: 39%; vertical-align: middle;display:inline-block;}
    
    .NR-col3            {  width: 29%;  vertical-align: middle;display:inline-block;}       /* check if this is correct with the % */
    .NR-col3-18        {   width: 19%;  vertical-align: middle;display:inline-block;}       /* check if this is correct with the % */
}


@media only screen and (min-width: 1280px) 
{
    .NR-col1            {  width: 49%; vertical-align: middle; display:inline-block;}
    .NR-col1-40         {  width: 39%; vertical-align: middle; display:inline-block;}
    .NR-col1-30         {  width: 29%; vertical-align: middle; display:inline-block;}
    .NR-col1-70         {  width: 69%; vertical-align: middle;display:inline-block;}
    
    .NR-col2            {  width: 19%; vertical-align: middle;display:inline-block;}
    .NR-col2-40        {   width: 39%; vertical-align: middle;display:inline-block;}
    
    .NR-col3            {  width: 29%;  vertical-align: middle;display:inline-block;}       /* check if this is correct with the % */
    .NR-col3-18        {   width: 19%;  vertical-align: middle;display:inline-block;}       /* check if this is correct with the % */
}








.tablediv                   { float: left;}
.tablediv-content           { float:left;  margin: 0 0 0 1.0em;}
.tablediv-content  h4       { margin: 0;  padding: 0 0 0.2em 0;}

.tablediv-10                { width: 10%; display:inline-block; text-align: left; vertical-align:top;}
.tablediv-14                { width: 14%; display:inline-block; text-align: left; vertical-align:top;}
.tablediv-15                { width: 15%; display:inline-block; text-align: left; vertical-align:top;}
.tablediv-19                { width: 19%; display:inline-block; text-align: left; vertical-align:top;}
.tablediv-20                { width: 20%; display:inline-block; text-align: left; vertical-align:top;}
.tablediv-24                { width: 24%; display:inline-block; text-align: left; vertical-align:top;}
.tablediv-25                { width: 25%; display:inline-block; text-align: left; vertical-align:top;}
.tablediv-29                { width: 29%; display:inline-block; text-align: left; vertical-align:top;}
.tablediv-30                { width: 30%; display:inline-block; text-align: left; vertical-align:top;}
.tablediv-32                { width: 32%; display:inline-block; text-align: left; vertical-align:top;}
.tablediv-33                { width: 33%; display:inline-block; text-align: left; vertical-align:top;}
.tablediv-35                { width: 35%; display:inline-block; text-align: left; vertical-align:top;}
.tablediv-39                { width: 39%; display:inline-block; text-align: left; vertical-align:top;}
.tablediv-40                { width: 40%; display:inline-block; text-align: left; vertical-align:top;}
.tablediv-49                { width: 49%; display:inline-block; text-align: left; vertical-align:top;}
.tablediv-50                { width: 50%; display:inline-block; text-align: left; vertical-align:top;}
.tablediv-59                { width: 59%; display:inline-block; text-align: left; vertical-align:top;}
.tablediv-60                { width: 60%; display:inline-block; text-align: left; vertical-align:top;}
.tablediv-66                { width: 66%; display:inline-block; text-align: left; vertical-align:top;}
.tablediv-70                { width: 70%; display:inline-block; text-align: left; vertical-align:top;}
.tablediv-75                { width: 75%; display:inline-block; text-align: left; vertical-align:top;}
.tablediv-80                { width: 80%; display:inline-block; text-align: left; vertical-align:top;}
.tablediv-84                { width: 84%; display:inline-block; text-align: left; vertical-align:top;}
.tablediv-85                { width: 85%; display:inline-block; text-align: left; vertical-align:top;}
.tablediv-90                { width: 90%; display:inline-block; text-align: left; vertical-align:top;}

.tablediv-row               { width: 100%; text-align: left; vertical-align:top; border-bottom: 1px dotted #E0EaE1; padding: 1.0em 0 0.5em 0; margin: 0 0 0.0em 0;}

.tablediv input[type=text], .tablediv input[type=password] {
	width: 80%;
    margin: 0.5em 0em 0.75em 0em;
}

.tablediv-row .ProfileImg { border: 0px solid #FFFFFF; border-radius: 0.2em; -moz-border-radius:0.2em; -khtml-border-radius:0.2em; -webkit-border-radius:0.2em; }
.tablediv-row.doubleBorder        { border-bottom: 2px dotted #E0EaE1; }




.TabContainer       { width:100%;margin: 0;padding: 0; text-align:center; font: 1.33em Arial, Tahoma, Verdana, Sans-serif; border-bottom: 1px solid #D5D5D5; z-index: 1;  }
.Tab                { font-weight: bold; border: 1px solid #D5D5D5; border-bottom: none;padding: 0.8em 2% 0.8em 2%; display: inline-block;background-color: #FFFFFF;position: relative;top: 1px;z-index: 1; color: #404a59; }
.Tab.inactive       { font-weight: normal; padding-top: 0.7em; padding-bottom:0.7em;border: none;border-top: 2px dotted #0ec9d5;border-right: 2px dotted #0ec9d5;border-left: 2px dotted #0ec9d5;cursor:pointer;color:#0ec9d5;position: relative;top: 0px; }
.Tab.inactive:hover { border-color:#c71c75;color: #c71c75; }
.Tab:hover          {color: #404a59; }
.TabContainer.ContactListTabs { display: none; }
.TabContainer-tablediv-linebreak { display: block; }
.TabContainer-tablediv-19, .TabContainer-tablediv-10 { width: 46%; }
.TabContainer-tablediv-15 { width: 46%; }
.TabContainer-tablediv-49 { width: 100%; }
.TabContainer-tablediv-row { padding-bottom: 1.33em; }

@media only screen and (min-width: 600px) 
{
    .TabContainer.ContactListTabs { display: block; }
    div#ContactList_DDLnav { display: none; }
    .TabContainer-tablediv-linebreak { display: none; }
    .TabContainer-tablediv-10 {width: 10%;}
    .TabContainer-tablediv-15 { width: 15%; }
    .TabContainer-tablediv-19 {width: 19%;}
    .TabContainer-tablediv-49 { width: 49%; }
    .tablediv-39 { width: 39%; }
    .TabContainer-tablediv-row { padding-bottom: inherit; }
}

@media only screen and (min-width: 1280px) {
}


.text-116   {    font-size: 1.16em; }
.text-133   {    font-size: 1.33em; }
.text-166   {    font-size: 1.66em; }
.text-200   {    font-size: 2.00em; }
.text-std   {    font-size: 1.0em;}
.text-mini  {    font-size: 0.8em;}
.text-big   {    font-size: 1.33em;}
.text-bold  {    font-weight: bold;}
.text-lightgray {    color: #d0d0d0; }

/* NEW 2018 */    
.topMatchListEntry2                     { display: inline-block; margin: 0 1.0em 0.5em 0;    padding: 0;    line-height: 1.0em;     }
.topMatchListEntry2 .Foto               { width: 40px; height: 40px; border: 1px solid #FFFFFF; margin: 0;    padding: 0;    }
.topMatchListEntry2 .MatchHeart         { display:inline; vertical-align:middle; width: 16px;   }
.topMatchListEntry2 .MatchCounter       { display:inline; font-size: 1.25em; vertical-align:middle; font-family: Georgia, "Times New Roman";    }
.topMatchListEntry2 .MatchDate          { font-size: 0.75em; line-height: 1.66em; position: absolute; top: 0.5%; left: 1%; width: 98%; padding: 0; text-align: center; background-color: #c71c75; border-radius: 0.16em; -moz-border-radius: 0.16em; -khtml-border-radius: 0.16em; -webkit-border-radius: 0.16em; vertical-align: baseline; color: #FFFFFF; filter: alpha(opacity=85); opacity: 0.85; }
.topMatchListEntry2 .MatchDate .SubText           { display: none; visibility: hidden; }
.topMatchListEntry2 .MatchDate.OldMatch           { background-color: #888888; }
.topMatchListPercentage                     { font-size: 2.5em; line-height: 1.0em; margin: 0 0 0.33em 0; display:inline-block; text-align:center;   }
.topMatchListNewTag                     { margin: 0.5em 0 0 0; display:inline-block;  }

@media only screen and (min-width: 761px) 
{
    .topMatchListPercentage                     { font-size: 3.0em;     }
    .topMatchListNewTag                     { float:none;}
}

@media only screen and (min-width: 961px) 
{
    .topMatchListEntry2                     { margin: 0 1.99em 1.33em 0;line-height: 1.0em;     }
    .topMatchListEntry2 .Foto               { width: 80px; height: 80px; border: 2px solid #FFFFFF; margin: 0;    padding: 0;    }
    .topMatchListEntry2 .MatchHeart         { width: 24px;   }
    .topMatchListEntry2 .MatchCounter       { display:inline; font-size: 2.0em; vertical-align:middle;     }
    .topMatchListEntry2 .MatchDate          { font-size: 1.16em; }
    .topMatchListEntry2 .MatchDate .SubText { display: inline-block; visibility: visible; }
    .topMatchListPercentage                     { font-size: 3.0em; line-height: 1.0em;     }
}




.textcolor
{
    color: #404a59;
}
.textNOdeco
{
    color: #404a59;
    text-decoration: none;
}


.transaction-row-10 {
	border-bottom: 1px dotted #E0EaE1;
    padding: 0.0em 0 0.8em 6px;  
    margin: 0 0 0.8em 0;
    vertical-align:top;
    width:98%;
}
.transaction-row-10 .value      {   width: 8%;display: inline-block;vertical-align:top;} /* value row */
.transaction-row-10 .text       {   width: 55%;display: inline-block;vertical-align:top;}     /* transactiontext row */
.transaction-row-10 .ts         {   width: 33%; display: inline-block;vertical-align:top;text-align: right;}       /* timestamp row */
.transaction-row-10 .plus       {   color: #10AA00;font-weight: bold;}
.transaction-row-10 .minus      {   color: #D61F26;	font-weight: bold;}

@media only screen and (min-width: 481px) {
    
    .transaction-row-10 .value{ font-size:1.16em;}
    .transaction-row-10 .text { font-size:1.16em;}
    .transaction-row-10 .ts   { font-size:1.0em;}
}

@media only screen and (min-width: 761px) {
    .transaction-row-10 { width: 90%; margin: 0 auto 0.8em auto;}
    .transaction-row-10 .value{ font-size:1.16em; padding-left: 1.0em;}
    .transaction-row-10 .text { font-size:1.16em;}
    .transaction-row-10 .ts   { font-size:1.16em;}
}

@media only screen and (min-width: 961px) {

}

@media only screen and (min-width: 1280px) {

}








.white
{
	color: #fff;
}






/* *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
* ########################################
*
*
*
*
*
*   individual & special purpose SPECIFIC CSS
*
* - contains mainly config for IDs
* - use such codes only if REALLY necessary!
*
*
*
*
*
* #######################################
* *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** */


div#BannerPanel
{
    /*border: 1px solid #00FF00;*/
    vertical-align: top;
    text-align: center;
    margin: 0.9em 0 0.4em 0;
    /*line-height: 1.66em;*/
}
@media only screen and (min-width: 600px) {     /* SPECIAL BREAKPOINT because of nav/html architecture */
    div#BannerPanel      { margin: 0.9em 0 0.4em 0; }
}
@media only screen and (min-width: 761px) {
    div#BannerPanel      { margin: 0.9em 0 0.4em 0; font-size:100%; }
}




.Nav-List-Std10_active                  { color: #FFFFFF; background-color: #0ec9d5; border-radius: 0.2em; -moz-border-radius:0.2em;     -khtml-border-radius:0.22em;   -webkit-border-radius:0.2em; }
div#BannerPanel a.Nav-List-Std10_active { color: #FFFFFF; background-color: #0ec9d5; border-radius: 0.2em; -moz-border-radius:0.2em;     -khtml-border-radius:0.22em;   -webkit-border-radius:0.2em; }

.Nav-List-Std10                         { font-size: 1.16em; background-color: #FFFFFF; color: #0ec9d5; padding: 0.25em 0.5em 0.25em 0.5em; margin: 0 0.15em 0 0.15em; border-right: 1px solid #FFFFFF;      }
.Nav-List-Std10:hover                   { background-color: #c71c75; color: #FFFFFF; border-radius: 0.2em; -moz-border-radius:0.2em;     -khtml-border-radius:0.22em;   -webkit-border-radius:0.2em; }
.Nav-List-Std10:hover .PinkBubble-small { background-color: #ffffff; color: #c71c75; }  /* attention: we are overwriting here the pinkbubble general def. */
.Nav-List-Std10.rightbar                { border-right: 1px solid #Cee9D5;    }

a#Nav-Coin-Link-special                 { display: none; visibility: hidden; }/* special coin-link attributes: invisible on small screens, since it is the least important link/function in the nav menu */
a#Nav-List-ContactListLink              { display: none; visibility: hidden; }

@media only screen and (min-width: 480px) {
    a#Nav-Coin-Link-special             { display: inline; visibility: visible; }
    a#Nav-List-ContactListLink          { display: inline; visibility: visible; }
    a#Nav-List-MailboxLink              { border-right: 1px solid #Cee9D5; }
}

@media only screen and (min-width: 961px) {
    .Nav-List-Std10 { font-size: 1.33em; padding: 0.6em 1.5em 0.5em 1.5em; margin: 0 0.0em 0 0.0em; border-right: 1px solid #FFFFFF;     display: inline-block; }
}

@media only screen and (min-width: 1280px) {
    .Nav-List-Std10 { font-size: 1.5em;  }
}



/* next question block on /main page */
.QuickviewNextQuestion       { padding: 0.0em 0.5em 0.5em 0em;  border: 1px solid #0ec9d5; }
.QuickviewNextQuestionLbl    { border-bottom-right-radius: 0.33em; display: inline-block; font-size: 1.16em;  vertical-align: middle; padding: 0.16em 1.33em 0.25em 0.33em; background: #0ec9d5; color: #FFFFFF; font-weight: bold; margin: 0 0 0.5em 0;}
.QuickviewNextQuestionText   { font-size: 1.33em; text-align: center; vertical-align: top; font-style:italic; padding: 0.16em 0.16em 0.33em 0.16em; }



.FunctionTiles                  { text-align: center; }
.FunctionTiles .Tile            { width: 48.5%; border: none; display:inline-block; background-color: #0ec9d5; font-size:1.00em; color: #FFFFFF; text-align: center; padding: 0.5em 0 0.5em 0; margin: 0 0 0.25em 0;  box-shadow: 0 0 4px 0px #b4b4b4; border-radius: 0.30em;-moz-border-radius:0.30em; -khtml-border-radius: 0.30em; -webkit-border-radius: 0.30em; position: relative; }
.FunctionTiles .Tile:hover      { background-color: #c71c75;    color: #ffffff; }
.FunctionTiles .Tile:hover .PinkBubble-small     { background-color: #ffffff;    color: #c71c75; }  /* attention: we are overwriting here the pinkbubble general def. */
.FunctionTiles .TileTitle       { font-size: 1.33em; }
.FunctionTiles .secondary       { background-color: #616161;  color: #FFF;  border: none; font-size: 1.0em; }

@media only screen and (min-width: 400px) 
{
    .FunctionTiles .Tile {width: 49.5%;font-size:1.16em;}
}

@media only screen and (min-width: 961px) 
{
    .QuickviewNextQuestionLbl    { font-size: 1.4em; padding: 0.33em 1.33em 0.33em 0.66em; }
    .QuickviewNextQuestionText   { font-size: 1.66em; padding: 0.33em 0 0.33em 0;}
    
    .FunctionTiles .Tile        { padding: 1.0em 0 1.0em 0; }
    .FunctionTiles .TileTitle   { font-size: 1.66em; } 
    .FunctionTiles .secondary   { font-size: 1.0em; }
}


/*
    extended search parameter box for /search
*/
div#ExtendedSearchContainer
{
    border: 1px dotted #0ec9d5;
    text-align: center;
}

div#ExtendedSearchOptions
{
    visibility: hidden;
    display: none;
    text-align: center;
}
div#ExtendedSearchOptions table
{
    width: 100%;
    margin: 0 auto 0 auto; 
    border: none; /* border: 1px solid #000000; */
    padding: 0;
}

div#ExtendedSearchOptions table tr
{
    /*border-bottom: 1px dotted #666666; */ /* border: 1px solid #000000; */
    vertical-align: middle;
}

.ExtendedSearchContainerToggleLink
{
    display: inline-block;
    width: 100%;
}

@media only screen and (min-width: 761px) 
{
    div#ExtendedSearchOptions table { width: 90%; }
}
@media only screen and (min-width: 961px) 
{
    div#ExtendedSearchOptions table { width: 70%; }
}
    

.MPiFrame { width: 100%; }

@media only screen and (min-width: 761px) 
{
    .MPiFrame { width: 90%; }
}


/* https://benmarshall.me/responsive-iframes/ und https://stackoverflow.com/questions/325273/make-iframe-to-fit-100-of-containers-remaining-height */
.iframe-container {
  overflow: hidden;
  padding-top: 80%;
  position: relative;
}
.iframe-container iframe {
   border: 0;
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
}




.SignUpBackground2 {
    width: 100%;
    background: /*url("/images/1031-default-bg4.jpg") no-repeat;*/ url("/images/1031-default-bg3.jpg") no-repeat;
    /*background-position: -90px 0px;*/ background-position: -290px -190px;
    background-size: 1100px;
    height: 542px;
    box-shadow: 0.0em 0.2em 0.3em 0.01em #AFAFAF;
    -moz-box-shadow: 0.0em 0.2em 0.3em 0.01em #AFAFAF;
    -khtml-box-shadow: 0.0em 0.2em 0.3em 0.01em #AFAFAF;
    -webkit-box-shadow: 0.0em 0.2em 0.3em 0.01em #AFAFAF;
    margin-bottom: 3em;
}

.LogOutBackground2 {
    background: url("/images/1031-default-lo2.jpg") no-repeat;
    background-position: -150px 0px;
    background-size: 1100px;
    height: 531px;
    margin-bottom: 2em;
}

.SignUpBackground2 h1
{
    font-size: 200%;  
    padding: 0.5em 0.1em 0.0em 0.0em;
    width: 99%;
    margin: 0 auto 0 auto;
    
    color: #FFFFFF;
    font-family: Arial, 'Georgia', 'Times New Roman';
    border: 0px solid #000000;
    text-align: center;
}

@media only screen and (min-width: 481px) 
{
    .SignUpBackground2 h1   { font-size: 250%;}
    .SignUpBackground2      { /*background-position: -100px -0px;*/ background-size: 1300px; height: 645px;margin-bottom: 3em; background-position: -200px -220px;}
    .LogOutBackground2      { background-position: -100px 0;    background-size: 1300px;height: 600px;margin-bottom: 2em;}
}

@media only screen and (min-width: 761px) 
{
    .SignUpBackground2 h1   { font-size: 250%;}
}

@media only screen and (min-width: 961px) 
{
    .SignUpBackground2 h1   {    font-size: 300%;}
    .SignUpBackground2      { /*background-position: 0px -0px;*/  background-size: 1500px; height: 748px;margin-bottom: 4em;  background-position: -100px -250px;}
    .LogOutBackground2      { background-position: 0 0; background-size: 1500px;height: 700px;margin-bottom: 2em;}
}

@media only screen and (min-width: 1280px) 
{
    .SignUpBackground2 h1   {  font-size: 350%;}
    .SignUpBackground2  { /*background-position: -0px 0px;*/  background-size: 1920px; height: 898px;margin-bottom: 5em; background-position: -50px -380px; }
    .LogOutBackground2  { background-position: 0 0; background-size: 1920px;height: 690px;margin-bottom: 2em;}
}

@media only screen and (min-width: 1920px) 
{
    .SignUpBackground2 h1   {    font-size: 400%;}
    .SignUpBackground2  { /*background-position: 0px -0px;*/ background-size: 1920px; height: 948px;margin-bottom: 5em; background-position: 0px -330px; }
    .LogOutBackground2  { background-position: 0 0; background-size: 1920px;height: 690px;margin-bottom: 2em;}
}


/* signup form on default page */
div#SignUpForm2, .PicturePanel2
{
    position: relative;
    margin: 0px auto 0px auto;  /* attention: in the smallest version, the signupform is centered! */
    width: 92%;
    top: 175px;
    vertical-align: bottom;
    padding: 0.5em 0.5em 0.75em 0.5em;
    border-radius: 0.30em;
    -moz-border-radius:0.30em;     /* BROWSER: FireFox */
    -khtml-border-radius: 0.30em;   /* BROWSER: Konqueror */
    -webkit-border-radius: 0.30em;  /* BROWSER: webkit */	     
    /*background: rgba(14,201,213,0.30);*/    /* currently suspended, instead of COL+opacity, use background WITH RGBA!!, see stackoverflow! */
    /*box-shadow: 0 0 5.0em 0.2em #282828;			
	-moz-box-shadow: 0 0 5.0em 0.2em #383838;		
	-khtml-box-shadow: 0 0 5.0em 0.2em #383838;     
	-webkit-box-shadow: 0 0 5.0em 0.1em #383838;    */ /* currently suspended */
	background: rgba(15,15,15,0.50);
    color: #FFFFFF;
    font-size: 130%;    
}

@media only screen and (min-width: 481px) {
    div#SignUpForm2 {width: 92%;        top: 225px; }
    .PicturePanel2 {width: 60%;        top: 5%;padding: 0;}
    div#SignUpForm2 h1 {    }
}
@media only screen and (min-width: 761px) {
    div#SignUpForm2 {width: 70%;        top: 250px; }
    .PicturePanel2 {width: 60%;        top: 5%;padding: 0;}
}

@media only screen and (min-width: 961px) {
    div#SignUpForm2 {width: 60%; top: 300px; padding: 1.0em;;}
    .PicturePanel2 {width: 40%; top: 7%; padding: 0;}
    div#SignUpForm2 h1 {    }
}
@media only screen and (min-width: 1280px) {
    div#SignUpForm2 {width: 50%; top: 450px;padding: 1.0em 1.5em 1.0em 1.5em;}
    .PicturePanel2 {width: 40%; top: 10%;padding: 0;margin: 0;}
}



div#SignUpForm2 h1
{
}



div#SignUpForm2 .HeadlineInfo
{
    padding: 0;
    margin: 0 0 1.33em 0;
    font-family: Georgia, "Times New Roman";
    font-size: 90%;  
    text-align: center;
    color: #FFFFFF; /* no typo: on the smallest screen, the headline is displayed darker! */
    background-color: #0ec9d5;
}
@media only screen and (min-width: 481px) {
    div#SignUpForm2 .HeadlineInfo {
    margin: 0 0 1.5em 0;        
    font-size: 1.25em;  
    }
}
@media only screen and (min-width: 961px) {
    div#SignUpForm2 .HeadlineInfo {
    margin: 0 0 1.5em 0;        
    font-size: 1.5em;  
/*    color: #E0EaF9;    */
    }
}


/*
* FORM element list/ul for displaying the signup-form
*/
div#SignUpForm2 ul 
{
    list-style:none;
    margin: 0;
    padding: 0;
}
div#SignUpForm2 ul li 
{
	padding:0 0 0.0em 0;
    margin: 0em 0 0.66em 0; /**/
}
div#SignUpForm2 ul li label 
{
width: 30%;
    display: inline-block;
    font-size: 110%;
	padding: 0 0 0.166em 0;
	margin: 0;
}
@media only screen and (min-width: 481px) {
    div#SignUpForm2 ul li label {
        font-size: 140%;
    }
}

@media only screen and (min-width: 761px) {
    div#SignUpForm2 ul li label {
		font-size: 140%;
		width: 30%;
    }
}

@media only screen and (min-width: 961px) {
    div#SignUpForm2 ul li label {
	font-size: 150%;
		width: 35%;
    }
}

div#SignUpForm2 ul li.TOCline
{
    margin: -0.5em 0 2.0em 0;
    text-align: center;
}
div#SignUpForm2 ul li.center {
	text-align: center;
}

/*
* CHECKBOX for signup form/confirm TOC action, somewhat special in our case!
*/
div#SignUpForm2 ul li input[type="checkbox"] 
{    
    margin: 0.2em 0.5em 0 0.0em;
    cursor: pointer;
    /*vertical-align: top;*/
}
div#SignUpForm2 ul li label.CheckBoxItem
{
    width: 80%;
    /*display: inline-block;*/
    display: inline;
    margin: 0.0em 0.0em 0 0;
    padding: 0;
    text-align: left;
    font-size: 90%;
}
@media only screen and (min-width: 481px) 
{
    div#SignUpForm2 ul li input[type="checkbox"] {    
        margin: 0.2em 0.5em 0 0.0em;
    }
    div#SignUpForm2 ul li label.CheckBoxItem {
		font-size: 100%;    
        
    }
}


/*
* RADIO button for gender selection, somewhat complex...
*/
div#SignUpForm2 ul li input[type="radio"] {
    /*vertical-align: top;*/ /*20180225 - temporally disabled, since it should work without - changed today: Radio-button+margin + vertical-align changed!*/
    margin: 0.2em 0.5em 0 0.0em;
    cursor: pointer;
}
div#SignUpForm2 ul li label.RadioItem
{
    width: 5%;
    display: inline-block;
    margin: 0 10% 0 0%;
}
@media only screen and (min-width: 481px) {
    div#SignUpForm2 ul li label.RadioItem {
        font-size: 120%;
        margin: 0% 10% 0 0;
    }
    div#SignUpForm2 ul li input[type="radio"] {
        margin: 0.0em 1.0em 0 0.0em;
    }    
}

@media only screen and (min-width: 961px) {
    div#SignUpForm2 ul li label.RadioItem       {    font-size: 130%;    }
}

div#SignUpForm2 ul li input[type="text"]
{
    font-size: 110%;
    width: 55%;
    padding: 0.5em;
    margin: 0 0 0 0.3em;
}
@media only screen and (min-width: 481px) {
    div#SignUpForm2 ul li input[type="text"] {font-size: 140%; }
}
@media only screen and (min-width: 761px) {
    div#SignUpForm2 ul li input[type="text"] {font-size: 140%; width: 55%;padding: 0.66em;}
}
@media only screen and (min-width: 961px) {
    div#SignUpForm2 ul li input[type="text"] {font-size: 150%; width: 55%;padding: 0.75em;}
}
@media only screen and (min-width: 1280px) {
    div#SignUpForm2 ul li input[type="text"] {font-size: 170%; width: 55%;padding: 0.75em;}
}
div#SignUpForm2 ul li input[placeholder] {
}



div#SignUpForm2 .SignUpButtonXXL, .SignUpButtonXXL
{
    padding: 0.4em 5% 0.4em 5%;
    margin: 0.5em 0 0 0;
    font-size: 1.3em;
    font-weight: bold;
    background-color: #78cd00; /* #0ec9d5 */
    color: #FFFFFF;
    border: solid 2px #78cd00; /* same color as background due rendering issues */
    border-radius: 0.40em;
    -moz-border-radius:0.40em;     /* BROWSER: FireFox */
    -khtml-border-radius: 0.40em;   /* BROWSER: Konqueror */
    -webkit-border-radius: 0.40em;  /* BROWSER: webkit */	 
    text-decoration: none;
    /*text-transform: uppercase;*/
	/*box-shadow: 0 0 5px #787878;			
	-moz-box-shadow: 0 0 5px #787878;		
	-khtml-box-shadow: 0 0 5px #787878;     
	-webkit-box-shadow: 0 0 5px #787878;  */
	background-color: #78cd00; /*#00AB00;*/ /*30AB30*/
	color: #FFF; 
	border-bottom: 3px solid #58bd00;  	
}

div#SignUpForm2 .FacebookSignUpButton, .FacebookSignUpButton {
    padding: 0.66em 1.66em 0.66em 1.66em;
    font-size: 0.9em;
    font-weight: bold;
    background-color: #3B5998; /* #0ec9d5 */
    color: #FFFFFF;
    border: solid 2px #3B5998; /* same color as background due rendering issues */
    border-radius: 0.40em;
    -moz-border-radius: 0.40em; /* BROWSER: FireFox */
    -khtml-border-radius: 0.40em; /* BROWSER: Konqueror */
    -webkit-border-radius: 0.40em; /* BROWSER: webkit */
    text-decoration: none;
    background-color: #3B5998; /*#78cd00;*/ /*#00AB00;*/ /*30AB30*/
    color: #FFF;
    border-bottom: 3px solid #4B69A8;
    box-shadow: 0 0 5px #D0D0D0;
    -moz-box-shadow: 0 0 5px #D0D0D0;
    -khtml-box-shadow: 0 0 5px #D0D0D0;
    -webkit-box-shadow: 0 0 5px #D0D0D0;
}
div#SignUpForm2 .FacebookSignUpButton:hover, .FacebookSignUpButton:hover {
    background-color: #4B69A8; 
    border: solid 2px #4B69A8;
    border-bottom: 3px solid #3B5998;  	
}

@media only screen and (min-width: 481px) {
    div#SignUpForm2 .SignUpButtonXXL, .SignUpButtonXXL { font-size: 1.4em; padding: 0.5em 10% 0.5em 10%; }
}

@media only screen and (min-width: 961px) {
    div#SignUpForm2 .SignUpButtonXXL, .SignUpButtonXXL { font-size: 1.66em; padding: 0.5em 10% 0.5em 10%; }
    div#SignUpForm2 .FacebookSignUpButton, .FacebookSignUpButton { font-size: 1.0em; }
}

@media only screen and (min-width: 1280) {
    div#SignUpForm2 .SignUpButtonXXL, .SignUpButtonXXL { font-size: 2.0em; padding: 0.5em 10% 0.5em 10%; }
}





/*
* SignUpForm Validation Error message - curerntly a dedicated class / 20181027: now also a general class!
*/
div#SignUpForm2 .validation-msg-err, .validation-msg-err {
    color: #FFFFFF;
	padding: 0.4em 0.6em 0.4em 0.6em;
	background-color: #ff3d30;     /*D80D20*/
    border-radius: 0.25em;
    -moz-border-radius:0.25em;     /* D61F26 BROWSER: FireFox */
    -khtml-border-radius:0.25em;   /* BROWSER: Konqueror */
    -webkit-border-radius:0.25em;  /* BROWSER: webkit */	 
    margin: 0;  
    font-size: 90%;
}
@media only screen and (min-width: 481px) {
    div#SignUpForm2 .validation-msg-err {
        padding: 0.6em 0.6em 0.6em 0.6em;
    }
}
@media only screen and (min-width: 1280px) {
    div#SignUpForm2 .validation-msg-err {
        padding: 0.7em 0.6em 0.7em 0.6em;
        font-size: 120%;
    }
}




.TopListBackground
{
     text-align: center;
     vertical-align: top;
     padding: 0.50em 0 0.5em 0; margin: 0 0 0 0.5em;
     white-space: nowrap; overflow: hidden; word-wrap:break-word; /* both are required, white-space & word-wrap because of IE&safari!*/
}
.TopListBackground .listEntry
{
    width: 40px;
    height: 40px;
    padding: 0px 0px 0px 0px;
    border: 1px solid #FFFFFF;
    display: inline-block;
    vertical-align: top;
    margin: 0 10px 0 0;
    position: relative;
}
.TopListBackground .listEntry .youBadge
{
    position: relative; /* ATTENTION: we need RELATIVE here, because of you-badge-image construcion */
    top: 0;
    z-index: 5;
    background-color: #0ec9d5;
    width: 40px;
    text-align: center;
    font-size: 1em;
    font-weight: bold;
    padding: 0.1em 0 0.1em 0;
    color: #FFFFFF;
   	filter: alpha(opacity=95);
	opacity: 0.95;
	 box-shadow: rgba(0,0,0, 0.3) 0px 0px 5px;  
    -moz-box-shadow: rgba(0,0,0, 0.3) 0px 0px 18px;  
    -khtml-box-shadow: rgba(0,0,0, 0.3) 0px 0px 18px;   
    -webkit-box-shadow: rgba(0,0,0, 0.3) 0px 0px 18px;  
}
.TopListBackground .YouBadgeListEntryImg {position: absolute;top: 0;left: 0;}   /* dedicated class in case of the image for the this-is-you-badge*/

.TopListBackground .startLink
{
    padding: 4px 5px 0px 5px;
    height: 40px;
    width: 33px;
    font-size: 0.9em; 
    text-align: center;
    display: inline-block;
    background-color: #0ec9d5;
    color: #FFFFFF;
    cursor: pointer;
    border-radius: 0.30em; -moz-border-radius:0.30em; -khtml-border-radius: 0.30em; -webkit-border-radius: 0.30em;
    border: none;
    white-space: initial;
    
}
.TopListBackground .Arrow
{
    font-size: 1.0em; line-height: 0.5em;
    visibility: hidden;    
}
.TopListBackground a:hover
{
    background-color: #c71c75; 
}



@media only screen and (min-width: 961px) 
{
    .TopListBackground                          { padding: 1.0em 0 1.0em 0; }
    .TopListBackground .listEntry               { width: 80px; height: 80px; margin: 0 15px 0 0; border: 2px solid #FFFFFF;    }
    .TopListBackground .startLink               { padding: 5px; height: 74px; width: 74px; font-weight: bold; font-size: 1.33em; border: none; }
    .TopListBackground .listEntry .youBadge     { width: 80px; font-size: 1.16em; }
    .TopListBackground .Arrow                   { font-size: 2.5em; visibility: visible; }
}
.TopListImagesStyle
{
    display: inline; vertical-align: top;
}




/* old - delete - 20180310 */
.controlBoxLeft
{
/*margin-bottom: 2em;*/
}
.controlBoxLeft .footerLink
{
    text-align: center;
}
.controlBoxLeft .footerLink a
{

}
/* LELALA icon file:
*  this file includes all the icons stuff, to prevent main system from being bloatet with all this crap!

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

.ico_FotoUploadReminder         { width: 80px; }



@media only screen and (min-width: 481px) 
{
    .ico_FotoUploadReminder         { width: 150px; }
}

@media only screen and (min-width: 961px) 
{
    .ico_FotoUploadReminder     { width: 150px;  }
}

@media only screen and (min-width: 1281px) 
{
    .ico_FotoUploadReminder     { width: 150px;  }
}



.FotoUploadReminder_PicFrame
{
    width: 283px;   
}





/* starting up left, clockwise, nr 8 is center */
/*.SR-big-row-shadow_none { box-shadow: none;  -moz-box-shadow: none;  -webkit-box-shadow: none;  border: none;  }
.SR-big-row-shadow0 { box-shadow: -0.3em -0.3em 0.5em 0.0em rgba(135,135,135,0.33);  -moz-box-shadow: -0.3em -0.3em 0.5em 0.0em rgba(135,135,135,0.33);  -webkit-box-shadow: -0.3em -0.3em 0.5em 0.0em rgba(135,135,135,0.33);  border: 0px solid #FFFFFF;  }
.SR-big-row-shadow1 { box-shadow: 0.0em -0.3em 0.5em 0.0em rgba(135,135,135,0.33);   -moz-box-shadow: 0.0em -0.3em 0.5em 0.0emrgba(135,135,135,0.33);   -webkit-box-shadow: 0.0em -0.3em 0.5em 0.0em rgba(135,135,135,0.33);   border: 0px solid #FFFFFF; }
.SR-big-row-shadow2 { box-shadow: 0.3em -0.3em 0.5em 0.0em rgba(135,135,135,0.33);   -moz-box-shadow: 0.3em -0.3em 0.5em 0.0em rgba(135,135,135,0.33);   -webkit-box-shadow: 0.3em -0.3em 0.5em 0.0em rgba(135,135,135,0.33);   border: 0px solid #FFFFFF; }
.SR-big-row-shadow3 { box-shadow: 0.3em 0.0em 0.5em 0.0em rgba(135,135,135,0.33);    -moz-box-shadow: 0.3em 0.0em 0.5em 0.0em rgba(135,135,135,0.33);    -webkit-box-shadow: 0.3em 0.0em 0.5em 0.0em rgba(135,135,135,0.33);    border: 0px solid #FFFFFF; }
.SR-big-row-shadow4 { box-shadow: 0.3em 0.3em 0.5em 0.0em rgba(135,135,135,0.33);    -moz-box-shadow: 0.3em 0.3em 0.5em 0.0em rgba(135,135,135,0.33);    -webkit-box-shadow: 0.3em 0.3em 0.5em 0.0em rgba(135,135,135,0.33);    border: 0px solid #FFFFFF; }
.SR-big-row-shadow5 { box-shadow: 0.0em 0.3em 0.5em 0.0em rgba(135,135,135,0.33);    -moz-box-shadow: 0.0em 0.3em 0.5em 0.0em rgba(135,135,135,0.33);    -webkit-box-shadow: 0.0em 0.3em 0.5em 0.0em rgba(135,135,135,0.33);    border: 0px solid #FFFFFF; }
.SR-big-row-shadow6 { box-shadow: -0.3em 0.3em 0.5em 0.0em rgba(135,135,135,0.33);   -moz-box-shadow: -0.3em 0.3em 0.5em 0.0em rgba(135,135,135,0.33);   -webkit-box-shadow: -0.3em 0.3em 0.5em 0.0em rgba(135,135,135,0.33);   border: 0px solid #FFFFFF; }
.SR-big-row-shadow7 { box-shadow: -0.3em 0.0em 0.5em 0.0em rgba(135,135,135,0.33);   -moz-box-shadow: -0.3em 0.0em 0.5em 0.0em rgba(135,135,135,0.33);   -webkit-box-shadow: -0.3em 0.0em 0.5em 0.0em rgba(135,135,135,0.33);   border: 0px solid #FFFFFF; }
.SR-big-row-shadow8 { box-shadow: 0.0em 0.0em 0.5em 0.2em rgba(135,135,135,0.33);    -moz-box-shadow: 0.0em 0.0em 0.5em 0.2em rgba(135,135,135,0.33);    -webkit-box-shadow: 0.0em 0.0em 0.5em 0.2em rgba(135,135,135,0.33);    border: 0px solid #FFaaFF; }
*/

.SR-big-row-shadow_none { box-shadow: none;  -moz-box-shadow: none;  -webkit-box-shadow: none;}
.SR-big-row-shadow0 { box-shadow: -2px -2px 4px 1px rgba(135,135,135,0.23);  -moz-box-shadow: -2px -2px 4px 1px rgba(135,135,135,0.23);  -webkit-box-shadow: -2px -2px 4px 1px rgba(135,135,135,0.23);    }
.SR-big-row-shadow1 { box-shadow: 0px -2px 4px 1px rgba(135,135,135,0.23);   -moz-box-shadow: 0px -2px 4px 1px rgba(135,135,135,0.23);   -webkit-box-shadow: 0px -2px 4px 1px rgba(135,135,135,0.23);    }
.SR-big-row-shadow2 { box-shadow: 2px -2px 4px 1px rgba(135,135,135,0.23);   -moz-box-shadow: 2px -2px 4px 1px rgba(135,135,135,0.23);   -webkit-box-shadow: 2px -2px 4px 1px rgba(135,135,135,0.23);    }
.SR-big-row-shadow3 { box-shadow: 2px 0px 4px 1px rgba(135,135,135,0.23);    -moz-box-shadow: 2px 0px 4px 1px rgba(135,135,135,0.23);    -webkit-box-shadow: 2px 0px 4px 1px rgba(135,135,135,0.23);     }
.SR-big-row-shadow4 { box-shadow: 2px 2px 4px 1px rgba(135,135,135,0.23);    -moz-box-shadow: 2px 2px 4px 1px rgba(135,135,135,0.23);    -webkit-box-shadow: 2px 2px 4px 1px rgba(135,135,135,0.23);     }
.SR-big-row-shadow5 { box-shadow: 0px 2px 4px 1px rgba(135,135,135,0.23);    -moz-box-shadow: 0px 2px 4px 1px rgba(135,135,135,0.23);    -webkit-box-shadow: 0px 2px 4px 1px rgba(135,135,135,0.23);     }
.SR-big-row-shadow6 { box-shadow: -2px 2px 4px 1px rgba(135,135,135,0.23);   -moz-box-shadow: -2px 2px 4px 1px rgba(135,135,135,0.23);   -webkit-box-shadow: -2px 2px 4px 1px rgba(135,135,135,0.23);    }
.SR-big-row-shadow7 { box-shadow: -2px 0px 4px 1px rgba(135,135,135,0.23);   -moz-box-shadow: -2px 0px 4px 1px rgba(135,135,135,0.23);   -webkit-box-shadow: -2px 0px 4px 1px rgba(135,135,135,0.23);    }
.SR-big-row-shadow8 { box-shadow: 0px 0px 4px 2px rgba(135,135,135,0.23);    -moz-box-shadow: 0px 0px 4px 2px rgba(135,135,135,0.23);    -webkit-box-shadow: 0px 0px 4px 2px rgba(135,135,135,0.23);     }

@media only screen and (min-width: 961px) 
{
    .SR-big-row-shadow0 { box-shadow: -4px -4px 6px 0px rgba(135,135,135,0.23);  -moz-box-shadow: -4px -4px 6px 0px rgba(135,135,135,0.23);  -webkit-box-shadow: -4px -4px 6px 0px rgba(135,135,135,0.23);   }
    .SR-big-row-shadow1 { box-shadow: 0px -4px 6px 0px rgba(135,135,135,0.23);   -moz-box-shadow: 0px -4px 6px 0px rgba(135,135,135,0.23);   -webkit-box-shadow: 0px -4px 6px 0px rgba(135,135,135,0.23);   }
    .SR-big-row-shadow2 { box-shadow: 4px -4px 6px 0px rgba(135,135,135,0.23);   -moz-box-shadow: 4px -4px 6px 0px rgba(135,135,135,0.23);   -webkit-box-shadow: 4px -4px 6px 0px rgba(135,135,135,0.23);   }
    .SR-big-row-shadow3 { box-shadow: 4px 0px 6px 0px rgba(135,135,135,0.23);    -moz-box-shadow: 4px 0px 6px 0px rgba(135,135,135,0.23);    -webkit-box-shadow: 4px 0px 6px 0px rgba(135,135,135,0.23);    }
    .SR-big-row-shadow4 { box-shadow: 4px 4px 6px 0px rgba(135,135,135,0.23);    -moz-box-shadow: 4px 4px 6px 0px rgba(135,135,135,0.23);    -webkit-box-shadow: 4px 4px 6px 0px rgba(135,135,135,0.23);    }
    .SR-big-row-shadow5 { box-shadow: 0px 4px 6px 0px rgba(135,135,135,0.23);    -moz-box-shadow: 0px 4px 6px 0px rgba(135,135,135,0.23);    -webkit-box-shadow: 0px 4px 6px 0px rgba(135,135,135,0.23);    }
    .SR-big-row-shadow6 { box-shadow: -4px 4px 6px 0px rgba(135,135,135,0.23);   -moz-box-shadow: -4px 4px 6px 0px rgba(135,135,135,0.23);   -webkit-box-shadow: -4px 4px 6px 0px rgba(135,135,135,0.23);   }
    .SR-big-row-shadow7 { box-shadow: -4px 0px 6px 0px rgba(135,135,135,0.23);   -moz-box-shadow: -4px 0px 6px 0px rgba(135,135,135,0.23);   -webkit-box-shadow: -4px 0px 6px 0px rgba(135,135,135,0.23);   }
    .SR-big-row-shadow8 { box-shadow: 0px 0px 6px 3px rgba(135,135,135,0.23);    -moz-box-shadow: 0px 0px 6px 3px rgba(135,135,135,0.23);    -webkit-box-shadow: 0px 0px 6px 3px rgba(135,135,135,0.23);    }
}









.fa-mail-envelope-black {
  background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='utf-8'?%3E%3Csvg width='1792' height='1792' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1792 710v794q0 66-47 113t-113 47h-1472q-66 0-113-47t-47-113v-794q44 49 101 87 362 246 497 345 57 42 92.5 65.5t94.5 48 110 24.5h2q51 0 110-24.5t94.5-48 92.5-65.5q170-123 498-345 57-39 100-87zm0-294q0 79-49 151t-122 123q-376 261-468 325-10 7-42.5 30.5t-54 38-52 32.5-57.5 27-50 9h-2q-23 0-50-9t-57.5-27-52-32.5-54-38-42.5-30.5q-91-64-262-182.5t-205-142.5q-62-42-117-115.5t-55-136.5q0-78 41.5-130t118.5-52h1472q65 0 112.5 47t47.5 113z'/%3E%3C/svg%3E");
  color: #FFFFFF;
  width: 32px;
  height: 32px;  
}

.fa-tile-icon-32{width: 32px;height: 32px;   color: #FFFFFF;}
.fa-tile-icon-32-responsive{width: 24px;height: 24px;   color: #FFFFFF;}

.ico-gender-w { width: 20px; height: 20px; vertical-align:top;  }
.ico-gender-m { width: 16px; height: 16px; vertical-align:middle;  }


@media only screen and (min-width: 961px) 
{
    .fa-tile-icon-32-responsive { width: 32px; height: 32px;  }
}

@media only screen and (min-width: 961px) 
{
    .fa-tile-icon-32-responsive { width: 32px; height: 32px;  }
    .ico-gender-w { width: 20px; height: 20px; vertical-align:top;  }
    .ico-gender-m { width: 16px; height: 16px; vertical-align:middle;  }
}



/*
OLD stuff here, from prior CSS-deploy-architecture
*/


.ico-UTF8-std-function
{
    font-size: 40px;
    color: #0ec9d5;
    border: 1px solid #CCCCCC;
    padding: 0px 5px 0px 5px;
    margin: 0;
}


.icoPay-small { background-position: 0px 0px; height:115px; width:150px; margin: 0; display:none; visibility: hidden; }
.icoPay-small-hover { background-position: 10px -153px; height:115px; width:150px; margin: 0; display:none;visibility: hidden; }

.icoPay-middle { background-position: -272px 0px; height:115px; width:120px; margin: 0; display:none;visibility: hidden; }
.icoPay-middle-hover { background-position: -272px -162px; height:115px; width:120px; margin: 0; display:none; visibility: hidden; }

.icoPay-big { background-position: -500px 0px; height:115px; width:200px; margin: 0; display:none; visibility: hidden; }
.icoPay-big-hover { background-position: -500px -157px; height:115px; width:200px; margin: 0; display:none; visibility: hidden; }


@media only screen and (min-width: 961px) 
{
    .icoPay-small {  display:inline-block; visibility: visible; }
    .icoPay-small-hover {  display:inline-block; visibility: visible; }
    
    .icoPay-middle {  display:inline-block; visibility: visible; }
    .icoPay-middle-hover {  display:inline-block; visibility: visible; }

    .icoPay-big {  display:inline-block; visibility: visible; }
    .icoPay-big-hover {  display:inline-block; visibility: visible; }


}





 /* width: 75px */
.icoQuestionMark  { background-position:-2px -62px; width:45px; height:57px; margin: 0px 13px 0px 19px; }
.icoMatchTest  { background-position:-136px -62px; width:58px; height:50px; margin: 0px 17px 0px 1px; }
.icoOKgfx  { background-position:-60px -62px; width:58px; height:57px; margin: 0px 17px 0px 1px; }
.icoChecked { 	background-position: 0px -40px; width: 19px;     height: 17px; display: inline-block; margin-right: 0.5em;}
.icoLocation { background-position:-205px -62px; width:42px; height:54px; margin: 0px 15px 0px 19px; }
.icoLock { background-position:-252px -61px; width:38px; height:57px; margin: 0px 18px 0px 19px; }

.icoButtonSearch { background-position: -298px -65px; width: 25px; height: 18px; margin:0 ;padding:0; display:inline-block; float:left;}            /* attention: FLOAT left, because its placed *in* a button and we want the icon most left! */
.icoButtonCoins { background-position: -298px -90px; width: 29px; height: 17px; margin:0 1.0em 0 0;padding:0; display:inline-block; float:left;}    /* attention: FLOAT left, because its placed *in* a button and we want the icon most left! */

.icoCountryDE{    background-image:url("/images/1031-countrythumb.jpg"); width:60px; height:82px; margin: 0px 10px 0px 6px; background-repeat: no-repeat; }
.icoCountryAT{    background-image:url("/images/3079-countrythumb.jpg"); width:68px; height:36px; margin: 0px 10px 0px 6px; background-repeat: no-repeat;}
.icoCountryCH{    background-image:url("/images/2055-countrythumb.jpg"); width:70px; height:50px; margin: 0px 10px 0px 6px; background-repeat: no-repeat;}


.UserProfileHeroContainer           { position: relative; margin: 0; padding: 0; height: 133px; border: none; background: url('') no-repeat; background-size: 100%; background-position-y: -100px;  }
.UserProfileHeroContainer .FirstPic { margin: 0; padding: 0; border: 2px solid #FFFFFF; width: 100px; height: 100px; position: relative; bottom: -60%; border-radius: 2px; -moz-border-radius:2px; -khtml-border-radius:2px; -webkit-border-radius:2px; left: 50%; transform: translateX(-50%); }
.UserProfileHeroContainerSubBar     { width: 100%; padding: 5em 0 1em 0; background-color: #FFFFFF; border-bottom: 1px solid #DDDDDD; margin: 0 0 10px 0; }
.UserProfileHeroContainerSubBarPP     {  }
.UserProfileHeroContainerUsername   { text-align: center; font-family: Arial, Georgia, "Times New Roman"; font-size: 2.33em; font-weight: bold; padding: 0; margin: 0; }
.UserProfileHeroContainerAgeAndCity { text-align: center; font-size: 0.9em; margin: 0.66em 0 0.66em 0; }

.UserProfileHeroContainer h1            {  font-size: 0.8em; line-height: 1.16em; position: absolute; top: 3.5em; left: 1.0em; padding: 0.4em 0.7em 0.3em 0.7em; margin: 0 1.0em 0 0; color: #FFFFFF; background-color: rgba( 0,0,0, 0.3); display:inline-block;  }

.UserProfileTile                    { background-color: #FFFFFF; border-top: 1px solid #DDDDDD; border-bottom: 1px solid #DDDDDD; margin: 0 0 10px 0; }
.UserProfileTile h2                 { margin: 0 0 1.0em 0; padding:0; font-size:1.66em; font-weight:bold; line-height: 1.16em;}
.UserProfileTile-padding            { padding: 1.0em; }

.UserProfileTile-35                    { padding: 1.0em; /*width: 98%; display:inline-block; vertical-align:top; */}
.UserProfileTile-50                    { padding: 1.0em; /*width: 98%; display:inline-block; vertical-align:top; */}
.UserProfileTile-65                    { padding: 1.0em; /*width: 98%; display:inline-block; vertical-align:top; */}

.UserProfileLeftColumn              { float: none; }
.UserProfileRightColumn             { float: none; }


.UserProfileButtonBar               { text-align: center; }
.UserProfileButton                  { display: inline-block;font-size: 1.16em; padding: 0.2em 1.0em 0.2em 1.0em; margin: 0 0 0.5em 0; font-weight: bold; background-color: #0ec9d5;color: #FFFFFF; border: solid 2px #0ec9d5; border-radius: 0.3em; -moz-border-radius:0.3em; -khtml-border-radius:0.3em; -webkit-border-radius:0.3em;  text-decoration: none; box-shadow: 0 0 4px 0px #b4b4b4;	-moz-box-shadow: 0 0 4px 0px #b4b4b4;		-khtml-box-shadow: 0 0 4px 0px #b4b4b4;     -webkit-box-shadow: 0 0 4px 0px #b4b4b4; text-transform:uppercase; z-index: 5; position: relative; }

.UserProfileButton .buttonSubtext {
    display: none;
    visibility: hidden;
}
.UserProfileButton:hover            { background-color: #c71c75;    color: #FFFFFF; border: solid 2px #c71c75; }

.UserProfileButtonSecondary         { background-color: #505050;     background-color: #c71c75; 	color: #FFF; }

.UserProfileButton.FavNowButton             { font-size: 0.8em; background-color: #FFF; color:#A0A0A0; border: 1px dotted #A0A0A0;  box-shadow: none; -moz-box-shadow: none; -khtml-box-shadow: none; -webkit-box-shadow: none;}
.UserProfileButton.BlockButton, 
.UserProfileButton.ReportButton            { font-size: 0.8em; background-color: #FFF; color:#A0A0A0; border: 1px dotted #A0A0A0;  box-shadow: none; -moz-box-shadow: none; -khtml-box-shadow: none; -webkit-box-shadow: none;}
.UserProfileButton.FavNowButton:hover       { border: 1px dotted #10AA00; }
.UserProfileButton.BlockButton:hover        { border: 1px dotted #CC0000; }
.UserProfileButton.ReportButton:hover       { border: 1px dotted #000000; }

.UserProfileButton.MarkedAsFavStatus, .UserProfileButton.MarkedAsFavStatus:hover           { color:#10AA00; border: 1px solid #10AA00;  cursor:default;}
.UserProfileButton.BlockedStatus, .UserProfileButton.BlockedStatus:hover           { color: #CC0000; border: 1px solid #CC0000; cursor:default; }
.UserProfileButton.ReportedStatus, .UserProfileButton.ReportedStatus:hover           { color:#000000; border: 1px solid #000000;  cursor:default;}

.UserProfileLastGiftsItem {                margin: 0.1em 0.5em 0.1em 0.5em;  width: 32px; height: 32px;          }

.UserProfileMatchResultCol1     { width: 45%; display: inline-block; color: #c71c75; margin: 0.25em 0 0.5em 0; vertical-align: top; font-size: 3.0em; font-family: Georgia, "Times New Roman"; text-align:center;}
.UserProfileMatchResultCol2     { display: inline-block; color: #c71c75; margin: 0 0 0.5em 0; vertical-align: top; }
.UserProfileMatchResultCol3     { width: 100%; /*color: #c71c75;*/ margin: 0 0 0.5em 0; text-align: center; }

.UserProfileOnlineStatus            { position: absolute; top: 1em; right: 1em; font-size: 0.8em; padding: 0.3em 0.6em 0.2em 0.6em; margin: 0; filter: alpha(opacity=100); opacity: 1.0; color: #FFFFFF; display:inline-block; border-radius: 0.3em; -moz-border-radius: 0.3em;  -khtml-border-radius: 0.3em; -webkit-border-radius: 0.3em; }
.UserProfileOnlineStatus.Online     { background-color: #4dc901;  }
.UserProfileOnlineStatus.Offline    { background-color: #333333; }
.UserProfileFotoCounter            { position: absolute; top: 1em; left: 1em; font-size: 0.8em; margin: 0; color: #FFFFFF;  /*filter: alpha(opacity=90); opacity: 0.9;*/ padding: 0.3em 0.6em 0.2em 0.6em;background-color: #0ec9d5; border: 0px solid #FFFFFF; border-radius: 0.3em; -moz-border-radius: 0.3em;  -khtml-border-radius: 0.3em; -webkit-border-radius: 0.3em; }


.UserProfileMatchCategoryBox                  { display: inline-block; padding: 0.25em; margin: 0 0.33em 0 0; border: 2px dotted #E0EaE1; text-align: left; border-radius: 2px; -moz-border-radius:2px; -khtml-border-radius:2px; -webkit-border-radius:2px; } /*color: #505a69;*/
.UserProfileMatchCategoryBox ul               { margin: 0px;padding: 0; color: #505a69;}
.UserProfileMatchCategoryBox ul li            { list-style-type: none; padding: 0; margin:0; font-size: 0.90em;}
.UserProfileMatchCategoryBox h4               { margin:0 0.5em 0 0; padding:0; color: #505a69; font-size: 0.90em; font-weight: bold;} /*pink: color: #c71c75;*/
.UserProfileMatchCategoryBox .bottomLink      { margin:1.0em 0 0.0em 0; padding:0; float: right;  } /*color: #0ec9d5;*/
.UserProfileMatchCategoryBox-LastUpdInfo      { text-align: right; }
.UserProfileMatchCategoryBox.headline               { margin: 2.0em 0 1.0em 0; padding:0; color: #505a69; font-size: 1.75em;} /*pink: color: #c71c75;*/
.UserProfileMatchCategoryBoxCategoryListHeadline    { margin: 2.0em 0 1.0em 0; padding:0; color: #505a69; font-size: 1.75em;} /*pink: color: #c71c75;*/

.UserProfileDataRow                 { margin-bottom: 1.0em; padding-bottom: 1.0em;    border-bottom: 1px dotted #C0CaC1; }
.UserProfileDataRow h4              { margin: 0; padding: 0 0 0.75em 0; font-size: 1.25em; font-weight: bold;}
.UserProfileDataRow .description    { width: 100%; margin: 0; padding: 0 0 0.25em; font-size: 1.25em; font-weight: bold; display: inline-block;  }
.UserProfileDataRow .descriptionFullWidth     { width:100%; }
.UserProfileDataRow .content        { margin: 0 0 0.0em 0em;    min-height: 0.5em;    font-size: 1.16em;    line-height: 1.5em; display: inline; vertical-align:top;  }
.UserProfileDataRow.NoSeparator     { border-bottom: none;}
.UserProfileDataRow ul              { margin: 0; padding: 0; display: inline-block; }
.UserProfileDataRow li              { margin: 0 0 0 1.33em; padding: 0; list-style:square;}

.UserProfileTabContainer                                                { width:100%;margin: 0;padding: 0; text-align:center; font: 1.33em Arial, Tahoma, Verdana, Sans-serif; border-bottom: 1px solid #D5D5D5; z-index: 1;  }
.UserProfileTabLeft, .UserProfileTabRight                               { border: 1px solid #D5D5D5; border-bottom: none; padding: 0.8em 0 0.8em 0.0em; width: 42%; font-size: 1.16em;  display: inline-block;background-color: #FFFFFF;position: relative;top: 1px;z-index: 1; color: #404a59; }
.UserProfileTabLeft.inactive, .UserProfileTabRight.inactive             { padding-top: 0.7em; padding-bottom:0.7em;border: none;border-top: 2px dotted #0ec9d5;border-right: 2px dotted #0ec9d5;border-left: 2px dotted #0ec9d5;cursor:pointer;color:#0ec9d5;position: relative;top: 0px; }
.UserProfileTabLeft.inactive:hover, 
.UserProfileTabRight.inactive:hover                                     { border-color:#c71c75;color: #c71c75; }
.UserProfileTabLeft:hover, .UserProfileTabRight:hover                   {color: #404a59; }
.UserProfileTabLeft                                                     { margin-right: 1%; }       /* dedicated/special margin, only used in this small resolutions / 20180104 */

.UserProfileQuestionPanelHeadline       { font-size: 1.5em; font-family: Arial, Georgia, "Times New Roman"; font-weight: normal; padding: 0 0 0.0em 0;}
.UserProfileQuestionPanelSubNav         { font-size: 1.16em; margin: 0.5em 0 0.5em 0;}    

.UserProfileFotoBoxPopup                { top: 0; width: 100%; background-color: #000000; visibility:visible; position: fixed; }    /* gallery popup is fixed in position!*/
.UserProfileFotoBoxHeadline             { padding: 0.5em; }
.UserProfileFotoBoxThumbnailBar         { padding: 0.3em; text-align: center;}
.UserProfileFotoboxPicContainer         { display: grid;height: 100%;border:none; position:relative; }
.UserProfileFotobox-pic-center-fit      { max-width: 100%;max-height: 95vh;margin: auto;position: relative;top: 0;}



@media only screen and (min-width: 481px) {
    .UserProfileHeroContainer h1    {  font-size: 1.0em; top: 3.0em; left: 1.0em; padding: 0.4em 0.7em 0.3em 0.7em; }
    .UserProfileButton              { padding: 0.4em 1.25em 0.4em 1.25em; font-size: 1.50em; }
    .UserProfileOnlineStatus        { font-size: 0.9em; }
    .UserProfileFotoCounter         { font-size: 0.9em; }   
}


@media only screen and (min-width: 761px) {
    .UserProfileHeroContainer                   { background-position-y: -300px; }
    .UserProfileHeroContainer h1                {  font-size: 1.0em; top: 3.0em; left: 1.0em; padding: 0.4em 0.7em 0.3em 0.7em; }
    .UserProfileButton .buttonSubtext           { display: inline; visibility: visible; }

    .UserProfileLastGiftsItem {                width: 48px; height: 48px;          }

    .UserProfileMatchResultCol1     { width: 45%; }
    .UserProfileMatchResultCol2     { width: 45%; }
    .UserProfileMatchCategoryBox h4               { font-size: 1.0em; } /*pink: color: #c71c75;*/

    .UserProfileDataRow .description              { width: 30%; display: inline-block;  }
    .UserProfileDataRow .descriptionFullWidth     { width: 30%;}

    .UserProfileTabLeft, .UserProfileTabRight    { width: 47.5%; }        /* this one is fully extended already at 761! */
    .UserProfileTabLeft                             { margin-right: 0; }    /* the dedicated right-margin for a little bit more space is put to zero at this resolution because of layout-breaks*/

}

@media only screen and (min-width: 961px) {
    .UserProfileHeroContainer               { height: 300px; background-position-y: -500px; }
    .UserProfileHeroContainer h1            {  font-size: 1.33em; top: 3.0em; left: 1.0em; padding: 0.4em 0.7em 0.3em 0.7em; }
    .UserProfileHeroContainer .FirstPic     { width: 156px; height: 156px; background-color: #FFFFFF; position: relative; left: 15%; bottom: -70%; padding: 3px; border: 1px solid #DDDDDD; }
    .UserProfileHeroContainerSubBar         { padding: 8em 0 1em 0; width: unset; border: 1px solid #DDDDDD; } /* width=unset required for theborder matching the pic/its siz*/
    .UserProfileHeroContainerSubBarPP       { padding: 4em 0 1em 0; }
    .UserProfileHeroContainerUsername       { position: absolute; top: 40%; left: 31%; color: #FFFFFF; font-size: 3em; text-rendering: optimizelegibility; text-shadow: 0 0 3px rgba(0,0,0,.8); }
    .UserProfileHeroContainerUsernamePP     { position: absolute; top: 26%;  }
    .UserProfileHeroContainerAgeAndCity     { position: absolute; top: 43%; left: 31%; color: #FFFFFF; font-size: 1.33em;  }
    .UserProfileHeroContainerAgeAndCityPP   { position: absolute; top: 29%; left: 31%;  }
    div#UserProfile_OperationsButtons       { position: absolute; top: 49%; left: 31%; text-align:left;  }
    .UserProfileButton                      { padding: 0.6em 1.5em 0.6em 1.5em; font-size: 2.00em; }

    .UserProfileTile                        { background-color: #FFFFFF; border: 1px solid #DDDDDD; margin: 0 0 10px 0; }
    .UserProfileTile-padding                { padding: 1.0em; }

    .UserProfileTile-35                     { width: 32%; display:inline-block; vertical-align:top; }
    .UserProfileTile-50                     { width: 48.5%; display:inline-block; vertical-align:top;}
    .UserProfileTile-65                     { width: 60%; display:inline-block; vertical-align:top;}

    .UserProfileLeftColumn                  { float: left; }
    .UserProfileRightColumn                 { float: right; }


    .UserProfileLastGiftsItem               { width: 64px; height: 64px;          }

    .UserProfileMatchCategoryBox            { padding: 0.33em; margin: 0 0.33em 0 0; } /*color: #505a69; E0EaE1*/
    .UserProfileMatchResultCol1             { width: 19%; font-size: 4.0em; }
    .UserProfileMatchResultCol2             { width: 25%; font-size: 1.16em; line-height: 1.16em;}
    .UserProfileMatchResultCol3             { width: 55%; display: inline-block; text-align: left; }
    .UserProfileMatchCategoryBox h4               { font-size: 1.25em; } /*pink: color: #c71c75;*/

    .UserProfileOnlineStatus                    { font-size: 1.0em; }
    .UserProfileFotoCounter                     { font-size: 1.0em; }

    .UserProfileTabLeft, .UserProfileTabRight    { padding-left: 0.6em; }        /* this one is fully extended already at 761! */
    .UserProfileTabContainer                    { font-size: 1.5em; text-align: left; }

    .UserProfileQuestionPanelSubNav              { font-size: 1.16em; }  
}

@media only screen and (min-width: 1280px) {
    .UserProfileMatchCategoryBox    { padding: 0.5em; margin: 0 0.5em 0 0; } /*color: #505a69;*/
    .UserProfileMatchResultCol1     { width: 19%; font-size: 5.0em; }
    .UserProfileMatchResultCol2     { width: 20%; font-size: 1.33em; line-height: 1.3em;}
    .UserProfileMatchResultCol3     { width: 60%; font-size: 1.33em; display: inline-block; visibility: inherit; text-align: left; }

    .UserProfileMatchCategoryBox h4               { font-size: 1.33em; } /*pink: color: #c71c75;*/
    .UserProfileTabLeft, .UserProfileTabRight    { width: 48%; }   

    .UserProfileTile-35                    { width: 33%;   }        /* attention: this one is solo down here, just to optimize place-usage */
}


@media only screen and (min-width: 1920px) {

    .UserProfileHeroContainerUsername   { position: absolute; top: 40%; left: 30%;  }
    .UserProfileHeroContainerUsernamePP   { position: absolute; top: 26%;  }
    .UserProfileHeroContainerAgeAndCity { position: absolute; top: 43%; left: 30%;   }
    .UserProfileHeroContainerAgeAndCityPP { position: absolute; top: 29%; left: 30%;   }
    div#UserProfile_OperationsButtons   { position: absolute; top: 49%; left: 30%;   }
    .UserProfileTabLeft, .UserProfileTabRight    { width: 48.5%; }        

    .UserProfileTile h2                 { font-size:2.5em; }

    .UserProfileDataRow h4              { font-size: 1.75em; }
    .UserProfileDataRow .content            { font-size: 1.5em;    }
    .UserProfileDataRow .description    { font-size: 1.5em;  }

    .UserProfileTile-35                    { width: 35%;   }        /* attention: this one is solo down here, just to optimize place-usage */
}

    .ProfilePublicLinkHighlight-10 {
        margin: 1.0em 0 2.0em 0;
        padding: 1em 1.0em 1em 1.0em;
        text-align: center;
        display: inline-block;
    }


    .ProfilePublicLinkArea-10 {
        font-size: 1.75em;
        background-color: #0ec9d5;
        color: #FFFFFF;
        border: solid 2px #0ec9d5; /* same color as background due rendering issues */
        border-radius: 0.5em;
        -moz-border-radius: 0.5em; /* BROWSER: FireFox */
        -khtml-border-radius: 0.5em; /* BROWSER: Konqueror */
        -webkit-border-radius: 0.5em; /* BROWSER: webkit */
        text-decoration: none;
        box-shadow: 0 0 3px #b4b4b4; /* a little bit of small shadow around the buttons may look nice?? */
        -moz-box-shadow: 0 0 3px #b4b4b4;
        -khtml-box-shadow: 0 0 3px #b4b4b4;
        -webkit-box-shadow: 0 0 3px #b4b4b4;
        padding: 1.0em 1.0em 1.0em 1.0em;
        line-height: 1.5em;
        margin: 0 0 0 1em;
        display: inline-block;
    }


    .ProfilePublicLinkArea-20 {
        font-size: 2.5em;
        background-color: #0ec9d5;
        color: #FFFFFF;
        border-radius: 0.15em;
        -moz-border-radius: 0.15em; /* BROWSER: FireFox */
        -khtml-border-radius: 0.15em; /* BROWSER: Konqueror */
        -webkit-border-radius: 0.15em; /* BROWSER: webkit */
        text-decoration: none;
        box-shadow: 0 0 5px #949494; /* a little bit of small shadow around the buttons may look nice?? */
        -moz-box-shadow: 0 0 5px #949494;
        -khtml-box-shadow: 0 0 5px #949494;
        -webkit-box-shadow: 0 0 5px #949494;
        padding: 0.66em 1.0em 0.66em 1.0em;
        line-height: 1.5em;
        margin: 1.0em 0 1.0em 0;
    }

.Question-Entity {
    border-bottom: 2px dotted #E0EaE1;
    padding: 0 0 1.33em;
    margin: 0 0 1.33em 0;
    text-align:left;
}

.Question-Entity h2 {
    font-size: 1.5em;
    line-height: 1.16em;
    padding: 0 0 0.5em 0;
    font-weight:normal;
}


.Question-Entity img { border: 0px solid #FFFFFF; width: 40px; height: 40px; border-radius: 0.2em; -moz-border-radius:0.2em; -khtml-border-radius:0.2em; -webkit-border-radius:0.2em; }


.QuestionCategory {

    color: #FFFFFF; padding: 0.0em 0.7em 0.0em 0.7em;  margin: 0 0 0.5em 0; display:inline-block; background-color: #F7F7F7; border-radius: 0.4em; -moz-border-radius:0.4em; -khtml-border-radius:0.4em; -webkit-border-radius:0.4em;
    font-size: 0.8em; 
    filter: alpha(opacity=80); opacity: 0.8;
}

.Question-Entity .AnswerCol1   { width: 15%; display: inline-block; vertical-align:top; margin-bottom: 1em; text-align:center;}
.Question-Entity .AnswerCol2   { width: 20%; display: inline-block; vertical-align:top; font-weight: bold; text-align:left;}
.Question-Entity .AnswerCol2-30   { width: 30%; display: inline-block; vertical-align:top; font-weight: bold; text-align:left;} /* special class for use on seo pages - has SLIGHTLY different configs than the other AnswerColX-css-styles*/
.Question-Entity .AnswerCol3   { width: 60%; display: inline-block; vertical-align:top;  text-align:left;}

.Question-Entity .AnswerSeverity { font-size: 0.9em;  }
.Question-Entity .AnswerComment { }


.AnswerSeverityBar              { display:inline-block; width: 1.0em; height: 0.4em; margin: 0 1px 0 0; padding: 0;}
.AnswerSeverityBar.fill         { border: 1px dotted #c71c75; background-color: #c71c75; }
.AnswerSeverityBar.empty        { border: 1px dotted #c71c75; background: none;  }




/* ATTENTION: here we use a special breaking point, 400 instead of 481!!!!!!!!!!!!!!!!!!!!! */
@media only screen and (min-width: 400px) {
    .Question-Entity .AnswerCol1   { width: 15%;  }
    .Question-Entity .AnswerCol2   { width: 20%;  }
    .Question-Entity .AnswerCol3   { width: 63%;  }
}


@media only screen and (min-width: 761px) {
    .Question-Entity        { padding: 0 0 2.0em; margin: 0 0 1.5em 0; }
    .Question-Entity h2     { font-size: 1.66em; line-height: 1.16em; font-weight:normal;}
    .QuestionCategory       { padding: 0.0em 0.7em 0.0em 0.7em; font-size: 0.9em;}

    .Question-Entity .AnswerCol1    { font-size: 1.16em; text-align:right;  }
    .Question-Entity .AnswerCol2    { font-size: 1.16em; text-align:center;}
    .Question-Entity .AnswerCol2-30 { font-size: 1.16em; text-align:left;}  /* note the difference: this one is left, not center!*/
    .Question-Entity .AnswerCol3    { font-size: 1.16em;  }
}

@media only screen and (min-width: 961px) {
    .Question-Entity h2 { font-size: 1.75em; line-height: 1.16em; font-weight:normal; }
    .AnswerSeverityBar              { width: 1.5em; height: 0.5em; }
}

@media only screen and (min-width: 1280px) {
    .Question-Entity        { padding: 0 0 2.5em; margin: 0 0 2.0em 0; }
    .Question-Entity h2 { font-size: 2.0em; line-height: 1.16em; font-weight:normal; }
    .QuestionCategory { padding: 0.1em 0.7em 0.0em 0.7em; font-size: 1.0em;}

    .Question-Entity .AnswerCol1   {  }
    .Question-Entity .AnswerCol2   {  }
    .Question-Entity .AnswerCol3   { font-size: 1.33em; }
    .Question-Entity .AnswerSeverity { font-size: 0.8em; }
}










.QuestionCategoryColor_550000 { background-color: #ff8303; }                    /*dating*/
.QuestionCategoryColor_550001 { background-color: #c500d2; }                    /*Lifestyle */
.QuestionCategoryColor_550002 { background-color: #e20000; }                    /*Sex	*/
.QuestionCategoryColor_550003 { background-color: #61b400; }                    /*Ethics */
.QuestionCategoryColor_550004 { background-color: #272727; color: #FFED20; }    /*Other/allgemein*/
.QuestionCategoryColor_550005 { background-color: #1073fc; }                    /*Gott,die Welt*/

.CityHeroBox {
    
    /*height: 1177px;*/ /*1277*/
    height: 280px;
    box-shadow: 0.0em 0.2em 0.3em 0.01em #AFAFAF; -moz-box-shadow: 0.0em 0.2em 0.3em 0.01em #AFAFAF; -khtml-box-shadow: 0.0em 0.2em 0.3em 0.01em #AFAFAF; -webkit-box-shadow: 0.0em 0.2em 0.3em 0.01em #AFAFAF;
    margin-bottom: 3em;
    position: relative;
    overflow: hidden;
}

.City-h1                                { font-size: 1.66em !important; line-height: 1.116em !important; margin: 0 0 0.25em 0 !important;  word-break: break-word; }   /* dedicated H1-H3 for city pages!! */
.City-h2                                { font-size: 3em !important; line-height: 1.116em !important; margin: 0 0 0.25em 0 !important; font-weight:bold; word-break: break-word; }
.City-h3                                { font-size: 1.33em !important; line-height: 1.116em !important; margin: 0 0 0.25em 0 !important; font-weight:bold; word-break: break-word; }


.CityNumberHero                         { padding-bottom:2.0em; background-color: #0ec9d5;  }
.CityXContactsHero                      { background-color: #1e1815; color:#E9E6D0; padding-bottom: 2.0em; }
.CityHeroShadow                         { box-shadow: 0.0em 0.2em 0.3em 0.01em #AFAFAF; -moz-box-shadow: 0.0em 0.2em 0.3em 0.01em #AFAFAF; -khtml-box-shadow: 0.0em 0.2em 0.3em 0.01em #AFAFAF;-webkit-box-shadow: 0.0em 0.2em 0.3em 0.01em #AFAFAF;color: #FFFFFF;text-align: center;}
.CityTeaser-slim                        { margin-bottom: 1.0em; color:#FFFFFF; background-color: #0ec9d5; }
.CityTeaser-Arrow                       { font-size: 150%; }

.CityHeroTiles                          { /*text-align: justify;*/ }
.CityHeroTiles .Tile                    { vertical-align:top; border: 4px solid #FFFFFF; display:inline-block; font-size:1.00em; color: #FFFFFF; text-align: left; padding: 0.5em; margin: 0 0 0.5em 0;  border-radius: 0.75em;-moz-border-radius:0.75em; -khtml-border-radius: 0.75em; -webkit-border-radius: 0.75em; }
.CityHeroTiles .TileTitle               { font-size: 1em; display: block; margin: 0 0 1.0em 0; padding: 0;}
.CityHeroTiles .TileTitleBig            { font-size: 3.0em; display: block; margin: 0.1em 0 0.1em 0; padding: 0; line-height:1em;}

.CityHeroTiles .Counter                 { font-size: 3.0em; line-height:1.0em; font-weight: normal; margin: 0.0em 0 0em 0;}
.CityHeroTiles .QuoteText               { font-size: 1.25em; font-weight: normal; font-style:italic;}
.CityHeroTiles .LongText                { font-size: 3.0em; line-height:1.0em; font-weight: normal; margin: 0.0em 0 0em 0; }

.CityHeroTiles .Tile-50-50              { display: block; }
.CityHeroTiles .LastTileBreak           { display: block; height: auto; }

.CityQuestion                           { border: 2px dotted #0ec9d5; padding: 0% 1.0% 2% 1.5%; margin: 0 0 1.5em 0;}
.CityQuestion   h3                      { font-size: 1.5em; }
.CityQuestionGraph-footnote             { font-family:Arial; font-size:1.0em; color:#909090; margin: 0.25em 0 1.0em 0; padding:0; display: block; text-align: center; }
.CityQuestionTile                       { border: 2px dotted #0ec9d5; padding: 2%; display:inline-block; width: 95%; }

.CityChartTitle                         { font-size: 1.25em; line-height: 1.33em; margin: 1.0em 0 0 0; padding: 0; font-weight: bold; text-align: center; }
.CityChart-5050                         { width: 100%; margin: 0; padding: 0; vertical-align:top;}

.City-paragraph                         { font-size: 1.33em; line-height: 1.5em; margin-bottom: 1.5em; }
.City-paragraph-blocktext               { }




.CityTable                              { font-size: 1.25em; line-height: 1.33em; }
.CityTable thead                        { background-color: #0ec9d5; color: #FFFFFF; /*font-size:1.5em;*/ }
.CityTable th                           { padding: 0.2em 0.0em 0.2em 0.2em; }
.CityTable td                           { padding: 0.2em 0.5em 0.5em 0.2em; word-break: break-word; }
.CityTable tr                           { padding: 0; border-bottom: 1px dotted #BCBCBC; }






@media only screen and (min-width: 400px) {
    .CityHeroTiles .Tile-50-50            {  }

    .City-paragraph                     { font-size: 1.5em; line-height: 1.5em; }
    .CityTable                          { font-size: 1.5em; line-height: 1.5em; }

    .CityHeroBox .Munich                { transform: scale(2.5); margin-left: -20%; margin-top: 50px; }
}

@media only screen and (min-width: 481px) 
{
    .City-h2                            { font-size: 4.0em !important; }
    .City-h3                            { font-size: 1.66em; !important;  }
    .CityHeroBox                        { height: 300px; }
    .CityHeroTiles .Tile-50-50          { min-height: 70px;}
    .CityQuestion                       { padding: 0% 2% 2% 0.5%; }
}

@media only screen and (min-width: 621px) 
{
    .City-h2                            { font-size: 4.0em !important; }
    .City-h3                            { font-size: 1.66em; !important;  }
    .CityHeroBox                        { height: 350px; }
    .CityHeroTiles .Tile-50-50          { min-height: 70px; font-size:1.16em; }
    .CityQuestionTile                   { padding: 1%; width: 46%; vertical-align: top;}
}

@media only screen and (min-width: 761px) 
{
    .CityHeroBox                        { height: 410px; }
    .CityHeroTiles .Tile-50-50          { width: 46.0%; min-height: 100px; font-size:1.16em;  display: inline-block; margin-right: 0.5%;}
}

@media only screen and (min-width: 961px) 
{
    .City-h2                            { font-size: 4.0em !important; }
    .City-h3                            { font-size: 2em; !important;  }

    .CityHeroBox                        { height: 480px; }
    .CityHeroTiles .Tile-50-50          { width: 46.5%;font-size:1.16em;  display: inline-block; margin-right: 0.5%; }
    .CityHeroTiles .TileTitle           { font-size: 1.0em;} 

    .CityQuestion                       { padding: 0% 3% 1% 2.5%; margin-bottom: 3%;}

    .CityChartTitle                     { font-size: 1.33em; line-height: 1.33em; }
    .CityChart-5050                     { width: 49.5%; margin: 0; display: inline-block;}
    .CityChart-5050 .ChartContainer     {  border: 0px solid #FF0000; padding: 0 0 0 10%;}

    .City-paragraph                     { font-size: 1.5em; line-height: 1.5em; }
    .CityTable                          { font-size: 1.5em; line-height: 1.5em; }
    .City-paragraph-blocktext           { column-count:2; column-gap:40px; }

}

@media only screen and (min-width: 1280px) 
{
    .City-h2                            { font-size: 5.0em !important; }
    .City-h3                            { font-size: 3em; !important;  }
    .CityHeroBox                        { height: 540px; }
    .CityHeroTiles .Tile-50-50          { width: 46.5%;font-size:1.16em;  display: inline-block; margin-right: 0.5%; }
    .CityQuestion                       { padding: 0% 1% 1% 1%; margin-bottom: 3%;}
    .CityChartTitle                     { font-size: 1.5em; line-height: 1.33em; }
    .City-paragraph                     { font-size: 1.66em; line-height: 1.5em; }
    .CityTable                          { font-size: 1.66em; line-height: 1.5em; }
}

@media only screen and (min-width: 1920px) 
{
    .CityHeroBox                        { height: 660px; }
    .CityHeroTiles .Tile-50-50          { width: 47.5%; font-size:1.16em;  display: inline-block; margin-right: 0.5%; }
    .CityQuestion                       { padding: 0% 2% 1% 1%; margin-bottom: 3%;}
    .CityChartTitle                     { font-size: 1.6em; line-height: 1.5em; }
    .City-paragraph                     { font-size: 1.75em; line-height: 1.5em; }
    .CityTable                          { font-size: 1.75em; line-height: 1.5em; }
}



/* ############################################################################################################
*
*
*   CITY SPECIFIC CSS !!!#######
*
*
################################################################################################################ */


.CityHeroBox .MunichTitle {
    position: absolute;
    font-size: 2.0em;  
    padding: 0.2em 0 0 0.2em;
    width: 99%;
    margin: 0 auto 0 auto;
    color: #FFFFFF;
    border: none;
    text-align: left;
    z-index: 50;
}

.CityHeroBox .MunichTeaserList {
    position: absolute;
    top: 20%;
    font-size: 1.0em; 
    padding: 0 0 0 0em;
    width: 99%;
    margin: 0;
    padding: 0;
    color: #FFFFFF;
    border: none;
    z-index: 51;
    list-style:square;
    list-style-type:square;
}

.CityHeroBox .MunichTeaserList li
{
    width: 95%;
    padding: 1%;
    margin: 0 0 1% 2%;    
    color: #606a79;
    color: #303534;
    color: #404a59;
    display:inline-block;
    list-style:square;
    list-style-type:square;
    background-color: rgb(255,255,255,0.4);
}

.CityHeroBox .Munich {position: absolute;z-index: 30;transform: scale(3.0);margin-left: -20%;margin-top: 80px;}
.CityHeroBox .Dresden {position: absolute;z-index: 30;transform: scale(2.0);margin-left: -0%;margin-top: 40px;}


@media only screen and (min-width: 400px) {
    .CityHeroBox .Munich { transform: scale(2.5); margin-left: -20%; margin-top: 50px; }
    .CityHeroBox .Dresden { transform: scale(2.5); margin-left: -20%; margin-top: -50px; }
}

@media only screen and (min-width: 481px) 
{
    .CityHeroBox .Munich   { transform: scale(2.0); margin-top: 60px; }
    .CityHeroBox .MunichTitle { font-size: 2.5em; padding: 1% 0 0 1%; }
    .CityHeroBox .MunichTeaserList { font-size: 1.16em; top: 15%;}

    .CityHeroBox .Dresden   { transform: scale(2.0); margin-top: -20px; }
}

@media only screen and (min-width: 621px) 
{
    .CityHeroBox .MunichTitle { font-size: 3.0em; padding: 2% 0 0 2%; }
    .CityHeroBox .MunichTeaserList { font-size: 1.33em; top: 20%; }
}

@media only screen and (min-width: 761px) 
{
    .CityHeroBox .Munich   { transform: scale(1.75); margin-left: 5%; margin-top: 60px; }
    .CityHeroBox .MunichTitle { font-size: 3.33em; padding: 2% 0 0 2%; }
    .CityHeroBox .MunichTeaserList { font-size: 1.5em; top: 20%; }

    .CityHeroBox .Dresden   { transform: scale(1.75); margin-left: 5%; margin-top: 0px; }
}

@media only screen and (min-width: 961px) 
{
    .CityHeroBox .Munich   { transform: scale(1.5); margin-top: 70px; }
    .CityHeroBox .MunichTitle { font-size: 5.0em; padding: 3% 0 0 2%; }
    .CityHeroBox .MunichTeaserList { font-size: 2.0em; margin: 0%; padding: 0% 0 0 0%; top: 25%; }
    .CityHeroBox .MunichTeaserList li { padding: 0 1% 0 1%; }

    .CityHeroBox .Dresden   { transform: scale(1.5); margin-top: -100px; }
}

@media only screen and (min-width: 1280px) 
{
    .CityHeroBox .Munich   { transform: scale(1.25); margin-top: 50px; }
    .CityHeroBox .MunichTeaserList { font-size: 2.0em; margin: 0%; padding: 0% 0 0 0%; top: 30%; }

    .CityHeroBox .Dresden   { transform: scale(1.25); margin-top: -150px; }
}

@media only screen and (min-width: 1920px) 
{
    .CityHeroBox .Munich   { transform: scale(1.0); margin-left: 0%; margin-top: 0px;  }
    .CityHeroBox .MunichTeaserList { font-size: 2.5em; margin: 0%; padding: 0% 0 0 0%; top: 30%; }

    .CityHeroBox .Dresden   { transform: scale(1.0); margin-left: 0%; margin-top: -100px;  }
}