@charset "UTF-8";
/**
 * Eike Zuleeg Cinematographer XHTML/CSS
 *
 * Standard Layout (non-print, all parts)
 *
 * @project   Eike Zuleeg Homepage
 * @package   xhtml-css
 * @author    Tom Klingenberg http://www.lastflood.com/
 * @customer  Eike Zuleeg http://www.eikezuleeg.de/
 * @copyright 2008 by the author, all rights reserved
 * @cssdoc    version 1.0-pre
 *
 * @colordef  #fff; white
 * @colordef  #808080; standard grey
 * @colordef  #bbb; standard grey (border)
 * @colordef  #666; bold grey
 * @colordef  #7b633a; bronze
 *
 * @todo      .baselined vertical-aligned via percentual margin 
 *            and negative top to establish IE 6/7 compability.
 */


/**
 * Reset
 *
 * @section reset
 * @see     YUI Reset CSS, http://developer.yahoo.com/yui/reset/
 */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {margin:0;padding:0;}
table {border-collapse:collapse;border-spacing:0;}
fieldset,img {border:0;}
address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal;}
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}
q:before,q:after {content:'';}
abbr,acronym {border:0;}

/**
 * @section struct
 */

.access {display:none;}
.skip {height: 0; left:-5000em; position:absolute; top:-5000em; width:0;}
.skip:focus, .skip:active {height:auto; left:0; position:static; top:0; width:auto;}
.clear {clear:both;}
.silent {text-decoration:inherit; color:inherit;}
* html a.silent {text-decoration:none;}


/**
 * Main Layout
 *
 * |----------- 902 ------------|
 * / header 92: 58/34 /
 * |- 16 -|------- 886 ---------|
 * / content 374: 1/13/346/13/1 /
 *
 * @section main layout
 */
html,body {height:100%;}
body {margin:0;}
body {position:relative;} /* @workaround for ie 7 */
body {background:#fff;}
html, body {min-height:100%;}

#page {margin:0 auto; min-height:100%; width:902px;}
* html #page {height:100%;}


/**
 * @section font
 */
body {font-family:free sans, verdana, helvetica, sans-serif; font-size:10px; color:#808080;}
body a {color:#808080;}


/**
 * @section header
 */
#header {height:92px;}
	#header h1 {padding:58px 0 0 16px;}
		#header h1 a {background:url(i/eike_zuleeg_logo.gif) no-repeat; display:block; height:23px; line-height:23px; overflow:hidden; text-indent:270px; width:270px;}
	#header p {display:none;}



/**
 * Navigation
 *
 * @section nav
 */
#nav {}	
	#nav ul {display:block; float:left; position:absolute; top:478px; width:11.8em; z-index:2;}
			#nav ul ul ul {left: 16.8em; width:40em;}
		#nav ul li {line-height:2.2em;}		
			#nav ul li a {background:#fff url(i/nav_bg.gif) 0 center no-repeat; text-decoration:none; padding:0 0 0 16px;}
			#nav ul li a, #nav ul li.sel ul li a, #nav ul li.sel ul li.sel ul li a {background-color:#fff; font-weight:normal;}
			#nav ul li a:hover, #nav ul li.sel ul li a:hover, #nav ul li.sel ul li.sel ul li a:hover {font-weight:normal; background-color:#808080; color:#5a5a5a;}
			#nav ul li.sel a, #nav ul li.sel ul li.sel a, #nav ul li.sel ul li.sel ul li.sel a {background-color:#666; color:#666; font-weight:bold;}
			#nav ul li.sel a:hover, #nav ul li.sel ul li.sel a:hover, #nav ul li.sel ul li.sel ul li.sel a:hover {background-color:#666; color:#666; font-weight:bold;}
			#nav ul li ul li ul li a {color:#7b633a !important;}
			#nav ul li.sel ul li.sel ul li.sel a:hover {color:#7b633a;}
			
		#nav ul ul {left:13.4em; top:0;}
		#nav ul dfn {display:none;}


/**
 * Footer
 *
 * @section footer
 */
#lflogo {background:#fff url(i/lastflood_logo.gif) 4px 0 no-repeat; display:block; float:right; height:8px; line-height:28px; overflow:hidden; text-indent:101px; width:78px; position:relative; top:107px;}

#jsinfo {position:absolute; top:0; width:100%;}
	#jsinfo div {margin:0 auto; width:902px;}
		#jsinfo .tipp {margin:20px 0 0 550px; width:280px;}

/**
 * content
 *
 * @section content
 */
#content {border:1px solid #bbb; border-width:1px 0;}

	#content .scrollbox {height:346px; overflow:auto;}
	#content .baselined {bottom:0; height:206px; margin-bottom:auto; margin-top:auto; position:absolute; top:0; width:500px;}

	#content .home {display:block; margin:13px 0 13px 16px;}
		#content .home a img {vertical-align:bottom;}

	#content .text {display:block; line-height:1.5em; margin:13px 0 13px 0;}
		#content .text a {color:#7b633a;}
		#content .text a:hover {color:#808080;}
		#content .text h1 {font-weight:bold; color:#666; margin:0 0 12px 16px;}
		#content .text h2 {font-weight:bold; color:#7b633a; margin:0 0 4px 16px;}
			#content .text h2 a {text-decoration:underline;}
			#content .text h2 small {font-weight:normal; line-height:inherit; font-size:inherit;}
		#content .text h3 {color:#7b633a; margin:0 0 4px 16px;}
		#content .text ul {margin:0 0 4px 16px;}
		#content .text p {margin:0 0 4px 16px; width:416px;}
			#content .text .sep {margin:6px 0 24px 16px;}
		#content .text ul.link {margin:12px 0 20px 16px;}


		#content .text form {margin:16px 0 4px 16px; width:416px;}
			#content .text form label {line-height:1.5em;}
				#content .text form label.widthed {width:60px; display:block; float:left;}
			#content .text form div {clear:both; margin-bottom:6px;}
	


	#content .link {line-height:normal; margin:12px 0 12px 16px;}	
		#content .link li {margin:8px 0 0 -16px;}
		#content .link a {background:#808080 url(i/nav_bg.gif) 0 center no-repeat; padding-left:16px;}

	#content .about {}
		#content .about h2 {color:#666; margin-top:20px;}
		#content .about p {width:600px;}
		#content .about table.filmography {margin:12px 0 0 16px;}

		#content table.filmography th, table.filmography td {vertical-align:top;}
		#content table.filmography td h4 {color:#7b633a; font-weight:bold;}
		#content table.filmography td h4 a {text-decoration:underline;}
		#content table.filmography td p {margin-left:0px;}
		#content table.filmography td {padding-bottom:8px;}
		#content table.filmography td div.movie {margin-bottom:12px;}
			#content table.filmography td div.movie .awards {color:#7b633a; font-style:italic; margin:0;}
		#content table.filmography th {width:72px;}
		#content table.filmography th * {font-weight:bold;}

	#content .more-silent a {color:#808080; text-decoration:none; cursor:default;}
	#content .bronzed {color:#7b633a;}	


/**
 * work (content)
 *
 * @section content.work
 */
	#content .work {height:382px; line-height:382px; position:relative; width:902px;}
		#content .work .baselined {line-height:206px;}
			#content .work .baselined .inner {line-height:normal;}
			#content .work .baselined .specs {bottom:0; display:block; height:auto; line-height:1.5em; margin:auto 0 0 16px; width:400px; position:absolute;}
				#content .work .baselined .specs .imgs {clear:both;}
					#content .work .baselined .specs .imgs a {display:block; float:left; height:40px; margin:0 8px 12px 0; width:40px;}
					#content .work .baselined .specs .imgs img {border-bottom:4px solid #fff;}
						#content .work .baselined .specs .imgs a.sel img {border-bottom-color:#7b633a;}
				#content .work .baselined .specs h1 {clear:both; color:#7b633a; font-weight:bold;}
				#content .work .baselined .specs a {color:#7b633a; text-decoration:underline;}
				#content .work .baselined .specs a:hover {color:#808080;}
				#content .work .baselined .specs .link {line-height:normal; margin:16px 0 0;}

			#content .work .baselined .pics {bottom:0; display:block; height:auto; margin:auto 0 0 408px; width:400px; position:absolute;}
				#content .work .baselined .pics img {vertical-align:bottom;}

/**
 * film (content)
 *
 * @section content.film
 */
	#content .film {height:382px; line-height:382px; position:relative; text-align:center; width:902px;}
		#content .film .placed {height:232px; margin:auto; width:496px;}
		#content .film .player {padding-top:47px; line-height:normal; margin-left:16px; text-align:left;}
		#content .film .embed {height:285px; margin:0 0 0 16px; width:480px; border:0px solid black;}
			#content .film .link a {color:#7b633a; text-decoration:none;}
			#content .film .player ul {position: relative; left:-69px; top:-18px;}
			#content .film .player ul.link {margin:0; width:68px;}

/**
 * work / film switcher
 * 
 * normally, the player is not displayed (#playeron). additionally, the 
 * direct display of a movieplayer does not need a backlink to be 
 * displayed (.link).
 *
 * @section content.switchworkfilm
 */
	#playeron {display:none;}
	#playeron.direct .link {display:none;}
	#player.direct .link {display:none;}