@import url("standard.css");
@import url("colors.css");


/*
# --- C S S - I N F O ------------------------------------------------------{}*/

/*
   Cascading Stylesheet http://www.reichelt-kommunikation.de
   Design, CSS and HTML by Dennis Frank - http://www.dennisfrank.net
   last update: 2006-07-06
*/

/*
# --- B O D Y --------------------------------------------------------------{}*/

	body {
		font-family: "Lucida Grande", "Bitstream Vera Sans", Verdana, sans-serif;
		float: left; width: 100%;
	}

/*
# --- L I N K S ------------------------------------------------------------{}*/
        
    a {
		cursor: pointer;
	}

    a:hover {}
	
    a:active {}
    
    a:visited {}
	    
/*
# --- B L O C K S ----------------------------------------------------------{}*/
	#con {
		/* see ie.css */
		position: relative;
		margin: 0 auto;
		text-align: left;
		border: 2px solid #fff;
		border-width: 0 2px 0 0;
		display: table;
	}

	h1 {background: url(/img/page_logo.gif);}
	h2 {background: url(/img/slogan.gif);}

	h1 {
		position: absolute;
		z-index: 10000;
		top: 30px; left: 30px; left: 48px;
		width: 268px; height: 77px;
		font-size: 1em;
	}
		
	h2 {
		position: absolute;
		left: 35em; top: 54px;
		margin: 0;
		width: 388px; height: 84px;
		font-size: 100%;
		/* Phark Image Replacement (Modified for IE 5): http://www.eingko.net/blog/?p=16 */
		text-indent: -100em;
		overflow: hidden;
		/* see Hacks for IE 5 Mac */
	}
	
	#header {
		/* see ie.css */
		position: relative;
		top: 11px;
		height: 270px;
		background-repeat: no-repeat;
		background-position:  35em 0;
	}
	
	#container {
		position: relative;
		margin-top: -270px;
		padding-top: 272px;
		clear: both;
		border-top-width: 9px;
		border-top-style: solid;
		float: le ft;
		width: 35em; padding-right: 388px;
	}

	#content {
		/* see ie.css */
		position: relative;
		float: left;
		width: 100%;
		top: -120px;
	}
	
	#sidebar {
		width: 388px;
		margin-right: -388px;
		float: left;
	}

	#footer {
		display: none;
		position: relative;
		clear: both;
	}

/*
# --- H E A D E R ----------------------------------------------------------{}*/
	
	h1 a {
		display: block;
		width: 268px; height: 77px;
		text-decoration: none;
		border-width: 0;
		background-color: transparent;
		/* Phark Image Replacement (Modified for IE 5): http://www.eingko.net/blog/?p=16 */
		text-indent: -100em;
		overflow: hidden;
		/* see Hacks for IE 5 Mac */
	}
	


/*
# --- C O N T E N T --------------------------------------------------------{}*/
	
	#content hr {display: block; visibility: hidden; clear: both; margin-bottom: 5em;}
	
	#content h3, #content h4 {
		padding-left: 30px; padding-right: 30px;
	}
	
	#content h3 {
		font-size: 160%;
		line-height: 130%;
		border-style: solid;
		border-width: 2px 0 1px 0;
		border-bottom-style: dashed;
		padding: .8em 0 .6em 21px;
		margin-bottom: 1em;
		margin-right: 2px;
	}
	
	#content h4 {
		font-size: 100%;
		margin: 2em 0 1.5em 0;
	}
	
	#content p {padding: 0 30px;}
	
	#content .excerpt {font-weight: bold;}

	.passfoto {
		/* see ie.css */
		float: left;
		margin: 1em 1em .5em 20px;
		padding: 7px 7px 5px 7px;
		font-size: 84%;
		text-align: center;
	}

	.passfoto img {border-width: 2px; border-style: solid;}
	
	#content .passfoto p {
		padding: 0 .3em;
		line-height: 110%;
		margin: -.3em 0 0 0;
	}
	
	#content blockquote {
		background-repeat: repeat-y;
		background-position: left top;
		padding: 0;
		margin-left: 30px;
	}
	
	#content blockquote p {padding: 1em;}
	
	#content ul, #content ol {
		padding: .8em 28px .2em 30px;
		margin-right: 2px;
		background-repeat: repeat-y;
		background-position: left top;
		border-width: 1px 0;
		border-style: dashed;
	}
	
	#content ul li {
		padding-bottom: .5em;
		padding-left: 2.5em;
		background-repeat: no-repeat;
		background-position: .6em .2em;
	}
	

	#content ol li {
		margin-left: 2.6em;
		padding-left: .2em;
		padding-bottom: .5em;
	}

	
	
/*
# --- S I D E B A R --------------------------------------------------------{}*/

	#sidebar {
		font-size: 90%;
		line-height: 120%;
	}
	
	#sidebar ul, #sidebar li {
		float: left; width: 100%;
		margin: 0; padding: 0;
	
	}
	
	#nav-top a, #nav-sub a {text-decoration: none;}
	#nav-top strong, #nav-sub strong {display: block; text-decoration: underline;}
	#nav-top span, #nav-sub span {display: block;}
	
		
	#nav-start, #nav-top, #nav-sub a {
		display: block;
		text-decoration: none;
	}
	
	#nav-start li a {
		float: left; width: 100%;
		background-repeat: repeat-x;
		background-position: top left;
		padding: .5em 0;
		text-align: center;
	}
	
	#nav-start strong {margin: .5em;}
		
	#nav-top li {margin-top: 2px;}

	#nav-top a {
		float: left; width: 100%;
		line-height: 150%;
		/* see ie.css */
	}
	
	#nav-top img {
		float: left;
		border-width: 2px; border-style: solid;
		margin: 9px;
	}
	
	#nav-top strong {
		margin: 9px;
		padding-top: 4px;
		line-height: 120%;
		font-size: 140%;
	}
	
	#nav-top span {
		font-size: 110%;
		margin: 9px;
	}
	
	#sidebar #nav-sub {
		margin: 2px 0 2px 0;
		border-bottom-width: 2px; border-bottom-style: solid;
	}
	
	#nav-sub a {
		display: block;
		padding: 9px;
		margin: 0;
		border-width: 2px 2px 0px 2px; border-style: solid;
	}
	
	#nav-sub a strong {
		/* see ie.css */
		font-size: 120%;
		margin-bottom: .5em;
	}
	
	
	#contact {
		float: left;
		width: 384px;
		border-width: 2px; border-style: solid;
	}
	#contact p, #contact h3, #contact h4 {padding: 0 9px;}
	#contact .tel span {font-size: 130%; font-weight: bold;}
	#contact h4 {margin: 2em 0 0 0;}

	#impressum {
		float: left; width: 388px;
		margin-top: 2px;
		padding: 1em 0 1.5em 0;
		border-style: solid;
		border-width: 9px 0 2px 0;
	}
	
	#impressum h3, #impressum p {margin-left: 9px; margin-right: 9px;}
	#impressum h3 {margin-bottom: .5em;}
	#impressum div {float: left;}
	
	#webdesign {
		/* see ie.css */
		float: left; width: 388px;
		margin: 1em 9px 0 9px;
		padding-bottom: 1em;
	}
	
/*
# --- F O O T E R ----------------------------------------------------------{}*/

	#footer p {
		width: 100%;
		border: 1px solid red;
		margin-left: -13px;
		text-align: right;
		font-size: 80%;
	}

/*
# --- F O R M S ------------------------------------------------------------{}*/

	.zemContactForm {float: left; width: 100%; padding: 0; margin: 0;}

	.zemContactForm fieldset {
		margin: 0;
		padding: 9px 0 9px 9px;
		border-width: 0; 
	}

	.zemContactForm p {
		font-size: 90%;
		line-height: 120%;
		margin: 0; padding: 0;
		width: 18em;
		clear: both;
	}

	.zemContactForm legend {display: none;}
	
	.zemContactForm label {}
	.zemContactForm div {position: relative; z-index: 100; width: 50%; margin-bottom: 1em; float: left;}
	.zemContactForm div input {width: 170px;}
	.zemContactForm textarea {width: 356px; margin-bottom: .5em;}
	
	input, checkbox, textarea {border-width: 1px;}
	
	.zemSubmit {
		float: right;
		width: 13em;
		height: 3em;
		margin: -3em 1.3em 0 0;
	}
	
	.zemError, #zemThanks {
		border-width: 2px;
		border-style: solid;
		padding: .5em;
		margin: 2px;
		font-size: 110%;
		line-height: 150%;
	}


	#sidebar .zemError {margin-bottom: 1em;}

	#sidebar .zemError {
		float: none;
		width: auto;
	}

	#sidebar .zemError li {
		float: none;
		width: auto;
		margin: .5em;
	}
	#sidebar .zemError strong {display: inline;}
	
	#zemThanks {left: 13px;}
	
	.zemContactForm #phone, .zemContactForm #mail {display: none;}


/*
# --- H A C K S ------------------------------------------------------------{}*/

h1 a {
	/* Phark Image Replacement IE 5 Mac Hack: http://www.eingko.net/blog/?p=16l */
	line-height: 77px;
	overflow: visible;
	/* Hide from IE 5 Mac \*/
	overflow: hidden;
	/* End hide from IE 5 Mac */
}

h2 {
	/* Phark Image Replacement IE 5 Mac Hack: http://www.eingko.net/blog/?p=16l */
	line-height: 84px;
	overflow: visible;
	/* Hide from IE 5 Mac \*/
	overflow: hidden;
	/* End hide from IE 5 Mac */
	
}

a#button-portfolio {
	/* Phark Image Replacement IE 5 Mac Hack: http://www.eingko.net/blog/?p=16l */
	line-height: 109px;
	overflow: visible;
	/* Hide from IE 5 Mac \*/
	overflow: hidden;
	/* End hide from IE 5 Mac */
}