@charset "utf-8";
body {
	background-image: url(page_bg.jpg);
	background-repeat: repeat-x;
	padding: 0px;
	margin: 0px;
	background-color: #91AED8;
}
* {
margin: 0px;
padding: 0px;
}

*:focus 
{ 
	outline: none;
}

.floatlinks {
	float: left;
}
a {
	color: #316BCE;
}
a:hover {
	color: #0099FF;
	font-style: italic;
}
a:active {
	color: #FF6600;
}

table tr td {
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #ffffff;
	border-top-width: 1px;
	border-top-style: dashed;
	border-top-color: #ffffff;
}
table tr:hover td {
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #bbbbbb;
	border-top-width: 1px;
	border-top-style: dashed;
	border-top-color: #bbbbbb;
}

.cleaner {
clear: both;
}
.header {
	background-image: url(header.jpg);
	background-repeat: no-repeat;
	height: 140px;
	width: 1100px;
	margin-right: auto;
	margin-left: auto;
}
.outpage {
	width: 964px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 20px;
}

.inpage {
	background-color: #DDE7F3;
	width: 960px;
	margin-right: auto;
	margin-left: auto;
	background-image: url(content_bg.jpg);
	background-repeat: repeat-x;
}

.navi {
	background-image: url(navigation.jpg);
	height: 43px;
}





.navi a.home, .navi a.privat, .navi a.referenzen, .navi a.lebenslauf, .navi a.kontakt
{
	background-image: url(navigation.jpg);
	display: block;
	height: 43px;
}
.navi ul {
	padding: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 10px;
}
.navi li {
	list-style-position: inside;
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	float: left;
}

a.home
{
	width: 120px;
	left: 500px;
	background-position: -10px 0px;
}
a.privat
{
	width: 120px;
	left: 590px;
	background-position: -130px -0px;
}
a.referenzen
{
	width: 120px;
	left: 670px;
	background-position: -250px -0px;
}
a.lebenslauf
{
	width: 120px;
	left: 758px;
	background-position: -370px -0px;
}
a.kontakt
{
	width: 120px;
	left: 865px;
	background-position: -490px -0px;
}




a.home:hover
{
	background-position: -10px -100px;
}
a.privat:hover
{
	background-position: -130px -100px;
}
a.referenzen:hover
{
	background-position: -250px -100px;
}
a.lebenslauf:hover
{
	background-position: -370px -100px;
}
a.kontakt:hover
{
	background-position: -490px -100px;
}




a.home:active
{
	background-position: -10px -150px;
}
a.privat:active
{
	background-position: -130px -150px;
}
a.referenzen:active
{
	background-position: -250px -150px;
}
a.lebenslauf:active
{
	background-position: -370px -150px;
}
a.kontakt:active
{
	background-position: -490px -150px;
}




body.pageid21 a.home
{
	background-position: -10px -50px;
}
body.pageid23 a.privat
{
	background-position: -130px -50px;
}
body.pageid24 a.referenzen
{
	background-position: -250px -50px;
}
body.pageid25 a.lebenslauf
{
	background-position: -370px -50px;
}
body.pageid22 a.kontakt
{
	background-position: -490px -50px;
}
body {
	color: #333333;
	font-family: 'PTSans', sans-serif;
	font-size: 14px;
	line-height: 24px;
}
.content {
	margin-right: 10px;
	margin-bottom: 10px;
	margin-left: 10px;
}





.zeile {
	text-align: left;
	line-height: 24px;
	font-size: 14px;
}

.zeile.zentriert {
	text-align: center;
}
.zeile .button {
	background-image: url(button_reflektion.jpg);
	height: 80px;
	width: 188px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 0px;
	padding-top: 0px;
}
.zeile .button span {
	padding-top: 5px;
	display: block;
}

.zeile .button a {
	background-image: url(buttons_all.jpg);
	display: block;
	height: 42px;
	width: 180px;
	margin-bottom: 0px;
	margin-right: auto;
	margin-left: auto;
}


.zeile .button a.referenzen {
	background-position: 0px -50px;
}
.zeile .button a.lebenslauf {
	background-position: 0px -100px;
}
.zeile .button a.kontakt {
	background-position: 0px -150px;
}
.zeile .button a.zurseite {
	background-position: 0px -200px;
}

.zeile .button a.referenzen:hover {
	background-position: -200px -50px;
}
.zeile .button a.lebenslauf:hover {
	background-position: -200px -100px;
}
.zeile .button a.kontakt:hover {
	background-position: -200px -150px;
}
.zeile .button a.zurseite:hover {
	background-position: -200px -200px;
}

.zeile .button a.referenzen:active {
	background-position: -400px -50px;
}
.zeile .button a.lebenslauf:active {
	background-position: -400px -100px;
}
.zeile .button a.kontakt:active {
	background-position: -400px -150px;
}
.zeile .button a.zurseite:active {
	background-position: -400px -200px;
}






.zeile .drittel {
	width: 300px;
}
.zeile .haelfte {
	width: 460px;
}
.zeile .zweidrittel {
	width: 620px;
}
.zeile .voll {
	width: 940px;
}

.zeile .vtrenner {
	height: 200px;
	width: 1px;
	background-color: #CCCCCC;
	margin-right: 10px;
	margin-left: 9px;
}
.htrenner {
	background-color: #CCCCCC;
	height: 1px;
	width: 940px;
	margin-top: 20px;
	margin-right: auto;
	margin-bottom: 19px;
	margin-left: auto;
	clear: both;
}
.welcome {
	background-image: url(welcome.jpg);
	height: 113px;
	width: 940px;
	margin-bottom: 30px;
}


.welcome a.privat {
	background-image: url(buttons_all.jpg);
	background-position: -0px -0px;
	display: block;
	height: 42px;
	width: 180px;
	float: left;
	margin-top: 34px;
	margin-left: 10px;
}
.welcome a.privat:hover {
	background-position: -200px -0px;
}

.welcome a.privat:active {
	background-position: -400px -0px;
}
.welcome h2 {
	display: block;
	margin-top: 15px;
	color: #ffffff;
	font-family: 'PTSansItalic', sans-serif;
	font-size: 20px;
	line-height: 40px;
	text-shadow: #333333 1px 1px 1px;
	margin-left: 20px;
	padding: 0px;
	width: 700px;
	float: left;
}

.netzwerke {
	background-image: url(buttons_netzwerke.jpg);
	height: 60px;
	width: 560px;
	margin-right: auto;
	margin-left: auto;
}
.netzwerke a {
	float: left;
	height: 30px;
	width: 100px;
	margin-top: 10px;
	margin-left: 10px;
	display: block;
}


.title {
	height: 37px;
}


.title h1 {
	display: block;
	margin-top: 10px;
	color: #333333;
	font-family: 'PTSansItalic', sans-serif;
	font-size: 30px;
	line-height: 30px;
	text-shadow: #ffffff 1px 1px 1px;
}
p {
	color: #333333;
	font-family: 'PTSans', sans-serif;
	font-size: 14px;
	line-height: 24px;
	padding: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
}
p strong {
	font-family: 'PTSansItalic', sans-serif;
}
.footer {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #FFFFFF;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
	font-weight: bold;
	line-height: 14px;
	margin-top: 0px;
	margin-bottom: 0px;
	background-color: #CCCCCC;
}


@font-face {
	font-family: 'PTSansItalic';
	src: url('PT_Sans_Italic.eot');
	src: local('☺'), url('PT_Sans_Italic.woff') format('woff'), url('PT_Sans_Italic.ttf') format('truetype');
}
@font-face {
	font-family: 'PTSans';
	src: url('PT_Sans.eot');
	src: local('☺'), url('PT_Sans.woff') format('woff'), url('PT_Sans.ttf') format('truetype');
}
::selection {
	background: #ff9; /* Safari */
	color: #000; /* Safari */
	}
::-moz-selection {
	background: #ff9; /* Firefox */
	color: #000; /* Firefox */
}









/*
	root element for the scrollable.
	when scrolling occurs this element stays still.
*/
.scrollable {
	/* required settings */
	position:relative;
	overflow:hidden;
	width: 360px;
	height:90px;
}

/*
	root element for scrollable items. Must be absolutely positioned
	and it should have a extremely large width to accomodate scrollable items.
	it's enough that you set the width and height for the root element and
	not for this element.
*/
.scrollable .items {
	/* this cannot be too large */
	width:20000px;
	position:absolute;
	clear:both;
}

/* active item */
.scrollable .active {
	z-index:9999;
	position:relative;
}

.scrollable div.software {
	width: 360px;
	height: 90px;
	float: left;
}
.scrollable div.software .inner {
	margin-top: 13px;
	margin-right: 13px;
	margin-left: 13px;
	height: 64px;
	margin-bottom: 13px;
}
.scrollable div.software .inner p.text {
	text-align: left;
	margin: 0px;
	padding: 0px;
	line-height: 21px;
}
.scrollable div.software .inner img {
	float: left;
	margin-right: 10px;
}
.scrollable p.download {
	text-align: right;
	line-height: 21px;
	margin: 0px;
}


















/* this makes it possible to add next button beside scrollable */
.scrollable {
	float:left;	
}

/* prev, next, prevPage and nextPage buttons */
a.browse {
	display:block;
	width:50px;
	height:50px;
	float:left;
	margin: 20px 0px;
	cursor:pointer;
	font-size:1px;
	background-image: url(vorzurueck.jpg);
}

/* right */
a.right 				{clear:right; margin-right: 0px;}
a.right:hover 		{ background-position:-50px -0px; }
a.right:active 	{ background-position:-100px -0px; } 


/* left */
a.left				{ background-position: -0px -50px; margin-left: 0px; } 
a.left:hover  		{ background-position:-50px -50px; }
a.left:active  	{ background-position:-100px -50px; }


/* disabled navigational button */
a.disabled {	
} 	



#mask {
	background-color: #4F77CC;
	background-repeat: no-repeat;
}

div.expose{
	position: relative;
	background-color: #FFFFFF;
	height: 480px;
	padding-top: 10px;
}
div.expose label {
	display: block;
	width: 180px;
	clear: both;
	float: left;
	height: 30px;
	padding: 0px;
	margin-top: 0px;
	margin-right: 10px;
	margin-bottom: 0px;
	margin-left: 10px;
	text-align: right;
}
div.expose input {
	line-height: 20px;
	padding: 0px;
	height: 25px;
	width: 410px;
	float: none;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 5px;
	margin-left: 0px;
}


div.expose textarea {
	width: 410px;
}
div.expose .formhinweis {
	width: 600px;
	margin-right: 10px;
	margin-left: 10px;
	clear: both;
}
.forminfo {
	color: #000000;
	background-color: #FFFF99;
	display: block;
	text-align: center;
	padding: 10px;
}
#form-module-thanks {
	color: #000000;
	background-color: #66CC33;
	display: block;
	text-align: center;
	padding: 10px;
}

div.expose input.formsubmit {
	background-image: url(kontakt.jpg);
	margin: 0px;
	padding: 0px;
	width: 188px;
	background-repeat: no-repeat;
	height: 50px;
	font-size: 1px;
	line-height: 1px;
	color: #31569C;
	float: left;
	position: absolute;
	left: 422px;
	top: 400px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
div.expose input.formsubmit:hover {
	background-position: -200px -0px;
}
div.expose input.formsubmit:focus {
	background-position: -400px -0px;
}
div.expose div.capic {
	float: left;
	position: absolute;
	top: 400px;
	left: 0px;
	background-image: url(kontakt.jpg);
	background-position: -1000px 0px;
	height: 50px;
	width: 188px;
	overflow: hidden;
}
div.expose div.spamtext {
	position: absolute;
	left: 210px;
	top: 400px;
	width: 190px;
}
div.expose div.spamtext label {
	display: block;
	width: 0px;
	clear: both;
	float: left;
	height: 30px;
	padding: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	text-align: right;
	overflow: hidden;
	visibility: hidden;
}
div.expose div.spamtext input {
	line-height: 50px;
	padding: 0px;
	height: 50px;
	width: 188px;
	float: none;
	background-image: url(kontakt.jpg);
	background-position: -800px 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	text-align: center;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 26px;
	font-weight: bold;
	color: #666666;
	margin: 0px;
}
div.expose div.spamtext input:focus {
	background-position: -600px 0px;
	
}
div.expose .formreq
{
	height: 1px;
	width: 1px;
	overflow: hidden;
	visibility: hidden;
	font-size: 1px;
	line-height: 1px;
}
div.expose img.formcaptcha {
	margin-top: 10px;
	margin-right: 34px;
	margin-bottom: 10px;
	margin-left: 34px;
}
a img, img {
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}


/* the overlayed element */
.apple_overlay {
	/* initially overlay is hidden */
	display:none;
	/* growing background image */
/*	background-color: #fff; */
	
	/* 
		width after the growing animation finishes
		height is automatically calculated
	*/
	width:660px;
	/* some padding to layout nested elements nicely  */
	padding:25px;
	/* a little styling */	
	font-size:11px;
}

/* default close button positioned on upper right corner */
.apple_overlay div.close {
	background-image:url(apple-close.png);
	position:absolute;
	right:10px;
	top:15px;
	cursor:pointer;
	height:25px;
	width:25px;
}
 
/* container for external content. uses vertical scrollbar, if needed */ 
.contentWrap {
	height:520px;
	overflow-y:auto;
	overflow-x:hidden;
}
.overlay_img {
	margin-top: 10px;
	margin-bottom: 10px;
	display: block;
}



/* use a semi-transparent image for the overlay */ 
#overlay {
	background-image:url(http://static.flowplayer.org/img/overlay/transparent.png);
	color:#efefef;
	height:500px;
} 
.zeile  .referenz {
	width: 300px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 20px;
	margin-left: 10px;
	float: left;
}
.overlay_content p {
	color: #FFFFFF;
	text-align: left;
	display: block;
	float: left;
	margin-left: 10px;
	margin-right: 10px;
}
.overlay_content ul {
	color: #FFFFFF;
	text-align: left;
	display: block;
	float: left;
	margin-left: 20px;
	margin-right: 20px;
	list-style-position: outside;
	list-style-type: circle;
	padding-bottom: 30px;
}
.overlay_content ul li {
	font-family: 'PTSans', sans-serif;
	font-size: 14px;
	line-height: 24px;
	padding: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 10px;
}
.overlay_content .rdetails p {
	width: 460px;
}
.overlay_title h1 {
	display: block;
	margin-top: 10px;
	font-family: 'PTSansItalic', sans-serif;
	font-size: 30px;
	line-height: 30px;
	color: #FFFFFF;
	text-shadow: #0088ff 1px 1px 1px;
}
.overlay_content h2 {
	text-align: right;
	display: block;
	clear: both;
	float: left;
	width: 150px;
}
.zeile p ul, .zeile p ul li {
	list-style-position: outside;
	list-style-type: circle;
}
table {
	background-color: #FFFFFF;
	padding: 10px;
	margin: 10px;
}