html {
	height:100%;
	font-size:14px;
	font-family:helvetica neue,helvetica,arial,sans-serif;
	background: #777 no-repeat;
	background-image:
	-webkit-gradient(
		linear,
		left top,
		right bottom,
		color-stop(0.33, #7b869a),
		color-stop(1, #aaa) 
	);
	background:
	-moz-linear-gradient(
		right bottom,
		#7b869a 33%,
		#aaa 100%
	);
	overflow:hidden;
}
body {
	width:800px;
	margin:75px auto 0 auto;
	position:relative;
	line-height:2em;
}
a, a:visited, a:active {
	color: black;
	text-decoration:none;
	-webkit-transition: color 0.25s ease-in-out;
}
a:hover,a:focus {
	background-color: #000;
	text-shadow: none;
	color:#c7fe2f;
}

.tags, .locality, .fn {
	font-weight:bold;	
}

#logo {
	position: absolute;
	width: 275px;
	height: 200px;
	left: 10px;
	top: 235px;
	color: transparent;
	z-index:1;	
	background:url(logo-img.png) no-repeat top left;
	
	/* prevent displaying selection block on mousedown */
	-moz-user-select: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
    user-select: none;	
}
	#logo h1 {
		position: relative;
		display: block;
		width: 275px;
		height: 200px;
		margin: 0;
		padding: 0;
		z-index: 0;
		cursor:pointer;
		background:url(logo-txt.png) no-repeat top left;
		-webkit-transform-origin: 222px 102px;
		
		/* prevent displaying selection block on mousedown */
		-moz-user-select: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		user-select: none;		
	}

#txtcontent {
	cursor:default;
    position:absolute;
    left: -50px;
    top: 0px;
	z-index:2;
}

	div#intro {
		color: #333;
		font-weight: normal;
		font-size: 1.8em;
		line-height: 1.45em;
		width: 325px;
		margin-top: 1px;
		padding: 0;
		text-align: right;
	}
	div#intro .tags, .locality, .fn {
		text-shadow: 1px 1px 1px #999;
	}
	div#intro .outdated {
		text-decoration: line-through;
	}
	
	div#aboutme {
		position:absolute;
		left: 350px;
		top: 0px;
		width: 380px;
		margin: 5px 40px;
		padding: 0;
		font-size: 1.45em;
		line-height:1.45em;
	}
		p#part1 {
			color:#ddd;
			display:inline;
			text-shadow: 1px 1px 1px #777;
		}
		p#part2 {
			color:#555;
			margin:0;
			font-style: italic;			
		}
		p#part3 {
			margin-top:0px;
			width: 400px;
			text-align: right;	
		}
		p#part4 {
			color:#ddd;
			width: 400px;
			text-shadow: 1px 1px 1px #777; 	
		}
		p#part5 {
			color:#555;
			width: 400px;			
		}
			p#part5 a {
				background-color: transparent;
			}

/* the fun stuff: webkit CSS3 animations */
@-webkit-keyframes heartbeat {
	from {-webkit-transform: scale(1,1) rotate(0.2deg);}
	25% {-webkit-transform: scale(1.01,1.005);}
	50% {-webkit-transform: rotate(-0.2deg) scale(1,1);}
	to {-webkit-transform: scale(1,1.005);}
}
.heartbeat {-webkit-animation: heartbeat 1s ease-in-out infinite normal;}

@-webkit-keyframes boing {
	from {-webkit-transform: rotate(25deg);}
	10% {-webkit-transform: rotate(-12deg);}
	20% {-webkit-transform: rotate(7deg);}
	30% {-webkit-transform: rotate(-4deg);}
	40% {-webkit-transform: rotate(2deg);}
	50% {-webkit-transform: rotate(-1deg);}  
	60% {-webkit-transform: rotate(0.5deg);}
	70% {-webkit-transform: rotate(-0.25deg);}
	80% {-webkit-transform: rotate(0.15deg);}
	90% {-webkit-transform: rotate(-0.05deg);}
	to {-webkit-transform: rotate(0deg);}
}
.boing {-webkit-animation: boing 1s ease-in-out 1;}