@charset "utf-8";

/**
-------------------------------------------------------------
	Stylesheet für: http://www.example.com/
	Medien:         Bildschirme und Projektoren
	Autor:          Anja Blonstedt
------------------------------------------------------------- */

/**
-------------------------------------------------------------
	Regeln für allgemeine Elemente --
	Standard-Elementtypen ohne Bezeichner oder Klasse
------------------------------------------------------------- */

/* Alle kritischen Werte für alle Elemente mit Standardwerten instanziieren.
   Wo anders gewünscht, müssen die Werte explizit überschrieben werden. */

* {} /* Safari-Bugfix */

* {
	margin: 0;
	padding: 0;	
	border-spacing: 0;
	border-collapse: collapse;
	vertical-align: top;
}

/* Schriftgröße kontrollieren */
/* Im Quirkmodus werden Schrifteigenschaften nicht in Tabellenzellen hinein
   vererbt. Die Elementtypen 'td' und 'th' werden somit explizit aufgeführt.
   An dieser Stelle nicht die Einheit 'em' verwenden. */
body, td, th {
  font: normal 75%/150% Verdana, sans-serif;
}
/* Für Browser im Standardmodus müssen die Schriftgrößen für Zellen wieder
   auf 100 Prozent gesetzt werden. Dafür wird ausgenutzt, dass kein Browser
   im Quirkmodus Maskierung versteht und die folgende Regel daher ignoriert. */
td, th {
  f\ont-size: 100%;
}

body {
	color: white;
	background-color: black;
	width: 100%;
	height: 100%;
	/* Gewährleistet, dass positionierte Elemente im IE beim Verändern der
	   Fenstergröße auch wirklich neu und korrekt positioniert werden. */
  position: relative;
}
body.kontakt {
	background: transparent url('images/formular_kontakt_back.jpg') top left no-repeat;
}
/** Links und Anker
------------------------------------------------------------- */
a:link {
	color: #d2d2d2;
	text-decoration: underline;
}
a:visited {
	color: #d2d2d2;
	text-decoration: underline;
}
a:hover, a:focus {
	color: #d2d2d2;
	text-decoration: underline;
}
a:active {
	color: #d2d2d2;
	text-decoration: underline;
}
/* Rahmen und verlinkte Bilder unterdrücken. Für alle Browser außer ältere
   Opera reicht der Selektor 'a img'. */
a:link img,
a:visited img,
a:hover img,
a:focus img,
a:active img {
  border: 0;
}


/** Überschriften
------------------------------------------------------------- */ 
h1, h2, h3, h4, h5, h6 {
  margin: 2em 0 1em 0;  
}
h1 {
  margin: 0 0 1.5em 0;  
  font-size: 1.5em;  
}
h2 {
  font-size: 1.4em;
}
h3 {
  font-size: 1.3em;  
}
h4 {
  font-size: 1.2em;  
}
h5 {
  font-size: 1.1em;
}
h6 {
  font-size: 1em; /* Nicht kleiner als 1em setzen */
}


/** Abkürzungen, Akronyme und Erläuterungen
------------------------------------------------------------- */
abbr[title], acronym[title], span[title] {
  border-bottom: 1px dotted #1A1A1A;
}
a abbr[title], a acronym[title], a apan[title] {
  border: 0;
}

/** Absätze
------------------------------------------------------------- */
p {
  margin: .8em 0;
}


/** Tabellen
------------------------------------------------------------- */ 
table {
  margin: 1em 0;  
}
caption {
  margin: 2em 0 1em 0;
  font-weight: bold;
}
th {
  text-align: center;
  font-weight: bold; 
}

/* Alternierende Zeilenfärbung */
tr.odd td {
}
tr.even td {
}

/* Tabellen in Formularen */
form table td {
  padding: 0 10px 5px 0; 
}


/** Bilder
------------------------------------------------------------- */
img {
  vertical-align: bottom;
}

/** Listen
------------------------------------------------------------- */
ol, ul {
  margin: 1em 0 1em 25px;
}
ul li {
  /* Hier Bullet per 'list-style-image' oder 'background-image' setzen. */
  list-style-image: none;
  display: inline;
}

dl {
  margin: 1.5em 0;
}
dt {
  margin-top: 1em;
}
dd {
}


/** Präformatierter und Quelltext
------------------------------------------------------------- */
pre {
  font-family: "Courier New", monospace;
  font-size: 110%;
  line-height: 1.2;
  margin: 1.5em 0;
}
code {
  font-family: "Courier New", monospace;
  font-size: 110%;
  font-style: normal;
  vertical-align: baseline;
  padd\ing: 0 3px;
}
pre code {
  font-size: 1em;
}


/** Textauszeichnung
------------------------------------------------------------- */
ins[title], del[title] {
  border-bottom: 1px dotted #1A1A1A;
}
ins {
  text-decoration: none;
  font-weight: bold;
}

dfn {
  font-style: normal;
}

samp {
  font-size: 110%;
  vertical-align: baseline;
}

kbd {
  font-family: "Courier New", monospace;
  font-size: 110%;
  font-style: normal;
}


/**
-------------------------------------------------------------
	Regeln für besondere Bereiche --
	Spezielle Seitenelemente, häufig durch Container einer
	bestimmten ID gruppiert
------------------------------------------------------------- */

#main {
	position: absoulte;
	width: 100%;
	height: 100%;
	background-color: black;
}
#counter {
	position: absolute;
	top: 213px;
	left: 305px;
	padding: 0;
	margin: 0;
}

/** Hauptmenü
------------------------------------------------------------- */

/* Navigationsbereich sollten wie folgt realisiert werden:

   <div id="nav">
     <ul>
       <li><a>foo</a></li>
       <li><strong title="Hier befinden Sie sich gerade.">bar</strong></li>
       <li><a>qux</a></li>
     </ul>
   </div> */

/* Es ist üblich, Links in Navigationsbereich nur zu unterstreichen,
   wenn Sie mit der Maus berührt werden oder den Fokus haben. */
#nav {
	position: fixed;
	bottom: 0px;
	background: url('images/background_nav.gif') bottom left repeat-x;
	width: 100%;
	height: 79px;
	margin: 0;
}
* html #nav {
	position: absolute;
	left: 0;
}
/* Ausschließlich IE 7 */
  *:first-child + html #nav {
	left: 0;
}
#nav ul {
	position: absolute;
	bottom: -12px;
}
*html #nav ul {
	bottom: -13px;
}

#nav a {
  text-decoration: none;
}
#nav a:hover, #nav a:focus {
  text-decoration: underline;
}

a#navPartner {
	display: block;
	float: left;
	width: 196px;
	height: 79px;
	background: transparent url('images/nav_partner_komplett.gif') top left no-repeat;
}
a:hover#navPartner {
	background: transparent url('images/nav_partner_komplett.gif') bottom left no-repeat;
}
a#navPartnerHTMLLink {
	position: absolute;
	left: 26px;
	display: block;
	z-index: 20;
	width: 196px;
	height: 79px;
	background: transparent url('images/nav_partner_komplett.gif') top left no-repeat;
}
a:hover#navPartnerHTMLLink {
	background: transparent url('images/nav_partner_komplett.gif') bottom left no-repeat;
}

a#navKontakt {
	display: block;
	float: left;
	width: 71px;
	height: 79px;
	background: transparent url('images/nav_kontakt_komplett.gif') top left no-repeat;
}
a:hover#navKontakt {
	background: transparent url('images/nav_kontakt_komplett.gif') bottom left no-repeat;
}
a#navGewinnspiel {
	display: block;
	float: left;
	width: 112px;
	height: 79px;
	background: transparent url('images/nav_gewinnspiel_komplett.gif') top left no-repeat;
}
a:hover#navGewinnspiel {
	background: transparent url('images/nav_gewinnspiel_komplett.gif') bottom left no-repeat;
}

/** Logo
------------------------------------------------------------- */
#logo {
	position: absolute;
	left: 712px;
	bottom: 0px;
}
*html #logo {
	bottom: -1px;
}


/** Content
------------------------------------------------------------- */
#content {
	postition: relative;
	background: #000000 url('images/bg_01.jpg') top left no-repeat;
	min-width: 1028px;
	height: 780px;
}
#content #text {
	position: absolute;
	left: 355px;
	top: 350px;
	width: 500px;
}
a#eintreten {
	display: block;
	width: 128px;
	height: 26px;
	margin: 20px 0 0 0;
	background: transparent url('images/button_eintr_komplett.gif') top left no-repeat;
}
a:hover#eintreten {
	background: transparent url('images/button_eintr_komplett.gif') bottom left no-repeat;
}
a#getFlash {
	display: block;
	width: 300px;
	height: 31px;
	margin: -26px 0 0 250px;
	background: transparent url('images/button_flashplayer_komplett.gif') top left no-repeat;
}
a:hover#getFlash {
	background: transparent url('images/button_flashplayer_komplett.gif') bottom left no-repeat;
}

/** Styles fuer die Partner-Uebersicht Seite
------------------------------------------------------------- */
#contentPartner {
	postition: relative;
	background: #000000 url('images/bg_02.jpg') top left no-repeat;
	min-width: 1028px;
	height: 880px;
}
a#person01 {
	display: block;
	width: 234px;
	height: 440px;
	position: absolute;
	top: 190px;
	background: transparent url('images/person_01_komplett.jpg') top left no-repeat;
}
a:hover#person01 {
	background: transparent url('images/person_01_komplett.jpg') bottom left no-repeat;
}
a#person02 {
	display: block;
	width: 206px;
	height: 440px;
	position: absolute;
	top: 190px;
	left: 234px;
	background: transparent url('images/person_02_komplett.jpg') top left no-repeat;
}
a:hover#person02 {
	background: transparent url('images/person_02_komplett.jpg') bottom left no-repeat;
}
a#person03 {
	display: block;
	width: 188px;
	height: 440px;
	position: absolute;
	top: 190px;
	left: 440px;
	background: transparent url('images/person_03_komplett.jpg') top left no-repeat;
}
a:hover#person03 {
	background: transparent url('images/person_03_komplett.jpg') bottom left no-repeat;
}
a#person04 {
	display: block;
	width: 171px;
	height: 440px;
	position: absolute;
	top: 190px;
	left: 628px;
	background: transparent url('images/person_04_komplett.jpg') top left no-repeat;
}
a:hover#person04 {
	background: transparent url('images/person_04_komplett.jpg') bottom left no-repeat;
}

/** Styles fuer die einzelnen Partner-Seiten
------------------------------------------------------------- */
#contentPartnerPlus {
	postition: relative;
	background: #000000 url('images/bg_03_01.jpg') top left no-repeat;
	min-width: 1028px;
	height: 680px;
}
#contentPartnerEp {
	postition: relative;
	background: #000000 url('images/bg_03_02.jpg') top left no-repeat;
	min-width: 1028px;
	height: 680px;
}
#contentPartnerRwe {
	postition: relative;
	background: #000000 url('images/bg_03_03.jpg') top left no-repeat;
	min-width: 1028px;
	height: 680px;
}
#contentPartnerKhd {
	postition: relative;
	background: #000000 url('images/bg_03_04.jpg') top left no-repeat;
	min-width: 1028px;
	height: 680px;
}
#contentPartnerWerden {
	postition: relative;
	background: #000000 url('images/bg_03_05.jpg') top left no-repeat;
	min-width: 1028px;
	height: 680px;
}
a#backLink {
	display: block;
	width: 109px;
	height: 20px;
	position: absolute;
	top: 265px;
	left: 460px;
	background: transparent url('images/button_close_komplett.gif') top left no-repeat;
}
#contentPartnerPlus a#backLink {
	left: 450px;
}
#contentPartnerEp a#backLink,
#contentPartnerRwe a#backLink {
	left: 470px;
}
a:hover#backLink {
	background: transparent url('images/button_close_komplett.gif') bottom left no-repeat;
}
a#backLinkPartner {
	display: block;
	width: 109px;
	height: 20px;
	position: absolute;
	top: 265px;
	left: 460px;
	background: transparent url('images/button_close_hell_komplett.gif') top left no-repeat;
}
a:hover#backLinkPartner {
	background: transparent url('images/button_close_hell_komplett.gif') bottom left no-repeat;
}

#infotext {
	position: absolute;
	top: 300px;
	left: 180px;
	width: 420px;
	color: #ffffff;
	font-size: .9em;
}
#infotext p {
	margin: 15px 0;
}
#infotext ul {
	padding: 0;
	margin: 0;
}
#infotext ul,
#infotext li {
	list-style: none;
	position: relative;
}
#infotext ul li {
	background: url('images/infotafel_bullet.gif') left 4px no-repeat;
	display: block;
	margin: 0 0 5px 0;
	padding: 0 0 0 25px;
}

/* Styles fuer die Kontaktseite */
#contentKontakt {
  position: absolute;
  top: 56px;
  left: 41px;
  color: #ffffff;
  width: 408px;
  height: 500px;
  overflow: auto;
  font-size: .9em;
  padding: 20px 0 0 0;
}
#contentKontakt h1 {
  font-weight: bold;
  font-size: 1em;
  margin: 0 0 10px 0;
}
#contentKontakt a {
  color: #d2d2d2;
}

/* Häufig folgen an dieser Stelle weitere Regeln für die Gestaltung
   von Sidebars, Teaser- und Newsbereichen etc. */


/** Fußzeile
------------------------------------------------------------- */

/* Üblicherweise steht die Fußzeile unterhalb aller anderer Elemente. */
#footer {
  clear: both;
}



/**
-------------------------------------------------------------
	Regeln für spezielle Elemente
------------------------------------------------------------- */

/* Zwischenlinien, -überschriften und -texte, die auf dem Bildschirm
   nicht wiedergegeben werden sollen, aber wichtig für die
   dokumentinterne Struktur sind und die Bedienung der Seite bei
   Ausgabe durch assistive Technologien erleichtern. */
.invisible {
  position: absolute;
  left: -9999px; 
}


/**
-------------------------------------------------------------
	Regeln für spezielle Dokumente
------------------------------------------------------------- */



/**
-------------------------------------------------------------
	Browserhacks
------------------------------------------------------------- */