@charset "ISO-8859-1";
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
	font-weight: normal;
	color: #333;
	
	height: 100%;
	width: 100%;
}
select {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #237E95;
	border: 1px solid #13687C;
	background-color: #F5F5E9;
}
select option:hover{ background: url(http://www.messora.ch/images/pixblau2.gif); }

button {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #F5F5E9;
	background-color: #13687C;
}


/* Behaviour für IE6 für transparente PNGs */

img{
	behavior: url("pngbehavior.htc");
}

/* ************************ */
/*FONTS*/
/* ************************ */

.titel {
	font-weight: bold;
	color: #237E95;
}

.textblau {
	color: #237E95;
}

a:link {
	color: #237E95;
	text-decoration: underline;
}
a:visited {
	color: #237E95;
	text-decoration: underline;
}
a:hover {
	color: #13687C;
	text-decoration: none;
}
a:active {
	color: #13687C;
	text-decoration: none;
}

/* ************************ */
/*LAYERS*/
/* ************************ */

#background {
	position:fixed;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	z-index:1;
}

#contentStart {
	position:relative;
	left:275px;
	top:80px;
	width:990px;
	height:100%;
	z-index:3;
}
#contentStartAuge {
	position:absolute;
	left:675px;
	top:280px;
	width:100px;
	height:100px;
	z-index:2;
}

/* IE6-Hack für Position fixed */

* html #contentStart { /*\*/position: absolute; left: expression((275 + (ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop)) + 'px'); top: expression((80 + (ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft)) + 'px');/**/ }

#contentPortfolio {
	position:relative;
	left:245px;
	top:120px;
	width:400px;
	height:30px;
	z-index:3;
}

/* IE6-Hack für Position fixed */

* html #contentPortfolio { /*\*/position: absolute; left: expression((245 + (ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop)) + 'px'); top: expression((120 + (ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft)) + 'px');/**/ }

#contentAngebot {
	position:relative;
	left:245px;
	top:150px;
	width:650px;
	height:100%;
	z-index:3;
}

/* IE6-Hack für Position fixed */

* html #contentAngebot { /*\*/position: absolute; left: expression((245 + (ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop)) + 'px'); top: expression((150 + (ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft)) + 'px');/**/ }

#menuKreativ {
	position:fixed;
	left:210px;
	top:195px;
	width:200px;
	height:21px;
	z-index:4;
}

/* IE6-Hack für Position fixed */

* html #menuKreativ { /*\*/position: absolute; left: expression((210 + (ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop)) + 'px'); top: expression((195 + (ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft)) + 'px');/**/ }

#contentKreativUebersicht {
	position:relative;
	left:210px;
	top:230px;
	width:100px;
	height:21px;
	z-index:4;
}

/* IE6-Hack für Position fixed */

* html #contentKreativUebersicht { /*\*/position: absolute; left: expression((210 + (ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop)) + 'px'); top: expression((230 + (ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft)) + 'px');/**/ }

#contentKreativForBack {
	position:relative;
	left:320px;
	top:230px;
	width:100px;
	height:21px;
	z-index:4;
}

/* IE6-Hack für Position fixed */

* html #contentKreativForBack { /*\*/position: absolute; left: expression((320 + (ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop)) + 'px'); top: expression((230 + (ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft)) + 'px');/**/ }

#contentKreativAnalogAlle {
	position:relative;
	left:121px;
	top:100px;
	width:1079px;
	height:679px;
	z-index:3;
}

/* IE6-Hack für Position fixed */

* html #contentKreativAnalogAlle { /*\*/position: absolute; left: expression((121 + (ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop)) + 'px'); top: expression((100 + (ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft)) + 'px');/**/ }

#contentKreativAnalogDetail {
	position:relative;
	left:450px;
	top:190px;
	width:1079px;
	height:679px;
	z-index:3;
}

/* IE6-Hack für Position fixed */

* html #contentKreativAnalogDetail { /*\*/position: absolute; left: expression((450 + (ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop)) + 'px'); top: expression((190 + (ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft)) + 'px');/**/ }

#contentKreativBewegtAlle {
	position:relative;
	left:200px;
	top:140px;
	width:979px;
	height:578px;
	z-index:3;
}

/* IE6-Hack für Position fixed */

* html #contentKreativBewegtAlle { /*\*/position: absolute; left: expression((200 + (ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop)) + 'px'); top: expression((140 + (ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft)) + 'px');/**/ }

#contentKreativBewegtDetail {
	position:relative;
	left:450px;
	top:200px;
	width:979px;
	height:578px;
	z-index:3;
}

/* IE6-Hack für Position fixed */

* html #contentKreativBewegtDetail { /*\*/position: absolute; left: expression((450 + (ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop)) + 'px'); top: expression((200 + (ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft)) + 'px');/**/ }

#contentPortrait {
	position:relative;
	left:245px;
	top:230px;
	width:492px;
	height:100%;
	z-index:3;
}

/* IE6-Hack für Position fixed */

* html #contentPortrait { /*\*/position: absolute; left: expression((245 + (ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop)) + 'px'); top: expression((230 + (ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft)) + 'px');/**/ }

#contentPortraitFoto {
	position:absolute;
	left:500px;
	top:-100px;
	width:427px;
	height:332px;
	z-index:3;
}

/* IE6-Hack für Position fixed */

* html #contentPortraitFoto { /*\*/position: absolute; left: expression((673 + (ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop)) + 'px'); top: expression((110 + (ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft)) + 'px');/**/ }

#navigation {
	position:fixed;
	left:50px;
	top:50px;
	width:220px;
	height:220px;
	z-index:2;
}

/* IE6-Hack für Position fixed */

* html #navigation { /*\*/position: absolute; top: expression((50 + (ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop)) + 'px'); left: expression((50 + (ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft)) + 'px');/**/ }

#adresse {
	position:fixed;
	left:50px;
	bottom:50px;
	width:115px;
	height:115px;

	z-index:4;
}

/* IE6-Hack für Position fixed */

* html #adresse { /*\*/position: absolute; bottom: expression((50 + (ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop)) + 'px'); left: expression((50 + (ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft)) + 'px');/**/ }

#augen {
	position:fixed;
	right:0px;
	bottom:0px;
	width:400px;
	height:400px;
	z-index:4;
}

/* IE6-Hack für Position fixed */

* html #augen { /*\*/position: absolute; bottom: expression((0 + (ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop)) + 'px'); right: expression((0 + (ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft)) + 'px');/**/ }

/* ************************ */
/*Inhalte Contents Portfolio*/
/* ************************ */

/*Portfolio*/

#portfolioUebersichtContent{
	position: relative;
	padding-right:20px;
	left: 245px;
	margin-top: 165px;
	bottom: 10px;
	width: 800px;
	height: 75%;
	z-index: 10;
	overflow: auto;
}

/* Die einzelnen Portfolio-Punkte */

#portfolioUebersichtContent .contentPortfolioListItem{
	margin-bottom: 20px;
	position: relative;
	height: auto;
}

#portfolioUebersichtContent .contentPortfolioListe{
	position: relative;
	left:  436px;
	top: 0px;
	height: 158px;
}

#portfolioUebersichtContent .contentPortfolioListeInhalt{
	position: relative;
	left:  512px;
	top: 0px;
	height: 158px;
}

#portfolioUebersichtContent .kurztext{
	margin-top: 10px;
	margin-bottom: 10px;
}

.contentPortfolioListItem .uebersichtBild{
	float: left;
}
.contentPortfolioListItem .uebersichtBildContentBG{
	float: left;
}

#portfolioUebersichtContent .rightTab{
	position: relative;
	float: left;
	margin-left: 12px;
	width: 350px;
	height: auto;
	z-index: 12;
	margin-bottom: 20px;
}

/* Portfolio Detail Main-Page */

#portfolioContent{	/* Inhalts-Div für die Portfolio-templates */
	position: absolute;
	left: 240px;
	top: 160px;
	width: 1050px;
	height: 500px;
	z-index: 10;
}

/*Portfolio Detail 1*/

#portfolioContent .rightTab{
	position: relative;
	float: left;
	margin-left: 12px;
	width: 300px;
	height: auto;
	z-index: 12;
}

#portfolioContent label, #portfolioUebersichtContent label{
	line-height: 1.5em;
	width: 80px;
	float: left;
}

#contentPortfolioDetail1Buttonleiste{
	position: absolute;
	bottom: -3px;
	vertical-align: bottom;
	height: auto;
	width: 250px;
	left: 730px;
	z-index: 20;
}

#contentPortfolioDetail1uebersicht{
	position:absolute;
	left: 0px;
	top:-30px;
	width:700px;
	height:30px;
	z-index:4;
}

#portfolioContent #detailbild{
	float: left;
	text-align: center;
}

#portfolioContent .detailBild1 {
	position:relative;
	width:718px;
	height:503px;
	z-index:4;
	overflow: visible;
}


#contentPortfolioDetail1Liste1a {
	float: left;
	position: relative;
	width: 80px;
	height:130px;
	z-index:4;
}
#contentPortfolioDetail1Liste1b {
	float: left;
	position:relative;
	width:200px;
	height:130px;
	z-index:4;
}

/*Portfolio Detail 2*/

#portfolioContent .detailBild2 {
	position:relative;
	width:503px;
	height:503px;
	z-index:4;
	overflow: visible;
}

#contentPortfolioDetail2Buttonleiste .detailButton{
	/*left: 761px;*/
	position: relative;
	width: 175px;
	height: 73px;
	margin-top: 7px;	/* Abstand von Button zu Button */
	border: 0px;
}

#contentPortfolioDetail2Buttonleiste{
	position: absolute;
	bottom: -3px;
	vertical-align: bottom;
	height: auto;
	width: 400px;
	left: 526px;
	z-index: 20;
}

#contentPortfolioDetail2Buttonleiste img{
	border: 0px;
}

#contentPortfolioDetail2Buttonleiste .detailButton1{

	/*left: 1145px;*/
	position: relative;
	width: 175px;
	height: 73px;
	margin-top: 7px;	/* Abstand von Button zu Button */
	border: 0px;
	margin-left: 5px;
}


#contentPortfolioDetail2uebersicht{
	position:absolute;
	left: 0px;
	top:-30px;
	width:490px;
	height:30px;
	z-index:4;
}

/*Portfolio Detail 3*/

.detailBild3{
	position: relative;
}

#contentPortfolioDetail3uebersicht{
	position: absolute;
	right: 15px;
	top: -30px;
	width: 300px;
	height: 30px;
	z-index: 4;
}


/* Background Loader-image */


.loader {
	background-image: url(images/loader.gif);
	background-position: 10px 10px;
	background-repeat: no-repeat;
}


/*hab f?r dieeses Beispiel alle Masse von Detail 1 ?bernommen*/




/* ************************ */
/*ENDE hier mein Beispiel des Contents Portfolio*/
/* ************************ */



/* ************************ */
/*Hack f?r IE6*/
/* ************************ */

<!--[if IE 6]>	
<style type="text/css">
#layer {
filter:progid: DXImageTransform.Microsoft.AlphaImageLoader(src='bild.png', sizingMethod='scale');
background:none;
}
</style>
<![endif]form {
}

-->