/*
	colors
	---------
	mahaghoni: 642111
	grau1 B8B3AA (4)
	grau2 #847B67 (7)
	rot DC001A
*/
* {
    padding:0;
	margin:0;
}
body, p, table, tr, td, th, div, a, ul, li, input, select, option, textarea, h1, h2, h3,button, legend {
	font-size:12px; 
	font-family: Verdana, Arial, Helvetica, Sans-Serif; 
	color:#847B67;
}
html {/*overflow-y:scroll;*/}

img   { border:none;}
div.clr { clear:both; }
table { border-collapse:collapse;}
th    { text-align:left;}

input, select, textarea {
	padding:2px;
}

a {
	text-decoration:none;
	color:#642111;
}
a:hover {
	text-decoration:underline;
}
.btn {
	cursor:pointer;
}

/**************************************************
******************* Layout ************************
***************************************************/
body {
	background-color:#E9E3DC;
}
#container {
	width:1000px;
	margin:auto;
}
/* Demoversion */
#demoversion {
	width:100%;
	border-top:1px solid #f00;
	border-bottom:1px solid #f00;
	background-color:#FFC6B3;
	padding:8px;
	color:#f00;
	font-weight:bold;
	text-align:center;
}

/* Header  */
#header {
	width:100%;
	position:relative;
	margin-top:28px;
}
#header .title {
    float:left;
    margin-bottom:35px;
}
    #header .title h1 {
	color: #642111;
	font-size: 30px;
	font-weight: bold;
	line-height: 0.8;
	margin-bottom: 14px;
    }
    #header .title h5 {
	color: #642111;
	font-size: 15px;
	font-weight: normal;
	line-height: 1.1;
	margin-top: 14px;
    }
#header img.logo {
    float:right;
    margin-top:15px;
}
#header .headerline {
    background: none repeat scroll 0 0 #642111;
    border-radius: 2px 2px 2px 2px;
    height: 10px;
    width: 100%;
}

/* Men� */ 
#menuBar {
	width:100%;
	height:25px;
	position:absolute;
	bottom:8px;
	left:0;
}
#menuBar table {
	margin:0 0 0 20px;
}
#menuBar .menu {
	height:25px;
}
#menuBar .first{ 
}
#menuBar .menu a { 
	display:block;
	width:100%;
	height:100%;
	text-align:center;
	line-height:19px;
	font-weight:bold;
	
}
#menuBar .selected a,
#menuBar .menu a:hover  { 
	background-color:#642111;
	text-decoration:none;
    border-radius: 3px 3px 3px 3px;
}
#menuBar .selected a div,
#menuBar .menu a:hover div { 
	color:#fff;
}

#menuBar .menu div  { 
	padding:2px 10px;
	font-size:1.1em;
	color:#642111;
	
}

#content {
	background-color:#fff;
	padding:20px 10px 0 10px;
}
    #content.content-pw,
    #content.content-pwchange,
    #content.content-start {
	    padding:0px;
    }
    #content.content-pw img,
    #content.content-pwchange img,
    #content.content-start img {
	    width:100%;
    }

/* Footer */
#footer {
	background: none repeat scroll 0 0 #D4D1CA;
    border-bottom: 2px solid #A59F92;
    border-radius: 2px 2px 2px 2px;
    padding: 4px 0;
	text-align:center;
}
#footer,
#footer a{
	font-size:11px;
}

/* error */
div.error { 
   width:459px;
   background-color:#FFEBE4;
   border:1px solid #f00;
}
div.error div.error-pad{ 
	padding:10px;
  	font-weight:bold;
	line-height:1.5;
	color:#f00;
}
td.error,
span.error,
a.error {
	color:#f00;
}
a.error {
	text-decoration:underline;
}
span.required {
	color:#f00;
	font-size:11px;
}
div.pflichtfelder {
	font-size:10px;
	margin:10px 0 0 0;
}
.negative {
	color:#f00;
}

div.success { 
   width:459px;
   background-color:#E8EEF5;
   border:1px solid #244E7E;
}
div.success div.success-pad{ 
	padding:10px;
  	font-weight:bold;
	line-height:1.5;
	color:#244E7E;
}



/* Datentabelle */
tr.formular { 
	height:40px;
}
tr.formular td {
	vertical-align:middle;
} 

td.label { 
	text-align:left;
	padding:0 8px 0 0;
}
input.formular200  { width:200px; }
select.formular200 { width:200px; }
textarea.formular200 { width:400px; height:100px }


/* general */
div.line {
	border-top:1px solid #ccc;
	margin:25px 0 10px 0;
}
.button {
	float:right;
}
.button-reset {
	float:left;
}
p.text {
	line-height:1.5;
}
p.text-block {
	text-align: justify;
}
a.text-link {
	color:#f00;
}
.content-text {
	width:400px;
}
.content-text-impressum {
	width:500px;
}
.content-text-rechtlichehinweise {
	width:600px;
}

.site-container {
	width:100%;
}
.site-container .pad{
	padding:10px;
}
.site-container .col-left {
	width:481px;
	float:left;
	display:inline;
}
.site-container .col-right {
	width:481px;
	float:right;
	display:inline;
}

.site-container .col-right-kunde {
	width:581px;
	float:left;
	display:inline;
}
.site-container h1 {
	width:100%;
	/*background-color:#642111;*/
	background-color:#847B67;
	border-radius:2px;
	padding:4px 0 4px 0;
	font-weight:normal;
	/*margin:0 0 20px 0;*/
	color:#fff;
	font-weight:bold;
}
.site-container h2 {
	width:100%;
	/*background-color:#B8B3AA;*/
	background-color:#847B67;
	padding:4px 0 4px 0;
	border-radius:2px;
	/*margin:0px 0 20px 0;*/
	color:#fff;
	font-weight:normal;
	font-weight:bold;
}
button.btn {
	background: none repeat scroll 0 0 transparent;
    border: 0 none;
    cursor: pointer;
    margin: 0;
    overflow: visible;
    padding: 0;
    width: auto;
}
button.btn span{
    background: url(../img/btn_bg.png) no-repeat scroll 0 0 transparent;
    border: 0 none;
    color: #fff;
    display: block;
    font-weight: bold;
    height: 25px;
    line-height: 25px;
    padding: 0 0 0 5px;
    text-align: center;
    white-space: nowrap;
}
button.btn span span{
	background-position: 100% 0;
    border: 0 none;
    padding: 0 25px 0 16px;
}
.schweizer-vermoegensdepot {
	display:none;
	/*font-size:1.6em;
	margin:15px 0 10px;
	color:#642111;*/
}

/* Startseite */
#start {
	width:642px;
	min-height:380px;
	float:left;
	position:relative;
	margin:45px 0 0 0;
}
#start p{
	position:absolute;
	top:0;
	left:36px;
	font-size:24px;
	line-height:1.3;
	color:#642111;
}
#start p span{
	font-size:21px;
}

#pw_form,
#login_form {
	width:338px;
	float:right;
	margin:45px 0 0 0;
}
#pw_form a,
#login_form a{
}
#pw_form a:hover,
#login_form a:hover{
	text-decoration:underline;
}
#pw_form form,
#login_form form {
	line-height:1.8;
}
#login_form label {
	margin:10px 0 0 0;
	display:block;
}
#pw_form form input,
#login_form form input {
	width:240px;
    border:none;
	border-radius: 2px 2px 2px 2px;
	background-color:#EAE3DD;
	padding:5px;
	
}

#pw_form form button ,
#login_form form button {
	margin:10px 0;
}

#calc-eroeffnungsbeitrag,
#calc-vermoegensziel {
    cursor: pointer;
    color: #DC001A;
    font-size:20px;
}
#change-beispielkapital {
    cursor: pointer;
    color: #DC001A;
    font-size:15px;
}



/* Passwort vergessen */
td.pw-forget input {
	width:170px;
}

/* Kundendaten */
#branche-hinweis,
#branche-hinweis2,
#branche-hinweis3 {
	line-height:1.5;
	margin-top:20px;
}

/* Kalkulator */
.site-container .phasen {
    min-height:310px;
}
.auswahl {
	float: left;
	margin-bottom: 20px;
	margin-right: 30px;
}
/*
table.auswahl td {
	padding:0 5px 0 0;
}
table.auswahl td.label {
	padding:0 50px 0 0;
}*/
#maxlaufzeit-container {
	position:absolute;
	bottom:0;
	right:20px;
}
#maxlaufzeit-container input{
	width:60px;
}
.disabled {
	color:#999;
}
/*
table.strategiewahl{
	width:100%;
	margin:0 0 10px 0;
}
table.strategiewahl td.strategie {
	padding:4px 15px 4px 0;
	line-height:2.5;
	text-align:center;
}
table.strategiewahl td.rendite {
	padding:4px 10px 4px 10px;
	width:80px;
	text-align:right;
}
table.strategiewahl td.rendite span.rendite-zusatz {
	font-size:11px;
	font-weight:normal;
}
*/
.strategie-box {
    float: left;
    line-height: 2.5;
    margin-right: 18px;
    width: 72px;
    text-align:center;
}
.rendite-box {
    width:100px;
    float:left;
    padding:4px 10px 4px 10px;
    text-align:right;
    box-sizing: border-box;
    background-color:#E1DDD9;
    font-size:20px;
    font-weight:bold;
    
    line-height:1;
    color:#847B67;
    display:block;
}
.rendite-box span.rendite-zusatz {
    font-size: 11px;
    font-weight: normal;
}
span.info_strategie_g,
span.info_strategie_s,
span.info_strategie_w,
span.info_strategie_f {
	border-bottom:1px dotted #000;
}
table.strategie {
	margin:10px 0 0 0;
}
table.strategie td.label{
	padding-right:20px;
}
#prozent-anlaufphase,
#prozent-ablaufphase {
	padding-top:5px;
}
/*
table.data {
	width:100%;
	margin:0 0 10px 0;
}
table.data td {
	padding:6px 4px 6px 0;
}
table.data td.w50 {
	width:50%;
}
table.data td.w33-1 {
	width:171px;
	padding-right:0 !important;
}
table.data td.w33-2 {
	width:140px;
	padding-right:0 !important;
}
table.data td.w33-3 {
	width:150px;
	padding-right:0 !important;
}
table.data td.w25 {
	width:25%;
}
table.data input.text {
	text-align:right;
	width:60px;
}
*/
.einzahlungsphase-1,
.einzahlungsphase-2,
.einzahlungsphase-3 {
    float:left;
    margin:5px 0 20px 0;
    line-height:2.5;
}
.einzahlungsphase-1-1 {
    width:171px;
}
.einzahlungsphase-1-2 {
    width:140px;
}
.einzahlungsphase-1-3 {
    width:150px;
}
.einzahlungsphase-1 input.text,
.einzahlungsphase-2 input.text,
.einzahlungsphase-3 input.text {
	text-align:right;
	width:70px;
}
.beispielkapital-box {
    line-height:30px;
    margin:0 0 10px 0;
}
.beispielkapital-text {
    float:left;
}
.beispielkapital {
	text-align:right;
	white-space:nowrap;
	min-width:70px;
	font-size:20px;
	font-weight:bold;
	width:100px;
	float:right;
}

.entnahme-1 {
    width:168px;
}
.entnahme-2 {
    width:153px;
}
.entnahme-3 {
    width:139px;
}

/*.rendite {
	background-color:#E1DDD9;
}*/
/*.beispielkapital{
.rendite {
}*/
.kapital {
	text-align:right;
	white-space:nowrap;
	width:90px;
	margin:5px 0 0 0;
}
.beispielkapital,
.kapital {
/*.rendite {*/
	background-color:#D4CFC8;
	color:#847B67;
	display:block;
	padding:2px 10px 2px 2px;
}
table.strategie-info {
	width:100%;
}
table.strategie-info td {
	width:50%;
}
.slider {
	width:461px;
	height:35px;
	background:url(../img/slider-bg.gif) no-repeat 0 5px;
}
.slider img {
	margin-left:-8px;
	position:relative;
	z-index:200;
}
img.chance-risiko {
	margin:0 0 0 0;
}
table.chance-risiko {
	width:100%;
}
table.chance-risiko td{
	font-size:11px;
}
table.chance-risiko td.l {	text-align:left;}
table.chance-risiko td.c {	text-align:center;}
table.chance-risiko td.r {	text-align:right;}
/*
#beispielkapital {
	text-align:right;
	padding-right:10px;
}*/
tr#tr-vorteil-dynamik { 
 display:none;
}
tr#tr-vorteil-dynamik td,
tr#tr-vorteil-dynamik span#prozent-einrichtungsgebuehr { 
	color:#999;
}
tr#tr-vorteil-dynamik td {
	padding:2px 0 2px 0;
}
/*
tr.ihre-vorteile1 td,
tr.moegl-vorteile1 td {
	color:#999;
}*/
td.vorteilplus-text,
td.vorteileinmalzahlung-text {
	color:#999;
}
tr.ihre-vorteile1,
tr.moegl-vorteile1,
tr.ihre-vorteile2,
tr.moegl-vorteile2 {
	display:none;
}
#vorteil-dynamik,
.vorteileinmalzahlung,
.vorteilplus {
	color:#80D736;
}
#endkapitalaufgebraucht {
	display:none;
}
#endkapitalaufgebraucht td {
	padding-top:0;
	text-align:right;
	font-style:italic;
}

#chart {
	width:960px;
	height:350px;
	margin:30px 0 0 10px;
	text-align:center;
	background-image:url(../img/emptychart.png);	
	background-repeat:no-repeat;
	position:relative;
}
#chart #slider {
	position:absolute;
	top:300px;
	left:75px;
	width:875px;
}
.legende {
	margin:0px 0 0 85px;
	display:none;
}
.legende-box {
    float:left;
    margin:0 10px 2px 0;
}

.legende .kurve-farbe{
	width:13px;
	height:13px;
	margin:0 2px 0 0 ;
	float:left;
}
.legende span{
	display:block;
	float:left;
	font-size:10px;
	margin:1px 30px 5px 0 ;
}
/* Rentenl�cke */
.einzahlungsphase-rl-1,
.einzahlungsphase-rl-2,
.einzahlungsphase-rl-3 {
    float:left;
    margin:5px 0 20px 0;
    line-height:2.5;
}
.einzahlungsphase-rl-1-1 {
    width:140px;
}
.einzahlungsphase-rl-1-2 {
    width:160px;
}
.einzahlungsphase-rl-1-3 {
    width:150px;
}
.einzahlungsphase-rl-1-2 input {
	text-align:right;
	width:60px;
}
/* Berateradmin */
td.error {
	padding:4px 0 4px 0;
}
p.emails-description {
	line-height:1.3;
	margin:5px 0 0 0;
	font-style:italic;
}
tr.notconfirmed td {
	color:#f00;
}

/* Tabellennavigation */
table#pages {
	margin:2px 0 4px 0;	
}
table#pages td {
	vertical-align:middle;
}
table#pages td.left {
	width:22px;
	text-align:left;
}
table#pages td.middle {
	text-align:center;
}
table#pages td.right {
	width:22px;
	text-align:right;
}


/* Tabelle */
table.list {
   clear:both;
   table-layout:auto;
	margin:0 1px 15px 1px;
	width:100%;
}
table.list tr.header {
	background:#ccc; 
	height:20px; 
}
table.list tr.header  th { 
   white-space:nowrap;
   padding-right:15px;
   font-weight:normal;
}
table.list tr.header th a { 
	color:#000000; 
	text-decoration:none;
}
table.list tr.header th a:hover { 
	text-decoration:underline;
}

table.list td { 
   border-bottom:1px dashed #ccc;  
   /*white-space:nowrap;*/
   padding:2px 15px 2px 0;
}
table.list tr.no-border td { 
   border-bottom:none;  
}


/* Toolbar */
#toolbar { 
	width:100%;
	height:37px; 
	background:url('../img/toolbar.gif') repeat-x;
}
#toolbar div.tool {  
	width:45px;
	height:37px;
	padding:0px 0 0 0px; 
	float:left;
}
#toolbar div.tool a {  
	display:block;
	width:100%;
	height:100%;
}
#toolbar div.tool img {  
	float:left;
	padding:5px 5px 5px 5px;
}
#toolbar form.filter {  
	float:left;
	padding:7px 10px 0 0;
}
#toolbar div.anzahl {
	float:left;
	padding:10px 10px 0 0;
} 
#toolbar div.selectBox {
	float:left;
	padding:10px 10px 0 0;
} 
#toolbar img.seperator {
	margin:4px 10px 0 0;
	float:left;
}


.site-container .col-right-kunde input,
.site-container .col-right-kunde select{
	width:480px;
}
.site-container .col-right-kunde select option{
	font-size:11px;
}
#sparplan-einmalanlage-container {
	margin-bottom:10px;
}
.zuzahlung-betrag-container {
	width:130px;
	float:left;
}
.zuzahlung-jahr-container {
	width:200px;
	float:left;
}
input.sparplaneinmalanlage,
input.zuzahlung {
	margin:3px 0 3px 0;
	width:105px;
	text-align:right;
}
select.sparplaneinmalanlage,
select.zuzahlung {
	margin:3px 0 3px 0;
	width:105px;
}
#entnahmetext {
	text-align:right;
	font-size:11px;
	padding-top:5px;
}
.entnahmeintervall table  {
	float:right;
}
.entnahmeintervall table td {
	padding:5px 20px 0 0;
}

#hl1,
#hl2 {
	width:0px;
	border-right:1px dotted #fff;
	/*background-color:#fff;*/
	position:absolute;
	left:100px;
	display:none;
}

h2.strategiewahl {
	background-color:#B4AD9E;
}



/* Responsive */
.only-responsive {
    display:none;
}
.img-responsive {
    display:block;
    max-width:100%;
    height:auto;
}
@media only screen and (max-width: 1000px) {

    .no-responsive {
	display:none;
    }
    .only-responsive {
	display:block;
    }
 
    #container {
	width: 100%;
    }


    #header {
	margin-top:0px;
    }
	#header img.logo {
	    float:left;
	    margin:10px;
	}

    #footer a {
	display:block;
	width:100%;
	line-height:35px;
	border-bottom:1px solid #642111;
    }    
    #footer a:last-child {
	border-bottom:none;
    }
    
    /* NAVIGATION */
    #nav-mobile {
	font-size:30px;
	position:absolute;
	right:10px;
	top:10px;
	width:30px;
	color:#642111;
	cursor:pointer;
    }
    #nav-mobile-content {
	position: relative;
	display:none;
	width:100%;
	background-color:#642111;
	top:1px;
	z-index:100;
    }
    #nav-mobile-content .menu {
	padding:0 10px;
	border-bottom:1px solid #fff;
	background-color:#642111;
    }
    #nav-mobile-content .menu a {
	color:#fff;
	font-size:16px;
	line-height:40px;
	display:block;
    }
    

    /* Startseite */
    #start {
	float:none;
	margin:10px 0 0 0;
	min-height:0;
	width:100%;
    }
    #start p {
	left:10px;
    }
    #login_form {
	float:none;
	margin:110px 10px 20px 10px;
	width:90%;
    }
    
    /* Passwort vergessen */
    #pw_form {
	float:none;
	margin:110px 10px 20px 10px;
	width:90%;
    }
    
    /* Kalkulator */
    .auswahl {
	float:none;
	width:100%;
	box-sizing: border-box;
	padding:0 0 0 10px;
	line-height:30px;
	
    }
    .zuzahlung-text-1 {
	width:100% !important;
    }
    .zuzahlung-text-2 {
	display:none;
    }
    
    .slider {
	background-size:contain;
    }
    .slider,
    img.chance-risiko,
    table.chance-risiko {
	width:100%;
	max-width:461px;
    }    


    .site-container .col-left,
    .site-container .col-right {
	float: none;
	width: 100%;
    }
    .site-container h2 {
	border-radius: 0;
	padding: 4px 10px;
	box-sizing: border-box;
    }
    
    .beispielkapital-text {
	width:349px;
	max-width:100%;
    }
    .beispielkapital {
	    float:left;
    }
    
    
    
    #chart-responsive {
    }
    
    .legende {
	margin:15px 0 15px 10px;	
    }
    #maxlaufzeit-container {
	position:relative;
	margin-left:10px;
	right:0;
    }    
    
    /* Unterseiten allgemein */
    .schweizer-vermoegensdepot {
	font-size: 20px;
	margin: 10px 10px 10px 10px;
    }
    .site-container h1 {
	padding: 4px 10px;
	box-sizing: border-box;
	border-radius: 0;
    }
    .content-text,
    content-text-impressum,
    .content-text-rechtlichehinweise {
	    width:100%;
    }
    .site-container .pad {
	box-sizing: border-box;
    }
    
    /* Admineinstellungen */
    .admindata td {
	display:block;
    }
    .admindata .label2 {
	margin-top:25px;
    }
    .admindata textarea {
	width:100%;
    }
    

}

@media only screen and (max-width: 500px) {
    .einzahlungsphase-1-1,
    .einzahlungsphase-1-2,
    .einzahlungsphase-1-3 {
	width:33%;
    }
    .individuelle-entnahme {
	width:100%;
    }
    .entnahme-1,
    .entnahme-2,
    .entnahme-3 {
	width:33%;
    }
    #entnahmeintervall {
	max-width:100px;
    }
    .strategie-box-f {
	margin-right:0;
    }
    .rendite-box {
	margin:10px 0;
	width:100%;
	text-align:center;
    }
    .legende-box {
	float:none;
	margin-right:0;
    }
    
}
@media only screen and (max-width: 480px) {


    #start p {
	font-size:20px;
    }
    #start p span {
	font-size: 17px;
    }
}
@media only screen and (max-width: 372px) {
    .einzahlungsphase-1 {
	float:none;
	margin:15px 0 15px 0;
	width:100%;
	line-height:2;
    }
    
    .zuzahlung-betrag-container {
	width: 80px;
    }    
    input.zuzahlung {
	width: 60px;
    }
    .entnahme-1,
    .entnahme-2 {
	width:37%;
    }
    .entnahme-3 {
	width:26%;
    }
    #entnahmeintervall {
	max-width:80px;
    }


    .strategie-box {
	margin-right:5px;
    }
    .strategie-box-f {
	margin-right:0px;
    }
}
@media only screen and (max-width: 340px) {
    .strategie-box {
	float:none;
    }
}