@font-face {
	font-family: '3D';
	src: url('../gfx/fonts/3Dumb-webfont.eot');
	src: local('☺'), url('../gfx/fonts/3Dumb-webfont.woff') format('woff'), url('../gfx/fonts/3Dumb-webfont.ttf') format('truetype'), url('../gfx/fonts/3Dumb-webfont.svg#webfont') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Kulminoituva';
	src: url('../gfx/fonts/kulminoituva-webfont.eot');
	src: local('☺'), url('../gfx/fonts/kulminoituva-webfont.woff') format('woff'), url('../gfx/fonts/kulminoituva-webfont.ttf') format('truetype'), url('../gfx/fonts/kulminoituva-webfont.svg#webfont') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Fraktur';
	src: url('../gfx/fonts/proclamate_heavy-webfont.eot');
	src: local('☺'), url('../gfx/fonts/proclamate_heavy-webfont.woff') format('woff'), url('../gfx/fonts/proclamate_heavy-webfont.ttf') format('truetype'), url('../gfx/fonts/proclamate_heavy-webfont.svg#webfont') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Punk';
	src: url('../gfx/fonts/quick_end_jerk-webfont.eot');
	src: local('☺'), url('../gfx/fonts/quick_end_jerk-webfont.woff') format('woff'), url('../gfx/fonts/quick_end_jerk-webfont.ttf') format('truetype'), url('../gfx/fonts/quick_end_jerk-webfont.svg#webfont') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Straight';
	src: url('../gfx/fonts/zero_and_zero_is-webfont.eot');
	src: local('☺'), url('../gfx/fonts/zero_and_zero_is-webfont.woff') format('woff'), url('../gfx/fonts/zero_and_zero_is-webfont.ttf') format('truetype'), url('../gfx/fonts/zero_and_zero_is-webfont.svg#webfont') format('svg');
	font-weight: normal;
	font-style: normal;
}

html, body {
	background: #000;
	color: #fff;
	font-family: "Helvetica", Arial, sans-serif;
	font-size: 12px;
	line-height: 140%;
	min-height: 100%;
	min-width: 100%;
	height: 100%;
	width: 100%;
	overflow: hidden;
}

#page {
	width: 100%;
	height: 100%;
	overflow: auto;
	position: absolute;
}

body.blog {
	background: #000 url('../gfx/backgrounds/background-blog.jpg') top right no-repeat fixed;
}

body.info {
	background: #000 url('../gfx/backgrounds/background-info.jpg') top right no-repeat fixed;
}

body.work {
	background: #000 url('../gfx/backgrounds/background-work.jpg') top right no-repeat fixed;
}

.clearfix:after {
	clear: both;
	content: " ";
	display: block;
	width: 0;
	height: 0;
	font-size: 0;
	line-height: 0;
	visibility: hidden;
}

.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}

.hidden {
	display: none !important;
}

.anchor {
	height: 0px !important;
}

.image_left {
	float: left;
	padding: 4px 8px 8px 0px;
}

.image_right {
	float: right;
	padding: 4px 0px 8px 8px;
}

.wrapper {
	padding: 0px 0px;
	margin: 0 0 0px 0;
}

.preview {
	opacity: 0.7;
}

#footer .wrapper {
	margin: 0;
}

/* normaler Content mit Galerie */
.content-images {
	padding: 5px 0px 5px 0px;
}

.content-text + .content-images {
	padding: 0px 0px 5px 0px;
}

.content-image {
	float: left;
	margin: 5px;
	width: 100px;
	height: 80px;
	display: block;
	padding: 5px;
	border: 1px solid #666;
	vertical-align: middle;
}

.content-image img {
	vertical-align: middle;
	display: block;
}

#content {
	padding: 20px 0 20px 0;
}

/* Startseite */
#entrance {
	width: 1000px;
	height: 715px;
	margin: 0 auto;
	padding: 0;
	background: #000 url('../gfx/backgrounds/background-home-wide.jpg') 0px 0px no-repeat;
}

#entrance.home {
	background-position: 0px 0px;
}

#entrance.blog {
	background-position: -1000px 0px;
}

#entrance.work {
	background-position: -2000px 0px;
}

#entrance.info {
	background-position: -3000px 0px;
}

#entrance a {
	display: block;
	position: relative;
	z-index: 3;
}

#entrance a.link-blog {
	width: 100px;
	height: 250px;
	top: 300px;
	left: 300px;
	background: transparent;
}

#entrance a.link-work {
	width: 100px;
	height: 250px;
	top: 50px;
	left: 520px;
	background: transparent;
}

#entrance a.link-info {
	width: 100px;
	height: 250px;
	top: -200px;
	left: 750px;
	background: transparent;
}

/* Blog */
.blog-teaser {
	width: 640px;
}

.teaser-meta {
	width: 140px;
	overflow: hidden;
	float: left;
	margin: 0 -5px 0 0;
}

.teaser-content {
	width: 480px;
	padding: 0px 0px 20px 20px;
	float: left;
	min-height: 230px;
}

.teaser-spacer-left {
	float: right;
	padding: 0 475px 0 0;
}

.teaser-spacer-right {
	float: right;
}

.teaser-content p {
	padding: 10px 20px 0px 0;
}

.yellow .teaser-content {
	background: #ff0;
}

.yellow .teaser-meta p {
	color: #ff0;
}

.white .teaser-content {
	background: #fff;
}

.white .teaser-meta p {
	color: #fff;
}

.teaser-meta p {
	padding: 0;
	background: #000;
	text-align: right;
	line-height: 2em;
	text-shadow: 2px 2px 2px #000;
}

.fraktur .teaser-meta p {
	font-family: "Fraktur", "Helvetica", Arial, sans-serif;
	font-size: 72px;
}

.punk .teaser-meta p {
	font-family: "Punk", "Helvetica", Arial, sans-serif;
	font-size: 72px;
	margin: 10px 0 0 0;
}

.kritzel .teaser-meta p {
	font-family: "Kulminoituva", "Helvetica", Arial, sans-serif;
	font-size: 72px;
	margin: -30px 0 0 0;
}

.day {
	font-size: 130px;
	display: block;
	margin: -10px 0 0 0;
}

.month {
	font-size: 72px;
	margin: -84px 0 0 0;
	display: block;
}

.year {
	font-size: 60px;
	display: block;
	margin: -105px 0 0 0;
}

.punk .teaser-content h3 {
	font-family: "Punk", "Helvetica", Arial, sans-serif;
	font-size: 24px;
	line-height: 28px;
	padding: 10px 0 5px 0;
	border-bottom: 10px solid #000;
}

.fraktur .teaser-content h3 {
	font-family: "Fraktur", "Helvetica", Arial, sans-serif;
	font-size: 28px;
	line-height: 32px;
	padding: 10px 0 5px 0;
	border-bottom: 10px solid #000;
}

.kritzel .teaser-content h3 {
	font-family: "Kulminoituva", "Helvetica", Arial, sans-serif;
	font-size: 28px;
	line-height: 32px;
	padding: 10px 0 5px 0;
	border-bottom: 10px solid #000;
}

.article-images {
	padding: 20px 10px 0px 10px;
}

.article-images .item {
	width: 200px;
/* 	height: 200px; */
/* 	overflow: hidden; */
/* 	float: left; */
	margin: 0 10px 10px 0px;
	display: inline-table;
	padding: 5px;
	border: 1px solid #000;
	vertical-align: top;
}

.article-images a {
	display: block;
}

.teaser-images {
	padding: 20px 10px 0px 0px;
}

.teaser-images .item {
	width: 100px;
	height: 100px;
	float: left;
	padding: 0 10px 10px 0px;
}

.blog-navigation {
	width: 500px;
	padding: 10px 0px 10px 135px;
}

.blog-navigation a {
	display: block;
	width: 35px;
	height: 33px;
}

.blog-navigation .older-link {
	float: left;
	background: #000 url('../gfx/blog-pfeile.png') 0px 0px no-repeat;
}

.blog-navigation .newer-link {
	float: right;
	background: #000 url('../gfx/blog-pfeile.png') -35px 0px no-repeat;
}

.blog-navigation a.older-link:hover {
	background: #000 url('../gfx/blog-pfeile.png') 0px -40px no-repeat;
}

.blog-navigation a.newer-link:hover {
	background: #000 url('../gfx/blog-pfeile.png') -35px -40px no-repeat;
}

/* Navigation */
#main-navigation ul {
	padding: 0;
	margin: 0;	
}

#main-navigation li {
	list-style: none;
	float: left;
}

#main-navigation li a {
	background: #000 url('../gfx/backgrounds/background-navigation.png') 0px 0px;
	display: block;
	height: 50px;
}

#main-navigation a.home {
	width: 475px;
	background-position: 0px 0px;
}

#main-navigation a.blog {
	width: 133px;
	background-position: -475px 0px;
}

#main-navigation a.work {
	width: 145px;
	background-position: -608px 0px;
}

#main-navigation a.info {
	width: 143px;
	background-position: -753px 0px;
}

#main-navigation a.home.active,
#main-navigation a.home:hover {
	background-position: 0px -50px;
}

#main-navigation a.blog.active,
#main-navigation a.blog:hover {
	background-position: -475px -50px;
}

#main-navigation a.work.active,
#main-navigation a.work:hover {
	background-position: -608px -50px;
}

#main-navigation a.info.active,
#main-navigation a.info:hover {
	background-position: -753px -50px;
}

#sub-navigation ul {
	padding: 0;
	margin: 0;
}

#sub-navigation li {
	list-style: none;
	font-size: 12px;
	line-height: 140%;
}

ul.info li {
	float: left;
	padding: 0px 10px 0 10px;
}

ul.info li a {
	font-size: 12px;
	line-height: 140%;
	color: #f0f;
	text-decoration: none;
	font-family: Arial, sans-serif;
}

ul.info li a:hover {
	color: #fff;
}

ul.tags li {
	float: left;
	padding: 0px 10px 0 10px
}

ul.tags li a {
	font-size: 12px;
	line-height: 140%;
	color: #0ff;
	text-decoration: none;
	font-family: Arial, sans-serif;
}

ul.tags li a:hover,
ul.tags li a.active {
	color: #fff;
}


ul.dates li {
	float: left;
	padding: 0px 10px 0 10px;
	color: #ff0;
}

ul.dates li a {
	font-size: 12px;
	line-height: 140%;
	color: #ff0;
	text-decoration: none;
	font-family: Arial, sans-serif;
}

ul.dates li a:hover,
ul.dates li a.active {
	color: #fff;
}

/* INFO */
.container-left {
	width: 400px;
	float: left;
}

.container-right {
	float: left;
}

.content-text-info {
	padding: 10px 0 0 0;
}

.content-text-info h2,
.content-text-info h3 {
	display: none;
}

.content-text-info p {
	font-family: "Straight", "Helvetica", Arial, sans-serif;
	background: transparent;
	color: #f0f;
	clear: both;
	padding: 14px 0 2px 0;
}


.content-text-info p strong {
	font-family: "Straight", "Helvetica", Arial, sans-serif;
	font-size: 42px;
	line-height: 46px;
	color: #f0f;
	background: #000;
	display: block;
	width: 390px;
	padding: 0 10px 0px 0px;
	float: left;
	text-align: right;
	font-weight: normal;
}

.content-text-info p em {
	font-family: "Straight", "Helvetica", Arial, sans-serif;
	font-size: 42px;
	line-height: 46px;
	color: #000;
	background: #f0f;
	font-style: normal;
	padding: 0px 15px;
}

.content-text-ich {
	background: #fff;
	padding: 0 0 10px 20px;
}

.content-text-ich h2 {
	font-family: "Kulminoituva", "Helvetica", Arial, sans-serif;
	font-size: 42px;
	line-height: 46px;
	padding: 5px 0 5px 10px;
	border-bottom: 10px solid #000;
}

.content-text-ich h2 {
	font-family: "Kulminoituva", "Helvetica", Arial, sans-serif;
	font-size: 24px;
	line-height: 28px;
	padding: 0px 20px 0px 10px;
}

.content-text-ich p {
	font-family: "Punk", "Helvetica", Arial, sans-serif;
	font-size: 18px;
	line-height: 22px;
	color: #000;
	text-transform: uppercase;
	padding: 10px 20px 10px 10px;
}

.content-text-kontakt {
	background: #f0f;
	width: 380px;
	padding: 0 20px 10px 0;
}

.content-text-kontakt h2 {
	font-family: "Fraktur", "Helvetica", Arial, sans-serif;
	font-size: 42px;
	line-height: 44px;
	padding: 10px 0 0px 20px;
	border-bottom: 10px solid #000;
}

.content-text-kontakt h3 {
	font-family: "Fraktur", "Helvetica", Arial, sans-serif;
	font-size: 24px;
	line-height: 28px;
	padding: 0px 0 0px 20px;
}

.content-text-kontakt p {
	font-size: 13px;
	font-weight: bold;
	padding: 10px 0px 5px 20px;
}

.content-text-referenzen {
	background: #fff;
	padding: 0 0 10px 20px;
}

.content-text-referenzen h2 {
	font-family: "Punk", "Helvetica", Arial, sans-serif;
	font-size: 28px;
	line-height: 32px;
	padding: 5px 0 5px 10px;
	border-bottom: 10px solid #000;
}

.content-text-referenzen h3 {
	font-family: "Punk", "Helvetica", Arial, sans-serif;
	font-size: 22px;
	line-height: 28px;
	padding: 0px 20px 0px 10px;
}

.content-text-referenzen p {
	font-family: "Punk", "Helvetica", Arial, sans-serif;
	font-size: 18px;
	line-height: 22px;
	color: #f0f;
	text-transform: uppercase;
	padding: 10px 20px 10px 10px;
}

.content-text-referenzen p a {
	text-decoration: none;
	color: #f0f;
	font-family: "Punk", "Helvetica", Arial, sans-serif;
	font-size: 18px;
	line-height: 22px;
}

.content-text-impressum {
	background: #f0f;
	width: 380px;
	padding: 0 20px 10px 0;
}

.content-text-impressum h2 {
	font-family: "Fraktur", "Helvetica", Arial, sans-serif;
	font-size: 42px;
	line-height: 44px;
	padding: 10px 0 0px 20px;
	border-bottom: 10px solid #000;
}

.content-text-impressum h3 {
	font-family: "Fraktur", "Helvetica", Arial, sans-serif;
	font-size: 24px;
	line-height: 28px;
	padding: 0px 0 0px 20px;
}

.content-text-impressum p {
	font-size: 13px;
	font-weight: normal;
	padding: 10px 0px 5px 20px;
}

/* Portfolio */
#portfolio {
	padding: 0 0 10px 0;
}

#portfolio a {
	float: left;
	display: block;	
	margin: 10px 10px 0px 0;
}

#portfolio a,
#portfolio a img {
	border: none;
	overflow: hidden;
}

#portfolio a:hover {
	border-top: 3px solid #0ff;
	border-right: 3px solid #0ff;
}

#portfolio a:hover img {
	margin: -3px -3px 0 0;
}