/* CSS Document */
* { -moz-box-sizing:border-box; }

body{ background-color:#666666; }

#main{
  position:absolute;
	left:0px;
	top:0px;
	width:766px; 
	/**height:880px;*/
  border-color:#CCCC33;
}
.textstrong { font-weight:bold; }

#mlogo{
  position:absolute;
	left:4px;
	top:4px;
	width:301px; 
	height:51px;
}
#mJahr0{
  position:absolute;
	left:317px;
	top:4px;
	width:79px; 
	height:51px;
}
#mJahr1{
  position:absolute;
	left:407px;
	top:4px;
	width:79px; 
	height:51px;
}
#mJahr2{
  position:absolute;
	left:497px;
	top:4px;
	width:79px; 
	height:51px;
}
#mJahr3{
  position:absolute;
	left:587px;
	top:4px;
	width:79px; 
	height:51px;
}

#mJahr4{
  position:absolute;
	left:678px;
	top:4px;
	width:79px; 
	height:51px;
}
#mJahrPrev{
  position:absolute;
	left:317px;
	top:57px;
	width:12px; 
	height:12px;
}
#mJahrNext{
  position:absolute;
	left:745px;
	top:57px;
	width:12px; 
	height:12px;
}
#mIntonation{
  position:absolute;
	left:4px;
	top:71px;
	width:121px; 
	height:21px;
  /*padding:1px;
	background-color:#CCCCCC;*/
}
#mKuenstler{
  position:absolute;
	left:162px;
	top:71px;
	width:121px; 
	height:21px;
}
#mBilder{
  position:absolute;
	left:317px;
	top:71px;
	width:121px; 
	height:21px;
}
#mPresse{
  position:absolute;
	left:477px;
	top:71px;
	width:121px; 
	height:21px;
}
#mKontakt{
  position:absolute;
	left:636px;
	top:71px;
	width:121px; 
	height:21px;
}
#postkarte{
  border:0px;
  position:absolute;
  left:4px;
  top:122px;
  width:754px; 
  height:360px;
  background-color:#666666;
}
#sponsor-imgs {
  position:absolute;
  left:4px;
  top:700px;
  width:754px; 
}
.sponsor-img {
  width: 100%;
}
.sponsor-img img {
  width: 247px;
  padding: 2px;
}

#pknav{
  border:0px;
  position:absolute;
	left:4px;
	top:482px;
	width:754px; 
	height:42px;
	background-color:#666666;
}
#leftarr {
  opacity: 0.4;
  position: absolute;
  width: 42px;
  height: 42px;
  /*background: url("imgs/leftarr.jpg") no-repeat scroll 50% 50% rgba(0, 0, 0, 0);*/
  cursor: pointer;
  z-index: 999 !important;
}
#rightarr {
  opacity: 0.4;
  position: absolute;
  left: 712px;
  width: 42px;
  height: 42px;
  /*background: url("imgs/rightarr.jpg") no-repeat scroll 50% 50% rgba(0, 0, 0, 0);*/
  cursor: pointer;
  z-index: 999 !important;
}
#leftarr:hover, #rightarr:hover {
  opacity: 1;
}
#postkarteFooter{
  border:0px;
  position:absolute;
	left:4px;
	top:500px;
	width:754px; 
	height:21px;
  color:#FFFFFF;
	font-family:Verdana,Arial;
	font-size:12px;
	background-color:#666666;
}
/* wenn ich die pknav habe */
#postkarteFooter.pkFooter { top: 542px; }

/*contentWest tritt anStelle der Postkarte*/
#contentWest{
  position:absolute;
	left:6px;
	top:150px;
	width:265px; 
	/*height:360px;*/
  color:#FFFFFF;
	font-family:Verdana,Arial;
	font-size:12px;
	background-color:#666666;
}

.ilang { float: right; }
/* .clearfix { clear: both; } */

/*Abweichend vom sonstigen Inhalt Links ist die Intonation als Lesetext breiter und hat auch keine Unterpunkte*/
#contentIntonation{
  position:absolute;
	left:6px;
	top:150px;
	width:597px; 
	/*height:360px;*/
  color:#FFFFFF;
	font-family:Verdana,Arial;
	font-size:12px;
	background-color:#666666;
}
/*contentEast enthält die Unterpunkte der linken Seite*/
#contentEast{
  position:relative;
  float:left;
	/*left:275px;*/
	left:319px;
	top:150px;
	/*width:485px;*/ 
	width:437px; 
	height:600px;
  color:#FFFFFF;
	font-family:Verdana,Arial;
	font-size:12px;
  text-align:right;
	background-color:#666666;
  /*overflow: auto; würde beim überschreiten der angegebenen Höhe einen Scrollbalken setzen. Ist aber schlecht wenn auch Bilder geladen werden, weil
                                    die zum laden länger brauchen und manchmal der Text überm Bild liegt -> nur bei reinen Texten möglich (immer Höhe setzen)*/  
}
/* Text wird in einem Container mit fester Höhe angezeigt, damit das verschlucken von langem Text beim InternetExplorer verhindert wird*/
#contentEastText{
  position:relative;
  float:left;
	/*left:275px;*/
	left:319px;
	top:150px;
	/*width:485px;*/ 
	width:437px; 
	height:1400px;
  color:#FFFFFF;
	font-family:Verdana,Arial;
	font-size:12px;
  text-align:right;
	background-color:#666666;
  /*overflow: auto;*/
}

/* innerhalb des contentEast gibt es noch den contentBild, um die Grösse anpassen zu können*/
#contentBildFrame{
	height:300px;
}
#contentBild{
	/*height:300px;*/
	/*height:400px;  mit nachfolgendem Float auf die genaue Höhe verzichtet*/
}
.slideshowactive{
	cursor:pointer;
  font-weight:bold;
  color:#FFFFFF;
}
.slideshowinactive{
  font-weight:bold;
  color:#999999;
}
/*wie werden die Links der Bilder gezeigt. Kleiner Trick: Da die Farbe der Links mi a:links definiert werden bleibt nur für den
nicht aktiven Link die hier gewählte Farbe übrig (umgeht das Problem, dass mit <div..> immer eine neue Zeile begonnen wird)*/
#bildLinks{
  position:relative;
	width:437px;
  float:right;
	font-weight:bold;
  text-align:right;
  color:#FFB417;
}
#bildTitle{
  position:relative;
  float:left;
	font-weight:bold;
  text-align:left;
  color:#BCBCBC;
}
#eastText{
  position:relative;
  float:left;
	font-family:Verdana,Arial;
	font-size:12px;
  text-align:left;
	background-color:#666666;
}

.linkHeader{
	font-weight:bold;
  color:#BCBCBC;
}
#linkCurrent{
	font-weight:bold;
  font-size:14px;
  color:#FFB417;
}

a:link,a:visited{
	/*font-family: Arial,sans-serif;*/
	font-family:Verdana,Arial;
	font-size:12px;
	font-weight:bold;
	color:#FFFFFF;
	text-decoration:none;
}
a:hover{
	font-family:Verdana,Arial;
	font-size:12px;
	font-weight:bold;
	color:#BCBCBC;
	text-decoration:none;
}

.hidden{ display:none; }
/*Aufruf von class=menuBorder aus Menüzeile */
img.menuBorder{
  border:0px;
}
/*Aufruf von class=bildBorder aus einem Bild */
img.bildBorder{
  border:0px;
  border-color: #DFDFDF;
}