/* ********************************************************************************************	*/
/* layout.css	 																				*/
/* (CC) 2009 Roman Huditsch. Some Rights Reserved.    											*/
/*   http://creativecommons.org/licenses/by/2.0                   								*/
/* This style sheet is licensed under a Creative Commons License. 								*/
/*																								*/
/* Purpose: Layout style definitions for www.huditsch.info							 			*/
/* last modified: 2009-07-16																	*/
/* ********************************************************************************************	*/

@import url(undohtml.css);
@import url(typography.css);

body {
	width: 100%;
	position: relative;
	background: black url(../images/content-red.jpg) top center repeat-x;	
}

/* ************************************	*/
/* Header								*/
/* ************************************	*/

div#header {
	height: 200px;
	background: black url(../images/header.jpg) top center repeat-x;				
}

div#header h1 {
	height: 200px;
	background: transparent url(../images/heading.jpg) top center no-repeat;				
} 

div#header ul {
	position: absolute;
	top: 20px;
	right: 50px;
}

div#header li {
	margin-left: 5px;
	float: left;
}

div#header li#home a {
	display: block;
	background: transparent url(../images/home.jpg) no-repeat;
	width: 38px;
	height: 44px;			
}

div#header li#impressum a {
	display: block;
	background: transparent url(../images/impressum.jpg) no-repeat;
	width: 38px;
	height: 44px;			
}

div#header li#kontakt a {
	display: block;
	background: transparent url(../images/kontakt.jpg) no-repeat;
	width: 38px;
	height: 44px;
}

div#header li#home a:hover {
	background: transparent url(../images/home-hover.jpg) no-repeat;
}

div#header li#impressum a:hover {
	background: transparent url(../images/impressum-hover.jpg) no-repeat;
}

div#header li#kontakt a:hover {
	background: transparent url(../images/kontakt-hover.jpg) no-repeat;
}


/* ************************************	*/
/* Content								*/
/* ************************************	*/

div#content {
	text-align: center;
	min-height: 500px;
	background: black url(../images/content.jpg) top center repeat-x;		
}

div#impressum {
	text-align: justify;
	min-height: 500px;
	background: black url(../images/content-red.jpg) top center repeat-x;		
	padding-top: 50px;
	padding-bottom: 50px;
}

div#impressum * {
	width: 600px;
	margin-left: auto;
	margin-right: auto;	
}

div#content ul {
	width: 1010px;
	margin-right: auto;
	margin-left: auto;
}

div#content li {
	margin-top: 40px;
	margin-left: 50px;
	float: left;
}

div#content li a {
	margin-top: -1px;
	display: block;
	width: 270px;
	height: 269px;			
}

div#content li#roman a {
	background: transparent url(../images/screen-roman.jpg) no-repeat;
}

div#content li#roman a:hover {
	background: transparent url(../images/screen-roman-hover.jpg) no-repeat;
}

div#content li#irene a {
	background: transparent url(../images/screen-irene.jpg) no-repeat;
}

div#content li#irene a:hover {
	background: transparent url(../images/screen-irene-hover.jpg) no-repeat;
}

div#content li#nils a {
	background: transparent url(../images/screen-nils.jpg) no-repeat;
}

div#content li#nils a:hover {
	background: transparent url(../images/screen-nils-hover.jpg) no-repeat;
}

div#content li p {
	margin-top: 20px;
	width: 270px;	
	padding-left: 10px;
}


div#impressum address {
	padding-left: 50px;
	margin-top: 10px;
	margin-bottom: 10px;
}

div#impressum h1 {
	margin-bottom: 10px;	
}

div#impressum h2 {
	margin-top: 20px;	
	margin-bottom: 10px;	
}


/* ************************************	*/
/* Footer								*/
/* ************************************	*/

div#footer {
	position: fixed;
	bottom: 0px;
	width: 100%;
	height: 69px;
	background: black url(../images/footer.jpg) center center repeat-x;	
}

div#address {
	padding-top: 15px;
	width: 100%;
	text-align: center;	
}

div#standards {
	margin-top: -25px;
	margin-right: 20px;
	text-align: right;	
	z-index: 10;
}