@charset "ISO-8859-1";
/*
 * "Farbendefinitionen:
100% Grün: R=93, G=160, B=47		#6fb837;
60% Grün: R=150, G=188, B=113		#96bc71;
40% Grün: R=181, G=207, B=152		#b5cf98;
20% Grün: R=215, G=227, B=198		#d7e3c6;
Orange: R=240, G=127, B=10		#f07f0a;
50% orange: 					#FFBB44;
Gelb: R=255, G=214, B=0,		#ffd600;
Rot: R=202, G=0. B=52,		#ca0034;
Petrol: R=0, G=79, B=74"		#004f4a;

*/
/* "Farbendefinitionen:
100% Grün: R=93, G=160, B=47		#6fb837; Hauptgrün
60% Grün: R=150, G=188, B=113		#96bc71;
40% Grün: R=181, G=207, B=152		#b5cf98;
20% Grün: R=215, G=227, B=198		#d7e3c6;
Orange: R=240, G=127, B=10		#f07f0a;
50% orange: 					#FFBB44;
Gelb: R=255, G=214, B=0,		#ffd600;
Elbcampus-Pink: R=202, G=0. B=52,		#b8376f; EnergieBauZentrum Pink
Petrol: R=0, G=79, B=74"		#004f4a;
EZB Pink: ##b8376f;
*/


div.loginname {
	margin-right: 1px;
	padding-top: 4px;
	padding-left: 26px;
	font-size: 11px; 
	text-decoration: none; 
	font-weight: bold; 
	text-align: left;
}

div.joker,
div.groupbutton,
div.eingabe {
	position: relative;
	float: left;
	width: 165px;
	height: 165px;
	background-color: #b8376f;
	margin-right: 60px;
	margin-bottom: 15px;
	color: white;
	font-weight: bold;
	text-align: center;
	vertical-align: middle;
}

div.groupbutton a,
div.groupbutton a:visited,
a.eingabe,
a.eingabe:visited {
	float: left;
	width: 121px;
	padding-top: 48px;
	margin-left: 22px;
	margin-top: 22px;
	text-decoration: none;
	border: 1px solid #000000;
	font-weight: bold;
	font-size: 1.75em;
	text-align: center;
	vertical-align: middle;
	color: white;
	background-color: #6fb837;
	height: 72px;
}

div.groupbutton a:hover,
div.groupbutton input:hover,
a.eingabe:hover {
	color: #ffd600;
	cursor: pointer;
}

div.eingabe.deactivated {
line-height:165px;
text-align: center;
vertical-align: middle;
font-size: 1.75em;
/*background-color: #FFBB44;*/
}


div.joker {
/*	background-image:url(../images/muetze.png);
	background-repeat:no-repeat;
	background-position: center center;*/
	text-align: center;
	vertical-align: middle;
	
}

div.joker img {
	border: 1px solid black;
	background-color: white;
	}

a.highlight { background:#ffd600; color:black; }

div.loginform {
float: left;
width: 250px;
}

div.button input,
div.button a,a:visited {
	float: left;
	background-color: #b8376f;
	text-decoration: none;
	border: 1px solid black;
	margin: 5px;	
	padding: 2px;
	text-align:center;
	color: white;
	width: 110px;
	height: 26px;
	display: table;
	font-weight: bold;
}

div.button a:hover,
div.button input:hover {
	color: #ffd600;
	cursor: pointer;
	}
	
div.button input:disabled {
background-color: #d7e3c6;
cursor: default;
color: white;
}

div.button input {
font-family: verdana,arial,helvetica;
font-size: 11px;
width: 116px;
height: 32px;
}

div.submitbutton input {
	float: left;
	background-color: #b8376f;
	text-decoration: none;
	border: 1px solid black;
	margin: 5px;
	margin-left: 10px;
	padding: 2px;
	text-align:center;
	color: white;
	width: 110px;
	font-weight: bold;
}

div.submitbutton input:hover {
	color: #ffd600;
	cursor: pointer;
	}
	
div.submitbutton input:disabled {
background-color: #d7e3c6;
cursor: default;
color: white;
}

div.submitbutton input {
font-family: verdana,arial,helvetica;
font-size: 10px;
width: 116px;
height: 32px;
}
/******************************/
/* Dateien zum Herunterladen */
/* documentation.php		*/
/***************************/

.preview {
	position: absolute;
	top: 30px;
	left: 25px;
	height: 380px;
	width: 268px;
	border: 1px solid black;
}

.download {
	position: relative;
	top: 375px;
	color: #6fb837;
}

.download a:visited,
.download a {
	text-decoration: none;
	color: #6fb837;
}

/***************************/
/* spieleinstellungen.php */
/*************************/
/*
div.groupbutton input,
div.groupbutton a,a:visited {
	float: left;
	background-color: #b8376f;
	text-decoration: none;
	border: 1px solid black;
	margin: 5px;	
	margin-left: 10px;
	padding: 5px 2px 0px 0px;
	text-align:center;
	vertical-align: middle;
	color: white;
	width: 110px;
	height: 26px;
}
*/
div.groupbutton a:hover,
div.groupbutton input:hover {
	color: #ffd600;
	cursor: pointer;
	}

/*
div.highlight a,a:visited {
	border: 1px solid #ffd600;
	color: #ffd600;
}*/

div.backalert {
	position: absolute;
	float: left;
	width: 420px;
	line-height: 14px;
	padding-left: 5px;
	margin-top: 5px;
	background-color: #EDFB8F;
	color: black;
	vertical-align: middle;
	-webkit-box-shadow: 5px 5px 10px #EDFB8F;
	-moz-box-shadow: 5px 5px 10px #EDFB8F;
	box-shadow: 5px 5px 10px #EDFB8F;
	background-image: -webkit-linear-gradient(180deg, rgba(237, 251, 143, 0.5), rgba(237, 251, 143, 1));
	background-image: -moz-linear-gradient(180deg, rgba(237, 251, 143, 0.5), rgba(237, 251, 143, 1));
	background-image: -o-linear-gradient(180deg, rgba(237, 251, 143, 0.5), rgba(237, 251, 143, 1));
	background-image: -ms-linear-gradient(180deg, rgba(237, 251, 143, 0.5), rgba(237, 251, 143, 1));
	background-image: linear-gradient(180deg, rgba(237, 251, 143, 0.5), rgba(237, 251, 143, 1));
	}

div.linebreak {
	width:1000px;
	height: 100px;
}


/*****************/
/* spielen.php  */
/* Investionen */
/**************/

div.invest-box
	{
	position: absolute;
	display: block;
	float: left;
	margin: 0px 5px 5px 0px;
	padding: 5px 5px 5px 5px;
	width: 200px;
	background-color: #b8376f;
	color: white;
	border: none;
	/*font-weight: bold;*/
	font-size: 16px;
	font-weight: bold;
	height: 147px;
}

div.invest-box.deactivated {
	position: absolute;
	display: block;
	float: left;
	margin: 0px 5px 5px 0px;
	padding: 5px;
	width: 200px;
	color: white;
	background-color: #FFBB44;
	font-size: 16px;
	font-weight: bold;
	height: 147px;
}

div.invest-box-2ndrow
	{
	position: absolute;
	display: block;
	float: left;
	margin: 0px 5px 5px 0px;
	padding: 5px 5px 5px 5px;
	width: 200px;
	background-color: #b8376f;
	color: white;
	border: none;
	/*font-weight: bold;*/
	font-size: 16px;
	font-weight: bold;
	height: 120px;
}

div.invest-box-2ndrow.deactivated {
	position: absolute;
	display: block;
	float: left;
	margin: 0px 5px 5px 0px;
	padding: 5px;
	width: 200px;
	color: white;
	background-color: #FFBB44;
	font-size: 16px;
	font-weight: bold;
	height: 120px;
}

div.investposDach {
top: 25px;
left: 26px;
}

div.investposFenster {
top: 25px;
left: 475px;
}
div.investposHeizung {
top: 163px;
left: 700px;
height: 147px;
}
div.investposHeizung.deactivated {
top: 163px;
left: 700px;
height: 147px;
}

div.investposFassade {
top: 25px;
left: 250px;
}
div.investposMod {
top: 326px;
left: 26px;
}
div.investposLueftung {
top: 190px;
left: 26px;
}
div.investposSolarwaerme {
top: 190px;
left: 250px;
}
div.investposSolarstrom {
top: 190px;
left: 475px;
}
div.investposKellerdaemmung {
top: 25px;
left: 700px;
height: 119px;
}

div.mod-box
        {
        position: absolute;
        display: block;
        float: left;
        margin: 0px 5px 5px 0px;
        padding: 5px 5px 5px 5px;
        width: 873px;
        background-color: #b8376f;
        color: white;
        border: none;
        /*font-weight: bold;*/
        font-size: 16px;
        font-weight: bold;
        height: 82px;
}

div.mod-box.deactivated {
        position: absolute;
        display: block;
        float: left;
        margin: 0px 5px 5px 0px;
        padding: 5px;
        width: 800px;
        color: white;
        background-color: #b5cf98;
        font-size: 16px;
        font-weight: bold;
        height: 82px;
}


div.mod-group
	{
	margin-left: 6px;
	float:left;
	margin-top: 25px;
}

div.invest-field
a,a:visited  {
	position: relative;
	display: block;
	margin: 5px 2px 2px 1px;
	padding: 4px;
	background-color: green;
	color: white;
	border: 1px solid black;
	font-weight: normal;
	font-size: 12px;
} 

div.invest-field
a:hover  {
	position: relative;
	display: block;
	margin: 5px 2px 2px 1px;
	padding: 4px;
	color: #ffd600;
	border: 1px solid black;
	font-weight: normal;
	font-size: 12px;
	cursor: pointer;
} 

div.invest-field.deactivated {
	position: relative;
	display: block;
	margin: 5px 2px 2px 1px;
	padding: 4px;
	color: white;
	border: 1px solid black;
	background-color: #b5cf98;
	font-size: 12px;
	font-weight: normal;
}

div.mod-field
a,a:visited  {
        position: relative;
        display: block;
        margin: 5px 2px 2px 1px;
        padding: 4px;
        background-color: green;
        color: white;
        border: 1px solid black;
        font-weight: normal;
        width: 155px;
        font-size: 12px;
} 


div.mod-field
a:hover  {
        position: relative;
        display: block;
        margin: 5px 2px 2px 1px;
        padding: 4px;
        color: #ffd600;
        border: 1px solid black;
        font-weight: normal;
        width: 155px;
        font-size: 12px;
        cursor: pointer;
} 

div.mod-field.deactivated {
        position: relative;
        display: block;
        margin: 5px 2px 2px 1px;
        padding: 4px;
        color: white;
        border: 1px solid black;
        background-color: #6fb837;
        width: 155px;
        font-size: 12px;
}

div.mod-field.chosen {
        position: relative;
        display: block;
        margin: 5px 2px 2px 1px;
        padding: 4px;
        color: black;
        border: 1px solid black;
        background-color: #b5cf98;
        font-size: 12px;
        font-weight: normal;
}


div.mod_icon {
	float: right;
	width: 0px;
}

div.mod_text {
	float: left;
	width: 0px;
}

img.investicon {
	float: right;
	margin-right: 5px;
	height: 28px;
}

span.firstwordbold {
	font-weight: bold;
}

div.chosen {
        position: relative;
        display: block;
        margin: 5px 2px 2px 1px;
        padding: 4px;
        color: black;
        border: 1px solid black;
        background-color: #b5cf98;
        font-size: 12px;
        font-weight: normal;
}

div.maxtwoinvest {
	position: absolute;
	float: left;
	width: 500px;
	line-height: 26px;
	padding-left: 5px;
	margin-top: 5px;
	background-color: #EDFB8F;
	color: black;
	vertical-align: middle;
	-webkit-box-shadow: 5px 5px 10px #EDFB8F;
	-moz-box-shadow: 5px 5px 10px #EDFB8F;
	box-shadow: 5px 5px 10px #EDFB8F;
	background-image: -webkit-linear-gradient(180deg, rgba(237, 251, 143, 0.5), rgba(237, 251, 143, 1));
	background-image: -moz-linear-gradient(180deg, rgba(237, 251, 143, 0.5), rgba(237, 251, 143, 1));
	background-image: -o-linear-gradient(180deg, rgba(237, 251, 143, 0.5), rgba(237, 251, 143, 1));
	background-image: -ms-linear-gradient(180deg, rgba(237, 251, 143, 0.5), rgba(237, 251, 143, 1));
	background-image: linear-gradient(180deg, rgba(237, 251, 143, 0.5), rgba(237, 251, 143, 1));
	}

div.maxtwoinvest.green {
	color: #6fb837;
	font-weight: bold;
}

div.maxtwoinvest.red {
	color: red;
	font-weight: bold;
}

/********************/
/* spielen.php     */
/* Ereigniskarten */
/*****************/

div.eventcard {
	position: absolute;
	width: 200px;
	height: 200px;
	background-color: #b8376f;
	border: 1px solid black;
}

div.eventcard.deactivated {
	position: absolute;
	width: 200px;
	height: 200px;
	background-color: #FFBB44;
}

.eventcard p {
padding: 5px;
}

div.maluscard {
position: absolute;
top: 248px;
width: 200px;
height: 139px;
background-color: #b8376f;
border: 1px solid black;
}

div.maluscard .maluscontent {
/*visibility: hidden;*/
/*display: none;
color: black;*/
display: none;
padding: 4px;
}

div.houseprocess {
position: absolute;
left: 240px;
width: 400px;
height: 356px;
background-color: white;
border: 1px solid black;
text-align: center;
}

div.consume {
	left: 650px;
	position: absolute;
	display: block;
	float: left;
	margin: 0px 5px 5px 0px;
	padding: 5px 5px 5px 5px;
	width: 250px;
	background-color: #b8376f;
	color: white;
	border: none;
	/*border: 1px solid black;*/
	/*font-weight: bold;*/
	font-size: 16px;
	font-weight: bold;
	height: 348px;
}

div.arrow {
position: relative;
float: left;
width: 32px;
margin-top: 10px;
text-align: center;
cursor: pointer;
}

div.ten {
margin-left: 65px;
}

div.one {
margin-left: 4px;
}

div.malus.one {
margin-left: 78px;
}

div.cardnr {
position: relative;
float: left;
width: 30px;
line-height: 30px;
margin-top: 10px;
text-align: center;
}

div.lnb {
position: relative;
float: left;
width: 200px;
}

input.cardnr {
width: 30px;
background-color: #6fb837;
color: white;
text-align: center;
border: 1px solid darkgray;
font-size: 14px;
}


div.consum-field
a,a:visited  {
	position: relative;
	display: block;
	margin: 4px 2px 2px 1px;
	padding: 4px;
	background-color: green;
	color: white;
	border: 1px solid black;
	font-weight: normal;
	font-size: 12px;
} 

div.consum-field
a:hover  {
	position: relative;
	display: block;
	margin: 4px 2px 2px 1px;
	padding: 4px;
	color: #ffd600;
	border: 1px solid black;
	font-weight: normal;
	font-size: 12px;
	cursor: pointer;
} 

div.consum-field.deactivated {
position: relative;
	display: block;
	margin: 2px;
	padding: 1px;
	color: white;
	border: 1px solid black;
	background-color: #6fb837;
}

div.highlight a,a:visited {
background-color: #96bc71;
}

/*******************/
/* impressum.html */
/* Impressum     */
/****************/

#content img.impressum {
	float: none;
	text-align: center;
}



div.Investitionsmassnahmen {
	/*background-color: #b8376f;*/
	color: white;
	width: 450px;
	margin-top: 10px;
	text-align: center;
	position: absolute;
	left: 450px;
}

table.Investitionsmassnahmen {
	border-collapse: collapse;
}

div.Investitionsmassnahmen td {
	border: 1px solid white; /*#b8376f;*/
	text-align: left;
	padding: 5px;
}


div.Investitionsmassnahmen tr {
	padding: 5px;
}

div.Hausschema {
position: absolute;
top: 40px;
left: 25px;
height: 350px;
background-color: white;
}

img.Hausschema {
height: 350px;
}

div.Hausschema-ModDach {
position: absolute;
top: 310px;
left: 420px;
width: 200px;
}

div.Hausschema-ModWand {
position: absolute;
top: 265px;
left: 420px;
width: 200px;
}


div.Hausschema-ModDach img,
div.Hausschema-ModWand img {
height: 40px;
}

span.Hausschema-Move {
/*position: absolute;
top: 10px;*/
}

div.slider {
	width:100px;
}



#Hauswert,
#Kapital,
#AbschreibungHaus,
#PreissteigerungOelGas,
#PreissteigerungStrom,
#PreissteigerungFernwaerme,
#PreissteigerungPellets,
#Inflation,
#OekofaktorInvestitionen,
#Kreditzins,
#Investitionsruecklage,
#PunktePlatzierung {
	background-color: #6fb837;
}

div.dynamic_header {
top: -100px;
}

span.buttontext {
 /*position: absolute;
 top: 50%;*/
 display: table-cell;
 vertical-align: middle;
}

#groupselection ul {
	list-style-type: none;
}

#groupselection ul li.groupselection a {
	margin-top: 5px;
	display: block;
	width: 139px;
	height: 16px;
	margin-right: 1px;
	padding: 4px;
	text-decoration: none; 
	font-weight: bold;
	font-size: 12px;
}

span.version {
	color: #6fb837;
	}

#groupselection ul li a:link { color: white; }
#groupselection ul li a:hover { background-color: #96bc71; 	cursor: pointer;}
#groupselection ul li a:focus { background-color: #96bc71; }
#groupselection ul li a:active { background-color: #96bc71; }
#groupselection ul li a.active { background-color: #96bc71; }
#groupselection ul li.active { background-color: #96bc71; }

div.buttons {
width: 800px;
}

tr.spieleinstellungen {
margin-top: 15px;
color:red;
}

a.debug {
position:absolute;
float: left;
margin-left: 300px;
margin-top: 200px;
text-decoration: none;
display: block;
background-color: #b8376f;
}

div.energieausweis {
position: absolute;
left: 25px;
top: 15px;
background: white;
width: 655px;
height: 390px;
}

div.energieausweis p.ueberschrift {
height: 50px;
padding-left: 35px;
line-height: 50px;
font-size: 18px;
font-weight: bold;
background: #b8376f;;
color: white;
text-align: left;
vertical-align: middle;
}

div.energieausweis p.sonne {
margin-top: 10px;
font-size: 16px;
font-weight: bold;
color: #6fb837;
text-align: center;
vertical-align: middle;
}

div.energieausweis p.ausweis {
margin-top: 0px;
font-size: 16px;
font-weight: bold;
color: #6fb837;
text-align: center;
vertical-align: middle;
}

span.label {
color: black;
}

span.labelerror {
color: red;
}

div.documentation-text {
position: relative;
float: left;
left: 300px;
width: 300px;
top: -35px;
text-align: justify;
line-height:140%;
}

div.Spieleinstellunga-Text {
position: absolute;
float: right;
left: 500px;
width: 250px;
top: 170px;
text-align: justify;
line-height:140%;
}
div.Spieleinstellung-Text {
position: relative;
float: right;
left: -310px;
width: 600px;
top: -5px;
text-align: justify;
}

input.cmn-toggle-round + label {
      padding: 2px;
      width: 50px;
      height: 15px;
      background-color: #b8376f;
      -webkit-border-radius: 30px;
      -moz-border-radius: 30px;
      -ms-border-radius: 30px;
      -o-border-radius: 30px;
      border-radius: 30px;
    }
    input.cmn-toggle-round + label:before, input.cmn-toggle-round + label:after {
      display: block;
      position: absolute;
      top: 1px;
      left: 1px;
      bottom: 1px;
      content: "";
    }
    input.cmn-toggle-round + label:before {
      right: 1px;
      background-color: #f1f1f1;
      -webkit-border-radius: 30px;
      -moz-border-radius: 30px;
      -ms-border-radius: 30px;
      -o-border-radius: 30px;
      border-radius: 30px;
      -webkit-transition: background 0.4s;
      -moz-transition: background 0.4s;
      -o-transition: background 0.4s;
      transition: background 0.4s;
    }
    input.cmn-toggle-round + label:after {
      width: 20px;
      background-color: #fff;
      -webkit-border-radius: 100%;
      -moz-border-radius: 100%;
      -ms-border-radius: 100%;
      -o-border-radius: 100%;
      border-radius: 100%;
      -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
      -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
      -webkit-transition: margin 0.4s;
      -moz-transition: margin 0.4s;
      -o-transition: margin 0.4s;
      transition: margin 0.4s;
    }
    input.cmn-toggle-round:checked + label:before {
      background-color: #FFBB44;
    }
    input.cmn-toggle-round:checked + label:after {
      margin-left: 30px;
    }
    
    .cmn-toggle {
      position: absolute;
      margin-left: -9999px;
      visibility: hidden;
    }
    .cmn-toggle + label {
      display: block;
      position: relative;
      cursor: pointer;
      outline: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
/* Radio Button for Punkte Platzierung in Spieleinstellungen*/
     .switch {
    width: 100px;
    height: 20px;
    text-align: center;
    background: #6fb837;
    transition: all 0.2s ease;
    border-radius: 25px;
    border-color: #b8376f; 
    border-width: 2px;
    border-style: solid;
  }
  .switch span {
    position: relative;
    width: 20px;
    height: 4px;
    top: -50%;
    left: 50%;
    margin: -2px 0px 0px -4px;
    background: #fff;
    display: block;
    transform: rotate(-45deg);
    transition: all 0.2s ease;
  }
  .switch span:after {
    content: "";
    display: block;
    position: absolute;
    width: 4px;
    height: 12px;
    margin-top: -8px;
    background: #fff;
    transition: all 0.2s ease;
  }
  input[type=radio] {
    display: none;
  }
  .switch label {
    cursor: pointer;
    color: rgba(128, 28, 28,1);
    width: 60px;
    line-height: 20px;
    transition: all 0.2s ease;
  }
  label[for=yes] {
    position: relative;
    left: -20px;
    height: 20px;
  }
  label[for=no] {
    position: relative;
    left: 25px;
  }
  #no:checked ~ .switch {
    background: #b8376f;
  }
  #no:checked ~ .switch span {
    background: #fff;
    margin-left: -8px;
  }
  #no:checked ~ .switch span:after {
    background: #fff;
    height: 20px;
    margin-top: -8px;
    margin-left: 8px;
  }
  #yes:checked ~ .switch label[for=yes] {
    color: #fff;
  }
  #no:checked ~ .switch label[for=no] {
    color: #fff;
  }

  .spieleinstellungen {
  	border:0;
  	color: rgba(30,30,30,0.8);
  	font-weight:bold;
  }