/* - - - - - --0-- Table of Content - - - - - 

--1--	reset
--2--	basic layout
--3--	basic styling
--4--	navigation (main menu, score table menu)
--5--	sidebar (login-panel, teasers in sidebar)
--6--	main content (incl. teasers)
--7--	pages
	--7 a--	page: about
	--7 b--	page: games
	--7 c--	page: profile
	--7 d--	page: register
	--7 e--	page: ecard
	--7 f--	page: password helper
	--7 g--	page: contact, imprint, legal
--8--	links + buttons
--9--	system messages
--10--	ads

*/

/* - - - - - - --1-- reset - - - - - - */

@font-face {
	font-family: 'HVDComicSerifProRegular';
	src: url('../fonts/HVD_Comic_Serif_Pro.eot');
	src: local('HVD Comic Serif Pro'), local('HVDComicSerifPro'), url('../fonts/HVD_Comic_Serif_Pro.woff') format('woff'), url('../fonts/HVD_Comic_Serif_Pro.ttf') format('truetype'), url('../fonts/HVD_Comic_Serif_Pro.svg#HVDComicSerifPro') format('svg');
}

/* Reset defaults */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}

/* remember to define focus styles! */

:focus {
	outline: 0;
}

body {
	line-height: 1;
	color: black;
	background: white;
}

ol, ul {
	list-style: none;
}

/* tables still need 'cellspacing="0"' in the markup */

table {
	border-collapse: separate;
	border-spacing: 0;
}

caption, th, td {
	text-align: left;
	font-weight: normal;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}

blockquote, q {
	quotes: "" "";
}

#skipToContent { position: absolute; left: -9999px; top: -9999px; }

/* - - - - - - --2-- basic layout - - - - - - */

body {
	font: normal 10px/1.5  "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #222;
	background: #fff;
}


#wrapper {
	background: url(../img/bgMain.jpg) no-repeat 0 0;
	overflow: hidden;
	position: relative;
	width: 785px;
	margin-left: 10px;
}

#main {
	display: inline;
	float: right;
	margin: 147px 0 0 0;
	position: relative;
	width: 655px;
}

#sideBar {
	display: inline;
	float: left;
	margin-top: 200px;
	position: relative;
	width: 130px;
}

#header{
position: absolute;
left: 0;
top: 0;
width: 100%;
}

#logo a {
	background: url(../img/bgLogo.png) no-repeat 0 0;
	display: block;
	height: 185px;
	left: 0;
	overflow: hidden;
	position: absolute;
	text-decoration: none;
	text-indent: -9999px;
	top: 0;
	width: 175px;
}

ul#mainMenu {
	height: 80px;
	position: absolute;
	right: 20px;
	top: 60px;
	width: 590px;
}

#ticker {
	position: absolute;
	top: 5px;
	right: 30px;
}

#teasers {
	clear: both;
	overflow: hidden;
	padding-bottom: 20px;
	width: 660px;
}

iframe#footer {
	border: 0;
	height: 220px;
	width: 800px;
}

.col {
	float: left;
	margin: 0 0 0 5px;
	width: 320px;
}

#mainTeaser,
#mainContent
{
	margin: 0 0 0 5px;
	overflow: visible;
	padding-bottom: 20px;
	position: relative;
}

.left { float: left; }
.right { float: right; }

/* - - - - - --3-- basic styling - - - - - */

h1 {text-indent: -9999px;}

h2 {
	background:  url(../img/bgMainCol.png) no-repeat 0 0;
	color: white;
	display: block;
	font: 20px/72px 'HVDComicSerifProRegular', Arial, sans-serif;
	text-align: center;
	text-shadow: 0 1px 0 #000;
}

h3, h4 {
	color: #333;
	font: 20px/30px 'HVDComicSerifProRegular', Arial, sans-serif;
	margin: 0 15px;
	text-align: center;
	text-shadow: 0 1px 0 #fff;
}

h4 {
	font: 14px/1.3 'HVDComicSerifProRegular', Arial, sans-serif;
	margin: 0 15px 5px 15px;
	text-align: left;
}

p {
	font: 11px/1.5 Verdana, Arial, sans-serif;
	margin: 0 15px 10px 15px;
}

input {
	border: 0;
	height: 27px;
	padding: 0;
}

table th {
	color: #343434;
}

table th,
table td
{
	line-height: 30px;
	padding: 0 10px;
}

td { white-space: nowrap; }

	
input.inputTxt,
label
{
	display: block;
	margin: 0;
	border: none;
	padding: 0 5px;
}

input.inputTxt {
	font: 13px/27px Verdana, Arial, sans-serif;
	background: url(../img/bgInputs.png) no-repeat 0 0;
	color: #fff;
	text-shadow: 0 1px 0 #000;
}

input.inputTxt:focus {
	background-position: 0 -30px;
}

#wrapper #main input.inputTxt.focus { background-position: 0 -90px; }
#sideBar #accountPanel input.inputTxt.focus { background-position: 0 -30px; }

label {
	font: 13px/1 'HVDComicSerifProRegular', Arial, sans-serif;
	text-align: center;
	margin: 5px 0;
}

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

	/* main menu */

	ul#mainMenu li {
		float: left;
	}

	ul#mainMenu li a {
		background: url(../img/mainMenuBtns.png) no-repeat 0 0;
		display: block;
		height: 80px;
		overflow: hidden;
		text-decoration: none;
		text-indent: -9999px;
		width: 115px;
	}

	#mainMenu .selected a {
		cursor: default;
	}

	#mainMenu #btnHome:link,
	#mainMenu #btnHome:visited { background-position: 0px 0px; }
	#mainMenu #btnHome:hover { background-position: 0px -80px; }
	#mainMenu #btnHome:active{ background-position: 0px 2px; }
	#mainMenu .selected #btnHome:link,
	#mainMenu .selected #btnHome:hover,
	#mainMenu .selected #btnHome:active,
	#mainMenu .selected #btnHome:visited { background-position: 0px -160px; }

	#mainMenu #btnAbout:link,
	#mainMenu #btnAbout:visited { background-position: -115px 0px; }
	#mainMenu #btnAbout:hover { background-position: -115px -80px; }
	#mainMenu #btnAbout:active { background-position: -115px 2px; }
	#mainMenu .selected #btnAbout:link,
	#mainMenu .selected #btnAbout:hover,
	#mainMenu .selected #btnAbout:active,
	#mainMenu .selected #btnAbout:visited { background-position: -115px -160px; }

	#mainMenu #btnGames:link,
	#mainMenu #btnGames:visited { background-position: -230px 0px; }
	#mainMenu #btnGames:hover { background-position: -230px -80px; }
	#mainMenu #btnGames:active { background-position: -230px 2px; }
	#mainMenu .selected #btnGames:link,
	#mainMenu .selected #btnGames:hover,
	#mainMenu .selected #btnGames:active,
	#mainMenu .selected #btnGames:visited { background-position: -230px -160px; }

	#mainMenu #btnRanking:link,
	#mainMenu #btnRanking:visited { background-position: -345px 0px; }
	#mainMenu #btnRanking:hover { background-position: -345px -80px; }
	#mainMenu #btnRanking:active { background-position: -345px 2px; }
	#mainMenu .selected #btnRanking:link,
	#mainMenu .selected #btnRanking:hover,
	#mainMenu .selected #btnRanking:active,
	#mainMenu .selected  #btnRanking:visited { background-position: -345px -160px; }

	#mainMenu #btnHighscore:link,
	#mainMenu #btnHighscore:visited { background-position: -460px 0px; }
	#mainMenu #btnHighscore:hover { background-position: -460px -80px; }
	#mainMenu #btnHighscore:active { background-position: -460px 2px; }
	#mainMenu .selected #btnHighscore:link,
	#mainMenu .selected #btnHighscore:hover,
	#mainMenu .selected #btnHighscore:active,
	#mainMenu .selected  #btnHighscore:visited { background-position: -460px -160px; }
	

	
	/* score menu */

	#scoreMenu {
		background: url(../img/bgScoremenu.png) no-repeat 10px 0;
		display: inline;
		float: right;
		margin-right: 20px;
		position: relative;
		top: -10px;
		width: 155px;
	}

	body#ranking #scoreMenu {
		margin-right: 25px;
		top: -35px;
	}

	body#profile #scoreMenu {
		margin-right: 15px;
	}

	#scoreMenu ul {
		background: url(../img/bgScoremenu.png) no-repeat 10px bottom;
		padding: 30px 0 15px 0;
	}

	#scoreMenu li {
		background: url(../img/bgScoremenuLi.gif) no-repeat right bottom;
		padding-left: 10px;
		padding: 5px;
		text-align: center;
	}

	#scoreMenu li a {
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border-radius: 5px;
		color: #343434;
		display: block;
		font: 12px/1.3 'HVDComicSerifProRegular', Arial, sans-serif;
		margin-left: 10px;
		padding: 15px;
		text-decoration: none;
		text-shadow: 0 1px 0 #fff;
	}

	#scoreMenu li a:hover { background: #e6e6e6; }
	#scoreMenu li span { display: block; }
	#scoreMenu li.selected { padding: 5px; }

	#scoreMenu li.selected span {
		background: url(../img/bgScoremenuSelected.png) no-repeat 0 center;
		left: -10px;
		padding-left: 20px;
		position: relative;
		width: 135px;
	}

	#scoreMenu li.selected a {
		background: #fff;
		color: #6db70a;
		cursor: default;
		margin-left: 0;
		padding: 15px;
	}

/* - - - - - - --5-- sidebar - - - - - - */

	/* login */

	#accountBox {
		background: url(../img/bgSidebar.png) no-repeat -130px 0;
		padding-top: 25px;
	}	
	
	#accountBox .inner {
		background: url(../img/bgSidebar.png) repeat-y 0 bottom;
		padding-bottom: 15px;
	}
	
	#loginError{
		background: #f8e9ae url(../img/bgIndicatorError.png) no-repeat center 5px;
		border: 2px solid #deb505;
		color: #333;
		font: normal 11px/1.3 Verdana, Arial, sans-serif;
		padding: 40px 10px 10px 10px;
		text-shadow: 0 1px 0 #fff;
		width: 85px;
		margin: 5px 0 10px 0;
	}
	
	#loginError strong{
		font-weight: bold;
	}
	
	#loginError a {
		display: block;
		margin-top: 5px;
		color: #333;
	}
	
	#loginError a:hover{ text-decoration: none; }
	
	#accountPanel {
		margin: 0 5px;
		position: relative;
		top: -5px;
	}

	#accountPanel .userInfo {
		background: url(../img/bgAvatarSidebar.png);
		height: 140px;
		width: 110px;
	}

	#accountPanel .userPic {
		clip: rect(auto auto 98px auto);
		left: 5px;
		position: absolute;
		top: 5px;
	}

	#accountPanel .userName {
		color: white;
		display: block;
		font: bold 10px/1 Verdana, Arial, sans-serif;
		position: absolute;
		text-align: center;
		top: 117px;
		width: 110px;
	}

	/* form stuff */
	#accountPanel input.btn { margin-top: 10px; }
	#accountPanel .btn { margin: 0 10px; }
	#sideBar .inputTxt, #accountPanel label { width: 100px; }
	#sideBar #accountPanel input.inputTxt { background-position: 0 0; }
	#sideBar #accountPanel input.inputTxt:focus { background-position: 0 -30px; }
	#sideBar #accountPanel label { text-align: center; }

	#teaserFbConnect {
		background: url(../img/bgTeaserFbConnect.png) no-repeat 0 0;
		display: block;
		height: 90px;
		margin-top: 10px;
		position: relative;
		text-decoration: none;
		width: 110px;
	}

	/*#teaserFbConnect:hover { background-position: 0 -90px; }
	#teaserFbConnect:active { top: 1px; }*/

	#teaserFbConnect span {
		color: #666;
		display: block;
		font: 12px/1.3 'HVDComicSerifProRegular', Arial, sans-serif;
		margin: 0 5px;
		position: relative;
		text-align: center;
		text-shadow: 0 1px 0 #fff;
		top: 20px;
	}
	
	#teaserFbConnect div {
		position: absolute;
		left: 11px;
		top: 57px;
	}
	
	/* teasers in sidebar */
	 
	#sideBar .teaser {
		background: url(../img/bgTeasersSidebar.png) no-repeat 0 0;
		height: 130px;
		margin: 0 7px;
		position: relative;
		width: 115px;
	}

	#sideBar .teaser h2 {
		background-repeat: no-repeat;
		height: 100px;
		left: 8px;
		overflow: hidden;
		position: absolute;
		text-decoration: none;
		text-indent: -9999px;
		top: 20px;
		width: 100px;
	}
	
	#sideBar .teaser:hover h2 {
		background-position: 0 -96px;
	}

	#sideBar .teaser h2 a {
		display: block;
		height: 100px;
		left: 0;
		position: absolute;
		top: 0;
		width: 100px;
	}
	
	#sidebarTeaserInvite h2 { background-image: url(../img/imgTeaserSidebarInvite.png); }
	#sidebarTeaserRegister h2 { background-image: url(../img/imgTeaserSidebarRegister.png); }
	#sidebarTeaserHammerspiel h2 { background-image: url(../img/imgTeaserSidebarHammerspiel.png); }
	
	/* game teaser

	1 = Kiez Kanone
	2 = Wer wird Berlinär
	3 = Jäger des verlorenen Hammers

	*/

	/* small teasers in sidebar */
	#wrapper #sideBar #sidebarTeaserGame-1 h2 { background-image: url(../img/imgTeaserSidebarGame-1.png); }
	#wrapper #sideBar #sidebarTeaserGame-2 h2 { background-image: url(../img/imgTeaserSidebarGame-2.png); }
	#wrapper #sideBar #sidebarTeaserGame-3 h2 { background-image: url(../img/imgTeaserSidebarGame-3.png); }
	#wrapper #sideBar #sidebarTeaserGame-4 h2 { background-image: url(../img/imgTeaserSidebarGame-4.png); }

/* - - - - - --6-- main content - - - - - */

	#mainTeaser .inner,
	#mainContent .inner
	{
		background: url(../img/bgMainCol.png) no-repeat -645px bottom;
		padding-bottom: 20px;
		width: 640px;
		overflow: hidden;
		position: relative;
	}
	

	#mainTeaser h2,
	#mainContent h2
	{
		background:  url(../img/bgMainCol.png) no-repeat 0 -90px;
		//zoom: 1; /* IE haslayout fix */
	}
	
	/* flash */
	
	.flashWrapper {
		margin: 0 0 0 5px;
		position: relative;
		width: 630px;
		margin-bottom: 2px;
	}
	
	body#start #mainTeaser .inner { overflow: visible; }
	body#games #mainContent .inner { overflow: visible; margin-bottom: 35px; }
	body#ranking #mainContent .inner { overflow: visible; }
	
	body#start .flashWrapper { height: 419px; }
	body#ranking .flashWrapper { height: 419px; margin-bottom: -17px; }
	body#games .flashWrapper { height: 500px; }
	
	body#start #mainTeaser #flashcontent,
	body#games #mainContent #flashcontent,
	body#ranking #mainContent #flashcontent
	{
		position: absolute; top: -17px;
	}
	
	
	/* no-flash */

	body#start #flashcontent {
		background: url(../img/bgMapNoflash.jpg) no-repeat 10px 10px;
		height: 419px;
		position: relative;
		width: 630px;
	}
	
	.noJs #flashcontent {
		background: url(../img/bgMapNoflash.jpg) no-repeat 10px 10px;
		height: 420px;
		position: relative;
		width: 630px;
	}
	
	.noJs #flashcontent p {
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border-radius: 5px;
		background: #fff;
		width: 400px;
		margin: 20px 0 0 100px;
		padding: 10px;
		font-size: 14px;
		border: 3px solid red;
	}
	
	
	#flashcontent table {
		background: #ccc url(../img/bgDashedline.png) repeat 0 0;
		border: #b4b4b4 1px solid;
		color: #666;
		font: 12px/20px 'HVDComicSerifProRegular', Arial, sans-serif;
		padding: 0;
		position: absolute;
		right: 30px;
		text-shadow: 0 1px 0 #fff;
		top: 20px;
	}
	
	#flashcontent table td, #flashcontent table th {
		line-height: 30px;
		padding: 0 5px;
		text-align: left;
	}
	
	#indicatorFirst,
	#indicatorSecond,
	#indicatorThird
	{
		height: 100px;
		position: absolute;
		width: 65px;
		background-repeat: no-repeat;
		background-position: center center;
	}
	
	#indicatorFirst { background-image: url(../img/bgIndicatorFirst.png); }
	#indicatorSecond { background-image: url(../img/bgIndicatorSecond.png); }
	#indicatorThird { background-image: url(../img/bgIndicatorThird.png); }
	
	#flashcontent .pos-1		{ top: 179px; left: 165px; z-index: 3;} /* charlottenburg */
	#flashcontent .pos-2		{ top: 190px; left: 341px; z-index: 4;} /* friedrichshain */
	#flashcontent .pos-3		{ top: 190px; left: 482px; z-index: 4;} /* hellersdorf */
	#flashcontent .pos-4		{ top: 134px; left: 390px; z-index: 1;} /* hohenschoenhausen */
	#flashcontent .pos-5		{ top: 246px; left: 480px; z-index: 6;} /* koepenick */
	#flashcontent .pos-6		{ top: 190px; left: 282px; z-index: 4;} /* kreuzberg */
	#flashcontent .pos-7		{ top: 190px; left: 375px; z-index: 4;} /* lichtenberg */
	#flashcontent .pos-8		{ top: 190px; left: 440px; z-index: 4;} /* marzahn */
	#flashcontent .pos-9		{ top: 179px; left: 265px; z-index: 3;} /* mitte */
	#flashcontent .pos-10	{ top: 246px; left: 319px; z-index: 6;} /* neukoelln */
	#flashcontent .pos-11	{ top: 134px; left: 282px; z-index: 1;} /* pankow */
	#flashcontent .pos-12	{ top: 152px; left: 292px; z-index: 2;} /* prenzlauerberg */
	#flashcontent .pos-13	{ top: 134px; left: 172px; z-index: 1;} /* reinickendorf */
	#flashcontent .pos-14	{ top: 212px; left: 224px; z-index: 5;} /* schoeneberg */
	#flashcontent .pos-15	{ top: 212px; left: 38px; z-index: 5;} /* spandau */
	#flashcontent .pos-16	{ top: 246px; left: 194x; z-index: 6;} /* steglitz */
	#flashcontent .pos-17	{ top: 246px; left: 262px; z-index: 6;} /* tempelhof */
	#flashcontent .pos-18	{ top: 179px; left: 225px; z-index: 3;} /* tiergarten */
	#flashcontent .pos-19	{ top: 246px; left: 419px; z-index: 6;} /* treptow */
	#flashcontent .pos-20	{ top: 152px; left: 223px; z-index: 2;} /* wedding */
	#flashcontent .pos-21	{ top: 134px; left: 331px; z-index: 1;} /* weissensee */
	#flashcontent .pos-22	{ top: 212px; left: 165px; z-index: 5;} /* wilmersdorf */
	#flashcontent .pos-23	{ top: 246px; left: 100px; z-index: 6;} /* zehlendorf */
	
	/* headline styling */

	.banderole {
		background: url(../img/bgHeadlineBanner.png) 0 0;
		color: white;
		font: 14px/40px 'HVDComicSerifProRegular', Arial, sans-serif;
		margin-bottom: -10px;
		margin-right: 170px;
		padding: 0 30px;
		position: relative;
		text-shadow: 0 1px 0 #000;
		top: -20px;
		zoom: 1;  /* IE haslayout fix */
	}

	.star {
		background: url(../img/bgStar.png) no-repeat 0 center;
		display: inline-block;
		height: 30px;
		margin: 0 20px;
		position: relative;
		top: -2px;
		vertical-align: middle;
		width: 30px;
	}
	
	/* intro */
	
	.intro { margin: 20px 50px 30px 50px; }
	.intro p { font-size: 12px; }
	
	/* teasers in #maincontent */

	body#start .col {
		float: left;
		margin: 0 0 0 0px;
		width: 322px;
	}
	
	#teasers .teaser,
	.trophies .trophy
	{
		display: inline;
		float: left;
		margin: 0 0 15px 10px;
		position: relative;
		width: 310px;
	}

	#teasers .teaser .inner,
	.trophies .trophy .inner
	{
		height: 130px;
		height: auto !important;
		margin-bottom: -10px;
		margin-top: 70px;
		min-height: 130px;
		width: 310px;
	}

	.trophies .trophy .inner{
		height: 110px;
		height: auto !important;
		min-height: 110px;
		margin-top: 0;
	}

	.teaser h3 {
		color: #fff;
		font: bold 11px/1.3 Verdana, Arial, sans-serif;
		margin-right: 160px;
		text-align: left;
		text-shadow: none;
		text-transform: uppercase;
	}
	
	#teasers .teaser p,
	.trophies .trophy p
	{
		padding: 0 0 50px 0;
		margin-right: 160px;
		color: white;
	}
	
	.trophies .trophy p
	{
		padding: 0;
		line-height: 14px;
	}

	
	#teasers .teaser img,
	.trophies .trophy img
	{
		position: absolute;
	}

	.trophies .trophy img {
		left: 2px;
		top: 20px;
	}
	
	/* game teaser */
	
	#teasers .teaser { background: url(../img/bgTeaserGame.jpg) no-repeat 0 0; }
	#teasers .teaser .inner { background: url(../img/bgTeaserGame.jpg) no-repeat 0 bottom; }

	#teasers .teaser h2 {
		height: 52px;
		left: 12px;
		overflow: hidden;
		position: absolute;
		text-indent: -9999px;
		top: 20px;
		width: 179px;
	}
	
	#game-1 h2 { background: url(../img/teaserHlGame-1.png) no-repeat 0 0; }
	#game-2 h2 { background: url(../img/teaserHlGame-2.png) no-repeat 0 0; }
	#game-3 h2 { background: url(../img/teaserHlGame-3.png) no-repeat 0 0; }
	#game-4 h2 { background: url(../img/TeaserHIKiezTipper.png) no-repeat 0 0; margin-top: -3px;}
	
	#teasers .teaser p {
		color: #000;
		padding: 0 0 35px 0;
	}

	#teasers .teaser h3 {
		color: black;
	}

	#teasers .teaser .gamePreview {
		position: static;
		background: url(../img/bgGameTitle.png) no-repeat 0 0;
		margin: 5px 0 10px 15px;
		padding: 14px 10px 10px 10px;
		height: 168px;
		width: 250px;
	}

	#teasers #game-1 p, #teasers #game-1 h3, #teasers #game-2 p, #teasers #game-2 h3, #teasers #game-3 p, #teasers #game-3 h3, #teasers #game-4 p, #teasers #game-4 h3{
	width: 250px;
	}
	
	#teasers #game-1 .btn,
	#teasers #game-2 .btn,
	#teasers #game-3 .btn,
	#teasers #game-4 .btn
	{
		bottom: 30px;
		left: 210px;
		position: relative;
	}
	
	/* Berliner des Tages */

	#teasers #berlinerdestages { background: url(../img/bgTeaserBerlinerdestages.jpg) no-repeat 0 0; }
	#teasers #berlinerdestages .inner { background: url(../img/bgTeaserBerlinerdestages.jpg) no-repeat 0 bottom; }

	#teasers #berlinerdestages h2 {
		background: url(../img/teaserHlBerlinerdestages.png) no-repeat 0 0;
		height: 52px;
		overflow: hidden;
		position: absolute;
		text-indent: -9999px;
		top: 15px;
		width: 179px;
	}
	
	#teasers #berlinerdestages p {
		margin-right: 150px;
		padding: 0 0 35px 0;
	}

	#teasers #berlinerdestages img {
		clip: rect(auto auto 145px auto);
		top: -55px;
		left: 40px;
	}

	#teasers #berlinerdestages .imgWrapper {
		background: url(../img/bgTeaserUserpic.png) no-repeat 0 0;
		height: 147px;
		position: absolute;
		right: -10px;
		top: 60px;
		width: 185px;
	}

	#teasers #berlinerdestages span {
		bottom: 35px;
		color: #fff;
		display: block;
		font: 14px/1 'HVDComicSerifProRegular', Arial, sans-serif;
		position: absolute;
		text-align: center;
		text-shadow: 0 1px 0 #000;
		width: 100%;
	}

	#wrapper #teasers #berlinerdestages .btn {
		bottom: 15px;
		left: 10px;
		position: absolute;
	}
	
	/* Hammerspiel */

	#teasers #hammerspiel { background: url(../img/bgTeaserHammerspiel.jpg) no-repeat 0 0; }
	#teasers #hammerspiel .inner { background: url(../img/bgTeaserHammerspiel.jpg) no-repeat 0 bottom; }

	#teasers #hammerspiel h2 {
		background: url(../img/teaserHlHammerspiel.png) no-repeat 0 0;
		height: 52px;
		left: 12px;
		overflow: hidden;
		position: absolute;
		text-indent: -9999px;
		top: 20px;
		width: 179px;
	}

	#teasers #hammerspiel p {
		margin-right: 100px;
		padding: 0 0 35px 0;
	}

	#teasers #hammerspiel h3 {
		color: black;
	}

	#teasers #hammerspiel img {
		bottom: 20px;
		right: 18px;
	}

	#teasers #hammerspiel .btn {
		bottom: 20px;
		left: 210px;
		position: absolute;
	}
	
	/* KiezTipper */

	#teasers #kieztipper { background: url(../img/bgTeaserKiezTipper.jpg) no-repeat 0 0; }
	#teasers #kieztipper .inner { background: url(../img/bgTeaserKiezTipper.jpg) no-repeat 0 bottom; }

	#teasers #kieztipper h2 {
		background: url(../img/TeaserHIKiezTipper.png) no-repeat 0 0;
		height: 52px;
		left: 12px;
		overflow: hidden;
		position: absolute;
		text-indent: -9999px;
		top: 12px;
		width: 179px;
		padding-right: 20px;
	}
	
	#teasers #kieztipper h3 {
		margin-right: 140px;
	}

	#teasers #kieztipper p {
		margin-right: 140px;
		padding: 0 0 45px 0;
	}

	#teasers #kieztipper img {
		position: absolute;
		top:40px;
		right: 0px;
	}

	#teasers #kieztipper .btn {
		bottom: 20px;
		left: 210px;
		position: absolute;
	}
	
	/* Sammle sie alle */

	#teasers #sammlesiealle { background: url(../img/bgTeaserSammlesiealle.jpg) no-repeat 0 0; }
	#teasers #sammlesiealle .inner { background: url(../img/bgTeaserSammlesiealle.jpg) no-repeat 0 bottom; }

	#teasers #sammlesiealle h2 {
		background: url(../img/teaserHlSammlesiealle.png) no-repeat 0 0;
		height: 52px;
		left: 12px;
		overflow: hidden;
		position: absolute;
		text-indent: -9999px;
		top: 20px;
		width: 179px;
		padding-right: 20px;
	}
	
	#teasers #sammlesiealle h3 {
		margin-right: 140px;
	}

	#teasers #sammlesiealle p {
		margin-right: 140px;
		padding: 0 0 45px 0;
	}

	#teasers #sammlesiealle img {
		position: absolute;
		top:20px;
		right: 0px;
	}

	#teasers #sammlesiealle .btn {
		bottom: 20px;
		left: 210px;
		position: absolute;
	}
	
	/* Doppler Effekt */

	#teasers #dopplereffekt { background: url(../img/bgTeaserDopplereffekt.jpg) no-repeat 0 0; }
	#teasers #dopplereffekt .inner { background: url(../img/bgTeaserDopplereffekt.jpg) no-repeat 0 bottom; }

	#teasers #dopplereffekt h2 {
		background: url(../img/teaserHlDopplereffekt.png) no-repeat 0 0;
		height: 52px;
		left: 12px;
		overflow: hidden;
		position: absolute;
		text-indent: -9999px;
		top: 20px;
		width: 179px;
	}

	#teasers #dopplereffekt p {
		margin-right: 110px;
		padding: 0 0 35px 0;
	}

	#teasers #dopplereffekt img {
		top: 50px;
		right: 2px;
	}

	#teasers #dopplereffekt .btn {
		bottom: 20px;
		left: 30px;
		position: absolute;
	}

	#fbfanbox a:hover{
	  text-decoration: none;
	}
	#fbfanbox{
	  border: 0px none !important;
	  background: none !important;
	}

	/* ranking table */

	#score {
		background: url(../img/bgTablebottom-445.png) no-repeat 0 bottom;
		display: inline;
		float: left;
		margin-left: 5px;
		padding-bottom: 60px;
		position: relative;
		width: 445px;
	}

	body#games #score {
		width: 305px;
		padding-bottom: 60px;
		background: url(../img/bgTablebottom-305.png) no-repeat 0 bottom;
		display: inline;
		float: left;
		margin-left: 25px;
		position: relative;
	}
	
	body#ranking #score {
		margin-left: 20px;
		top: -25px;
	}

	body#highscore #score {
		background: url(../img/bgTablebottom-465.png) no-repeat 0 bottom;
		width: 465px;
	}

	body#profile #score {
		margin-left: 10px;
	}
	
	#score .inner {
		background: #ccc;
		border: #b4b4b4 1px solid;
		padding: 5px;
	}

	body#games #score .inner { width: 293px; }

	body#games #score .tableCaption {
		background: url(../img/bgTableCaption-305.png) no-repeat 0 0;
		padding: 10px 0 5px 0;
	}

	body#games #score .btn {
		bottom: 25px;
		position: absolute;
		right: 10px;
	}
	
	#score table a { color: #333; }
	#score table a:hover { text-decoration: none; }

	.tableCaption h3 {
		text-align: left;
	}

	#score .tableCaption {
		background: url(../img/bgTableCaption-445.png) no-repeat 0 0;
		padding: 10px 0 5px 0;
	}

	body#highscore #score .tableCaption {
		background: url(../img/bgTableCaption-465.png) no-repeat 0 0;
	}
	
	body#highscore #score .tableCaption  p{
		width: 400px;
	}
	
	body#ranking #score .tableCaption  p{
		width: 380px;
	}
	
	body#games .tableCaption2 {
		background: url(../img/bgTableCaption-616.png) no-repeat 0 0;
		margin-top: 10px;
		margin-left: 12px;
		padding: 10px 0;
	}
	
	body#games .tableCaption2 h3 {
		text-align: left;
	}
	
	#updateMsg, #updateMsg2{
	background: url(../img/updateMsg.png) no-repeat 0 0;
	width: 82px;
	height:81px;
	text-indent: -99999px;
	position: absolute;
	}
	
	#updateMsg{
	left: 382px;
	top: 1px;
	}
	
	#updateMsg2{
	left: 362px;
	top: 1px;
	}

	#score table {
		background: url(../img/bgDashedline.png) repeat 0 0;
		color: #666;
		font: 12px/40px 'HVDComicSerifProRegular', Arial, sans-serif;
		text-shadow: 0 1px 0 #fff;
		width: 100%;
	}
	
	.betdata table {
		background: #cccccc url(../img/bgDashedline-616.png) repeat 0 0;
		color: #666;
		font: 12px/40px 'HVDComicSerifProRegular', Arial, sans-serif;
		text-shadow: 0 1px 0 #fff;
		width: 616px;
		margin-left: 12px;
		border: 1px solid #b4b4b4;
		margin-top: -10px;
		padding-bottom: 10px;
	}
	
	.betdata td, .betdata th{
		padding: 0 8px;
	}
	
	.betdata table img {
		margin-top: 0px;
		vertical-align: middle;
	}
	
	.betflagright{
	margin-left: 5px;
	}
	
	.betflagleft{
	margin-right: 5px;
	}
	
	table tr th:first-child,
	table tr td:first-child
	{
		width: 50px;
	}

	table td img {
		margin-top: 1px;
		vertical-align: top;
	}
	
	
	.marked td {
		background: url(../img/bgRowMarked.png) no-repeat -5px 2px;
		color: #343434;
	}

	.marked td.first { background-position: 0 2px; }
	.marked td.last { background-position: right 2px; }

/* - - - - - --7-- pages - - - - - */

	/* --7 a-- page: about */

	#about .about {
		margin: 0 10px 20px 5px;
		overflow: hidden;
		padding-top: 10px;
		width: 625px;
	}

	#about .left{
		background: url(../img/bgStripesLeft.png) no-repeat center 10px;
	}

	#about .right{
		background: url(../img/bgStripesRight.png) no-repeat center 10px;
	}

	#about .left img,
	#about .right img
	{
		background: url(../img/bgAboutPic.png) no-repeat 0 0;
		padding: 20px;
	}

	#about .left img {
		float: right;
		margin: -10px 5px 0 0;
	}

	#about .right img {
		float: left;
		margin: -10px 0 0 7px;
	}

	#about .inner .inner{
		margin: 0;
		padding: 0;
		width: 360px;
		background: none;
	}

	#about .right .inner h3,
	#about .right .inner h4 {
		text-align: right;
		margin-right: 0;
	}
	
	#about .inner h3 { margin-bottom: 10px; }

	#about .left .inner h3 {
		text-align: left;
	}

	#about .inner .inner h4 {
		margin:0 0 10px 15px;
		font: 12px/1 'HVDComicSerifProRegular', Arial, sans-serif;
		text-shadow: 0 1px 0 #fff;
		color: #666;
	}

	#about .inner .inner p {
		text-align: justify;
		margin-right: 0;
		line-height: 1.5;
	}

	/* --7 b-- page: games */

	body#games .col {
		float: left;
		margin: 0 0 0 5px;
		width: 322px;
	}

	.gameTeaser,
	.gameManual {
		background: url(../img/bgGameCover.png) no-repeat 0 bottom;
		border-top: #bfbfbf 1px solid;
		margin: 5px 0 15px 0;
		padding-bottom: 60px;
		position: relative;
		width: 300px;
	}

	.gameTeaser img,
	.gameManual img {
		background: url(../img/bgGameTitle.png) no-repeat 0 0;
		margin: 5px 0 0 15px;
		padding: 14px 10px 10px 10px;
	}

	.gameTeaser h3,
	.gameTeaser h4,
	.gameManual h3,
	.gameManual h4 {
		text-align: left;
	}

	.gameTeaser h4,
	.gameManual h4 {
		margin:0 0 10px 15px;
		font: 12px/1 'HVDComicSerifProRegular', Arial, sans-serif;
		text-shadow: 0 1px 0 #fff;
		color: #666;
	}
	
	.gameManual table {
		background: #fafafa;
		margin: 10px 15px;
		width: 270px;
	}
	
	.gameManual table td {
		border-bottom: #eee 1px solid;
		font-size: 11px;
	}
	
	.gameManual ul {
		margin: 10px 15px 0 15px;
	}
	
	.gameManual li {
		margin: 0 0 10px 0;
		list-style: none;
		margin-left: 20px;
		font-size: 11px;
	}

	.gameTeaser .btn {
		bottom: 21px;
		position: absolute;
		right: 10px;
	}

	.gameBadge{
		height: 186px;
		left: -10px;
		overflow: hidden;
		position: absolute;
		text-indent: -9999px;
		top:  -10px;
		width: 167px;
		cursor: pointer;
	}

	.x2 { background: url(../img/GameBadge_x2.png) no-repeat 0 0; }

	/* bilder fehlen noch!
	.x3 { background: url(../img/GameBadge_x3.png) no-repeat 0 0; }
	.x4 { background: url(../img/GameBadge_x4.png) no-repeat 0 0; }
	.x5 { background: url(../img/GameBadge_x5.png) no-repeat 0 0; }
	*/

	.gameManual.left {
		margin: 1px 0 0 10px;
	}
	
	.gameManual.left strong{
		font-weight: bold;
	}
	
	.gamehelp{
	margin: 0 !important;
	padding: 0 !important;
	}
	
	/* --7 c-- page: profile */

	#userPic {
		background: url(../img/bgUserPic.png) no-repeat 0 0;
		float: left;
		height: 315px;
		margin-left: 20px;
		position: relative;
		width: 250px;
	}

	#bubbleSlogan {
		background: url(../img/bgBubble.png) no-repeat 0 0;
		height: 115px;
		position: absolute;
		right: -20px;
		top: 20px;
		width: 130px;
		z-index: 3;
	}
	
	.txtcenter1{
		display: table-cell;
		vertical-align: middle;
		height: 100px;
		text-align:center;
	}

	#bubbleSlogan p {
		color: #666;
		font: 11px/1.3 'HVDComicSerifProRegular', Arial, sans-serif;
		margin: 15px 10px;
	}

	#userPic img {
		left: 70px;
		position: absolute;
		top: 75px;
	}

	#userPic h3 {
		color: white;
		text-shadow: 0 1px 0 #000;
	}

	#userStats {
		background: url(../img/bgUserStats.png) no-repeat 0 bottom;
		border-top: #bfbfbf 1px solid;
		float: right;
		margin-right: 20px;
		overflow: hidden;
		padding-bottom: 20px;
		width: 325px;
	}

	#userStats h3,
	#userStats h4
	{
		background: url(../img/bgDashedline.png) repeat 0 bottom;
		margin: 0 5px;
	}

	#userStats h4 {
		color: #666;
		font: 12px/1.3 'HVDComicSerifProRegular', Arial, sans-serif;
		margin: 0 5px;
		padding: 5px 0;
		text-align: center;
		text-shadow: 0 1px 0 #fff;
	}

	#userStats #stats_1,
	#userStats #stats_2
	{
		color: #333;
		font: 11px/11px 'HVDComicSerifProRegular', Arial, sans-serif;
		margin-top: 10px;
		text-shadow: 0 1px 0 #fff;
	}

	#userStats #stats_1 td.first {
		background-image: none;
		width: 115px;
	}

	#userStats #stats_1 td { background: url(../img/bgRowMarked.png) no-repeat 0 2px; }
	#userStats #stats_1 td.last { background: url(../img/bgRowMarked.png) no-repeat right 2px; }
	
	#userStats td strong {
		color: #666;
		font-weight: normal;
	}

	.cell_small {
		background: url(../img/bgRowMarked.png) no-repeat right -57px;
		width: 55px;
	}

	.cell_medium {
		background: url(../img/bgRowMarked.png) no-repeat right -27px;
	}

	#userStats #stats_2 tr td:first-child {
		width: 215px;
	}
	
	#btnToTrophies {
		position: absolute;
		bottom: 20px;
		left: 85px;
	}

	body#profile #score .btn {
		bottom: 20px;
		position: absolute;
		right: 10px;
	}

	.trophies {
		margin-left: 5px;
		overflow: hidden;
		width: 650px;
	}

	#wrapper .trophies .trophy {
		background: url(../img/bgTrophy.jpg) no-repeat 0 bottom;
		float: left;
		margin: 5px 15px 10px 5px;
		padding-bottom: 50px;
		position: relative;
		width: 305px;
	}

	.trophies .trophy h3,
	.trophies .trophy p
	{
		color: #333;
		margin: 0;
		padding-left: 150px;
	}
	
	.trophies .trophy p {
		padding-top: 1px;
		padding-right: 15px;
	}
	
	.trophies .trophy h3 {
		padding-top: 5px;
	}

	.trophies .trophy h3 {
		font: 13px/30px 'HVDComicSerifProRegular', Arial, sans-serif;
		text-align: left;
		text-shadow: 0 1px 0 #fff;
	}

	.trophies .trophy p{
		margin: 0;
	}

	.trophy .inner{
		background: url(../img/bgTrophy.jpg) no-repeat 0 top;
		padding-top: 20px;
	}
	
	#bubbleFacebook {
		background: url(../img/bgFbBubble.png) no-repeat 200px top;
		clear: both;
		height: 100px;
		margin-top: 60px;
		overflow: hidden;
		position: relative;
		width: 100%;
	}
	
	#bubbleFacebook p {
		font: 13px/30px 'HVDComicSerifProRegular', Arial, sans-serif;
		left: 200px;
		position: absolute;
		top: 10px;
	}
	
	#bubbleFacebook #fbButton {
		bottom: 0;
		left: 50%;
		margin-left: -30px;
		position: absolute;
	}
	
	/* --7 d-- page: register */
	
	.formstep {
		position: relative;
	}
	
	#wrapper .formstep .inner {
		background: url(../img/bgFormstep.png) no-repeat 5px bottom;
		padding-bottom: 80px;
	}
	
	#choosekiez {
		overflow: hidden;
		width: 100%;
	}

	#kiezMap {
		margin: 0 15px;
		position: relative;
		text-align: center;
	}
	
	#kiezlist {
		width: 600px;
		overflow: hidden;
		margin: 0 5px;
		padding: 15px;
		background: #ccc;
	}
	
	#kiezlist label {
		font-size: 10px;
		line-height: 30px;
		text-align: left;
		text-shadow: 0 1px 0 #fff;
		color: #444;
		margin: 0;
		padding: 0;
	}

	#choosekiez fieldset {
		float: left;
		width: 150px;
	}

	#choosekiez fieldset p {
		background: #fff;
		background: url(../img/bgKiezBtn.png) no-repeat 0 0;
		cursor: pointer;
		height: 30px;
		line-height: 30px;
		margin: 0;
		padding: 0 5px 0 30px;
	}
	
	#choosekiez fieldset p.hover { background-position: -150px 0; }
	#choosekiez fieldset p.selected { background-position: -300px 0; }

	.kiezFlag {
		background: url(../img/kiezFlag.png) no-repeat 0 0;
		height: 60px;
		position: absolute;
		width: 60px;
	}

	.kiezFlag.selected {
		background-position: 0 -60px;
	}
	
	/* no js */
	.noJs #choosekiez fieldset p { position: relative; }
	.noJs #choosekiez fieldset p input { position: absolute; top: -2px; left: 6px; }

	/* coordinates for kiezes */

	.pos-1		{ top: 50px; left: 196px; } /* charlottenburg */
	.pos-2		{ top: 65px; left: 315px; } /* friedrichshain */
	.pos-3		{ top: 65px; left: 443px; } /* hellersdorf */
	.pos-4		{ top: 30px; left: 362px; } /* hohenschoenhausen */
	.pos-5		{ top: 130px; left: 490px;} /* koepenick */
	.pos-6		{ top: 72px; left: 274px; } /* kreuzberg */
	.pos-7		{ top: 70px; left: 363px; } /* lichtenberg */
	.pos-8		{ top: 52px; left: 395px; } /* marzahn */
	.pos-9		{ top: 57px; left: 277px; } /* mitte */
	.pos-10		{ top: 108px; left: 310px;} /* neukoelln */
	.pos-11		{ top: 12px; left: 282px; } /* pankow */
	.pos-12		{ top: 47px; left: 295px; } /* prenzlauerberg */
	.pos-13		{ top: 24px; left: 187px; } /* reinickendorf */
	.pos-14		{ top: 84px; left: 236px; } /* schoeneberg */
	.pos-15		{ top: 55px; left: 116px; } /* spandau */
	.pos-16		{ top: 111px; left: 200px;} /* steglitz */
	.pos-17		{ top: 108px; left: 267px;} /* tempelhof */
	.pos-18		{ top: 60px; left: 237px; } /* tiergarten */
	.pos-19		{ top: 105px; left: 359px;} /* treptow */
	.pos-20		{ top: 38px; left: 253px; } /* wedding */
	.pos-21		{ top: 17px; left: 320px; } /* weissensee */
	.pos-22		{ top: 79px; left: 148px; } /* wilmersdorf */
	.pos-23		{ top: 111px; left: 100px;} /* zehlendorf */

	#choosecharacter {
		overflow: hidden;
		width: 100%;
	}
	
	#characterlistWrapper {
		background: url(../img/bgCharacterlistWrapper.png) no-repeat center bottom;
	}
	
	#characterlist {
		width: 600px;
		margin: 0 20px;
		padding: 0 !important;
		background-position: fixed;
	}

	body#register #characterlist .inner {
		overflow: auto;
		width: 6050px;
		background: none;
		padding-bottom: 20px;
	}

	#choosecharacter #characterlist p {
		background: url(../img/bgCharacterBtn.png) no-repeat 0 110px;
		float: left;
		height: 330px;
		margin: 0 0 -10px 0;
		width: 150px;
		text-align: center;
		cursor: pointer;
	}
	
	#choosecharacter #characterlist p img {
		margin-top: 30px;
	}
	
	#characterlist p label {
		text-align: center;
		display: block;
		margin: 0 10px;
	}

	#choosecharacter #characterlist p.hover { background-position: -150px 110px; }
	#choosecharacter #characterlist p.selected { background-position: -300px 110px; }

	#choosecharacter .pageBtnPrev,
	#choosecharacter .pageBtnNext
	{
		background: url(../img/btnPageswitch.png) no-repeat 0 0;
		display: block;
		height: 30px;
		position: absolute;
		top: 250px;
		width: 30px;
	}

	#choosecharacter .pageBtnPrev:link, #choosecharacter .pageBtnPrev:visited {
		background-position: -5px -125px;
		left: 0;
	}
	
	#choosecharacter .pageBtnNext:link, #choosecharacter .pageBtnNext:visited {
		background-position: -5px -5px;
		right: 10px;
	}
	
	#choosecharacter .pageBtnPrev:hover { background-position: -5px -165px; }
	#choosecharacter .pageBtnNext:hover { background-position: -5px -45px; }
	#choosecharacter .pageBtnPrev:active { background-position: -5px -205px; }
	#choosecharacter .pageBtnNext:active { background-position: -5px -85px; }
	
	#wrapper .formstep .btn {
		position: relative;
		left: 275px;
		top: 40px;
		margin: 0;
		cursor: pointer;
	}
	
	 /* no JS */
	.noJs #characterlist { overflow: auto; }
	.noJs #characterlist label { display: none; }
	.noJs #characterlist p { position: relative; }
	.noJs #characterlist p input { position: absolute; bottom: 8px; left: 65px; }
	.noJs #characterlist p img { position: relative; top: 15px; }
	
	body#register #enterdata .inner .inner {
		background: #ccc;
		margin: 0 5px;
		width: auto;
		padding-bottom: 0;
	}
	
	#wrapper .formstep input.inputTxt {
		width: 270px;
		background-position: 0 -60px;
	}
	
	#wrapper .formstep input.inputTxt:focus	{
		background-position: 0 -90px;
	}
	
	body#register #enterdata input.inputTxt,
	body#register #enterdata label { float: left; }
	
	body#register #enterdata label {
		width: 180px;
		text-align: left;
		margin-left: 20px;
		text-shadow: 0 1px 0 #fff;
		color: #444;
	}
	
	body#register #enterdata label em {
		color: #666;
		display: block;
		font-style: normal;
		padding-top: 5px;
	}
	
	body#register #enterdata fieldset {
		margin: 15px 5px;
		padding-bottom: 15px;
		background: url(../img/bgDashedline.png) repeat-x 0 bottom;
	}
	
	body#register #enterdata #legal { margin: 0 2px; }
	body#register #enterdata #legal p { margin-bottom: 25px; }
	body#register #enterdata #legal a { color: #333; }
	body#register #enterdata #legal a:hover { text-decoration: none; }
	
	body#register #enterdata #legal input {
		height: auto;
	}
	
	.fieldStatic {
		background: url(../img/bgInputs.png) no-repeat 0 -90px;
		color: #fff;
		display: block;
		font: 13px/27px Verdana, Arial, sans-serif;
		margin-left: 210px;
		padding: 0 5px;
		text-shadow: 0 1px 0 #000;
		width: 280px;
	}
	
	#wrapper #btnSubmit {
		background: url(../img/btnSubmit.png) no-repeat 0 0;
		bottom: 10px;
		font-size: 20px;
		height: 65px;
		left: 50%;
		line-height: 65px;
		margin-left: -80px;
		position: absolute;
		text-transform: uppercase;
		width: 150px;
	}
	
	#wrapper #btnSubmit:hover { background-position: 0 -70px; }
	#wrapper #btnSubmit:active { background-position: 0 -140px; }
	
	body#register #mainContent,
	body#ecard #mainContent
	{
		padding-bottom: 80px;
	}
	
	/* --7 e-- page: ecard */
	
	/* ecard images */
	.ecardImg-1 { background-image: url(../img/ecards/ecard_1.jpg); }
	.ecardImg-2 { background-image: url(../img/ecards/ecard_2.jpg); }
	.ecardImg-3 { background-image: url(../img/ecards/ecard_3.jpg); }
	.ecardImg-4 { background-image: url(../img/ecards/ecard_4.jpg); }
	
	ul#ecardBackground {
		background-color: #ccc;
		display: block;
		margin: 10px 6px;
		overflow: hidden;
		padding: 10px 0 10px 30px;
	}
	
	ul#ecardBackground li {
		display: block;
		float: left;
		height: 88px;
		margin: 0 5px;
		overflow: hidden;
		padding: 12px 0 0 12px;
		width: 118px;
		background: url(../img/bgEcardBtn.png) no-repeat 0 -100px;
	}
	
	ul#ecardBackground li.hover { background: url(../img/bgEcardBtn.png) no-repeat 0 -200px; }
	ul#ecardBackground li.selected { background: url(../img/bgEcardBtn.png) no-repeat 0 0; }
	
	#ecardSelected {
		border: 2px solid #d8d8d8;
		height: 380px;
		margin: 15px 0 15px 18px;
		padding: 20px 0;
		position: relative;
		text-align: center;
		width: 598px;
	}
	
	#ecardCharacter {
		position: absolute;
		clip: rect(auto auto 180px auto);
		bottom: 45px;
		left: 200px;
	}
	
	#ecardBubble {
		background: url(../img/bgEcardBubble.png) no-repeat 0 0;
		height: 173px;
		left: 280px;
		padding: 20px 0 0 0;
		position: absolute;
		top: 40px;
		width: 222px;
		z-index: 2;
	}
	
	.txtcenter2{
		display: table-cell;
		vertical-align: middle;
		height: 100px;
		text-align:center;
	}
	
	#ecardBanderole {
		bottom: 20px;
		color: #fff;
		font: 16px/22px 'HVDComicSerifProRegular', Arial, sans-serif;
		position: absolute;
		text-shadow: 0 -1px 0 #000;
		width: 100%;
		text-align: center;
		left: -10px;
		}
	
	#ecardBubble p, ul#ecardSlogan p, ul#ecardSlogan label{
		color: black;
		font: 13px/18px 'HVDComicSerifProRegular', Arial, sans-serif;
		text-align: center;
		text-shadow: 0 1px 0 #fff;
		margin-top: 5px;
	}

	ul#ecardSlogan {
		display: block;
		background-color: #ccc;
		padding: 9px 0;
		padding-left: 7px;
		overflow: hidden;
		margin: 10px 6px;
	}
	
	ul#ecardSlogan li {
		background: url(../img/bgEcardSlogan.png) no-repeat 0 0;
		display: block;
		float: left;
		height: 86px;
		margin: 0 2px;
		overflow: hidden;
		padding: 6px 0 8px 2px;
		width: 148px;
	}
	
	.txtcenter3{
		display: table-cell;
		vertical-align: middle;
		height: 70px;
		text-align:center;
	}
	
	ul#ecardSlogan li.hover { background: url(../img/bgEcardSlogan.png) no-repeat 0 -100px; }
	ul#ecardSlogan li.selected { background: url(../img/bgEcardSlogan.png) no-repeat 0 -200px; }
	
	ul#ecardSlogan select {
		border: 1px solid #ccc;
		margin: 0 !important;
		display: block;
		position: relative;
		width: 100%;
	}
	
	#ecardSend {
		background: #fff;
		margin: 3px;
		margin: 15px 7px 15px 6px;
		position: relative;
		overflow: hidden;
	}
	
	#ecardSend .tile {
		background: url(../img/bgEcardSend.png) repeat-y 0 0;
		margin: 10px;
		padding: 10px 0 20px 270px;
		border: 2px solid #bebebe;
	}
	
	#ecardSend .tile img {
		position: absolute;
		left: 460px;
	}
	
	body#ecard #addressfield label, body#ecard #addressfield input, body#ecard #addressfield p.valMsg {
		margin-left: 0;
	}
	
	#addressfield {
		padding-top: 150px;
		position: relative;
	}
	
	#addressfield label {
		text-align: left;
	}
	
	#addressfield span {
		color: black;
		font: 13px/30px 'HVDComicSerifProRegular', Arial, sans-serif;
		text-shadow: 0 1px 0 #fff;
	}
	
	#addressfield fieldset {
		position: relative;
	}
	
	#addressfield .indicator {
		position: absolute;
		right: 0;
		top: 22px;
	}
	
	#addressfield  p.valMsg {
		clear: right;
		font-weight: bold;
		margin: 0 30px 10px 10px;
		padding: 5px 0 0 0;
		text-shadow: 0 1px 0 #fff;
		color: #666;
	}
	
	body#showEcard  #wrapper #mainContent .inner {
		background: url(../img/bgEcardShow.png) no-repeat 5px bottom;
		padding-bottom: 80px;
	}
	
	#ecardShowBtn {
		position: absolute;
		bottom: 40px;
		left: 200px;
	}
	
	#ecardShowBtn a {
		float: left;
		margin-right: 10px;
	}
	
	/* no js */
	.noJs ul#ecardBackground li, .noJs ul#ecardSlogan li { position: relative; }
	.noJs ul#ecardBackground li input, .noJs ul#ecardSlogan li input { position: absolute; top: -10px; left: 0; }
	
	/* --7 f-- password helper */
	
	
	#pwhelper #mainContent form { margin: 50px 160px; }
	#newpassword #mainContent form { margin: 50px 160px; }

	#pwhelper #mainContent .inputTxt { width: 270px; background-position: 0 -60px; }
	#pwhelper #mainContent .inputTxt:focus { background-position: 0 -90px; }
	
	#newpassword #mainContent .inputTxt { width: 270px; background-position: 0 -60px; }
	#newpassword #mainContent .inputTxt:focus { background-position: 0 -90px; }
	
	#pwhelper #mainContent fieldset {
		width: 320px;
		padding: 0;
		position: relative;
	}
	
	#newpassword  #mainContent fieldset {
		width: 320px;
		padding: 0;
		position: relative;
	}
	
	#pwhelper #mainContent form .indicator {
		position: absolute;
		top: 15px;
		right: 0;
		margin: 0;
	}
	
	#newpassword #mainContent form .indicator {
		position: absolute;
		top: 15px;
		right: 0;
		margin: 0;
	}

	#pwhelper #mainContent .valMsg {
		width: 300px;
		margin: 0;
	}
	
	#newpassword #mainContent .valMsg {
		width: 300px;
		margin: 0;
	}

	#pwhelper #mainContent label {
		text-align: left;
	}
	
	#newpassword #mainContent label {
		text-align: left;
	}

	#pwhelper #mainContent .btn {
		margin-top: 10px;
		position: static;
	}
	
	#newpassword #mainContent .btn {
		margin-top: 10px;
		position: static;
	}
	
	/* --7 g-- pages: contact, imprint, legal  */
	
	body#contact p, body#contact h4,
	body#imprint p, body#imprint h4,
	body#legal p, body#legal h4
	{
		margin-left: 100px;
		margin-right: 100px;
	}
	
	body#contact .inner h4:first-child,
	body#imprint .inner h4:first-child,
	body#legal .inner h4:first-child
	{
		margin-top: 50px;
	}
	
	body#contact .inner p:last-child,
	body#imprint .inner p:last-child,
	body#legal .inner p:last-child
	{
		margin-bottom: 50px;
	}
	
	/* form validation */
	
	.indicator {
		background: url(../img/bgIndicator.png) no-repeat 0 0;
		display: block;
		height: 30px;
		overflow: hidden;
		padding: 0;
		text-indent: -9999px;
		width: 30px;
	}
	
	.indicator.error { background-position: 0 -30px; }
	.indicator.success { background-position: 0 0; }
	
	#choosekiez .indicator,
	#choosecharacter .indicator,
	#choosebackground .indicator
	{
		bottom: 40px;
		left: 50%;
		margin-left: -15px;
		position: absolute;
	}
	
	#enterdata .indicator {
		float: left;
	}
	
	p.valMsg {
		clear: left;
		font-weight: bold;
		margin: 0 200px 0 210px;
		padding: 5px 0 0 0;
		text-shadow: 0 1px 0 #fff;
		color: #666;
	}
	
	p.newsletterMsg {
		font-weight: bold;
		margin: -27px 25px 0 240px;
		padding: 0;
		text-shadow: 0 1px 0 #fff;
		color: #666;
	}
	
	input#newsletter{
	position: relative;
	left: 0px;
	top: -4px;
	}

	#optin {
		font: normal 12px/13px "Helvetica Neue", Helvetica, Arial, sans-serif;
		margin: 10px 25px 0 240px;
		padding: 0;
		color: #666;
	}
	
	#optin strong{
		font-weight: bold;
	}
	
	
	p.valMsg.error { color: #f00; }
	p.valMsg.success { color: #0f0; }
	
/* - - - - - --8-- links + buttons - - - - - */

.btn {
	background: url(../img/btnsPlain.png) no-repeat 0 0;
	color: #fff;
	display: block;
	font: 13px/27px 'HVDComicSerifProRegular', Arial, sans-serif;
	letter-spacing: 0;
	text-align: center;
	text-decoration: none;
	text-shadow: 0 1px 0 #000;
}

.btn.small { width: 60px; }
.btn.small.black, .btn.small.black:link, .btn.small.black:visited { background-position: 0px -54px; }
.btn.small.black:hover { background-position: -60px -54px; }
.btn.small.black:active { background-position: -120px -54px ; }
.btn.small.red, .btn.small.red:link, .btn.small.red:visited { background-position: -360px 0px; }
.btn.small.red:hover { background-position: -420px 0px; }
.btn.small.red:active { background-position: -480px 0px; }

.btn.medium { width: 90px; }
.btn.medium.black, .btn.medium.black:link, .btn.medium.black:visited { background-position: 0px -27px; }
.btn.medium.black:hover { background-position: -90px -27px; }
.btn.medium.black:active { background-position: -180px -27px; }
.btn.medium.red, .btn.medium.red:link, .btn.medium.red:visited { background-position: -270px -27px; }
.btn.medium.red:hover { background-position: -360px -27px; }
.btn.medium.red:active { background-position: -450px -27px; }

.btn.big { width: 120px; }
.btn.big.black, .btn.big.black:link, .btn.big.black:visited { background-position: 0px 0px; }
.btn.big.black:hover { background-position: -120px 0px; }
.btn.big.black:active { background-position: -240px -0px; }
.btn.big.red, .btn.big.red:link, .btn.big.red:visited { background-position: -180px -54px; }
.btn.big.red:hover { background-position: -300px -54px; }
.btn.big.red:active { background-position: -420px -54px; }

.btn.paper1,
.btn.paper2
{
	background: url(../img/btnsPaper.png) no-repeat 0 0;
	color: #333;
	display: block;
	line-height: 50px;
	position: relative;
	text-align: center;
	text-decoration: none;
	text-shadow: 0 1px 0 #fff;
	width: 90px;
}

.paper1:link, .paper1:visited { background-position: 0px 0px; }
.paper1:hover { background-position: -90px 0px; }
.paper1:active { top: 1px; }
.paper1.selected { background-position: -180px 0px; color: #b70202; }

.paper2:link, .paper2:visited { background-position: 0px -50px; }
.paper2:hover { background-position: -90px -50px; }
.paper2:active { top: 1px; }
.paper2.selected { background-position: -180px -50px; color: #b70202; }

/* - - - - - --9-- system messages - - - - - */

#systemmessage {
	background: url(../img/bgSysmessage.png) no-repeat 0 bottom;
	margin: 40px 0 -5px 5px;
	width: 640px;
} 

#systemmessage .inner {
	background: url(../img/bgSysmessage.png) no-repeat 0 0;
	padding: 10px;
	position: relative;
	top: -40px;
}

#systemmessage h4 {
	font: 20px/60px 'HVDComicSerifProRegular', Arial, sans-serif;
	text-align: center;
	text-shadow: 0 1px 0 #fff;
}

#systemmessage p {
	text-shadow: 0 1px 0 #fff;
}

#systemmessage a { color: #333; }
#systemmessage a:hover { text-decoration: none; }


/* - - - - - --10-- ads - - - - - */

#wallpaper_rechts {
	z-index: 10;
	position: absolute !important;
	left: 795px !important;
	top: 90px !important;
}

#wallpaper_oben {
	margin: 0 0 0 10px;
}

/* override inline styles from generated banner content */

#wallpaper_rechts object,
#wallpaper_oben object {
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
}