@font-face {
    font-family: 'vonRalstarRegular';
    src: url('vonRalstar/vonralstar-regular-webfont.eot');
    src: url('vonRalstar/vonralstar-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('vonRalstar/vonralstar-regular-webfont.woff') format('woff'),
         url('vonRalstar/vonralstar-regular-webfont.ttf') format('truetype'),
         url('vonRalstar/vonralstar-regular-webfont.svg#vonRalstarRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

* {
	font-family: "Trebuchet MS", Symbol, serif;
}

html, body {
	padding: 0;
	margin: 0;
}

html {
	width: 100%;
	height: 100%;
}
body {
	width: 100%;
	height: 100%;
	color: #333;
	background-color: #FFF;
}
body.js {
	overflow: hidden;
	background: url(lines.png),url(paperbg.jpg);
	/*background: url(lines.png),url(cartboard.jpg);*/
}
	body * {
		color: #333;
	}
	
	/* ALGEMEEN */

	p {
		font-size: 14px;
		line-height: 21px;
		margin: 5px 0 15px 0;
	}

	strong {
		font-size: 18px;
		color: #F0A;
		font-weight: bold;
	}

	.content a, .content a * {	color: #1A386A; }
	a:hover, a:hover * {		color: #599CEE; }

	.content a[href^='#'], .content a[href^='#'] * {				color: #4C0039; }
	.content a[href^='#']:hover, .content a[href^='#']:hover * {	color: #C70096; }


	del {
		text-decoration: none;
		background: url(del.gif) 0 4px repeat-x;
	}

	.strike {
		text-decoration: line-through;
	}

	.clear {
		clear: both;
	}

	.error {
		font-weight: bold;
		color: red;
	}

	.scrollY {
		overflow: auto;
		overflow-x: hidden;
	}

	ul.nolist {
		list-style: none;
		margin: 0;
		padding: 0;
	}
		ul.nolist li {
			display: inline;
			font-size: 14px;
			line-height: 21px;
		}


	/* HEAD */
	div#header {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 90;
		background: url(bg.png) 0 0 repeat-x;
		min-height: 170px;
	}
	body.js div#header { display:none; }
		div#header div, div#header h1 {
			display: block;
			width: 395px;
			height: 100px;
			overflow: hidden;
			margin: 0 auto;
			padding: 0;
			background-color: #000;
		}
		div#header div { background-color: #000; }
		h1 { background: transparent url(logo.png) no-repeat; }
			h1 span { display: none; }


	/* COLOFON */
	
	ul#colofon {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		z-index: 50;
		list-style: none;
		margin: 0;
		color: #666;
		background-color: #FFF;
		text-align: center;
		font-size: 12px;
		line-height: 18px;
	}
	body.js ul#colofon {
		background-color: transparent;
		padding: 20px 0;
		bottom: auto;
		top: -100px;
		white-space: nowrap;
		opacity: 0;
	}
		ul#colofon li {
			display: inline;
			padding: 0 5px 0 5px;
		}
		ul#colofon li.logo {
			/*padding-right: 20px;*/
			/*background: url(littleLogo.png) center center no-repeat;*/
			position: relative;
			top: 3px;
			display: inline-block;
			width: 16px;
			height: 18px;
			padding: 0;
			background: #000 url(littleLogoInvert.png) center center no-repeat;
			/*opacity: .4;*/
		}
		ul#colofon li.name {
			font-size: 14px;
			font-weight: bold;
		}
			ul#colofon li a {
				text-decoration: none;
			}
		ul#colofon li span.icon {
			display: none;
			font-size: 14px;
			font-family: 'Iconic Stroke', sans;
		}

		@media all and (max-width:800px) {
			ul#colofon li span.icon {
				display: inline;
			}
			ul#colofon li span.text {
				display: none;
			}
			ul#colofon li.link {
				display: none;
			}
		}
		@media all and (max-height:560px) {
			table.about {
				display: none;
			}
			ul#pages li h3 {
				display: none;
			}
		}

		ul#colofon li.link {
			padding: 1px;
		}
			ul#colofon li.link a {
				position: relative;
				top: 2px;
				display: inline-block;
				width: 12px;
				height: 12px;
				font-size: .1px;
				line-height: 1px;
				background-repeat: no-repeat;
			}
				ul#colofon li.link a span {
					display: none;
				}
			ul#colofon li.wordpress a {		background-image: url(12/wordpress.png); }
			ul#colofon li.linkedin a {		background-image: url(12/linkedin.png); }
			ul#colofon li.twitter a {		background-image: url(12/twitter.png); }
			ul#colofon li.youtube a {		background-image: url(12/youtube.png); }
			ul#colofon li.filterforge a {	background-image: url(12/filterforge.png); }
			ul#colofon li.flickr a {		background-image: url(12/flickr-2.png); }
			ul#colofon li.qr a {			background-image: url(12/qr.png); }

	div#qr {
		display: none;
		position: absolute;
		bottom: 30px;
		right: 30px;
		width: 116px;
		height: 116px;
		background: url(qr.png) no-repeat;
	}

	/* MENU */

	#menutrigger {
		position: absolute;
		left: 180px;
		top: -30px;

		margin-left: -35px;
		
		width: 70px;
		height: 70px;
		overflow:  hidden;

		border-radius: 35px; -moz-border-radius: 35px; -webkit-border-radius: 35px;
		/*background-color: #FFF;*/
		-webkit-box-shadow: inset 0px 0px 16px 0px rgba(0, 0, 0, .3);
		-moz-box-shadow: inset 0px 0px 16px 0px rgba(0, 0, 0, .3);
		box-shadow: inset 0px 0px 16px 0px rgba(0, 0, 0, .1);

		/*font-family: 'Iconic Stroke', sans;*/
		font-family: vonRalstarRegular, sans; /*von Ralstar;*/
		font-size: 26px;
		line-height: 80px;
		text-align: center;
		/*text-shadow: 0 0 8px #C0B5A4;*/
		text-shadow: 0 0 8px rgba(255,255,255, .3);
		/*color: #EEEBE2;*/
		color: #C1BFBB;

		/*background: #000 url(littleLogoInvert.png) center center no-repeat;*/

		cursor: pointer;
	}

	body.js div#menuButton {
		position: absolute;
		left: -99px;
		top: -99px;
		width: 25px;
		height: 25px;
		margin: -12px 0 0 -12px;
		background: url(menuButton.png) center center no-repeat;
	}
	body.js div#menus {
		position: absolute;
		top: 0;
		left: 180px;
	}
		body.js div#menus div.shade {
			position: absolute;
			top: 0;
			-webkit-box-shadow: rgba(0,0,0,0.2) 0 0 16px 0;
			-moz-box-shadow: rgba(0,0,0,0.2) 0 0 16px 0;
			box-shadow: rgba(0,0,0,0.2) 0 0 16px 0;
			z-index: 590;
		}
		body.js a.home {
			position: relative;
			width: 200%;
			left: -100%;
			text-align: center;
			z-index: 610;
			display: block;
			margin: 0 auto;
			font-size: 15px;
			font-weight: bold;
			text-decoration: none;
			color: #999;
		}
			body.js a.home:hover {
				color: #599CEE;
			}
		ul#menu, ul#tagmenu {
			position: absolute;
			top: 20px;
			left: 40px;
			width: auto;
			z-index: 600;
			list-style: none;
			margin: 0;
			padding: 0;
		}
		ul#tagmenu {
			display: none;
			left: auto;
			right: 20px;
			text-align: right;
		}
		body.js ul#menu, body.js ul#tagmenu {
			display: block;
			position: absolute;
			top: 0;
			width: 130px;
			padding: 20px 0 5px 0;
			background-color: rgba(255,255,255,0.95);
		}
		body.js ul#menu {
			left: 0;
		}
		body.js ul#tagmenu {
			left: -130px;
			right: auto;
		}
			body.js ul#menu li {
				padding-left: 10px;
			}
			body.js ul#tagmenu li {
				padding-right: 10px;
			}
				ul#menu li a, ul#tagmenu li a {
					font-size: 14px;
					text-decoration: none;
					color: #999;
					cursor: pointer;
				}
				ul#menu li a:hover, ul#tagmenu li a:hover {
					color: #599CEE;
				}
				ul#menu li.selected a, ul#tagmenu li.selected a {
					color: #F0A;
				}
				ul#menu li.select, ul#tagmenu li.select {
					background-color: #DEE6F4;

					transition: background-color .3s linear;
					-moz-transition: background-color .3s linear;    /* FF3.7+ */
					-o-transition: background-color .3s linear;      /* Opera 10.5 */
					-webkit-transition: background-color .3s linear; /* Saf3.2+, Chrome */
				}
				body.js ul#menu li a, ul#tagmenu li a {
					font-size: 11px;
					line-height: 11px;
				}


	/* PAGES */
	
	ul#pages {
		list-style: none;
		padding: 0 0 40px 0;
	}
	body.js ul#pages {
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
		ul#pages>li.page {
			position: relative;
			display: block;
			width: 608px;
			margin: 80px auto 0 auto;
			padding: 140px 40px 0 40px;
			background-color: white;
		}
				ul#pages li div.fwasotd {
					display: none;
					width: 100px;
					height: 100px;
					position: absolute;
					top: -3px;
					left: -3px;
					z-index: 280;
					background: url(fwasotd.gif) no-repeat 0px 0px;
				}

		body.js ul#pages>li.page {
			position: absolute;
			display: block;
			/*max-height: 400px;*/
			margin: 0;
			padding: 0;
			-webkit-box-shadow: 0px 0px 16px rgba(0,0,0,0.5);
			-moz-box-shadow: 0px 0px 16px rgba(0,0,0,0.5);
			box-shadow: 0px 0px 16px rgba(0,0,0,0.5);
			cursor: pointer;
		}

		body.js ul#pages>li.page.center {
			cursor: default;
			/*max-height: none;*/
		}

			ul#pages>li.page h2, ul#pages>li.page h3 {
				/*font-family:  "CenturyGothicRegular", "Trebuchet MS", sans-serif;*/
				font-family: 'Comfortaa', cursive;
				font-weight: normal;
				font-size: 33px;
				line-height: 40px;
				color: #F0A;
				height: 50px;
				overflow: hidden;
				margin: 0 0 20px 0;
				padding: 0;
				z-index: 300;
			}
			ul#pages>li.page.center h2, ul#pages>li.page.center h3 {
				display: block;
			}
			body.js ul#pages>li.page h2, body.js ul#pages>li.page h3 {
				display: none;
				position: absolute;
				left: 0;
				top: -60px;
			}
			body.js ul#pages>li.page img {
				position: absolute;
				top: 0;
				left: 0;
				z-index: 200;
			}
			body.js ul#pages>li.page img.centerImg {
				z-index: 250;
				cursor: pointer;
			}
			body.js ul#pages>li.page table {
				display: none;
			}
			body.js ul#pages>li.page div.content {
				position: absolute;
				left: 1px;
				bottom: 1px;
				display: none;
				width: 566px;
				z-index: 500;
				/*padding: 10px 2px 0 8px;*/
				padding: 15px 20px;
				background-color: rgba(239,239,236,.95);
				border-top: 1px solid #999;
				opacity: 0;
			}

			body.js ul#pages>li.page.textonly div.content {
				display: block;
				position: relative;
				padding: 15px 20px;
				border: 0px;
				opacity: 1;
				left: 0;
				bottom: auto;
				width: 568px;
				background-color: transparent;
			}
				ul#pages>li p, ul#pages>li p * {
				/*ul#pages>li.textonly p, ul#pages>li.textonly p * {*/
					font-family: 'Goudy Bookletter 1911', serif;
					font-size: 16px;
					line-height: 26px;
				}

			ul#pages>li.page h4 {
				margin: 18px 0 0 0;
			}


				/* image counter */
				ul.imgcnt {
					display: none;
					position: absolute;
					margin: 0;
					padding:0;
					left: -20px;
					bottom: 2px;
				}
				body.js ul.imgcnt {

				}
					ul.imgcnt li, ul.imgcnt li a {
						display: block;
						width: 12px;
						height: 14px;
						margin: 0;
						padding: 0;
					}
						ul.imgcnt li a {
							padding-top: 2px;
							font-family: Verdana, sans-serif;
							font-size: 9px;
							line-height: 100%;
							font-weight: bold;
							text-decoration: none;
							text-align: center;
							color: #888;
							cursor: pointer;
						}
						ul.imgcnt li a:hover {
							color: #599CEE;
						}
						ul.imgcnt li.current a {
							background-color: #F0A;
							color: #fff;
						}
				
				table.about {
					padding: 10px 0 0 0;
				}
				body.js table.about {
					position: absolute;
					top: 100%;
				}
					table.about td,
					table.about td * {
						font-size: 11px;
						line-height: 15px;
					}
					table.about td {
						color: #777;
					}
					table.about td {
						padding-right: 5px;
					}
			body.js li.page div.info {
				position: absolute;
				top: 100%;
				right: 0;
				display: none;
				width: 15px;
				height: 15px;
				margin-top: 10px;
				background: #888 url(infoInvert.png);
				cursor: pointer;
			}
				body.js li.page div.info:hover {
					background-color: #F0A;
				}

.rotator {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 900;
	padding: 20px;
	margin: -70px 0 0 -70px;
	font-size: 140px;
	line-height: 140px;
	font-family: vonRalstarRegular, sans; /*von Ralstar;*/
	color: #F0A;
}