html {
  width:100%; height:100%;
  }
  
body {
  font-family: Arial,sans-serif; font-size: 64.5%;  font-weight: 500;
	background-image: none;
	height:100%;
	width:100%;
}

a, a:link, a:visited {
  color: #fff;
  text-decoration: none;
}

h1 {
  font-size: 2.5em;
  color: #ccc;
  padding: 0.5em 0;
  font-weight: 700;
}

h2 {
	font-size: 1.5em;
  padding: 0.5em 0;
}
  
#wrapper{
 width: 100%;
 height: 100%;
}

#content {
  height: 100%;
  width: 100%;
}

#top {
	background-color:#fff;
	height:40%;
	width:40em;
	position: relative;
	margin: auto auto;
	padding: 0;
}
#bottom {
  background-color:#000;
  height:60%;
  width:100%;
}

#topcontent {
	width:40em;
	margin: auto auto;
	padding: 0;
	text-align:center;
	position: absolute; 
	bottom: 0;
	right: 0;
}

#bottomcontent {
	width:60em;
	margin: auto auto;
	height:100%;
	text-align:center;
}

/* 2 spaltige Darstellung */
#content div.left{
  float: left;
  width: 40em;
  padding: 0;
  overflow: hidden;
  margin: auto auto;
  height:100%;
  text-align:right;
}

#content div.right{
  float: left;
  width: 20em;
  padding: 0;
  overflow: hidden;
  text-align:left;
  color:#fff;
  margin-top:16.9em;
}

#content div.right h2{
  padding: 0 0.5em;
}

#content div.right p{
  padding: 0 0.7em;
}

#content div.right p a{
  display: block;
  text-align: right;
}

#content div.right img{
  position: aboslute;
  bottom: 0;
  left: 0;
}