* { padding: 0; margin: 0; }

html {height: 101%;}

body {font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 20px;}

#wrapper {margin: 0 auto; width: 920px;
position: relative; }

#energ-re {width: 50px;
min-height: 100%;
position: absolute;
right: -60px;
background: url(px/energie-re.gif) no-repeat;} 

#energ-o {height: 50px;
width:  440px;
position: absolute;
right: -67px;
top: -47px;
background: url(px/energie-o.gif) no-repeat;}

#flaeche {margin-bottom: 10px; overflow: auto;  width: 100%}


.grow {transition: all .2s ease-in-out;  width: auto;  height: 70px; padding: 0px 0px 0px 0px; margin: 5px 200px 0px 0px; }
.grow:hover {transform: scale(2);  -moz-box-shadow: 0 0 4px #777; -webkit-box-shadow: 0 0 4px #777; box-shadow: 0 0 4px #777;}

.grow250 {transition: all .2s ease-in-out; width: 200px; height: auto; padding: 0px 0px 0px 0px; margin: 5px 0px 0px 80px; }
.grow250:hover {transform: scale(1.75);  -moz-box-shadow: 0 0 4px #777; -webkit-box-shadow: 0 0 4px #777; box-shadow: 0 0 4px #777;}


#header {width: 918px;
 height: 234px;
 margin: 60px 0px 0px 0px;
background:  url(px/hg918.gif) no-repeat;
border: 1px solid #F69328;
 text-align: right;}

#motto {font-size: 30px; font-weight: bold; line-height: 40px; color: #333;
margin: 25px; 
width: 840px;
height:130px;
z-index:1;
position:absolute}

.uebersetzer {width:100%; border-spacing: 4px;}

#uebersetzid {width:200px; height:60px;
margin: 0px 0px 0px 720px;
z-index:2;
position:absolute}

.brot11 {font-family: Arial, Helvetica, sans-serif; font-size: 11px; line-height: 18px; color: #808080;}

h1 {font-size:16px;
font-weight: bold;
line-height:22px; 
padding: 5px 0px 22px 0px; 
margin:0px}

/* ----------------------------------------------- navigation ----------------------------------------------- */

nav {font-size: 16px; line-height:18px;
width:900px;}

nav ul {list-style-type: none; margin:0;}

nav li {display: inline;}

nav a {display: inline-block;
margin:0;
color: #8AB835;
padding: 10px 25px;
font-weight: bold;
text-decoration: none;}

nav a:visited {color:#8AB835;}

nav a:hover {color: #FF791E; text-decoration: underline;
text-shadow: 0px 0px 2px #AAA;}

/* ----------------------------------------------- navigation ----------------------------------------------- */

.tableaktu {width: 200px; background-color: #E6EECF; padding: 7px;}

#rightcolumn {display: inline;
 color: #333;
 margin:33px 0px 0px 0px;
 padding:0;
 width: 200px;
 float: right;
font-size: 13px; line-height: 17px;}

#leftcolumn { float: left;
 color: #333;
 margin:27px;
 padding:0;
 width: 580px;
 display: inline;
 position: relative;}

.clear {clear: both; background: none;}


/*     # # # # # # # # # # # # # # #  M A X 1100px     # # # # # # # # # # # # # # #  */

@media screen and (max-width:1100px) 
{

#wrapper {margin: 0 auto; width: 800px;
position: relative; }

#header {width: 798px;
height: 203px;
 margin: 60px 0px 0px 0px;
background:  url(px/hg798.gif) no-repeat;
border: 1px solid #F69328;
 text-align: right;}

#uebersetzid {width:200px; height:60px;
margin: 0px 0px 0px 600px;}

#motto {font-size: 25px; font-weight: bold; line-height: 35px; color: #333;
margin: 25px; 
width: 720px;
height:100px;}

/* ----------------------------------------------- navigation ----------------------------------------------- */

#navigation {color: #8AB835;
 padding: 4px;
 margin: 0px;
 background: #ABBEBE;}

nav {font-size: 15px; line-height:18px;
width:800px;}

/* ----------------------------------------------- navigation ----------------------------------------------- */

nav a {display: inline-block;
margin:0;
color: #8AB835;
padding: 10px 20px;
font-weight: bold;
text-decoration: none;}

#rightcolumn {display: inline;
 color: #333;
 margin:30px 0px 0px 0px;
 padding:0;
 width: 200px;
 float: right;
font-size: 13px; line-height: 17px;}

#leftcolumn { float: left;
 color: #333;
 margin:25px;
 padding:0;
 width: 470px;
 display: inline;
 position: relative;}
}

/*     # # # # # # # # # # # # # # #  M A X 1000px     # # # # # # # # # # # # # # #  */

@media screen and (max-width:1000px) 
{

#wrapper {margin: 0 auto; width: 600px;
position: relative; }

#header {width: 598px;
 height: 152px;
 margin: 60px 0px 0px 0px;
background:  url(px/hg598.gif) no-repeat;
border: 1px solid #F69328;
 text-align: right;}

#uebersetzid {width:200px; height:60px;
margin: 0px 0px 0px 400px;}

#motto {font-size: 18px; font-weight: bold; line-height: 25px; color: #333;
margin: 25px; 
width: 520px;
height:90px;}

/* ----------------------------------------------- navigation ----------------------------------------------- */

nav {font-size: 15px; line-height:18px;
width: 400px; text-align: left;
 float: left;} 

nav a {display: inline-block;
margin:0;
color: #8AB835;
padding: 10px 14px;
font-weight: bold;
text-decoration: none;}

/* ----------------------------------------------- navigation ----------------------------------------------- */

#rightcolumn {display: inline;
 color: #333;
 margin: 17px 0px 0px 0px;
 padding:0;
 width: 200px;
 float: right;
font-size: 13px; line-height: 17px;}

#leftcolumn { float: left;
 color: #333;
 margin:10px;
 padding:0;
 width: 370px;
 display: inline;
 position: relative;}
}


/*     # # # # # # # # # # # # # # #  M A X 750px     # # # # # # # # # # # # # # #  */

@media screen and (max-width:750px) 
{

#wrapper {margin: 0 auto; width: 480px;
position: relative; }

#header {width: 478px;
 height: 122px;
 margin: 60px 0px 0px 0px;
background:  url(px/hg478.gif) no-repeat;
border: 1px solid #F69328;
 text-align: right;}

#uebersetzid {width:140px; height:60px;
margin: 0px 0px 0px 270px;}

#motto {font-size: 18px; font-weight: bold; line-height: 25px; color: #333;
text-shadow: 0px 0px 5px #FFF;
margin: 25px; 
width: 430px;
height:90px;}

#energ-re {display: none} 

#energ-o {height: 50px;
width:  480px;
position: absolute;
right: 0px;
top: -47px;
background:  url(px/energie480.gif) no-repeat;}

/* ----------------------------------------------- navigation ----------------------------------------------- */

#navigation {color: #8AB835;
 padding: 4px;
 margin: 4px;
 background: #ABBEBE;}

nav {font-size: 15px; line-height:18px;
width: 270px; text-align: left;
 float: left;} 

nav a {display: inline-block;
margin:0;
color: #8AB835;
padding: 7px 14px;
font-weight: bold;
text-decoration: none;}

/* ----------------------------------------------- navigation ----------------------------------------------- */

.tableaktu {width: 140px; background-color: #E6EECF; padding: 2px;}

#rightcolumn {display: inline;
 float: right;
 width: 140px;
 margin: 17px 0px 0px 0px;
 color: #333;
 padding:0;
font-size: 13px; line-height: 17px;}

#leftcolumn {display: inline;
float: left;
 width: 300px;
 margin:10px;
 padding:0;
 color: #333;
 position: relative;}
}