/* ****************************************************************************	*/
/* 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 nils.huditsch.info				 		*/
/* last modified: 2009-07-11													*/
/* ****************************************************************************	*/

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

html {
    text-align: center;
    height: 100%;
   	background: #dbc385 url(../images/content.gif) repeat-y top center;
}

body {
    margin: 0px auto;
    text-align: left;
   	height: 100%;
   	position: relative;
}

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

div#content {
	top: 280px;
	position: relative;
	text-align: center;
}

div#main {
	margin: 0px auto;
	width: 600px;
	text-align: justify;
	padding-bottom: 50px;
}

div#main > * {
	padding-left: 30px;
	padding-right: 30px;
}


 /* ********************************************************************************************	*/
 /* Header	                                                                                        */
 /* ********************************************************************************************	*/
 
div#header {
	position: fixed;
	top: 0px;
	height: 272px;
	width: 100%;
	background: url(../images/header.gif) top center;
	margin-left: -1px;
	z-index: 50;
}

div#header h1 {
	position: relative;
	margin-top: 21px;
	height: 262px;
	background: url(../images/background.gif) no-repeat top center;
	width: 100%;
	text-align: center;
	z-index: 55;
}

div#nav {
	position: absolute;
	top: 21px;
	height: 265px;
	background: url(../images/heading.jpg) no-repeat top center;
	width: 100%;
	text-align: center;
	z-index: 60;
}

div#nav ul {
	margin: 0px auto;
	width: 600px;
}

div#nav ul li {
	float: left;
}	 
 
li#home a {
	display: block;
 	background: url(../images/elefant.jpg) no-repeat;
 	height: 146px;
	width: 141px;
	margin-left: 29px;
}
 
li#ueber-mich a {
 	display: block;
	background: url(../images/nashorn.jpg) no-repeat;
	height: 146px;
	width: 149px;
}
 
li#galerie a {
 	display: block;
 	background: url(../images/giraffe.jpg) no-repeat;
	height: 146px;
	width: 125px;
}
 
li#mama-papa a {
 	display: block;
 	background: url(../images/bueffel.jpg) no-repeat;
	height: 146px;
	width: 128px;
}
 
li#home a:hover {
 	background: url(../images/elefant-hover.jpg) no-repeat;
}
  
li#ueber-mich a:hover {
 	background: url(../images/nashorn-hover.jpg) no-repeat;
}
 
li#galerie a:hover {
 	background: url(../images/giraffe-hover.jpg) no-repeat;
}

li#mama-papa a:hover {
 	background: url(../images/bueffel-hover.jpg) no-repeat;
}


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

div#footer {
    position: fixed;
    bottom: 0px;
	height: 80px;
	background: url(../images/footer.gif) repeat-x bottom left;
	width: 100%;
	z-index: 25;
}

div#footer ul {
   	height: 80px;
	background: url(../images/gras.gif) repeat-x bottom center;
	z-index: 30;
}

div#footer ul li {
 	position: absolute;
 	bottom: 12px;
 	float: left;
 	text-align: center;
 	width: 100%;
}