body {
background:#F4FAFB url(grafik/bg01.jpg) center top;
padding:0;
margin:0;
font:.8em arial, sans-serif, verdana;
color:#000;
word-spacing:-1px;
}

#oben {
position:absolute;
top:0;
left:0;
width:100%;
height:230px;
background:#F4FAFB url(grafik/bg-senk.png) 0 0 repeat-x;
z-index:-1;
}

#container,#seite {
width:966px;
padding:0;
margin:0 auto;
}

#header {
width:717px;
height:414px;
background:url(grafik/layout.jpg) -250px 0 no-repeat;
z-index:1;
float:right;
}

#header h1 {
margin:31px 0 0 10px;
font:bold 1.3em arial;
color:#FFF;
text-align:center;
text-transform:uppercase;
}

#menu {
margin:27px 0 0 17px;
font-size:1px;
float:left;
}

.titel {
font:14px trebuchet ms, arial;
text-transform:uppercase;
margin:0;
padding:6px 0 4px;
text-align:center;
color:#FFF;
}

#menu a {
font:12px arial, sans-serif, verdana;
color:#FFF;
display:block;
margin:0;
padding:8px 0 5px;
text-decoration:none;
text-align:center;
}

#menu a:hover {
color:#FF0;
background:#1F1F1F;
}

#menu li {
width:132px;
height:28px;
position:relative;
}

#menu ul {
list-style:none;
margin:0 6px 0 0;
padding:0;
float:left;
background:url(grafik/menu-button.png);
background-repeat:no-repeat;
}

#menu ul ul {
position:absolute;
background:#000 url(grafik/menu-button.png) -132px 0 repeat-y;
z-index:1;
}

#menu ul ul ul {
position:absolute;
top:0;
right:126px;
background:#000 url(grafik/menu-button.png) -132px 0 repeat-y;
border-right:1px solid #DFDFDF;
}

#menu ul ul ul a:hover {
color:#FF0;
background:#000;
}

#menu ul ul,#menu ul li:hover ul ul,#menu ul ul li:hover ul ul {
display:none;
}

#menu ul li:hover ul,#menu ul ul li:hover ul,#menu ul ul ul li:hover ul {
display:block;
}

#main {
width:717px;
background:url(grafik/bg-waag.jpg) repeat-y;
float:right;
text-align:justify;
}

#inhalt {
padding:0 36px;
min-height:800px;
}

#inhalt h2 {
font-size:1.6em;
font-weight:500;
text-align:center;
border-bottom:1px solid #564b47;
padding:7px 15px;
margin:0;
}

#inhalt h3,#inhalt h4,#inhalt h5,#inhalt h6 {
font-size:1.2em;
text-align:center;
}

.box {
font-family:trebuchet ms, arial;
width:191px;
margin:5px 0 10px 17px;
padding:0;
float:left;
}

.box-top {
font-size:18px;
background:url(grafik/layout.jpg) -776px -500px no-repeat;
width:191px;
height:30px;
padding:36px 0 0 60px;
margin:0;
color:#FFF;
}

.box-top b {
font-weight:200;
}

.box-bottom {
font-size:12px;
padding:5px 0 5px 10px;
margin:0 8px 0 26px;
color:#000;
font-weight:200;
background:#E7FEDE;
}

#footer {
background:#F4FAFB url(grafik/layout.jpg) -250px -415px no-repeat;
width:717px;
height:67px;
margin-bottom:-57px;
z-index:1;
font:.85em arial, sans-serif, verdana;
text-align:center;
}

#rechner {
position:absolute;
top:0;
width:249px;
height:1000px;
background:#FFFFFF url(grafik/layout.jpg) 0 0 no-repeat;
}

.tarifrechner {
font:19px trebuchet ms, arial;
margin-top:273px;
color:#FFF;
text-transform:uppercase;
text-align:center;
}

.formular {
border:none;
margin:17px 0 0 22px;
padding:0;
color:#FFF;
font-size:11px;
}

.formular img {
display:block;
border:none;
}

.formular input {
width:66px;
height:15px;
margin-top:2px;
padding:0;
float:left;
font:11px trebuchet ms, arial;
}

.f01 {
float:left;
width:103px;
}

.f02 {
}

.f03 {
margin-top:8px;
}

.f03 select {
width:174px;
height:19px;
margin:2px 0 9px 0;
padding:0;
float:left;
font:11px trebuchet ms, arial;
}

.f03 p {
clear:both;
line-height:7px;
margin:5px 0 4px 1px;
}

.f04 {
width:149px;
height:45px;
margin-top:4px;
margin-left:28px;
padding:0;
}

.f04 input {
width:147px;
height:44px;
background:url(grafik/layout.jpg) -620px -490px;
padding:0 0 0 20px;
color:#FFF;
border:none;
font-size:14px;
font-weight:700;
cursor:pointer;
}

.f05 {
clear:both;
line-height:10px;
}

.f08 {
margin-top: 40px;
align=:center;
padding:0;
background:#FFFFFF;
width:200px;
}

.tool1 {
float:right;
margin:-1px 3px 0 0;
width:30px;
height:24px;
background:url(grafik/layout.jpg) -810px -581px;
}

.tool2 {
margin:0 0 0 172px;
width:30px;
height:24px;
background:url(grafik/layout.jpg) -810px -606px;
}

.siegel {
margin:28px 0 0 50px;
width:100px;
height:100px;
background:url(grafik/layout.jpg) -850px -580px no-repeat;
}
.siegel img {
border:none;
}

.google {
height:50px;
}

#tipps {
width:216px;
margin:20px 0 0 10px;
padding:0;
text-align:justify;
border:0;
}

.gas {
background:url(grafik/info-x.jpg) -747px 0 no-repeat;
padding:0 0 0 30px;
line-height:25px;
}

#unten {
clear:both;
position:relative;
left:0;
width:100%;
height:100px;
background:#F4FAFB url(grafik/bg-senk.png) 0 -230px repeat-x;
z-index:-1;
}

/* Links */
a:link {
color:#00007F;
}

a:visited {
color:#00007F;
}

a:active {
color:#00007F;
}

a:hover {
color:red;
text-decoration:underline;
}

hr {
height:1px;
color:#000;
}

/* Bilder */
.strom {
padding:2px;
border:1px solid #00005F;
}

.links {
float:left;
margin-right:10px;
padding:2px;
border:1px solid #00005F;
}

.rechts {
float:right;
margin-left:10px;
padding:2px;
border:1px solid #00005F;
}

.noborder {
border:0;
}

/* Untermenüs */
.menulinks {
text-align:left;
color:#000;
}

.info {
position:absolute;
top:250px;
width:249px;
background:url(grafik/info-x.jpg) repeat-y;
font:.85em arial, sans-serif, verdana;
}

.info1 {
width:249px;
height:23px;
background:url(grafik/info-x.jpg) -249px 0 no-repeat;
}

.info2 {
min-height:440px;
background:url(grafik/info-x.jpg) repeat-y;
padding:0 25px;
}

.info3 {
width:249px;
height:23px;
background:url(grafik/info-x.jpg) -498px 0 no-repeat;
}

.klein {
font:.8em arial, sans-serif, verdana;
}

.clear {
position:relative;
clear:both;
}

#sitemenu a {
font:12px arial, sans-serif, verdana;
color:#FFF;
margin:0;
padding:7px 0 6px;
display:block;
text-decoration:none;
text-align:center;
}

#sitemenu a:hover {
color:#FF0;
background:#1F1F1F;
}

#sitemenu li {
margin-right:5px;
display:inline-block;
float:left;
list-style:none;
height:28px;
width:99px;
background:url(grafik/sitemenu.jpg);
}

#sitemenu ul {
margin:0 4px 0 0;
padding:0;
}

#oekostromvergleich {
width:230px;
height:120px;
background:#ACECAC;
border:1px solid #386238;
margin:0 0 0 10px;
padding:10px;
float:right;
}

.oekostrominput {
width:50px;
height:16px;
margin-top:2px;
left:100px;
padding:0;
}

.oekostromsubmit {
width:160px;
height:22px;
background:#1D2F1D;
color:#F0F0F0;
border:1px solid #386238;
cursor:pointer;
float:left;
}

.tool3 {
margin:0 0 0 160px;
width:30px;
height:22px;
background:url(grafik/layout.jpg) -810px -606px;
}

.fotolia {
width:640px;
max-height:300px;
overflow:scroll;
font:.8em arial, sans-serif, verdana;
}

#lexikon {
color:#FFF;
position:absolute;
top:0;
width:249px;
background:url(grafik/layout.jpg) 0 0 no-repeat;
float:left;
}

#lexikonm {
width:249px;
background:url(grafik/bg-waag.jpg) -718px 0 repeat-y;
}

#lexikonu {
width:249px;
height:20px;
background:url(grafik/layout.jpg) 0 -680px no-repeat;
}

#lexikon a {
font:12px arial, sans-serif, verdana;
color:#FFF;
text-decoration:none;
}

#lexikon a:hover {
color:#FF0;
}

#lexkat {
margin:10px 0 0 0;
padding:0 0 20px 0;
text-align:center;
}

#lexkat li {
width:20px;
height:20px;
float:left;
margin:0 4px 0 0;
background:#000;
}

#lexkat ul {
list-style:none;
margin:0 0 0 -30px;
}

#lexkat a {
font:bold 13px arial, sans-serif, verdana;
color:#FFF;
display:block;
margin:0;
padding:2px 0 0;
text-decoration:none;
text-align:center;
}

#lexkat a:hover {
color:#000;
background:#CFCFCF;
}

.lexikon {
font:19px trebuchet ms, arial;
margin:273px 0 19px;
color:#FFF;
text-transform:uppercase;
text-align:center;
}

.labstand {
padding:0 20px;
}

.mobil  {
display:none;
}

/* IE7 */
*+html .plz {
margin:0 -4px 0 -22px;
padding:0;
}

*+html .ort {
margin:0 -4px 0 4px;
padding:0;
}

*+html .f03 select {
margin:2px 0 8px 0;
}

*+html .f04 input {
margin:0 0 0 -50px;
}

/* IE6 */
* html body {
behavior:url(/csshover.htc);
font-size:.8em;
}

* html #menu {
margin-top:26px;
margin-left:8px;
}

* html #menu ul li a {
height:1%;
}

* html .formular {
margin:20px 0 0 22px;
}

* html .f03 select {
margin:0 0 7px 0;
}

* html .plz {
margin:0 -4px 0 -22px;
padding:0;
}

* html .ort {
margin:0 -4px 0 4px;
padding:0;
}

* html .f04 input {
margin:-2px 0 0 -50px;
}

* html #inhalt {
height:440px;
}

* html .box {
margin:0 0 0 10px;
}

* html .box-top {
padding:38px 0 0 60px;
width:131px;
}

* html .box-bottom {
padding:5px 0 5px 10px;
margin:0 8px 0 26px;
width:148px;
}

* html #footer {
margin:0;
}

* html #unten {
margin-top:-57px;
}



/* for 960px or less */
@media screen and (max-width: 960px) {

body {
font:1.3em arial, sans-serif, verdana;
}

#container,#seite {
width:717px;
}

#header h1 {
font-size:0.9em;
}

#menu {
float:none;
}

#menu a {
margin:0;
padding:20px 0;
}

#menu ul ul {
padding:20px 0 0 0;
}

#menu li {
height:56px;
}

#main {
float:none;
}

#inhalt {
min-height:0px;
}

#inhalt h2 {
font-size:1.2em;
}

#inhalt h3,#inhalt h4,#inhalt h5,#inhalt h6 {
font-size:1.1em;
}

#footer {
margin:0;
font:.85em arial, sans-serif, verdana;
}

#footer br {
line-height:7px;
content: " ";
}

#rechner {
float:none;
position:relative;
top:0px;
width:717px;
height:650px;
background:#0E242F;
}

#rechner a {
color:#00AFFF;
}

.tarifrechner {
margin:0 0 0 0;
padding: 20px 0 0 0;
}

.formular {
font-size:1em;
}

.formular input {
width:3em;
height:1.1em;
font-size:1em;
margin:5px 0 10px 0;
}

.f01 {
float:left;
width:362px;
}

.f02 {
clear:both;
}

.f03 {
margin-top:1em;
}

.f03 select {
width:15em;
height:1.4em;
font-size:1em;
}

.f03 p {
line-height:1em;
}

.tool1 {
margin:0;
width:30px;
height:24px;
background:url(grafik/layout.jpg) -810px -581px;
}

.tool2 {
margin:0 0 0 330px;
width:30px;
height:24px;
background:url(grafik/layout.jpg) -810px -606px;
}

.f04 {
width:149px;
height:45px;
padding:0;
margin:0;
}

.f04 input {
width:200px;
height:44px;
background:#DFDFDF;
color:#000;
font-size:22px;
padding:0;
}

.f05 {
line-height:1.4em;
padding-bottom:5px;
}

.f05 input {
margin:0 10px;
}

.f06 {
float:left;
}

.f07 {
width:auto;
margin:0 0 0 230px;
padding:0;
}

.f08 {
margin:40px 0 0 0;
}

.siegel {
margin:40px 0 0 40px;
}

.gas {
background:url(grafik/klar.gif);
padding:0;
line-height:25px;
}

#unten {
display:none;
}

.info {
position:absolute;
top:250px;
width:249px;
background:url(grafik/info-x.jpg) repeat-y;
font:.85em arial, sans-serif, verdana;
}

.info1 {
width:249px;
height:23px;
background:url(grafik/info-x.jpg) -249px 0 no-repeat;
}

.info2 {
min-height:440px;
background:url(grafik/info-x.jpg) repeat-y;
padding:0 25px;
}

.info3 {
width:249px;
height:23px;
background:url(grafik/info-x.jpg) -498px 0 no-repeat;
}

.info {
position:relative;
top:0px;
width:0px;
background:url(grafik/back.gif) no-repeat;
font:.85em arial, sans-serif, verdana;
}

.info1 {
width:0px;
height:0px;
}

.info2 {
width:717px;
min-height:800px;
background:#FFFFFF; url(grafik/back.gif) no-repeat;
padding:20px;
}

.info3 {
width:0px;
height:0px;
}

#lexikon {
position:relative;
top:0px;
width:717px;
background:#0E242F;
margin:0;
padding:10px 0 0 0;
float:none;
}

#lexikonm {
background:#0E242F;
width:717px;
}

#lexikonu {
background:#0E242F;
width:717px;
}

#lexikon a {
font:1em arial, sans-serif, verdana;
line-height:1.3em;
}

.lexclear {
clear:both;
}

.lexikon {
margin:0;
}

#lexkat {
clear:both;
padding:10px;
margin:0px;
text-align:center;
}

#lexkat li {
width:1em;
height:1.2em;
margin:20px;
}

#lexkat a {
font:bold 1em arial, sans-serif, verdana;
}

#oekostromvergleich {
width:350px;
height:160px;
}

.oekostrominput {
width:70px;
height:1em;
font-size:1em;
}

.oekostromsubmit {
width:250px;
height:1.5em;
font-size:1em;
}

}




/* for 750px or less */
@media screen and (max-width: 750px) {

#container,#seite {
width:450px;
}

#header {
width:448px;
height:100px;
background:#fff url(grafik/klar.gif);
border-left:#000 1px solid;
border-right:#000 1px solid;
z-index:1;
float:none;
margin:-30px 0 0 0;
padding:20px 0 0 0;
}

#header h1 {
margin:31px 0 0 10px;
font:bold 1em arial;
color:#000;
text-align:center;
text-transform:uppercase;
}

#menu {
padding:0;
margin:0 0 0 20px;
}

#main {
width:448px;
background:#fff url(grafik/klar.gif);
border-left:#000 1px solid;
border-right:#000 1px solid;
}

#inhalt {
padding:0 36px;
}

.box {
clear:both;
margin:0 auto 20px auto;
float:none;
}

#rechner {
width:450px;
height:auto;
background:#0E242F;
}

.f03 select {
height:1.8em;
}

.f06 {
float:none;
}

.f07 {
width:auto;
margin:0 0 0 110px;
padding:0;
}

.f08 {
margin:40px 0 0 0;
}

.siegel {
margin:40px 0 0 40px;
}

#footer {
background:#fff;
width:448px;
height:auto;
font:.7em arial, sans-serif, verdana;
border-bottom:#000 1px solid;
}

.info2 {
width:420px;
background:#FFFFFF; url(grafik/klar.gif);
}

#lexikon {
width:450px;
}

#lexikonm {
font:.95em arial, sans-serif, verdana;
width:450px;
}

#lexikonu {
width:450px;
}

.lexikon {
margin:73px 0 19px;
}

.links {
float:none;
margin:0 auto;
display: block;
}

.rechts {
float:none;
margin:0 auto;
display: block;
}

.mobil  {
display:inline;
}

img {
max-width: 100%;
}

.video {
width:400px;
height:243px;
}

}