@charset "utf-8";
/* CSS Document */
/*******************************************************************/
/*Copyright 2011 Stefan Schmid-Gaiser ******************************/
/*******************************************************************/
* {
	margin: 0;
	padding: 0;
	border: 0;
	outline: none;
}

body {
	background-image:url(../Bilder/Stylesheet/bg_body2.jpg);
	background-repeat:repeat;	
}

a {
	text-decoration: none;
	color: #000;
	z-index: 99;
}

a:hover {
	text-decoration: none;	
}

ul {
	list-style-type: none;
}

h1, h1 a {
	font: normal 22px "Special Elite", Georgia, sans-serif;
}

h1 a:hover {
	color: #999;
}

h2, h2 a {
	font: normal 11px "American Typewriter", Georgia, sans-serif;	
	color: #999;
	margin-bottom: 20px;
}

h2 a:hover {
	color: #000;
}

#computer-rahmen {
	position: absolute;
	top:0px;
	left:50%;
	width: 1024px;
	height: 935px;
	background-image: url(../Bilder/Stylesheet/Rechner_NEU_iStock_000013319494Medium.png);
	background-repeat:no-repeat;
	margin-left:-512px; 	/*um die ganze Box in die Mitte zu setzen muss die Hälfte der Breite als negativer Außenabstand angegeben werden. (margin-left) */
	z-index: 1;
}

.power-button {
	position: absolute;
	display: block;
	top: 635px;
	left: 50%;
	width: 40px;
	height: 40px;
	margin-left: -15px;
	background: url(../Bilder/Stylesheet/power-button.png) 0px -40px no-repeat;
	text-indent: -999999px;
	color: #fff;
	z-index: 99;
}

.power-button:hover {
	background: url(../Bilder/Stylesheet/power-button.png) 0px 0px no-repeat;
}

#bildausschnitt {
	position:relative; 	/*relativ zum umschließenden !!positionierten Element der Seite. Oder Platz im Textfluss, an dem das Element wäre bleibt belegt. Das element wird nur relativ anders positioniert.*/
	top: 40px;			/*abhängig von Bild...*/
	left: 41px; 		/*abhängig von Bild...*/
	padding: 5px;
	width: 935px; /*Eigentliche Seite hat so nur 927px*/
	height: 523px;
	z-index: 2;
	font: 14px "Special Elite", "Lucida Sans", "Lucida Grande", arial, helvetica;
	text-shadow: 1px 1px 1px #fff;
	color: #000;
	background-color: #ffffff;
}

#content {
	position: absolute;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	background-color:#000;
	z-index: -2;
}

#karte {
	width: 300px;
	height: 220px;
	background: #fff url(../Bilder/Stylesheet/papierstruktur.jpg) 0px 0px repeat-x;
	margin: 165px 0 0 255px;
	padding-top: 25px;
	padding-right: 0;
	padding-bottom: 5px;
	padding-left: 140px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-moz-transform:rotate(-3deg);
	-webkit-transform:rotate(-3deg);
	/*-o-transform:rotate(-3deg);*/ /*Noch nicht ausreichend implementiert, es entstehen unschöne Striche*/
	transform:rotate(-3deg);
	overflow: hidden;
	-webkit-animation-name: slidingCard;
	-webkit-animation-duration: 2s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-direction: normal;
	-moz-animation-name: slidingCard;
	-moz-animation-duration: 2s;
	-moz-animation-iteration-count: 1;
	-moz-animation-direction: normal;
}
@-webkit-keyframes slidingCard {
	from {margin:165px 0 0 -3000px;}
	to {margin: 165px 0 0 255px;}
}
@-moz-keyframes slidingCard {
	from {margin: 165px 0 0 -3000px;}
	to {margin: 165px 0 0 255px;}
}

#information li {
	float: left;
	position: relative;
	background: url(../Bilder/Stylesheet/Linie_Karte.png) 0px center repeat-x;
	height: 30px;
	margin-right: 15px;
}
#information a:hover {
	color: #999;
}
#information span {
	position: absolute;
	bottom: 0px;
	font: normal 11px "American Typewriter", Georgia, sans-serif;	
	color: #999;
}

img.glas {
	position:absolute;
	top: 22px;
	left:222px;
	display:block;
	z-index:-1;
	-webkit-animation-name: brokenGlas;
	-webkit-animation-duration: 2.5s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-direction: normal;
	-moz-animation-name: brokenGlas;
	-moz-animation-duration: 2.5s;
	-moz-animation-iteration-count: 1;
	-moz-animation-direction: normal;
}
@-webkit-keyframes brokenGlas {
	from {-webkit-opacity: 0;}
	to {-webkit-opacity: 0;}
}
@-moz-keyframes brokenGlas {
	from {opacity:0.0;}
	to {opacity:0.0;}
}

img.pinnwandnagel {
	position:absolute;
	top: 100px;
	left:465px;
	display:block;
	z-index: 999999;
	-webkit-animation-name: slidingPin;
	-webkit-animation-duration: 2.5s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-direction: normal;
	-moz-animation-name: slidingPin;
	-moz-animation-duration: 2.5s;
	-moz-animation-iteration-count: 1;
	-moz-animation-direction: normal;
}
@-webkit-keyframes slidingPin {
	from {top: -1000px;	left: 465px;}
	to {top: 100px;	left:465px;}
}
@-moz-keyframes slidingPin {
	from {top: -1000px;	left: 465px;}
	to {top: 100px;	left:465px;}
}

.passbild {
	position:relative;
	left: -122px;
	top: -295px;
	width: 110px;
	height: 140px;
	padding: 0;
}

img.passbild:hover {
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; 	/*Internet Explorer IE8*/
	filter: alpha(opacity=70); 											/*für Internet Explorer 5-7*/
	-moz-opacity:0.70;													/*für Mozilla*/
	opacity:0.70;														/*CSS3*/
}

#information li.name {
	width: 290px;
	height: 40px;
}

.alter {
	clear: both;
	width: 25px;
	margin-top:25px;
}

.geschlecht {
	width: 45px;
	margin-top:25px;	
}

.land {
	width: 60px;
	margin-top:25px;	
}

.stadt {
	width: 100px;
	margin-top:25px;	
}

.beruf {
	clear: both;
	width: 275px;
	margin-top: 25px;
}

.unterschrift {
	clear: both;
	width: 275px;
	margin-top: 25px;
}

.unterschrift-bild {
	position: absolute;
	top: -10px;
}

li.unterschrift a:hover, img .unterschift:hover {
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; 	/*Internet Explorer IE8*/
	filter: alpha(opacity=70); 											/*für Internet Explorer 5-7*/
	-moz-opacity:0.70;													/*für Mozilla*/
	opacity:0.70;														/*CSS3*/
}

.stempel {
	clear:both;
	display: block;
	width: 90px;
	height: 90px;
	background: url(../Bilder/Stylesheet/stempel2.png) 0px 0px no-repeat;
	position: relative;
	top: -100px;
	left: -130px;
	text-indent: -999999px;
	z-index: 9999999;
}
#postit {
	position:absolute;
	font-family: 'Devonshire', Arial, Helvetica, sans-serif;
	font-weight:400;
	font-size: 20px;
	color: #03F;
	top: 600px;
	right: 25px;
	width: 160px;
	height: 160px;
	background-image: url(../Bilder/Stylesheet/postit.png);
	background-repeat: no-repeat;
	padding: 20px;
	overflow:hidden;
	-webkit-transform:rotate(7deg);
	-moz-transform:rotate(7deg);
	transform:rotate(7deg);
	-webkit-animation-name: slidingPostit;
	-webkit-animation-duration: 2s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-direction: normal;
	-moz-animation-name: slidingPostit;
	-moz-animation-duration: 2s;
	-moz-animation-iteration-count: 1;
	-moz-animation-direction: normal;
}
@-webkit-keyframes slidingPostit {
	from {top:600px;right:-1000px;}
	to {top:600px; right:25px;}
}
@-moz-keyframes slidingPostit {
	from {top:600px;right:-1000px;}
	to {top:600px; right:25px;}
}
#postit a {
	color:#03F;
}
#postit a:hover, #postit a:visited {
	font-weight:bold;
}