/*******************************************************************************************************************
 * Styles für Smartphones mit höherer Auflösung.
 * Von folgenden Browsern angezogen: (Safari, Dolphin, Firefox, Chrome, Android-Standardbrowser)
 * Unten die Media Queries mit der orientation:landscape werden ebenfalls vom Safari-Browser auf Macs angezogen
 *******************************************************************************************************************/
@media only screen and (min--moz-device-pixel-ratio:1.5) and (orientation:portrait),
	only screen and (-o-min-device-pixel-ratio:3/2) and (orientation:portrait), 
	only screen and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait),
	only screen and (min-device-pixel-ratio:1.5) and (orientation:portrait) {

    /***********************************
    * Styles für allgemeine html-Tags
    ***********************************/

    body, table {
       font-size: 1.5em;
    }
    
    h2 {
       font-size: 2.2em;
    }
    
    
    h4 {
       font-size: 1.5em;
    }

    /***********************************
    * Styles für Seiten-Bereiche
    ***********************************/
    
    .header {
        border-bottom: 2px solid #666;
    }
    
    .header-inner {
        height: 100px;
        padding: 0;
    }
    
    .content {
        background: #000;
    }

    .content, .content-inner, .centered-block, .responsive-block {
        /*height: 100%;*/
        height: 1100px;
        text-align: left;
    }
    
    .centered-block {
       width: auto;
    }

    .content,
    .centered-block {
        height: 1100px;
    }
    
    .footer {
    	border: none;
    }	

    /* In der mobilen Version gibt es keine Hintergrundbilder */
    .content.title1, .content.title2, .content.title3, .content.title4, .content.title5, .content.title6,
    .content.bg1, .content.bg2, .content.bg3, .content.bg4 {
        background: #000;
    }

    /* In der mobilen Version gibt es keine wechselnden Rahmenfarben */
    .img1, .img2, .img3, .img4, .img5, .img6 {
        border-color: #666 !important;
    }


    .content.title1, .content.title2, .content.title3, .content.title4, .content.title5, .content.title6  {
        background-image: url('../img/Desolation-Logo-rusty.jpg');
         background-size: 90%;
         background-repeat: no-repeat;
    	 background-position: center 10%;
    }

    /***********************************
    * Styles für das Menü
    ***********************************/

    /* Das herkömmliche Topmenü der Desktop-Variante verstecken */
    #menu {
        display: none;
    }
    
    .top-menu a {
        display: block;
    }

    /* Auf- und Einklappbutton für das Topmenü (Dropdown-Liste) */
    #menu-trigger {
        display: block;
        position: absolute;
    	width: 3.8em;
        height: 3.8em;
        left: 5px;
        top: 5px;
        z-index: 9;
    }

    /* Topmenü (Dropdown-Liste) */
    #responsive-menu {
        display: block;
    }

    .responsive-menu-box {
        border: 2px solid #666;
        border-bottom: none;
        text-align: left;
        position: absolute;
        top: 100px;
        z-index: 999;
        background: #000;
        display: none;     
        overflow: auto;
    }

    .menu-item {
        border-bottom: 2px solid #666;
        font-size: 3em;
        padding: 15px;
        padding-left: 25px;
        padding-right: 25px;
        font-family: 'BankGothic', sans-serif;
    }

    /* Footermenü wird in der mobilen Variante im Seitenkopf dargestellt */
    .bottom-menu {
        position: absolute;
        top: 20px;
        width: 100%;
        margin: auto;
    }

    .bottom-menu img.social-icon {
        width: 2em;
        height: 2em;
        margin: 5px 20px 0 0;
    }

    /* Sprachmenü mit Flaggen wird in der mobilen Variante im Seitenkopf dargestellt */
    .language-menu {
        position: absolute;
        right: 15px;
        top: 20px;
        margin-top: 5px;
    }

    .language-menu img {
       /* height: 2.2em;
        width: 2.7em;*/
        height: 2em;
        width: 2.6em;
        border: 2px solid #666;
    }

   /***************************************************
    * Styles für die einzelnen Seiten - Seite Bio
    ***************************************************/
  
    .bandinfo .td-0 b {
        display: none;
    }

    .bio .td-0 {
        display: none;
        padding: 0;
    }

    .bandinfo h4 {
        margin: 0;
        padding: 0;
        display: block;
        font-size: 1em;
    }

    .bio .inner-centered-block {
        height: 100%;
    }

    .bio .centered-block {
      /* height: 1100px;*/
      height: auto;
      width: 100%;
    }
    
    .bio a {
       font-size: 1.5em;
    }
    
   /***************************************************
    * Styles für die einzelnen Seiten - Seite Disco
    ***************************************************/

    .disco .centered-block {
      /* height: 1100px;*/
      height: auto;
      width: 100%;
    }

    .disco .content img {
        width: 350px;
        height: 350px;
    }
    
    .disco .csc-textpic-text {
    	padding-left: 375px;
     }

    /***************************************************
    * Styles für die einzelnen Seiten - Seite Band
    ***************************************************/

    .band .centered-block {
      /* height: 1100px;*/
	width: 100%;
        margin-top: 50px;
    }

    .band .content img {
	width: 935px;
    }

   /***************************************************
    * Styles für die einzelnen Seiten - Seite Live
    ***************************************************/

    .live table, .live a {
      font-size: 1.2em;
    }

    .live a {
       font-size: 1.5em;
    }

   /***************************************************
    * Styles für die einzelnen Seiten - Seite Audio
    ***************************************************/

    .audio .centered-block {
       margin-top: 30px;
	width: 700px;    
    }

    .audio-player-block {
	width: 800px;
	height: 120px;
    }

    .audio-player-iframe {
	width: 800px;
    }

   /***************************************************
    * Styles für die einzelnen Seiten - Seite Pics
    ***************************************************/

    .pics div.csc-textpic .csc-textpic-imagewrap img {
        width: 300px;
    }

    .pics div.csc-textpic .csc-textpic-imagewrap .csc-textpic-image {
       float: right;
    }
    
    .pics .csc-textpic-text p {
      font-size: 1.5em;
    }

   /***************************************************
    * Styles für die einzelnen Seiten - Seite Logo
    ***************************************************/

    .logos .inner-centered-block {
        height: 100%;
    }

    .logos .centered-block {
 	width: 700px;    
     height: auto;
     
    }

    .logos div.csc-textpic .csc-textpic-imagewrap img {
        width: 700px;
    }
 
    .contact p {
       font-size: 2em;
    }   
    
    /***************************************************
    * TYPO3
    ***************************************************/

    /* Rahmen um Bilder */
    div.csc-textpic-border div.csc-textpic-imagewrap img {
        border: 2px solid #666;

    }
        
    /***************************************************
    * Sonstiges
    ***************************************************/
    
    .copyright {
    	display: none;
    }

}

@media only screen and (min--moz-device-pixel-ratio:1.5) and (orientation: landscape),
	only screen and (-o-min-device-pixel-ratio:3/2) and (orientation: landscape),
	only screen and (-webkit-min-device-pixel-ratio:1.5) and (orientation: landscape),
	only screen and (min-device-pixel-ratio:1.5) and (orientation: landscape) {

    /***********************************
    * Styles für allgemeine html-Tags
    ***********************************/

    body, table, a {
        font-size: 1.2em;
    }    
    
   /***********************************
    * Styles für Seiten-Bereiche
    ***********************************/
    
    .header-inner {
        height: 70px;
    }
    
   /***********************************
    * Styles für das Menü
    ***********************************/
       
    .top-menu {
    	padding: 0;
    }
    
    .top-menu a {
        font-size: 1.8em;
    }
    
    .top-sub-menu {
        padding-top: 0;
    }
    
    .top-sub-menu a {
        font-size: 1.3em;
    }
    	    
    #menu-trigger {
        width: 2.5em;
        height: 2.5em;
    }
    
     .responsive-menu-box {
        top: 70px;
    }

    .menu-item {
        border-bottom: 2px solid #666;
        font-size: 3.2em;
    }

    .bottom-menu {
        top: 15px;
    }
    
    .language-menu {
        top: 10px;
    }
    
    .bottom-menu img.social-icon {
        width: 1.5em;
        height: 1.5em;
        margin-top:0px;
    }

    .language-menu img {
        height: 1.5em;
        width: 2em;
    	margin-top:0px;
    }

}