/*
	O U T E R  A N D  G E N E R A L  R E S E T S
	============================================ 
*/

* {
	margin: 0;
	padding: 0;
}

body {
	/* IE Hack vor css hover on all elements */
	/*behavior: url("csshover3.htc"); */
	
	color: #000;
	font-family: "DIN Medium", "Helvetica Neue", Arial, Helvetica, sans-serif;
	font-size: 11px;
	min-width: 1060px;
}

a {
	text-decoration: none;
	color: #000;
	outline: none;
}

a.textflow { text-decoration: underline; }

a img {
	border: 0;
	outline: none;
}

a:hover {
	color: #fff;
	text-decoration: none;
}

a:focus, div:focus  { 
	outline: none; 
	-moz-outline-style: none; 
}

/* paragraph links always negative hovered */
p a, li a {
	padding-left: 1px;
	padding-right: 1px;
}

p a:hover, li a:hover {
	background-color: #000;
}

.clear {
	clear: both;
}	


#header
{
	position: absolute;
	left: 0;
	top: 5px;
	height: 110px;
	width: 1060px;
	background: url('/images/white_75alpha.png');
	z-index: 50; /*Important for popup Mieter-List in IE <8; otherwise Mieter-List is in the background!!*/
}

#middle
{
	position: absolute;
	left: 0;
	top: 120px;
	height: 360px;
	width: 1060px;
	background: url('/images/white_75alpha.png');
}

#bottom
{
	position: absolute; 
	left: 0;
	top: 485px;
	height: 110px;
	width: 1060px;
	background: url('/images/white_75alpha.png');
}

#header img.logo
{
	position: absolute;
	margin-left: 40px;
	margin-top: 38px;
}

#header div.filter
{
	position: absolute;
	margin-left: 510px;
	margin-top: 72px;
	color: #fff;
}

#header div.goto
{
	position: absolute;
	margin-left: 760px;
	margin-top: 72px;
	color: #fff;
}


#teasermarkthalle {
	position: absolute;
	margin-left: 310px;
	margin-top: -20px;
}

/*
	T O O L T I P
	--------------
*/
#tooltip {
	position: absolute;
	z-index: 3000;
	border: 0;
	background-color: #fff;
	padding: 5px;
	opacity: 0.85;
}
#tooltip h3, #tooltip div { 
	margin: 0; font-size: 11px; 
}



/*
	P O P U P S
	-----------
*/

#noscript {
	position: absolute;
	left: 50px;
	top: 50px;
	width: 960px;
	height: 495px;
	z-index: 500;
	background: url('/images/black_70alpha.png');
	color: #fff;
}

#noscript p {
	padding: 0px 100px 10px 100px;
	font-size: 12px;
	font-weight: bold;
}

#noscript p.first {
	padding-top: 280px;
}


#eventpopup, #marktpopup {
	position: absolute;
	left: 350px;
	top: 25px;
	z-index: 200;
	color: #fff;
}


#eventpopup .bar, #marktpopup .bar {
	background-color: #000;
	background-image: url('/images/showbg.png');
	background-repeat: no-repeat;
	padding: 5px 10px 5px 19px; /* padding + line-height = 25px = bar-height */
	line-height: 15px;
	color: #fff;
	font-weight: bold;
	cursor: pointer;
}

#eventpopup .bar .close, #marktpopup .bar .close {
	position:absolute;
	right: 8px;
	top: 8px; /* (25px - 9px) / 2 = 8px */
}
#eventpopup a, #marktpopup a {
	padding: 1px 1px 1px 1px;
	color: #fff;
}
#eventpopup a:hover, #marktpopup a:hover {
	background-color: #000;
}

#eventpopup .fest a:hover {
	background-color: none;
}

#marktpopup {
	display: none;

	/* IMPORTANT: 
	   If you change the width or height you HAVE to change it in 
	   imviadukt.js as well! This is because of scrolling.
	   -> in the function gotoArc(): the paneHeight and paneWidth. */
	width: 350px; 
	height: 440px;
}

#marktpopup p {
	font-size: 12px;
	padding: 10px 10px 0px 10px;
}

#marktpopup p.last {
	padding-bottom: 10px;
}

#marktpopup ul {
	padding-top: 5px;
	padding-left: 10px;
}

#marktpopup ul li {
	font-size: 12px;
	padding-bottom: 3px;
	list-style: none;
}

#marktpopup .jScrollPaneContainer, #eventpopup .jScrollPaneContainer {
	position: absolute;
	overflow: hidden;
	background: url('/images/black_70alpha.png');
}

#marktpopup .jScrollPaneTrack, #eventpopup .jScrollPaneTrack {
	position: absolute;
	cursor: pointer;
	right: 0;
	top: 0;
	height: 100%;
}
#marktpopup .jScrollPaneDrag, #eventpopup .jScrollPaneDrag {
	position: absolute;
	background: url('/images/scrollpane_drag.png');
	cursor: pointer;
	overflow: hidden;
}


#eventpopup {
	/* IMPORTANT: 
	   If you change the width or height you HAVE to change it in 
	   agendaSuccess.php and archivSuccess.php as well! This is because of scrolling.
	   -> in the function jq_link_to_remote(): the paneHeight and paneWidth. */
	width: 350px;
	height: 440px;
}

#eventpopup .content h1 {
	padding: 10px 10px 10px 10px;
	font-size: 32px;
}

#eventpopup .content img.popupimg {
	margin-left: 10px;
	margin-bottom: 10px;
	border: solid 6px #fff;
}

#eventpopup .content p {
	padding: 10px 10px 10px 10px;
	font-size: 12px;
}

/*
	F O O T E R  M E N U
	--------------------
*/

.menu
{
	position: absolute;
	left: 100px;
	top: 20px;
	width: 960px;
}

.menu .group
{
	float: left;
	width: 180px;
}

.menu .group p
{
	text-transform: uppercase;
	line-height: 20px;
}

.menu .group p a
{
	color: #000;
	display: inline;
	padding: 3px;
}

.menu .group p a:hover, .menu .group p a.active
{
	background-color: #000;
	color: #fff;
}


/*
	M I E T E R  G O - T O  AND  F I L T E R
	------------------------------------------
	
	IMPORTANT: If you change width- and height-Settings you might have to 
	adjust paneWidth and paneHeight in imviadukt.js as well! 
*/


#header .goto img, #header .filter img {
	display: block;
}

#header .list {
	padding: 2px 0px 5px 0px;
	/*width: 230px;*/ /* Because of rendering troubles, the width is set in JS for the whole ScrollPane. */
	height: 300px;
	overflow: auto;
	display: none;
}

#header ul {
	padding-right: 0px;
	list-style: none;
	padding: 0px;
	margin: 0px;
}

#header li {
	font-weight: normal;
	padding: 3px 0px 2px 5px;
	margin-left: 5px;
	margin-right: 5px;
	border-bottom: 1px solid #fff;
}

#header li.active {
	cursor: pointer;
	background-color: black;
}

#header .filter li {
	text-transform: uppercase;
}

#header .jScrollPaneContainer {
	position: absolute;
	overflow: hidden;
	background: url('/images/black_70alpha.png');
	z-index: 100;
}

#header .jScrollPaneTrack {
	position: absolute;
	cursor: pointer;
	right: 0;
	top: 0;
	height: 100%;
}
#header .jScrollPaneDrag {
	position: absolute;
	background: url('/images/scrollpane_drag.png');
	cursor: pointer;
	overflow: hidden;
}




/*
	S L I D E R  G E N E R A L
	--------------------------
*/

#sliderNavLeft, #sliderNavRight, #sliderNavLeftEmpty {
	display: block;
	padding: 0px 0px 0px 0px;
	margin: 40px 0 0 0;
	width: 40px;
	overflow:hidden;
}


#sliderNavLeft {
	float: left;
	text-align: right;
	margin-right: 20px;
	height: 120px;
	background-repeat: no-repeat;
	background-image: url('/images/arrow_left.png');
	background-position: right top;
}

#sliderNavRight {
	float: right;
	margin-left: 20px;
	height: 120px;
	background-repeat: no-repeat;
	background-image: url('/images/arrow_right.png');
	background-position: left top;
}

#sliderNavLeftEmpty {
	float: left;
	text-align: right;
	margin-right: 20px;
	height: 120px;
}

#slider {
	height: 360px;
	overflow: hidden;
}

#slider .first {
	margin-left: 0px;
}

#slider .last {
	margin-right: 0px;
}


/*
	  A R C S - S L I D E R
	------------------------
*/

#arcs {
	/* Width is set inline programmatically */
}

.arc {
	width: 220px;
	margin: 20px 0px 20px 20px;
	float: left;
	z-index: -1;
}

.arc .content {
}

.arc .content .top {
	height: 145px;
	background-repeat: no-repeat;
	background-color: #000;
}

.arc .content .top img.img-overlay-slide {
	display: none;
}

.arc .content .bottom {
	color: #fff;
	background-color: #000;
	width: 220px;
	height: 25px;
}

.arc .popup {
	padding: 0px 0 20px 0px;
	display: none;
}

.arc .popup p {
	padding-top: 10px;	
}

.arc .popup p.desc, .arc .popup p.urls {
	font-weight: bold;	
}

/*
	S T A T I C  C O N T E N T - S L I D E R 
	-----------------------------------------
*/

#staticcontent {
	/* Width is set inline programmatically */
}

.colspan1, .colspan2, .colspan3 {
	width: 300px;
	margin: 20px 0px 20px 20px;
	float: left;
	z-index: -1;
	overflow: hidden;
}

.colspan2 {
	width: 620px;
	overflow: hidden;
}

.colspan3 {
	width: 940px;
	overflow: hidden;
}

#staticcontent h2 {
	font-size: 11px;
	line-height: 12px;
	padding-bottom: 15px;
}

#staticcontent p {
	font-size: 11px;
	line-height: 12px;
	padding-bottom: 15px;
}

#staticcontent p.important {
	font-weight: bold;
}

#staticcontent div.dl { float: left; padding-right: 5px; }

#staticcontent div.dl img { padding-right: 3px; vertical-align: bottom; }

/*
	G A L L E R Y - S L I D E R
	----------------------------
*/

#gallery {
	/* Width is set inline programmatically */
}

.gallery-item {
	width: 460px;
	margin: 20px 0px 20px 20px;
	float: left;
	z-index: -1;
}

span.copyright {
	font-weight: normal;	
}

/*
	A G E N D A - S L I D E R
	-------------------------
*/


#agenda{
	/* Width is set inline programmatically */
}

.agenda-event {
	width: 159px; /* 160px - 1px boder */
	height: 320px;
	margin: 20px 0px 20px 20px;
	float: left;
	z-index: -1;
	border-left: 1px solid #000;
	background: url('/images/white_75alpha.png');
	/*background-color: #fff;*/
	overflow: hidden;
}

.agenda-event .bar {  
	background-color: #000;
	color: #fff;
	font-weight: bold;
	padding: 5px 0 5px 5px; /* padding + line-height = 25px = bar-height */
	line-height: 15px;
}

.agenda-event p {
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 10px;
}

.agenda-event a.more {
	padding-left: 1px;
	padding-right: 1px;
	background-color: #000;
	color: #fff;
}

.agenda-event a {
	padding-left: 1px;
	padding-right: 1px;
}

.agenda-event a:hover {
	background-color: #000;
}

.agenda-event .top {
	font-weight: bold;
}

.agenda-event h1 {
	padding-top: 20px;
	padding-left: 5px;
	padding-right: 5px;
	font-size: 20px;
}
.agenda-event h2 {  
	padding-top: 15px;
	padding-left: 5px;
	padding-right: 5px;
	font-size: 16px;
}
.agenda-event h3 {  
	padding-top: 10px;
	padding-left: 5px;
	padding-right: 5px;
	font-size: 12px;
}

.agenda-event .bodytext {
}

.agenda-event .footer {
	font-weight: bold;
}