/* Copyright 2006 Matthias Koch */
/* http://www.finalnet.de */
/* web | design */

@media screen {
	* {
		margin: 0;
		padding: 0;
	}
	html {
		width: 100%;
		height: 100%;
	}
	body {
		width: 100%;
		height: 100%;
		font-family: arial, helvetica, sans-serif;
		font-size: 100.01%;
		color: #fff;
		background-color: #cebea7;
		text-align: center;  /* IE5/Win hack */
	}
	#skiplink { 
	  	text-align: left;
		margin-left: -10000px;
	  	font-size: 0px;
	}
	#header {
		position: absolute;
		z-index: 6;
		top: 0;
		left: 50%;
		margin-left: -375px;   
		width: 750px;
		color: #fff;
		background-color: #666;
	}
	#header h1 {
		padding-left: 20px;
		height: 150px;  /* Hoehe des Bildes */
		font-size: 2.5em;
		color: #424242;
		background: #8b6c5f url(/img/headers/header.jpg); 
	} 
	#header h1 span {
		text-align: right;
		padding-right: 15px;
		margin: 0px;
		display: block;
		background: transparent;
		font-size: 35px;
  		font-family: 'Century Gothic', arial, sans-serif;
		font-weight: normal;
		letter-spacing: -0.01em;
		word-spacing: -0.1em;
    }
	#header h1 span img {
	  	border: 0 none;
	  	padding: 0px;
		display: none;
	}
	/* Navimenue */
	#header ul, #header ul ul {
		list-style-type: none;
		z-index: 7;
	}
	#header ul li {
		position: relative;
		width: 150px;  /* Breite jedes li */
		float: left;
	}
	#header ul li a {
		padding: 2px 0px;
		width: 150px;			
		display: block;
		float: left;
		font-size: 0.8em;
		line-height: 125%;
		color: #fff;
		font-weight: bold;
		text-align: center;
		text-decoration: none;
		background-color: #756c5f;  /* Grundfarbe des Menuebalkens */
		z-index: 8;
	}
	#header ul li a span {
  		text-decoration: underline;
	}
	#header ul li a:hover, #header ul li:hover a {
		color: #000;
		background-color: #c2b29d;  /* Hoverfarbe des Menuebalkens */
	}
	#header ul ul {
		display: none;
	}
	#header ul li:hover ul, #header ul li a:hover ul {
		position: absolute;
		z-index: 2;
		left: 0;
		padding: 6px 0px;
		width: 150px;	
		display: block;
	}
	#header ul li:hover ul {
		top: 1em;
	}
	#header ul ul li a, #header ul li:hover li a {
		padding: 2px 0px 2px 7px;
		margin-top: -2px;
		width: 143px;  /* width + padding-left = Breite von #header ul li */
		text-align: left;
		color: #000;
		font-weight: normal;
		background-color: #f0f0e0;  /* Grundfarbe Navimenue Ebene 2 */
	}
	#header ul ul li a:hover {
		color: #000;
		background-color: #d8d0be;  /* Hoverfarbe Navimenue Ebene 2 */
	}
	#outer {
		height: 100%;
		min-height: 100%;
	}
	#content {
		margin: 0px auto;
		text-align: left;  /* Ausgleich IE5/Win hack */
		width: 750px;				
		min-height: 100%;
		color: #000;
		background-color: #fff;
		border-left: 1px solid #000;
		border-right: 1px solid #000;
	}
	#inner {
		padding: 177px 25px 45px 25px;
		font-size: 0.9em;
		line-height: 125%;
		/* position: relative; */
		z-index: 5;
	}
	#inner .noscr {
		font-size: inherit;
		line-height: inherit;
		text-align: left;
		padding-bottom: 0.75em;
	}
		
	/* Ueberschriften */
	#inner h1, #inner h2, #inner h3, #inner h4 {
  		padding: 0.7em 0 0.3em 0;
  		font-family: 'Century Gothic', arial, sans-serif;
		color: #445421;
  		background-color: inherit;
	}
	#inner h1 {
	  	font-size: 1.5em;
	}
	#inner h2 {
	  	font-size: 1.3em;
	}
	#inner h2.marg-top {
		padding-top: 2em;
	}
	#inner h3 { 
  		padding-bottom: 0.1em;
  		font-size: 1.2em;
	}
	#inner h4 {
	  	padding-bottom: 0.1em;
  		font-size: 1.1em;
	}
	#inner p {
		padding-bottom: 0.75em;
		text-align: left;
	}
	/* Verweise */
	#inner a:link, #inner a:visited, #inner a:hover, #inner a:active {
		text-decoration: none;
		border-bottom: 2px dotted #32ad2f;
	}
	#inner a:link {
		color: #000;
		background-color: inherit;
	}
	#inner a:visited {
		color: #555;								
		border-color: #808080;
		background-color: inherit;
	}
	#inner a:hover, #inner a:active {
		color: #555;
		border-bottom: 1px solid #32ad2f;
		background-color: inherit;
	}
	
	/* Externe Verweise werden durch Hintergrundgrafik gekennzeichnet. 
	Achtung: Der [att^=val]-Selektor ist schon CSS 3, was den IE 6 
	derzeit hoffnungslos ueberfordert, er zeigt die Links ohne Ikons an. 
	Eine Implementierung gibt's aber zumindest in den aktuellen Firefox.
	Fuer Opera habe ich Attributselektor rel herangezogen... */
	
 	#inner a:link[href^="http:"]:after {
		content: ' ' url('/img/verweise/ext_gruen.gif');      				/* jedem absoluten Pfad eine Grafik geben */
	}  
	#inner a:link[href^="http://www.philippkoch.com"]:after {            	/* ausser denen, die zu meiner Domain gehören */
		display: none;
	} 
	/* weitere (overriding) Ikonverwendung */ 
	#inner a:link[rel~=ext]:after {content: ' ' url('/img/verweise/ext_gruen.gif')} 
	#inner a:link[rel~=pdf]:after {content: ' ' url('/img/verweise/pdf_gruen.gif'); display: inline;} 
	#inner a:link[rel~=zip]:after {content: ' ' url('/img/verweise/zip_gruen.gif'); display: inline;}
	
	#inner a:visited[href^="http:"]:after {
		content: ' ' url('/img/verweise/ext_grau.gif');      		
	}
	#inner a:visited[href^="http://www.philippkoch.com"]:after {         
		display: none;
	}  
	/* weitere (overriding) Ikonverwendung */ 
	#inner a:visited[rel~=ext]:after {content: ' ' url('/img/verweise/ext_grau.gif')} 
	#inner a:visited[rel~=pdf]:after {content: ' ' url('/img/verweise/pdf_grau.gif'); display: inline;} 
	#inner a:visited[rel~=zip]:after {content: ' ' url('/img/verweise/zip_grau.gif'); display: inline;}
		
	#inner a:hover[href^="http:"]:after, #inner a:active[href^="http:"]:after {
		content: ' ' url('/img/verweise/ext_rot.gif');      
	}  
	#inner a:hover[href^="http://www.philippkoch.com"]:after, #inner a:active[href^="http://www.philippkoch.com"]:after {         
		display: none;
	} 
	/* weitere (overriding) Ikonverwendung */ 
	#inner a:hover[rel~=ext]:after, #inner a:active[rel~=ext]:after {content: ' ' url('/img/verweise/ext_rot.gif')} 
	#inner a:hover[rel~=pdf]:after, #inner a:active[rel~=pdf]:after {content: ' ' url('/img/verweise/pdf_rot.gif'); display: inline;} 
	#inner a:hover[rel~=zip]:after, #inner a:active[rel~=zip]:after {content: ' ' url('/img/verweise/zip_rot.gif'); display: inline;}	

	
	/* Klasse fuer nach-oben-Links */
	#inner p.novisited a:visited {
		color: #000;								
		border-color: #5ed35b;
		background-color: inherit;
	}
	#inner p.novisited a:hover, #inner p.novisited a:active {
		color: #666;
		border-color: #5ed35b;
		background-color: inherit;
	}
	/* Listen */
	#content #inner ul {
  		list-style-type: square; 
  		list-style-position: inside;
    	padding-top: 0.25em; 
	}
	#content #inner ul li {
  		padding: 0 0 0.6em 0em;
	}
	#content #inner dl.vita {
  		padding-top: 0.75em;
		padding-bottom: 1.75em;		
		margin-left: 0;
		font-weight: bold;
	}	
	#content #inner dl dd{
		padding-bottom: 1em;
		font-style:italic;
		font-weight: normal;
	}
	#content #inner ul.software {
  		list-style-type: square; 
  		list-style-position: inside;
    	padding-top: 0.3em;
	}
	#content #inner ul li.software {
  		padding: 0 0 0.6em 0em;
		font-weight: bold;
	}
	#content #inner ul li ul li.software {
  		padding: 0 0 0.5em 2.6em;
		font-weight: normal;
		list-style-type: none; 
	}
	#content #inner ul li ul li.softwarefett {
  		padding: 0.5em 0 0.5em 2.6em;
		font-weight: bold;
		list-style-type: none; 
	}
	#content #inner ul.nobullet {
	  	list-style-type: none;
	}
	/* Positionierung und Anzeige von Bildern */
	img, .img {
  		border: solid 1px #e7e7e7;
  		padding: 1px;
  		margin: 0;
	}
	/* Bild mittig mit Rand */
	img.mitterand {  
		border: solid 1px #e7e7e7;
  		padding: 1px;
  		max-width: 95%; 
  		margin: 0;
		text-align: center;
	}
	img.randlos {
  		border: none;
  		padding: 0;
  		margin: 0;
  	}
	#content #inner .mittig, 
	#content #inner .mittig img,
	#content #inner p.mittig { 
  		text-align: center; 
	}
	#inner p a:link.bildlink,
	#inner p a:visited.bildlink,
	#inner p a:hover.bildlink,
	#inner p a:active.bildlink {
  		border: 0 none;
  		padding: 0px;
	}
	/* Sonstige Spezial */
	#inner p.left {
	  	text-align: left;
	}
	#inner div.block p {
	  	text-align: justify;
	}
	.klein { 
	  	font-size: 0.85em;
	}
	.kleinrot { 
  		font-size: 0.75em; 
		color: #f00; 
		background-color: #fff; 
		line-height: 120%; 
	}
	#inner h3.rot {
	  	color: #f00;
	  	background-color: #fff;
	}
	.noborder {
	  	border: 0 none;
	}
	/* Klassen fuer Elemente, die umflossen werden */
	.fleft {
  		float: left;
 		margin: 1em 1.6em 0.2em 0;	/* Rand der Elemente zum umfliessenden Text */
	}
	.fright {
  		float: right;
    	margin: 1em 0 0.2em 1.6em;
	}
/* ----------------------------------------------------------------- */	
	/* Thumbz */
	#inner .thumbz {
		margin: 1ex 0 1ex 0;
		text-align: center;
	}
	#inner .thumbz table tbody tr td.thumbcell a:link, 
	#inner .thumbz table tbody tr td.thumbcell a:visited, 
	#inner .thumbz table tbody tr td.thumbcell a:hover, 
	#inner .thumbz table tbody tr td.thumbcell a:active {
		text-decoration: none;
		border: 0 none;
	}
	/* Galerie mittig ausrichten */ 
 	#inner .thumbz table {
		text-align: center;    
		margin: 0 auto 0 auto;
	}
	#inner .thumbz h3,
	#inner .thumbz p {
		text-align: justify;    
		margin: auto 127px auto 127px;
	}
	#inner .thumbz td.thumbcell {   
		width: 100px;
		border-style: none;      /* Rahmenart: '0 none' formatiert keinen Rahmen */
		text-align: center;
		vertical-align: middle;
		padding: 7px; /* 45px */ 
	}
	#inner .thumbz td.thumbcell img {
		border-style: none;
	}
/* ----------------------------------------------------------------- */
	#inner #moviearea, 
	#inner #moviearea img {
		display: block;
		text-align: center;
		z-index: 1;
	}
	
/* --------------------------- Formmailer --------------------------- */
#inner form {
	width: 700px;
	font-family: inherit;
	font-size: 1em;
	color: inherit;
	background: inherit;
}
#inner form fieldset {        
        border: 1px solid #ccc;
        padding: 10px;
        margin-bottom: 10px;
        display: block;
}
#inner form fieldset legend {
        background: inherit;
        color: #264597;
        padding: 6px 3px;
        margin: 0;
        font-weight: bold;
        text-transform: uppercase;
        text-indent: 0;
}
#inner textarea {
	width: 450px;
	overflow: auto;
	border: 1px solid #ccc;
	padding: 2px;
	font-family: inherit;
	color: inherit;
	background: #DBE6F1 url(/img/contact/verlauf.gif) left top repeat-y;
}
#inner input {
	width: 362px;
	border: 1px solid #CCC;
	padding: 2px 0 2px 3px;
	color: inherit;
        background: #DBE6F1 url(/img/contact/verlauf.gif) left top repeat-y;
}
#inner input#submit {
	width: 8em;
	border-width: 1px;
	border-style: solid;
	border-color: #D7D7D7 #AAA #AAA #D7D7D7;
	padding: 0;
	color: inherit;
	background-color: #E5E5E5;
	background-image: none;
}
#inner input#submit:hover {
	color: inherit;
	background-color: #CCC;
}
/* ----------------------------------------------------------------- */
	
	/* Footer */
	#footer {
		position: fixed;
		text-align: left;
		left: 50%;
		margin-left: -375px;       
		bottom: 0;
		width: 750px;
		font-size: 0.8em;
		color: #fff;
		background-color: #756c5f;   
		border-top: 1px solid #000;
		z-index: 6;
	}
	#footer p {
		padding: 2px 23px 2px 25px;
		min-height: 15px;
	}
	#footer p a img {
		padding-left: 5px;
		padding-right: 0px;
		width: 80px;
		display: block;
		float: right;
		border: 0 none;
		text-decoration: none;
	}
	#footer a {
		color: #fff;
		text-decoration: none;
		background-color: inherit;
	}
	#footer p a:hover, #footer p a:focus {
		text-decoration: underline;
	}
}