/*Breakpoints
	xs
 481px (optimize Introtext on old Phone switch to landscape)

 568px
 	s
 638px
 656px/674px (switch to double 2er box - iPad & Phone Landscape)
 	n
 974px/991px (switch to right column - Desktop & iPad Landscape)
 	l
*/

body
{
	width:100%;
    min-width: 320px;
    position:relative;
}

/*Es gibt keinen wrapper, weil menü und break und 2 footerbereiche auf 100% sind. Daher allen zentrierten Bereichen diese Klasse geben */
/* Auch für innere Divs zum Zentrieren, wenn ihre Parents ueber die ganze Breite gehen (contentbreak nicht, anderes padding) */
/* Für contenttop gehts auch nicht, weil die 978 breit sein muß wegen der HG-Grafik*/
.center{
	/*width:100%;*/ /* 978px Gesamtbreite - paddings */
	margin: 0 auto;
	padding: 0; /* Alle Center-divs haben links und rechts 9px padding. */
}


#topbanner {
    padding-bottom: 9px;
    padding-top: 9px;
}

#header
{
    display:block !important;
    position:relative;
    overflow:hidden;
	padding-top: 3px;
	clear:left;
	text-align: center;
	height: 70px;
}

.logo img
{
	height: auto;
	max-width: 302px;
	min-width: 151px;
	width: 50% !important;
}

#logo h1
{
        display: block;
		margin:0;
		top:3px;
}

#search div.search
{
	position:relative;
	/*top:19px;*/
	padding-top: 20px;
}

#login
{
	text-align:right;
	padding-top: 20px;
}

#login div.cd_moduletitle_logo 
{
	text-align:right !important;
}

#mainmenu-bg{
	position:relative;
	padding-top:9px;
	padding-bottom:18px;
	
	/*position: fixed;*/

	/*opacity: 0.9;
	width:100%;*/
	z-index: 999;
}


@media (max-width: 974px) {
	#header{display:none !important;}
	#mainmenu-bg{
		margin-top:-18px;
		padding-top:0px;
		padding-bottom:7px;
	}
}

@media (min-width: 656px) {
  #mainmenu-bg {
	position:relative;
	margin-left: -10px;
    margin-right: -10px;
	}
}

@media (min-width: 975px) {
  #mainmenu-bg {
	position:relative;
	padding-top:9px;
	padding-bottom:18px;
	margin-left: -10px;
    margin-right: -10px;
	}
}

/* Im Joomla-Template gibt es in Contentbottom 1 Position, alle Boxen dort in richtiger Reihenfolge hin.
*  Über Modul Chrome kann man zwar allen eine Klasse mitgeben, aber immer nur allen die gleiche.
*  Damit die Boxen sauber floaten, auch bei unterschiedlicher Hoehe, muß jeder Box am Zeilenanfang diese
*  clear-klasse mitgegeben werden. 
*/
#contentbottom  .newrow
{
	clear: both;
}

/* ++++++++++++++  footer  ++++++++++++++ */

#footer-menu
{
	text-align: center;
	background-color: #900101;
}

#footer-content
{
	background-color: #cccccc; /*#8f8f8f;*/
	/*margin-left: -9px;
    margin-right: -9px;*/
}

#footer-sub
{
	/*width:100%;*/
	text-align: center;
	/*padding: 10px 0;*/ /*Für Banderoleneffekt deaktivieren*/
	/*margin-left: -9px;
    margin-right: -9px;*/
}


#footer-content .custom
{
		margin-left: 0px;
    	margin-right: 0px;
}


/*
* Eigentlich ein 960px-Grid-System mit zusätzlichen Paddings aussen, so dass die aussenabstaende wie die innenabstaende sind
* Einteilung in 6 Spalten a 160 PX, Margins L und R sind 9 PX
*/

/* Marginalboxen bekommen vom Template immer die Klassen .grid .marginalbox
 * Eine box2er oder box3er Klasse muß nicht mehr im Modul vergeben werden.	
 * Marginalboxen sind immer auto-breit (nicht 100%), egal ob im 4zu2 oder 3zu3 layout.
 * Bekommt ein Modul dennoch eine gridbox, wird die breite wieder überschrieben
 * Die Margin-Korrektur soll aber nicht überschrieben werden und steht daher
 * nach den grid-Definitionen.
 */
.grid.marginalbox
{
	width:auto;
}

.teaser_normal, .teaser_short, .teaser_big, .teaser_medium, .teaser_landscape, .teaser_super, .teaser_focus, .box1er, .box2er, .box3er, .box4er, .box6er, .box4_2, .box4tel, #jevents{
    display: inline;
    float: left;
    margin-left: 0px;
    margin-right: 0px;
	padding-left:0px;
	padding-right:0px;
	margin-bottom:18px;
	position: relative;
	/*-moz-border-radius: .125rem;
	-webkit-border-radius: .125rem;
	border-radius: .125rem;*/
}

/*@media (min-width: 360px) {
	.teaser_normal, .teaser_short, .teaser_big, .teaser_medium, .teaser_landscape, .teaser_super, .teaser_focus, .box1er, .box2er, .box3er, .box4er, .box6er, #jevents{
		margin-left:9px;
		margin-right:9px;
	}
}
*/
.teaser_normal, .teaser_short, .teaser_big, .box2er, .box4_2, .box6er {
	overflow: hidden;
	width:100%;
	max-width: 618px;
}

.box4tel {
	overflow: hidden;
	width:50%;
	max-width: 309px;
	height: 178px;
	margin-bottom: 18px;
}

.teaser_focus {
	overflow: hidden;
	width:100%;
	max-width: 618px;
    min-height: 136px;
}

@media (min-width: 656px) { /*674px*/
  .teaser_normal, .teaser_short, .teaser_focus, .box4er, .box4_2, #jevents {
	margin-left: 9px;
	margin-right: 9px;
	margin-bottom: 18px;
  }
}

@media (min-width: 656px) { /*674px*/
  .teaser_short, .teaser_big {
	max-width: 300px;
	height: 300px;
  }
}

@media (min-width: 991px) {
  .teaser_short {
	max-width: 300px;
	height: 200px;
  }
}

@media (min-width: 656px) { /*674px*/
  .box1er {
	max-width: 132px;
	height: 300px;
	margin-left: 9px;
	margin-right: 9px;
	margin-bottom: 18px;
  }
}

@media (min-width: 656px) { /*674px*/
  .box4tel {
	max-width: 132px;
	height: 184px;
	margin-left: 9px;
	margin-right: 9px;
	margin-bottom: 18px;
  }
}

@media (min-width: 656px) { /*674px*/
  .box2er {
	max-width: 300px;
	height: 300px;
	margin-left: 9px;
	margin-right: 9px;
	margin-bottom: 18px;
  }
	
	#article_text .bannercontent
	{
		margin-right: -75px !important;;
	}
}

@media (min-width: 991px) {
  .box4_2 {
	max-width: 300px;
	width: 300px;
	height: 300px;
	margin-left: 9px;
	margin-right: 9px;
	margin-bottom: 18px;
  }
	.teaser_landscape_first {
		min-height: 520px;
	}
	
		#article_text .bannercontent
	{
		margin-right: -140px !important;;
	}
}


@media (min-width: 991px) { /*674px*/
  .box4tel {
	max-width: 211px;
	height: 211px;
  }
}

@media (min-width: 991px) {
  .flex_height_display_l {
	height: auto !important;
  }
}

@media (min-width: 991px) {
  .teaser_normal, .teaser_short {
	max-width: 300px;
	height: 300px;
  }
}

@media (min-width: 656px) { /*674px*/
  .teaser_focus {
	/*max-width: 300px;
	height: 300px;*/
  }
}

@media (min-width: 991px) {
  .teaser_focus, .box6er {
	max-width: 936px;
	/*max-width: 300px;
	height: 618px;
	margin-left: 9px;
	margin-right: 9px;
	margin-bottom: 18px;*/
  }
}

.box1er{
	width: 50%; /* 1 x 160px - 2 x 9 px margin*/
	max-width: 300px;
}
.box2er_del{
	width: 100%; /* 2 x 160px - 2 x 9 px margin */
	max-width: 618px;
}
.box3er{
	width: 100%; /* 3 x 160px - 2 x 9 px margin */
	max-width: 618px;
}
.box4er, .teaser_medium, #jevents{
	width: 100%; /* 4 x 160px - 2 x 9 px margin */
	max-width: 618px;
}
.teaser_landscape, .teaser_super {
	width: 100%; /* 4 x 160px - 2 x 9 px margin */
	max-width: 618px;
}
.gsl-scope {	/*jevents edit page */
	float: left;
	width: 100%;
	/*max-width: 618px; */
}
.box6er_old {
	width: 100%; /* 4 x 160px - 2 x 9 px margin */
	max-width: 618px;
}

@media (min-width: 991px) {
    .teaser_big {
	    max-width: 618px;
    }
	.teaser_landscape .0 {
		min-height: 520px;
	}
}

@media (min-width: 656px) { /*674px*/
  .box6er, .teaser_landscape, .teaser_super, .teaser_big {
	margin-left: 9px;
	margin-right: 9px;
	margin-bottom: 18px;
  }
}


@media (min-width: 991px) {
  .teaser_landscape {
	/*height: 618px;*/
  }
}

@media (min-width: 991px) {
  .teaser_super {
	/*height: 618px;*/
  }
}

@media (max-width: 619px) { /*654px*/
  .not_display_s {
	display: none !important;
  }
}

@media (min-width: 620px) { /*620px*/
  #footer-menu, #footer-content, #footer-sub {
	margin-left: -9px;
	margin-right: -9px;
  }
  .only_display_s {
	display: none !important;
  }
}

@media (max-width: 990px) {
  .not_display_m {
	display: none !important;
  }
}

@media (min-width: 991px) {
  .not_display_l {
	display: none !important;
  }
}

.flex_height {
	height: auto !important;	
}

.clean {
	box-shadow: none;
	padding: 0;
	margin-bottom: 0;
	overflow:auto;
}

@media (min-width: 991px) {
	.second_leading_block {
		float: left;
		max-width: 636px;
		padding: 0;
		margin: 0;
	}
	
	.second_leading_block_right {
		float: right;
		max-width: 318px;
		padding: 0;
		margin: 0;
	}
}

/*Margins wie die Boxen, addiert Paddings für die Marginalboxen, kein float noetig*/
.grid.marginalbox
{
	margin-left:9px;
	margin-right:9px;
	margin-bottom:30px;
	/*padding-left:9px;
	padding-right:9px;*/
	padding-bottom:9px;
}

.grid.marginalbox:last-child
{
	margin-bottom:0px;
}

/*wenn eine marginalbox doch ne box2er kriegt, sitzt die linksbündig, ausser ma fuegt noch klasse center hinzu*/
.grid.marginalbox.box2er.zentriert
{
	margin-left:auto;
	margin-right:auto;	
	display:block;
	float:none;
}

/*Korrigiert die Korrektur für Anzeigen, überschreibt aber nicht, sondern greift am inneren div an*/
.grid.marginalbox div.bannergroup
{
	margin-left:-9px;
	margin-right:-9px;	
}

/*Zentriert die Anzeige. Kann man schlecht auf ein div anwenden, da das eine feste breite braucht, die aber variable ist, bei imgs gehts so, die braucht nicht ins css eintragen, die bringt das bild just in time quasi mit */
.grid.marginalbox div.bannergroup img
{
	display: block;
	margin-left:auto;
	margin-right:auto;
}

.wrap
{
    border: 0;
    clear: both;
    float: none;
    font-size: 1px;
    height: 0;
    line-height: 1px;
    margin: 0;
    padding: 0;
    visibility: hidden;
}

.unseen,
.hidelabeltxt
{
    display: inline;
    height: 0px;
    left: -3000px;
    position: absolute;
    top: -2000px;
    width: 0px;
}

.skiplinks,
.skiplinks li
{
    display: inline;
    height: 0px;
    line-height:0;
    padding:0 !important;
}

.skiplinks li a.u2
{
    display: inline;
    height: 0px;
    left: -3000px;
    position: absolute;
    top: -2000px;
    width: 0px;

}

.skiplinks li a.u2:active,
.skiplinks li a.u2:focus
{
    position:absolute;
    width:13em;
    top:10px;
    left:10px;
    line-height:1.5em;
    padding:5px;
    font-weight:bold;
    height:3em;

}



/* ###################### main ###################### */

/* ++++++++++++++  position  ++++++++++++++ */

.blog-featured
{
        padding: 0;
}

.items-leading
{
        padding:0;
		/*margin-left:9px;
		margin-right:9px;
        margin-bottom:10px;*/
        overflow:hidden;
}

.row-separator
{
        clear: both;
		margin: 0px;
}
 
.item-separator
{
        /*visibility: hidden;*/
        clear: both;
        margin: 0px;
}

.shownocolumns
{
        width:98% !important;
}

/* ++++++++++++++  blog  ++++++++++++++ */

.items-row
{
        overflow:hidden;
        /*margin-bottom:10px !important;*/
}

.item
{
    display: inline;
    float: left;
    margin-left: 0px;
    margin-right: 0px;
	padding-left:0px;
	padding-right:0px;
	margin-bottom:18px;
	background-color: #fff;
}

.cols-1
{
        display: block;
        float: none !important;
        margin: 0 !important;
}

.cols-2 .item 
{
        width:300px;
		height:459px;
}

.blog-more
{
        padding:10px 5px
}

#topbanner .bannergroup
{
	line-height:0;
}

.marginalbox.banner
{
	padding-bottom:0;
}

#contentarea{
	padding-top: 18px;
	margin-left: auto;
    margin-right: auto;
	max-width: 954px;
	background-color:#f5f2e0;
}


@media (min-width: 360px) {
  #contentarea {
	/*padding-left: 9px;
	padding-right: 9px;*/
  }
}

@media (min-width: 620px) {
  #contentarea {
	/*padding-top: 60px;*/
	max-width: 618px;
	border-top: 1px solid #dbdad6;
	border-left: 1px solid #dbdad6; 
	border-right: 1px solid #dbdad6;
	padding-left: 9px;
	padding-right: 9px;
  }
}

@media (min-width: 656px) { /*674px*/
  #contentarea {
	max-width: 636px;
  }
}

@media (min-width: 991px) {
  #contentarea {
	margin-top: 18px;
	max-width: 954px;
  }
}

#contenttop{
    position:relative;
    overflow:hidden;
	/*max-width: 640px;*/
	padding-left: 0px;
	margin: 0 auto;
}

@media (min-width: 991px) {
  #contenttop {
	max-width: none;
  }
}

#contenttop-main{
    position: relative;
	/* contenttop hat HG-Grafik für Faux Columns, dies ist Verlauf am anfang.
	*  ist synchron mit HG-Grafik bei contenttop-right.
	* Die unwiederholte HG-Grafik ist 276px hoch, also hier minheight, drunter siehts doof aus	
	*/
	padding-top:0px;
	/*padding-left: 9px;
	padding-right: 9px;*/
	/*background: url(../images/ulv2/contenttopmain-bg-4zu2.jpg) no-repeat left top; */
	min-height: 276px;
	/*float:left;*/
}

#contenttop-right{
    float:right;
   /* width: 100%;*/ /* Gesamtspaltenbreite muß 329px sein, paddings abziehen */
	padding-left: 0px;
	padding-right: 0px;  /* Aussenabstand rechts */
	/* contenttop hat HG-Grafik für Faux Columns, dies ist Verlauf am anfang.
	*  ist synchron mit HG-Grafik bei contenttop-main.
	*  das Padding schiebt die Inhalte so, dass oben noch der durchgänge bereich bleibt
	* Die unwiederholte HG-Grafik ist 276px hoch, also hier minheight, drunter siehts doof aus
	*/
	padding-top: 23px;
	/*background: url(../images/ulv2/contenttopright-bg-4zu2.jpg) no-repeat right top; */
	min-height: 276px;
	max-width: 318px;
}

/* Noetig fuer den durchgehenden Farbbalken */
#contentbreak-bg{
	width: 100%;
	/*background-color: #54b2aa;*/
}

#contentbreak {
    position:relative;
    overflow:hidden;
	width: 320px;
	margin: 0 auto;
	padding-top: 18px;
	background-color: #f5f2e0; /*#e7e6d9;*/
	border-top: 2px solid #900101;
	border-bottom: 2px solid #900101;
	border-left: 1px solid #dbdad6; 
	border-right: 1px solid #dbdad6; 
}
 
#contentbreak-wrapper {
    position:relative;
	padding-left: 9px; /* Aussenabstand links */
	padding-right: 9px; /* Aussenabstand links */
}


/*
*  Content Bottom
*
*/
#contentbottom_del
{
    position:relative;
    overflow:hidden;
	/*background: url(../images/ulv2/contentbottom-bg.gif) repeat-y center top;*/
	background-color:#f5f2e0;
	padding-bottom:40px;
	padding-top:16px;
	width: 100%; /*978px;*/
}

#contentbottom-main
{
    position:relative;
    overflow:hidden;
	padding-top:16px;
	/*padding-left: 9px;
	padding-right: 9px;*/
	border-top: 2px solid #900101;
}