*  {margin: 0; padding: 0;}
@font-face {
   font-family: "Bentham";
   src: url(../files/Bemtham.otf) format('opentype');
}

@font-face {
    font-family: "Berlin";
    src: url(../files/Berlin-Email-2.ttf) format("truetype");
}
html {
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	display: table;			
		}
body {
	margin: 0;
	padding: 0;
	font: 62.5% "Berlin"; 
	display: table-cell;
	vertical-align: middle;	
	background-color: #eee;
	overflow: hidden;

	}

	/* black version of the overlay. simply uses a different background image */
	div.overlay.black {
		background-image:url(img/transparent.png);		
		color:#fff;
	}
	div.contentWrap { 
	    height:441px; 
	    overflow-y:auto; }
a {
	cursor: pointer;
	text-decoration: none;outline: none;
	color: #fff;
	
	}
a:hover {text-decoration:underline;}

.black-opaque {
	background-color: #000;
	filter: alpha(opacity=80);
	-moz-opacity: 0.8;
	-khtml-opacity: 0.8;
	opacity: 0.8;
	}
.white-opaque {
	background-color: #fff;
	filter: alpha(opacity=50);
	-moz-opacity: 0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
	}


#content { 
	//zentriert		
	position: relative;
	width: 1050px;
	height: 650px;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	vertical-align: middle;
	margin: auto;
	
	}
	
#mitte {
	position: relative;
	float: left;
	width: 650px;
	height: 650px;
	border: 1px solid black;
	overflow: hidden;
}
#pages{	
	position:absolute;	
    width:20000em;
	height: 650px;
	margin: 0px;
	float: none;
	overflow: hidden;
}

.page {
	width: 650px;
	float: left;
}

/***************Menu *******************/
#links {
	float: left;
	width: 202px;
	height: 650px;
	padding: 0 auto;
	display: block;
	}
	ul#menu-l {
		list-style: none;
		width: 202px;
		height: 60px;
		margin: 295px 0;
		}
		ul#menu-l  li {
			display: inline;
			height: 60px; 
			}
			ul#menu-l li a {
				text-indent:-9999px;
				display: block;
				width: 202px;
			}
				ul#menu-l li a.chrisdreier {
					height: 60px; 
					background: url(../img/menu-chris-dreier.png) top left no-repeat;		
				}
				ul#menu-l li a.chrisdreier:hover {
					background-position: bottom left;	
				}


#rechts {
	float: left;
	width: 187px;
	height: 650px;
	padding: 0 auto;
	display: block;
}

	ul#menu-r {
		list-style: none;
		width: 187px;
		height: 314px;
		margin: 246.5px 0;
		}
	
		ul#menu-r  li {display: inline;}
			ul#menu-r li a {
				text-indent:-9999px;
				display: block;
				width: 178px;
				margin-left: 5px;
			}
				ul#menu-r li a.aktuell {
					height: 50px; 
					background: url(../img/menu-aktuell.png) top left no-repeat;		
				}
				ul#menu-r li a.biographie {
					height: 57px;
					background: url(../img/menu-biographie.png) top left no-repeat;		
				}
				ul#menu-r li a.kontakt {
					height: 50px; 
					background: url(../img/menu-kontakt.png) top left no-repeat;		
				}
				ul#menu-r li a:hover {background-position: bottom left;}
/********************Menu Ende *********************/
.cell {	
	position:relative;
	top:0px; 
	overflow: hidden;
	width: 160px;
	height: 160px;
	background-repeat: no-repeat;
	float: left;
	margin:2px 0 0 2px;
	
}
	.cell img {
		width: 160px;
		height: 160px;	
	    border: none;   
	
	    /* allow javascript moves the img position*/   
	    position:absolute;
		}
	.cell .caption {   
		width: 160px;
		height: 160px;
	    background:#000;   
	    color:#fff;   
	    font-weight:bold;   
	           
	    /* fix it at the bottom */   
	    position:absolute;   
	    left:0;   
	  
	    /* hide it by default */   
	    display:none;   
	  
  
		border:4px solid transparent; 
	  
	}
	.cell .caption p {
		padding: 10px;
		font-size: 1.4em;
	} 
#rct {
	position:relative;
	overflow: hidden;
	width: 160px;
	height: 160px;
	background-image: url(../img/200/04-01b.jpg);
	background-position: 0 0;
	background-repeat: no-repeat;
	float: left;
	margin:2px 0 0 2px;
	}
#rct:hover {
	background-position: 0px -200px;
	}
	#rct .caption {
		width: 160px;
		height: 160px;
	    background:transparent;   
	    color:#000;   
	    font-weight:bold;   
	           
	    /* fix it at the bottom */   
	    position:absolute;   
	    left:0; 
	    display:none;  
	    }
	#rct .caption p {
		padding: 10px;
		font-size: 1.4em;
	   	 
		}
	
	#rct a {
		color: #000;
		//text-decoration: none;
		}
	.caption p strong {
		font-size: 1.4em;
		}
	.caption p .add {
		font-family: "Didot", "Baskerville", serif;
		font-size: 10px;;
		}
.textbox{
	overflow-y: auto;
	width: 160px;
	height: 160px;
	background-repeat: no-repeat;
	float: left;
	margin:2px 0 0 2px;
	}
#fullBg {	
	width: 650px;
	height: 650px;
	position: relative; top: -100px; left: 0px;
	}
#splash {
	width: 650px;
	height: 650px;
	background: url(http://chrisdreier.de/tolstoy/seiten/img/finissage.jpg);
	color: #000;
	font-family: "Berlin";
	text-align: right;
	padding-top: 100px;
	}
	
#filmpage {
	width: 650px;
	height: 650px;
	background: url(http://chrisdreier.de/tolstoy/seiten/img/film-bg.jpg);
	color: #000;
	font-family: "Berlin";
	text-align: right;
	padding-top: 100px;
	}
	
	#filmpage h1{
	
		color: #000;
		font-size: 3.7em;
		padding-right: 60px;
	
		}
		
	
	#filmpage h2 {font-size: 2.0em; font-weight: lighter;padding-right: 30px;}
	#filmpage h2 small {font-size: 0.9em;padding-right: 30px;}
	
	#filmpage a {font-size: 1.1em; color: #000;}
	#filmpage a.prevPage {position: relative; top: -90px; right: 30px;font-size: 14px;}
	#filmpage a.prevPage img {padding-right: 2px; margin-bottom: -2px;}
	
#bio #pages, #kontakt #pages, #aktuell #pages {
	height: 650px;
	padding: 10px;
	background: url(http://chrisdreier.de/tolstoy/seiten/img/cd-black2.gif);
}

	#bio .page, #kontakt .page {
		padding: 10px;
		width: 610px;
		height: 610px;
		overflow-y: auto;
		background-color: #fff;
		overflow-x: hidden;	
	}
	#bio .ueber {
		font-family: "Berlin";
		font-size: 3.5em;
		letter-spacing: 0.1em;
		padding-bottom: 10px;
	}
	
	#bio .year {
		font-family: "Berlin";
		font-size: 3em;
	}
	
	#bio .title {
		font-family: "Berlin";
		font-size: 2.3em;
		padding-left: 20px;
		//letter-spacing: 0.2em; 
	}
	#bio .text {
		font-family: "Bentham";
		padding-left: 20px;
		font-size: 1.4em;
	}
	#bio a {
		color: #f00;
	}
.triggers img {border: 1px solid transparent;}	
.triggers img:hover {border: 1px solid #f00;}
#weblinks {
	top: 0px;
	display: block;
	width: 630px; top: 0px; height: 295px; //padding: 10 10 10 10; 
	overflow-x: hidden; overflow-y: auto;
	z-index: 1000;
	margin-top: 10px;
	text-align: center;
	}
	#weblinks a {
		color: #111;
		font-size: 1.7em;
		letter-spacing: 0.2em; 
		}
	
	#weblinks h1 {
		display: block;
		position: relative; top: 0px;
		width: 630px; 
		font-size: 3em;	font-weight: lighter;
		padding-top: 10px;
		}
		#weblinks h1 a small{
			color: #111;
			font-size: 0.5em;	
			}
		#weblinks h1 a small:hover{
			color: #111;	
			}	
		#weblinks #delicious-posts-chrisdreier {
			margin-top: -25px;	
			}
			#weblinks #delicious-posts-chrisdreier .delicious-post{
				display: block;
				width: 630px;
				//margin-right: 20px;		
				}
			#weblinks #delicious-posts-chrisdreier h2 {visibility: collapse;}