@charset "UTF-8";
* {
	margin: 0;
	padding: 0;
}
body {
	font-family: Verdana, Geneva, Helvetica, Tahoma, sans-serif;
	font-size: 14px;
	background-color: #000;
	color: #fff;
}
html, body {
	height: 100%;
}
.hidden {
	display: none;
}

#hebelContainer {
    position: relative;
	cursor: pointer;
}

.hebel {
    position: absolute;
	left: 815px;
	top: 30px;
}

.schalter {
    position: absolute;
	left: 115px;
	top: 30px;
}

#header {
	height: 15px;
}

#realPageWrap {
    margin: 0 auto;
    position: relative;
    width: 960px;
}

#headline {
    left: 20px;
    top: 20px;
    width: 350px;
}

#headline2 {
    left: 20px;
    top: 20px;
    width: 350px;
}

#page {
	margin: 0 auto;
	width: 960px;
	height: 720px;
	position: relative;
	overflow: hidden;
	z-index: 0;
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#003DF5', endColorstr='#61c419', GradientType=0 );
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;  
   	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}

#pagewrap {
	margin: 0 auto;
	width: 960px;
	height: 720px;
	position: relative;
	overflow: hidden;
	z-index: 0;
	/*background: url(assets/screen_eins_neu_301213.png) no-repeat;*/
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#003DF5', endColorstr='#61c419', GradientType=0 ); /* IE6-9 */
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
   	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}

#pagewrap_transport {
	margin: 0 auto;
	width: 960px;
	height: 720px;
	position: relative;
	overflow: hidden;
	z-index: 0;
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#003DF5', endColorstr='#61c419', GradientType=0 );
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
   	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}

#pagewrap_stromverteiler {
	margin: 0 auto;
	width: 960px;
	height: 720px;
	position: relative;
	overflow: hidden;
	z-index: 0;
	/*background: url(assets/screen_stromverteiler.png) no-repeat;*/
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#003DF5', endColorstr='#61c419', GradientType=0 ); /* IE6-9 */
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
   	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}

#pagewrap_strom_im_haus {
	margin: 0 auto;
	width: 960px;
	height: 720px;
	position: relative;
	overflow: hidden;
	z-index: 0;
	/*background: url(assets/strom_im_haus.png) no-repeat;*/
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#003DF5', endColorstr='#61c419', GradientType=0 ); /* IE6-9 */
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
   	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}

#pagewrap_zum_zimmer {
	margin: 0 auto;
	width: 960px;
	height: 720px;
	position: relative;
	overflow: hidden;
	z-index: 0;
	background: url(assets/zimmer_dunkel.png) no-repeat;
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#003DF5', endColorstr='#61c419', GradientType=0 ); /* IE6-9 */
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
   	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}

#pagewrap_zimmerAn{
	margin: 0 auto;
	width: 960px;
	height: 720px;
	position: relative;
	overflow: hidden;
	z-index: 0;
	background: url(assets/zimmer_an.png) no-repeat;
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#003DF5', endColorstr='#61c419', GradientType=0 ); /* IE6-9 */
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
   	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}

#pagewrap_zum_haus{
	margin: 0 auto;
	width: 960px;
	height: 720px;
	position: relative;
	overflow: hidden;
	z-index: 0;
	/*background: url(assets/zum_haus_standard.png) no-repeat;*/
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#003DF5', endColorstr='#61c419', GradientType=0 ); /* IE6-9 */
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
   	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}

.pointer {
	position: absolute;
   	z-index: 2;
}

#screen5 #arm img #ajax-loader {
	height: 40px;
	left: 185px;
	padding-top: 10px;
	position: absolute;
	text-align: center;
	top: 315px;
	width: 50px;
}

#pult {
    left: 770px;
    bottom: 200px;
} 

#screen1 #arm #windrad_links img {
	left:39px;
	top: 130px;
}
#screen1 #arm #windrad_mitte img {
	left: 116px;
	top: 112px;
}
#screen1 #arm #windrad_rechts img {
	left: 190px;
	top: 120px;
}

#screen1 #arm #windrad_animated_links img {
	left: 39px;
	top: 130px;
}
#screen1 #arm #windrad_animated_mitte img {
	right: 57px;
	top: 75px;
}
#screen1 #arm #windrad_animated_rechts img {
	left: 115px;
	top: 83px;
}

#screen2 #arm #windrad_anim_links_mini img {
	left: 39px;
	top: 130px;
}
#screen2 #arm #windrad_anim_mitte_mini img {
	right: 57px;
	top: 75px;
}
#screen2 #arm #windrad_anim_rechts_mini img {
	left: 115px;
	top: 83px;
}

#rauch_animated{
	left: 550px;
	top: 30px;
}

#screen1 #arm #kuh_links img {
	left: 220px;
	top: 470px;
}

#screen1 #arm #kuh_rechts img {
	left: 720px;
	top: 480px;
}

#kohlerauch_animated {
	left: 288px;
	bottom: 175px;
}

#rauch_animated_kohlemeiler {
	left: 160px;
	top: 60px;
}

#solar {
	left: 350px;
	top: 200px;
}

#solar_animated {
	left: 350px;
	top: 200px;
}

#rauch_animated{
	left: 550px;
	top: 30px;
}

#anlage_gas_kohle {
    left: 410px;
    top: 300px;
}
#anlage_gas_kohle span {
	position: absolute;
}

#anlage_solar {
    /*cursor: pointer;*/
    left: 600px;
    top: 170px;
}
#anlage_solar span {
	position: absolute;
}

#anlage_atomkraft {
    left: 770px;
    top: 170px;
}
#anlage_atomkraft span {
	position: absolute;
}

#anlage_windkraft {
    left: 170px;
    top: 60px;
}
#anlage_windkraft span {
	position: absolute;
}

#anlage_umspannwerk {
    left: 150px;
    top: 70px;
}
#anlage_umspannwerk span {
	position: absolute;
}

#anlage_ortsnetzstation {
    left: 530px;
    top: 130px;
}
#anlage_ortsnetzstation span {
	position: absolute;
}

#anlage_verteilerschrank {
    left: 370px;
    top: 380px;
}
#anlage_verteilerschrank span {
	position: absolute;
}

#anlage_haushalte {
    left: 850px;
    top: 230px;
}
#anlage_haushalte span {
	position: absolute;
}

#hohe_spannung {
    left: 310px;
    top: 300px;
}
#hohe_spannung span {
	position: absolute;
}

#niedrige_spannung {
    left: 320px;
    top: 460px;
}
#niedrige_spannung span {
	position: absolute;
}

#leitung_unten_animated {
    right: 75px;
    top: 503px;
}
#leitung_oben_animated {
    left: 498px;
    top: 231px;
}

#elektronen_oben {
    right: -1px;
    top: 283px;
}
#elektronen_unten {
    right: 3px;
    top: 410px;
}

#blitz_animated{
    left: 156px;
    top: 103px;
} 

#lupe_animated{
    left: 587px;
    top: 307px;
}

#maulwurf_animated{
    left: 470px;
    top: 380px;
} 


#svgbasics {
    height: 100px;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 620px;
    width: 100%;
    z-index: 5;
}

#svgbasics a {
	left: 550px;
	top: 320px;
}

.no-svg #svgbasics { display: none; }

.screencontainer {
    height: 300px;
    left: 0px;
    position: absolute;
    top: 100px;
    width: 550px;
    z-index: 2;
}

#screen1 #arm img {
	position: absolute;
    left: 74px;
    top: 38px;
    z-index: -1;
}

#screen2 #arm img {
	position: absolute;
    left: 74px;
    top: 38px;
    z-index: -1;
}

#screen3 #arm img {
	position: absolute;
    left: 54px;
    top: 27px;
    z-index: -1;
}

#screen5 #arm img {
	position: absolute;
    left: 158px;
    top: 270px;
    z-index: -1;
}

#background .tooltip {
    background-color: #1CA2C9;
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    border-radius: 5px; 
    -moz-box-shadow: 5px 5px 8px #CCC; 
    -webkit-box-shadow: 5px 5px 8px #CCC; 
    box-shadow: 5px 5px 8px #CCC;
    padding: 10px;
    height: auto;
    line-height: 1.5em;
    text-align: center;
    width: 247px;
    left: -260px;
    top: -55px;
}

#background #tooltip3 {
	width: 240px;
	height:150px;
}

#background #tooltip4 {
	width: 240px;
	height:180px;
}

button.cupid-blue {
    background-color: rgb(215, 229, 245);
    background-image: -moz-linear-gradient(center top , rgb(215, 229, 245), rgb(203, 224, 245));
    border-width: 1px;
    border-style: solid;
    border-color: rgb(171, 187, 204) rgb(167, 182, 199) rgb(161, 175, 191);
    border-radius: 12px;
    box-shadow: 0px 1px 0px 0px white inset;
    color: rgb(26, 62, 102);
    padding: 7px 15px;
    text-align: center;
    text-shadow: 0px 1px 1px rgb(255, 255, 255);
    font-size: 1em;
}

.nextButtonBack {
	right: 25px; 
	bottom: 20px;
	position: absolute;
	cursor: pointer;
	border: 1px solid #CCC;
	color: #000;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	height: 35px;
	width: 70px;
	border-radius: 25px;
}

.nextButton {
	right: 25px;
	bottom: 20px;
	position: absolute;
	cursor: pointer;
	border: 1px solid #CCC;
	color: #000;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	height: 35px;
	width: 70px;
	border-radius: 25px;
}

.nextButtonHaus {
	right: 25px; 
	bottom: 20px;
	position: absolute;
	cursor: pointer;
	border: 1px solid #CCC;
	color: #000;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	/*height: 35px;*/
	width: 110px;
	border-radius: 25px;
}

.nextButtonOnceAgain {
	right: 25px; 
	bottom: 20px;
	position: absolute;
	cursor: pointer;
	border: 1px solid #CCC;
	color: #000;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	/*height: 35px;*/
	width: 110px;
	border-radius: 25px;
}

#zumZimmer {
	cursor: pointer;
}

.nextButton.test { color: red !important; }