body{
	font-family: GroteMT, helvetica, arial, sans-serif;
	font-size: 1em;
	line-height: 1.2em;
	color: #b1b3b4;
	color: #9c9e9f;
	overflow: hidden;
	height: 100%;
}

body, html{
	height: 100%;
}

*{
	padding: 0;
	margin: 0;
	outline: none;
}

a, img{
	border: 0 none;
	color: #333;
	text-decoration: none;
}

ul, li{
	list-style-type: none;
}

span.hidden{
	display: none;
}

.clear{
	clear: both;
}

::-moz-selection{
	background: #d8d8d8;
	color: black;
}
::selection{
	background: #d8d8d8;
	color: black;
}

#js-off{
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 30000;
	background-color: transparent;
	background-image: url(../images/navigation-bgd.png);	
}
#js-off .wrap{
	position: absolute;
	left: 35%;
	top: 40%;
	font-family: GroteMT, helvetica, arial, sans-serif;
	font-size: 1em !important;
	font-weight: normal;
	color: black;
	background-color: white;
	padding: 10px 10px 8px 10px;
	width: 300px;
}
#js-off .wrap h6{
	padding-top: 10px;
	background-image: url(../images/balken.png);
	background-repeat: no-repeat;
	background-position: -30px -11px;
}

#mainNavigation{
	position: absolute;
	left: 30px;
	top: 0px;
	z-index: 20000;
	width: 200px;
	padding: 20px 0 0px 10px;
	background-color: transparent;
	cursor: move;
}
#mainNavigation:hover{
	height: 100%;
	background-color: transparent;
	background-image: url(../images/navigation-bgd.png);
}

#mainNavigation li{
	background-image: url(../images/balken.png);
	background-repeat: no-repeat;
	background-position: -30px -11px;
	padding: 10px 10px 10px 0;
	cursor: pointer;
	color: #777;
}
#mainNavigation li a{
	color: #3e3d40;
	font-size: 19px;
	letter-spacing: .35px;
	display: block;
}
#mainNavigation li a:hover,
a#toggleInfo:hover{
	color: #000000;
}

#mainNavigation li ul li{
	cursor: pointer;
	background: none;
	padding: 0;
	text-indent: -15px;
	margin-left: 15px;
}
#mainNavigation li ul li a{
	font-size: 16px;
	color: #3e3d40;
}
#mainNavigation li ul li a:hover,
#mainNavigation li ul li a.current,
div.content-wrapper div.download a:hover,
div.content-wrapper .kontakt-link a:hover,
#colophon a:hover{
	color: #777;
}
#mainNavigation li ul li.erster{
	padding-top: 10px;
}

#opener-image,
#opener-text{
	position: absolute;
}
#opener-image{
	z-index: 10000;
	width: 600px;
	height: 400px;
}
#opener-image img{
	position: absolute;
	top: -60px;
	width: 600px;
	height: 400px;
}
/*
#opener-image img:hover{
	cursor: pointer;
}
*/

.detailwrap-wrapper{
	position: absolute;
	top: 0px;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: white;
	opacity: 0.95;
	filter: Alpha(opacity=95);
	-moz-opacity: 0.95;
	z-index: 1000;
	cursor: url(../images/close.png), pointer;
}

#detailview div.detailwrap{
	position: absolute;
	top: 10px;
	left: 300px;
	z-index: 100010;
	padding: 20px 5px 0px 5px;
	background-color: white;
	cursor: default;
	height: 100%;
}
#detailview p,
#detailview a,
#detailview span{
	display: block;
	font-size: 14px;
	line-height: 18px;
}
#detailview div.detailwrap .text p{
	background-image: url(../images/balken-hell.png);
	background-repeat: no-repeat;
	background-position: -30px -11px;
	padding-top: 8px;
	margin-bottom: 10px;
}

#detailview div.detailwrap div.beschreibungstext{
	width: 400px;
	background-color: white;
	display: none;
	padding: 1em 1em 1em 0;
	height: auto !important;
}
#detailview div.detailwrap div.beschreibungstext p{
	background-image: none;
	padding-top: 0;
}
#detailview div.detailwrap div.beschreibungstext p.einzug{
	margin-top: 0;
	text-indent: 2em;
}
#detailview img{
	position: absolute;
	bottom: 60px;
}
#detailview img.detailview-image{
	width: auto;
}
#detailview img.detailview-image.small{
	position: absolute;
	bottom: 60px;
	cursor: pointer;
}

a.detailview-close{
	margin: 0;
	padding: 0;
	position: absolute;
	bottom: -40px;
}

a.detailview-next{
	margin: 0;
	padding: 0;
	position: absolute;
	bottom: -40px;
	left: 45px;
}

a.detailview-next img:hover,
a.detailview-close img:hover{
	opacity: 0.6;
	filter: Alpha(opacity=60);
	-moz-opacity: 0.6;
}

.beschreibungstext{
	display: none;
}

div.content-wrapper{
	position: relative;
	width: auto;
	height: 100%;
	padding-left: 70px;
	margin-top: 20px;
}
div.content-wrapper.startseite{
	position: absolute;
	top: 200px;
	left: 155px;
	padding-left: 0 !important;
}
div.content-wrapper.startseite h2{
	background-image: none !important;
	font-weight: normal;
	font-size: 3em;
	color: #3e3d40;
}
div.content-wrapper.startseite .text.zitat{
	font-family: GroteMTita, helvetica, arial, sans-serif;
	font-size: 2em !important;
	background-image: none !important;
	width: 600px;
	padding: 0 0 0 108px;
	margin-top: 20px !important;
}
div.content-wrapper.startseite .text.zitat p.left,
div.content-wrapper.startseite .text.zitat p.right{
	float: left;
	font-size: 1.1em;
	line-height: 1.2em;
	word-spacing: -0.05em;
}
div.content-wrapper.startseite .text.zitat p.left{
	padding-left: 25px;
	width: 10px;
}
div.content-wrapper.startseite .text.zitat p.right{
	padding-left: 10px;
	width: 500px;
}

.content-wrapper.ausstellungen{
	padding-left: 200px;
}
.content-wrapper.interview{
	padding-left: 280px;
}

.content-wrapper.biografie,
.content-wrapper.impressum,
.content-wrapper.kontakt,
.content-wrapper.publikationen{
	padding-left: 310px;
}

.content-wrapper.biografie h2,
.content-wrapper.interview h2,
div.download{
	margin-left: 30px;
}
.content-wrapper.ausstellungen h2{
	margin-left: 110px;
}
.content-wrapper.interview .text h2{
	margin-left: 0px;
	font-size: .9em;
}

.content-wrapper.interview .text h3{
	font-family: GroteMTita, helvetica, arial, sans-serif;
	font-size: 1.5em;
	font-weight: normal;
	line-height: 1.3em;
	margin-top: 1em;
	padding-left: 1.6em;
	text-indent: -0.4em;
	color: #666666;
}

div.content-wrapper div.download,
div.content-wrapper h2,
a.work-info,
a.download{
	background-image: url(../images/balken-hell.png);
	background-repeat: no-repeat;
	background-position: -30px -11px;
	clear: both !important;
	padding-top: 10px;
	font-size: 1em;
	font-weight: normal;
	letter-spacing: .35px;
}
a.download,
div.content-wrapper div.download{
	position: absolute;
	top: 45px;
	width: 50px;
	font-size: .8em;
	font-weight: normal;
	letter-spacing: .35px;
	line-height: 1.1em;
}

a.download{
	position: relative;
	top: 2em;
}


div.content-wrapper .text{
	margin-top: 100px;
	padding-top: 10px;
}

div.content-wrapper .text p,
div.content-wrapper .text ul li{
	font-size: 19px;
	line-height: 1.3em;

}
div.content-wrapper .text p.einzug{
	margin-top: 0;
	text-indent: 2em;
}
div.content-wrapper.interview .text p.question,
div.content-wrapper.interview .text p.question-block{
	font-family: GroteMTita, helvetica, arial, sans-serif;
	padding-left: 2em;
	margin-top: 1.2em;
	color: #666;
}

div.content-wrapper .text p.question-block{
	margin-top: 0;
}
div.content-wrapper.ausstellungen .text ul li span.year,
div.content-wrapper.ausstellungen .text ul li span.what{
	float: left;
}

div.content-wrapper.ausstellungen .text ul li span.year,
div.content-wrapper.ausstellungen .text ul li span.what,
.content-wrapper.publikationen .text p,
.content-wrapper.kontakt .text p,
.content-wrapper.impressum .text p{
	font-size: 16px;
	line-height: 1.25em;
}
.content-wrapper.publikationen .text p{
	white-space: nowrap;
}

div.content-wrapper.ausstellungen .text ul li{
	width: 800px;
	clear: both;
	padding-top: 10px !important;
}
div.content-wrapper.ausstellungen .text ul li.no-space-top{
	padding-top: 0px !important;
}

div.content-wrapper.ausstellungen .text ul li span.year{
	width: 59px;
	text-align: right;
	padding-right: 25px;
	
}
div.content-wrapper.ausstellungen .text ul li span.what{
	width: 640px;
	font-family: GroteMTita, helvetica, arial, sans-serif;
	text-indent: -20px;
	padding-left: 20px;
}
div.content-wrapper.ausstellungen .text ul li span.where{
	font-family: GroteMT, helvetica, arial, sans-serif;
}

div.content-wrapper.interview .text,
div.content-wrapper.biografie .text{
	width: 700px;
}

div.content-wrapper.biografie p{
	font-size: 16px;
	line-height: 1.35em;
}

#makeMeScrollable{
	position: relative;
	top: 0px;
	height: 100%;
}

/* Invisible left hotspot */
div.scrollingHotSpotLeft{
	/* The hotspots have a minimum width of 100 pixels and if there is room the will grow
    and occupy 15% of the scrollable area (10% combined). Adjust it to your own taste. */
	min-width: 75px;
	width: 100px;
	height: 100%;
	/* There is a big background image and it's used to solve some problems I experienced
    in Internet Explorer 6. */
	background-image: url(../images/big_transparent.gif);
	background-repeat: repeat;
	background-position: center center;
	position: absolute;
	z-index: 200;
	left: 0;
	/*  When positioning the mouse over one of the hot spots, the cursor should change.
	I've noticed that this varies from browser to browser though. */
	cursor: url(../images/left.png), w-resize;
}
div.scrollingHotSpotLeft:hover{
	background-color: #f3f1eb;
	opacity: 0.45;
	filter: Alpha(opacity=45);
	-moz-opacity: 0.45;
}

/* Visible left hotspot */
div.scrollingHotSpotLeftVisible{
	background-image: url(../images/left.png);
	background-color: #fff;
	background-repeat: no-repeat;
	opacity: 0.35; /* Standard CSS3 opacity setting */
	-moz-opacity: 0.35; /* Opacity for really old versions of Mozilla Firefox (0.9 or older) */
	filter: alpha(opacity=35); /* Opacity for Internet Explorer. */
	zoom: 1; /* Trigger "hasLayout" in Internet Explorer 6 or older versions */
}

/* Invisible right hotspot */
div.scrollingHotSpotRight{
	min-width: 75px;
	width: 100px;
	height: 100%;
	background-image: url(../images/big_transparent.gif);
	background-repeat: repeat;
	background-position: center center;
	position: absolute;
	z-index: 200;
	right: 0;
	cursor: url(../images/right.png), e-resize;
	margin: 0;
}
div.scrollingHotSpotRight:hover{
	background-color: #f3f1eb;
	opacity: 0.45;
	filter: Alpha(opacity=45);
	-moz-opacity: 0.45;
}

/* Visible right hotspot */
div.scrollingHotSpotRightVisible{
	background-image: url(../images/right.png);
	background-color: transparent;
	background-repeat: no-repeat;
	opacity: 0.35;
	filter: alpha(opacity=35);
	-moz-opacity: 0.35;
	zoom: 1;
}

/* The scroll wrapper is always the same width and height as the containing element (div).
   Overflow is hidden because you don't want to show all of the scrollable area.
*/
div.scrollWrapper{
	position: relative;
	overflow: hidden;
	width: 98%;
	height: 100%;
	margin: 0 1% 0 1%;
}
div.scrollWrapper.preload{
	background-image: url("../images/_preload-large.gif");
	background-position: 300px center;
	background-repeat: no-repeat;
}
.wrap.preload{
	background-image: url("../images/_preload-large.gif");
	background-position: center center;
	background-repeat: no-repeat;
}

div.scrollableArea{
	position: relative;
	width: auto;
	height: 100%;
	padding-left: 100px;
	opacity: 0;
	filter: Alpha(opacity=0);
	-moz-opacity: 0;
}
div.scrollableArea div{
	position: relative;
	float: left;
	margin: 0;
	padding-right: 10px;
}

div.scrollableArea div{
	min-width: 50px;
}
div.scrollableArea img{
/* 	margin-top: 50px; */
	min-width: 50px;
	opacity: 0.8;
	filter: Alpha(opacity=80);
	-moz-opacity: 0;
}
div.scrollableArea img:hover{
	cursor: pointer;
}

div.scrollableArea.galerie img{
	opacity: 1;
	filter: Alpha(opacity=100);
	-moz-opacity: 1;
}
div.scrollableArea.galerie img:hover{
	cursor: default;
}

div.scrollableArea h2{
	position: absolute;
	top: 20px;
	background-image: url(../images/balken-hell.png);
	background-repeat: no-repeat;
	background-position: -30px -11px;
	clear: both !important;
	font-weight: normal;
	padding-top: 10px;
	width: 100px;
}
div.scrollableArea a.work-info{
	position: absolute;
	top: 80px;
	display: block;
	font-size: .8em;
	font-weight: normal;
	letter-spacing: .35px;
	color: #333;
}
div.scrollableArea a.work-info:hover{
	color: #777;
}

div.scrollableArea div.work-info-text{
	position: absolute;
	top: 120px;
	font-size: 1em;
	font-weight: normal;
	letter-spacing: .35px;
	width: 500px;
	display: none;
	z-index: 190;
	background-color: white;
	padding: 10px 10px 10px 0;
	overflow: auto;
}

div.scrollableArea div.wrap{
	margin-top: 40px;
	background-color: white;
}

div.scrollableArea div.wrap span.title{
	position: absolute;
	top: 0px;
	background-color: white;
	background-image: url(../images/balken-hell.png);
	background-repeat: no-repeat;
	background-position: -30px -11px;
	padding-top: 10px;
	font-size: 0.8em;
	line-height: 1.3em;
}
div.content-wrapper .text ul li span.year,
span.ziffern{
	letter-spacing: 0.7px;
}

.arbeiten-ziffer,
.titel{
	display: block;
}

sub, sup{
	font-family: GroteMT, helvetica, arial, sans-serif;
	font-size: 14px;
	line-height: 0;
	vertical-align: 0.5em;
}

ul.notes{
	margin-top: 3em;
	padding-left: 20px;
}
ul.notes li{
	font-size: 13px !important;
	list-style-type: decimal;
	list-style-position: outside;
}


/* /////// / 

	Panel Scroll
	
/////// / */

.scroll-pane{
	float: left;
	overflow: auto;
	background: white;
}

.jScrollPaneContainer{
	position: relative;
	overflow: hidden;
}

.jScrollPaneTrack{
	position: absolute;
	cursor: pointer;
	right: 0;
	left: 0;
	top: 0;
	height: 100%;
	background: white;
	background: url(../images/bulk-hell.png) repeat-y 0 0;
}

.jScrollPaneDrag{
	position: absolute;
	background: white;
	background: url(../images/bulk.png) repeat-y 0 0;
	cursor: pointer;
	overflow: hidden;
}

.jScrollPaneDragTop{
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
}

.jScrollPaneDragBottom{
	position: absolute;
	bottom: 0;
	left: 0;
	overflow: hidden;
}
a.jScrollArrowUp{
	display: block;
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	left: 0;
	text-indent: -2000px;
	overflow: hidden;
	height: 9px;
	background: url(../images/up.png);
	background-position: left top;
	background-repeat: no-repeat;
}
a.jScrollArrowUp:hover{
	background-position: left -9px;
}

a.jScrollArrowDown{
	display: block;
	position: absolute;
	z-index: 1;
	bottom: 0;
	right: 0;
	left: 0;
	text-indent: -2000px;
	overflow: hidden;
	height: 9px;
	background: url(../images/down.png);
	background-position: left bottom;
	background-repeat: no-repeat;
}
a.jScrollArrowDown:hover{
	background-position: left 0;
}

#colophon{
	position: absolute;
	bottom: 10px;
	left: 310px;
	font-family: Arial, sans-serif;
	font-size: 11px;
	background-image: url(../images/balken-hell.png);
	background-repeat: no-repeat;
	background-position: -30px -11px;
	padding-top: 8px;
}

.jScrollPaneTrack{
}

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

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

.abstand-unten-gross{
	margin-bottom: 2em !important;
}
.abstand-oben-klein{
	margin-top: .5em !important;
}
.abstand-oben{
	margin-top: 1em !important;
}
.kursiv{
	font-family: GroteMTita, helvetica, arial, sans-serif !important;
}
.nicht-kursiv{
	font-family: GroteMT, helvetica, arial, sans-serif !important;
}

#morschener-wandelaltar ul{
	margin: 15px 0 10px 0;
}
#morschener-wandelaltar ul li{
	margin-left: 3em;
	list-style-type: decimal;
}