/* styles.css */

body {
    margin:0px;
    padding:0px;
    -ms-content-zooming: none;
}

p {
  margin: 0;
}

img {
	width: 100%;
	border: 0px;
    display: block;
}

br.clear {
    clear: both;
    height: 0px;
    display: block;
}

body.landscape .pt {
	display: none;
}

body.portrait .ls {
	display: none;
}

.content {
	overflow: hidden;
}

a,
a:link,    
a:visited, 
a:hover,   
a:active {
	color: #000;
	text-decoration: none;
}  

/********************/
/* CONTAINER STYLES */
/********************/

/* abstand oben */

div.container.containerMarginTop {
	margin-top: 20px;
}

/* kosmos setting */

div.container.kosmos {
  border-left: 3px solid #000;
  border-right: 3px solid #000;
  margin: 0px 10px 0px 10px; 
}

.container.kosmos:first-child .colum1 .margin:first-child,
.container.kosmos:first-child .colum2 .margin:first-child,
.container.kosmos:first-child .colum3 .margin:first-child  {
  margin-top: 0px !important;
}

div.container.kosmos .verticalLineLeft, div.container.kosmos .verticalLineRight {
	width: 5px;
}

div.container.kosmos div.verticalLineOutsideLeft, div.container.kosmos div.verticalLineOutsideRight {
	width: 17px;
}

/********************/
/* PARAGRAPH STYLES */
/********************/


/* 2 Bilder mit einer 2 Bildunterschriften */

div.zweiBilderMitZweiBus {
    width:100%;
}

div.zweiBilderMitZweiBus div.bild {
    width: 50%;
    float: left;
}

div.zweiBilderMitZweiBus div.bildunterschrift_1 {
    margin-top: 8px;
}

div.zweiBilderMitZweiBus div.bildunterschrift_2 {
    margin-top: 8px;
}

div.zweiBilderMitZweiBus div.pictureLeftMargin {
    margin: 0px 10px 0px 0px;
}

div.zweiBilderMitZweiBus div.pictureRightMargin {
    margin: 0px 0px 0px 10px;
}

div.zweiBilderMitZweiBus div.nonSublineAdditionalHeight {
    margin-bottom: 5px;
}

div.zweiBilderMitZweiBus div.pictureBorderMargin {
    margin: 5px 5px 5px 5px;
}

div.zweiBilderMitZweiBus div.pictureBorder {
    border: 1px solid #000;
}

/* 2 Bilder mit einer Bildunterschrift */

div.zweiBilderMitBu div.bild {
    width: 50%;
    float: left;
}

div.zweiBilderMitBu div.bildunterschrift {
    margin-top: 8px;
}

div.zweiBilderMitBu div.pictureLeftMargin {
  margin: 0px 10px 0px 0px; 
}

div.zweiBilderMitBu div.pictureRightMargin {
  margin: 0px 0px 0px 10px;
}

div.zweiBilderMitBu div.nonSublineAdditionalHeight {
	margin-bottom: 5px;
}

div.zweiBilderMitBu div.pictureBorderMargin {
  margin: 5px 5px 5px 5px;
}

div.zweiBilderMitBu div.pictureBorder {
  border: 1px solid #000;
}

/* Bild mit Bildunterschrift */

div.bildMitBu div.textContainer {
	margin-top: 8px;
}

div.bildMitBu .picturePosition,
div.bildMitBuLinks .picturePosition,
div.bildMitBuRechts .picturePosition {
  position: relative;
}

.bild .pictureRightMargin,
.bild .pictureLeftMargin {
	position: relative;	
}
	
div.bildMitBu .picturePosition .icon,
div.bildMitBuLinks .picturePosition .icon,
div.bildMitBuRechts .picturePosition .icon,
.bild img.icon,
.bild img.icon,
.bild img.icon {
  width: 22px;
  height: 22px;
  position: absolute;
  right: 7px;
  bottom: 10px;
  cursor: pointer;
}

div.zweiBilderMitZweiBus img.icon_zweiBilderMitZweiBildunterschriften {
    width:22px;
    height: 22px;
    position: absolute;
    right: 7px;
    margin-top: -32px;
    cursor: pointer;
}

div.bildMitBu div.pictureBorderMargin,
div.bildMitBuLinks div.pictureBorderMargin,
div.bildMitBuRechts div.pictureBorderMargin {
	margin: 5px 5px 5px 5px;
}

div.bildMitBu div.pictureBorder,
div.bildMitBuLinks div.pictureBorder,
div.bildMitBuRechts div.pictureBorder {
  border: 1px solid #000;
}


/* Autorenkasten */

div.autorenzeile {
	margin: 40px 0px 40px 0px;
}

div.autorenzeile img {
    width: 70px;
    margin: 0 10px -6px 0;
    display: inline-block;
}

div.autorenzeile span.Autor {
    position: relative;
    bottom: 4px;
    text-transform: uppercase;
}

div.autorenzeile p {
    margin-top:0;
    padding-top:9px;
    border-top:1px solid #333;
}

/* Titel im Quadrat */

div.titelMitBild {
    margin: 30px 0 40px 0;
    padding: 0;
    position: relative;
    min-height: 150px;
    font-weight: normal;
}

div.titelMitBild .titelWrapper {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 150px;
    width: 150px;
    background-color: #fff;
    padding: 0 7px 7px 0;
}

div.titelMitBild .bild {
    border: 1px solid #000;
    padding: 5px 5px 5px 5px;
}

div.titelMitBild .titelSquare {
    display: block;
    width: 100%;
    height: 100%;
    border: 1px solid #000;
    text-align: center;
    vertical-align: middle;
}

div.titelMitBild .titel {
	height: 150px;
	width: 150px;
	display: table-cell; 
	vertical-align: middle;
	text-align: center;
}

div.caption {
    margin-bottom: 40px;
    margin-top: 8px;
}

/* Container Quadrat */

div.containerLabel {
  position: absolute;
  height: 150px;
  width: 150px;
  left: 0%;
  top: 0%;
  z-index: 3000;
}

div.containerLabel div.containerLabelSquare {
  border: 1px solid #000;
  height: 150px;
  width: 150px;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

/* kosmos */

div.containerThreeColum.kosmos div.containerLabel {
  height: 160px;
  width: 160px;
  left: -1px;
  top: -1px;
  background-color: #fff;
}

/* audio */

.audioPlayer {
    width: 100%;
}

.audioPlayer audio {
    width: 100%;
}

/*****************/
/* COMMON STYLES */
/*****************/

/* Seitenabstand nach oben */
.container:first-child .colum1 .margin:first-child,
.container:first-child .colum2 .margin:first-child,
.container:first-child .colum3 .margin:first-child  {
  margin-top: 20px;
}

/* Initialie */
div.initialie:first-letter { 
    font-size: 3em;
}

div.imgCommonDistance {
  margin-bottom: 17px;
}

div.textCommonDistance {
  margin-bottom: 20px;
}

/**************/
/* IMAGE ZOOM */
/**************/

.imageZoomContainer {
	  background-color: #000;
	  position: absolute;
	  display: none;
	  z-index: 5000;
}

.slides_container div {
    display:block;
}

.slides_container {
    position: relative;
}

.slides a.next  {
  position: absolute;
  top: 48%;
  right: 30px;
  z-index: 4500;
  cursor: pointer;
}

.slides a.prev {
  position: absolute;
  top: 48%;
  left: 30px;
  z-index: 4500;
  cursor: pointer;
}

.pagination {
	 display: none;
}

.buttonLine {
	 position: absolute;
	 left: 0px;
	 top: 0px;
	 z-index: 6000;
}

.pictureZoom {
	cursor: pointer;
}

.slides .subline {
	position: absolute;
	bottom: 0px;
	background: rgba(0, 0, 0, 0.8);
	color: #fff;
	width: 100%;
	padding: 10px 8px 10px 8px;
}

.buttonLine {
  position: absolute;
  top: 0px;
  min-height: 42px;
  background: rgba(0, 0, 0, 0.8);
  width: 100%;
}

.buttonLine button.close {
	color: #fff;
	background-color: #222;
	position: absolute;
	top: 8px;
	left: 10px;
	width: 60px;
	border: 1px solid #fff;
	padding: 3px;
	font-weight: bold;
}

span.Initial-S, 
span.Initial-M,
span.Initial-L { display: inline-block; margin-top: 40px; }

span.IniCS { line-height: 0px !important; }
span.IniCL { line-height: 0px !important; }
span.IniS  { line-height: 0px !important; }
span.IniL  { line-height: 0px !important; }

#sidebarLSButton,
#sidebarLSSelectedButton,
#sidebarPTButton,
#sidebarPTSelectedButton {
	display: none;
}

#wrapper {
	margin-bottom: 30px;
}

.audioElement,
.videoElement {
	width: 100%;
}

@media screen and (max-width : 700px) {

    .landscape .showIn3ColumnOnly {
        display: none;
    }
    .landscape .showIn1ColumnOnly {
        display: block;
    }
    html {
        -webkit-text-size-adjust: none; /* Prevent font scaling in landscape (iphone)*/
    }

    .landscape .audioElement.noMarginTop,
    .landscape .videoElement.noMarginTop {
        margin-top: 0px;
    }

    .landscape div.autorenzeile {
        margin: 40px 0px 30px 0px;
    }

    .landscape div.bildMitBu .picturePosition .icon,
    .landscape div.bildMitBuLinks .picturePosition .icon,
    .landscape div.bildMitBuRechts .picturePosition .icon {
        right: 6px;
    }

    .landscape div.textCommonDistance {
        margin-bottom: 0;
    }

    .landscape div.containerLabel {
        position: relative;
        margin: 0 auto;
        margin-top: 20px;
    }

    .landscape .kosmos div.containerLabel {
        position: absolute;
        margin-top: 0;
    }

    .landscape div.titelMitBild {
        margin-top: 10px;
    }

    .landscape div.titelMitBild .titelWrapper {
        height: 100px;
        width: 100px;
    }

    .landscape div.titelMitBild .titel {
        height: 100px;
        width: 100px;
    }

    .landscape div.containerThreeColum.kosmos {
        margin: 10px, 10px, 10px, 0;
    }

    .landscape span.Quadrat { font-size: 12px; line-height: 16px; }
    .landscape span.QuadratFarbe { font-size: 18px; line-height: 24px; }

    .landscape .slides .subline span.LT {
        font-family: 'Book';
    }
}


@media screen and (max-width : 569px) {

    .portrait .showIn3ColumnOnly {
        display: none;
    }
    .portrait .showIn1ColumnOnly {
        display: block;
    }
    html {
        -webkit-text-size-adjust: none; /* Prevent font scaling in landscape (iphone)*/
    }

    .portrait .audioElement.noMarginTop,
    .portrait .videoElement.noMarginTop {
        margin-top: 0px;
    }

    .portrait div.autorenzeile {
        margin: 40px 0px 30px 0px;
    }

    .portrait div.bildMitBu .picturePosition .icon,
    .portrait div.bildMitBuLinks .picturePosition .icon,
    .portrait div.bildMitBuRechts .picturePosition .icon {
        right: 6px;
    }

    .portrait div.textCommonDistance {
        margin-bottom: 0;
    }

    .portrait div.containerLabel {
        position: relative;
        margin: 0 auto;
        margin-top: 20px;
    }

    .portrait .kosmos div.containerLabel {
        position: absolute;
        margin-top: 0;
    }

    .portrait div.titelMitBild {
        margin-top: 10px;
    }

    .portrait div.titelMitBild .titelWrapper {
        height: 100px;
        width: 100px;
    }

    .portrait div.titelMitBild .titel {
        height: 100px;
        width: 100px;
    }

    .portrait div.containerThreeColum.kosmos {
        margin: 10px, 10px, 10px, 0;
    }

    .portrait span.Quadrat { font-size: 12px; line-height: 16px; }
    .portrait span.QuadratFarbe { font-size: 18px; line-height: 24px; }

    .portrait .slides .subline span.LT {
        font-family: 'Book';
    }
}