* { padding: 0; margin: 0; border: none; }
body { padding: 0 30px 30px 30px; font-family: Verdana, Geneva, sans-serif; color: rgb(0,0,0); font-size: 0.9em; overflow: scroll; }
body#index { padding: 0; overflow: hidden;}

body#index1 { background:url(../pics/wilfriedgerstel-n2.jpg) center center no-repeat fixed white; padding: 0; }

	div#startimg { text-align: center; background-color: #FFF;}
	a#index-a { display: block; width:100%; height: 1800px; background: url(../pics/wilfriedgerstel.jpg) center center no-repeat fixed white;}

		body#index1 a#index-de { display: block; width:50%; height: 100%; position: absolute; top: 0; left: 0; }
		body#index1 a#index-en { display: block; width:50%; height: 100%; position: absolute; top: 0; right: 0; }

body#contact,
body#detail-misc { background-color: rgb(240,237,237);}

div#preload { display: none; visibility: hidden; position: absolute; left: -200px; height: 0px; }

div#all { position: relative; padding: 30px 0 0 0; background: url(../../../pics/name.gif) no-repeat right 20px; min-width: 980px; }
	body#contact div#all,
	body#detail-misc div#all { background: url(../../../pics/name-misc.gif) no-repeat right 20px;}
	
	div#top { height: 90px; padding: 0 0 30px 0;}
		ul#menu { padding: 0 0 15px 0;}
			ul#menu li { float: left; list-style: none; padding: 0 32px 15px 0; font-size: 1.4em;}
				ul#menu li a.current { border-bottom: 5px solid black; }
				ul#menu li a.lang { font-size: 0.6em; }				
		ul#submenu { clear: left; height: 30px; padding: 0 0 30px 0;}
			ul#submenu li { float: left; list-style: none; padding: 0 15px 0 0; margin: 0 0 7px 0; font-size: 0.8em; word-spacing: -0.1em;}
				ul#submenu li a.current { border-bottom: 2px solid black; }
				
	div#main { clear: left; }
		h2 { font-size: 1.2em; font-weight: normal; padding: 37px 0 7px 0; }
			div#content h2 { padding: 15px 0 7px 0;}
			#content-misc h2.solo,
			#content h2.solo { padding: 0 0 7px 0; }
		h3 { font-size: 0.9em; font-weight: normal; }
			#content-misc h3 { font-weight: normal; font-size: 1em; padding: 7px 0 7px 0;}
		p { font-size: 0.9em; padding: 0 0 75px 0; line-height: 140%;}
			body#contact p { padding: 0 0 35px 0; }
			p.super { font-size: 0.7em; padding: 0 0 5px 0; width: 50%;}
			#content-misc p.normal,
			#content p.normal,
			div#awards p { padding: 0 0 15px 0; /*width: 50%;*/ }
			body#contact p span,
			body#detail p span,
			body#detail-misc p span { line-height: 180%; }
			body#creations p { border-bottom: 1px solid black; padding: 0 0 15px 0;}
			p.followp { padding: 0 0 15px 0; }
			p.followp2 { padding: 0 0 45px 0; }
			p.followp3 { padding: 5px 0 40px 0; }
		ul.text { list-style: none; font-size: 0.9em; padding: 0 0 15px 0; }
			ul.text li { padding: 0 0 7px 0; }
		span.tab { padding: 0 2.9em 0 0;}
		span.super { font-size: 0.7em; position: relative; top: -4px; }
		#content-misc span.cite { font-size: 0.75em; }
		span.cite { font-weight: normal; font-size: 0.7em; }


/*


*/
			
		a { color: rgb(0,0,0); }
		a.small { font-size: 0.8em; }
		#side a { cursor: pointer; }
		div#side a#rwd { position: absolute; top: 46px; left: -14px; width: 8px; height: 9px; text-decoration: none; border-bottom: 0 solid none; }
		div#side a#up { position: absolute; top: -13px; left: 46px; width: 9px; height: 8px; text-decoration: none; border-bottom: none; }
		div#side a#fwd { position: absolute; top: 46px; left: 105px; width: 8px; height: 9px; text-decoration: none; border-bottom: none; }
		ul#menu li a,
		ul#submenu li a,
		#creations div#main a,
		#content-misc h2 a,
		ul.text li a,
		h2 a,
		p.normal a,
		p.super a,
		caption a,
		body#contact p span a,
		body#detail p span a,
		body#detail-misc p span a { text-decoration: none;}
		p.normal a:hover,
		p.super a:hover,
		#content-misc h2 a:hover,
		ul.text li a:hover, 
		body#contact p span a:hover, 
		body#detail p span a:hover,
		body#detail-misc p span a:hover { text-decoration: underline; }
		
		/*div#main a:visited { color: rgb(102,102,102); }*/
		
		div#side { width: 100px; position: absolute; top: 120px; left: 0; padding: 0 35px 0 0;}
			div#side img { width: 100px; height: 100px; border: none;}
			div#side a { display: block; width: 100px; height: 100px; border-bottom: 4px solid white;} /* border-width corresponds with padding-bottom in td.left (=70px + 2xborder-width) */ 
			body#detail-misc div#side a { border-bottom: 4px solid rgb(240,237,237);}
			body#detail div#side,
			body#detail-misc div#side { z-index: 5; top: 150px;}
			
		div#content { padding: 0 0 30px 0; } /* padding: 0 270px 30px 0; ? */
			div#content-misc { padding: 0 0 30px 130px; } /* padding: 0 270px 30px 0; ? */
			body#creations div#content { position: relative; top: -15px;} 
			body#creations div#content { padding: 0 150px 30px 130px; }
			body#contact div#content { padding: 0 150px 30px 0; }	
			body#overview div#content { padding: 0px 150px 30px 0; }
			body#detail div#content,
			body#detail-misc div#content { padding: 0 0 30px 130px; position: relative;}
		
		body#overview table, body#contact table { border-collapse: collapse; width: 100%; }
			table.borderbottom { border-bottom: 1px solid black; margin: 0 0 99px 0;} 
			body#overview table caption { height: 100px; font-size: 1.2em; text-align: left; padding: 0 0 0 130px; font-weight: bold;}
			body#overview table caption.afterborder { height: 85px; padding: 0 0 0 130px;}
			body#overview table caption.special { height: 100px; padding: 0 0 0 130px;}
			body#overview table td { vertical-align: top;}
			/* wenn Link nur Bilder: */
			td.left { width: 100px; text-align: right; padding: 0 0 20px 0; vertical-align: top;}
				td.left a.more { width: 100px; display: block; height: 30px; font-size: 0.9em; text-decoration: none;}
			/* wenn Link Bilder und Text: */
			td.left2links { text-align: right; padding: 0 0 25px 0; vertical-align: top;} 
				td.left2links a.more { display: block; height: 15px; font-size: 0.9em; text-decoration: none;}
				td.left2links a.text { display: block; height: 15px; font-size: 0.9em; text-decoration: none;}
			td.middle { padding: 0 0 25px 30px;}
				div#content td.middle h2 { padding: 0 0 7px 0;}
			
			body#detail div#content img, body#detail-misc div#content img { display: block; }
			div#side img.not100 { width: auto; height: auto; }	
			
			/*div#hidepics { width: 100%; height: 733px; position: absolute; top: 0; z-index: 5; }*/
			
			#art1 { display: block; height: auto; }
			#art2, #art3, #art4, #art5, #art6, #art7, #art8, #art9, #art10, #art11, #art12, #art13, #art14, #art15 { display: none; height: auto; z-index: -5;}

		div#overlay {
			height: 100px;
			width: 100%;
			position: fixed;
			bottom: 0;
			left: 0;
			background: url(../pics/overlay.png) repeat-x;
			}			
.orange { color: #E60; }
ul#submenu li a.current-o { border-bottom: 2px solid #E60; }
.blue { color: #00C; }
span.small { display: block; font-size: 0.8em; padding: 10px 0 0 0;}
span.small-orange { display: block; font-size: 0.8em; padding: 0px 0 0 0;}
.noline { text-decoration: none; }
.noline:hover { text-decoration: underline; }
span.nobold { font-size: 0.8em; }
.no-bold { font-weight: normal; }

/* RESPONSIVE */

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (max-device-width : 640px) {
	div#all { padding: 75px 0 0 0; min-width: inherit; }
	
	body#contact div#content-misc p.normal,
	body#contact div#content-misc div#exhibitions p,
	body#contact div#content-misc div#awards p,
	div#publications ul li,
	body#contact table { font-size: 1.6em !important; }
	
	body#contact div#content-misc span.cite { font-size: 0.8em !important; }
	#overview td.middle p,
	body#detail #showpic p { font-size: 1.2em !important; }
	body#contact h1 {}
	body#contact h2,
	body#detail h2,
	body#detail-misc h2 { font-size: 2.2em !important; }
	body#contact table td.middle h2,
	body#overview table td.middle h2 { font-size: 1.4em !important; }
	body#contact #content-misc h3 { font-size: 2.2em !important; padding: 1em 0 1em 0; }
	body#contact h4 { font-size: larger !important; }
	body#contact { font-size: larger; }
	body#contact div#content-misc { width: inherit; }
	div#publications ul { margin-left: 1em !important; }
	div#publications ul li { padding-bottom: 0.75em !important; }
	div#publications ul li a { font-size: inherit !important; } 
	body#overview td.feed img { max-width: 100% !important; }
	
	#content-misc p.normal,
	#content-misc div#awards { width: auto; padding-right: 5%; }

	div#exhibitions p { text-indent: 0 !important; padding-bottom: 0.75em !important; line-height: normal; margin-left: 0 !important; padding-left: 0 !important; }
	div#exhibitions p strong { display: block !important; width: auto !important; font-size: inherit !important; font-weight: 400 !important; padding-bottom: 0.5em; }
	div#exhibitions p em { display: block; width: auto; font-style: normal; text-indent: 0; margin: 0 0 0 2px; font-size: inherit !important; }
	div#exhibitions p em { margin-top: 1em; }
	div#exhibitions p a { font-size: inherit !important; }
	div#exhibitions p em + br { display: none; visibility: hidden; }
	
	body#detail #main { position: relative; }
	
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (max-device-width : 640px)
and (orientation:landscape) {
	html { height: 100%; }
	body { font-size: 1.2em; }
	body#index1 { background: url(../pics/wilfriedgerstel-n2-mobile-l.jpg) center center fixed no-repeat #fff;
	background-size: contain; }
	ul#submenu li { padding: 0 0.875em 0 0; margin: 0 0 1em 0; font-size: 1em; letter-spacing: 0.025em; word-spacing: -0.1em; }
	body#overview div#content { padding-top: 1em !important; }
	body#overview table img { margin-bottom: 0.5em; }
	body#overview table a.more,
	body#overview table a.text { height: auto; }
	body#detail div#side { top: 1em; }
	body#detail-misc div#side { top: 195px; }
	body#detail div#content { padding-top: 25px; }
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-device-width : 640px)
and (orientation:portrait) {
	html { height: 100%; }
	body { font-size: 1.2em; }
	body#index1 { background: url(../pics/wilfriedgerstel-n2-mobile-p.jpg) center center fixed no-repeat #fff; 
	background-size: contain; }
	ul#menu li { float: left; list-style: none; padding: 0 0.75em 1em 0; font-size: 1.5em; }
	ul#submenu li { display: inline-block !important; padding: 0 0.875em 0 0; margin: 0 0 1em 0; font-size: 1.25em; letter-spacing: 0.025em; word-spacing: -0.1em; }
	body#overview div#content { padding-top: 2em !important; }
	body#overview table { max-width: 100%; font-size: larger; }
	body#overview table img,
	body#contact table img { margin-bottom: 0.5em; }
	body#overview table a.more,
	body#overview table a.text,
	body#contact table a.more,
	body#contact table a.text { height: auto; }
	body#detail div#side { top: 2em !important; }
	body#detail-misc div#side { top: 250px; }
	body#detail div#content { padding-top: 30px; }
	body#detail-misc div#content { padding-top: 45px; }
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 641px) {

div#exhibitions p { padding: 0 0 7px 0; text-indent: -42px; margin: 0 0 0 42px; line-height: normal; }
div#exhibitions p strong { display: inline-block; width: 38px; position: relative; left: 42px; font-weight: normal; }
div#exhibitions p em { display: inline-block; font-style: normal; text-indent: 0; margin: 4px 0 0 2px; }
div#exhibitions p a { font-size: inherit; }

div#publications ul { list-style: none; font-size: 0.9em; padding: 0 0 15px 0; }
div#publications ul li { padding: 0 0 7px 0; }
div#publications ul li a { text-decoration: underline; }
div#publications ul li a:hover { color: #666; }

	
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}