/*
    Created on : 18.02.2015, 11:02:45
    Author     : HNI
*/

@media screen and (max-width:966px) { /* Nexus 7 */

    /* Bilder skalieren */
    DIV.csc-textpic DIV.csc-textpic-single-image IMG {
        max-width: 100% !important;
        height: auto !important;
        width: auto !important; /* war mal auto statt 100% */
    }



    embed, object, video { /* ggf. noch img eintragen */
        /* damit geht die weltkarte in flash kaputt */
        /* max-width: 100%;
        height: auto;
        width: auto; */
    }

    .page_margins {
        margin: 0px;
        width: 950px;
        background: none;
    }

    #header {
        width: 950px;
    }

    #col2 {
        clear: both;
        float: left;
    }

    #col3 {
        margin: 0 0 0 200px;
        width: 650px;
    }


    #col3_content {
        padding: 0px 10px 10px 10px;
    }

    /* Text umfliesst das Bild in der Detailansicht */
    .news-single-item .news-single-img .news-single-imgcaption {
        margin-left: 0px;
    }
}

@media screen and (max-width:960px) { /* z.b.  Nexus 7 2 */
    .page_margins {
        margin: 0px;
        width: 700px;
    }

    #header {
        width: 950px;
    }

    #col2 {
        clear: both;
        float: left;
    }

    #col3 {
        margin: 0 0 0 200px;
        width: 650px;
    }


    #col3_content {
        padding: 0px 10px 10px 10px;
    }
}

/* Google Nexus 10 */
@media screen and (max-width:800px) {
    #header {
        width: 750px;
    }

    #col3 {
        width: 560px;
    }

    #col3_content {
        padding: 0px 10px 10px 10px;
    }

    .page_margins {
        margin: 0px;
        width: 760px;
    }
}

/* Apple iPad */
@media screen and (max-width:768px) {
    #header {
        width: 750px;
    }

    #col3 {
        width: 560px;
    }

    #col3_content {
        padding: 0px 10px 10px 10px;
    }

    .page_margins {
        margin: 0px;
        width: 520px;
    }

    #hni-mosaic {
        display: none;
    }
}

@media screen and (max-width:720px) { /* Mototrola Droid Razr HD */
    #header {
        width: 700px;
    }

    #col3 {
        width: 500px !important;
        margin: 0 0 0 200px;
    }  

}

/* etwas breiter, damit es nur noch eine einspaltige Anordnung ist */
@media screen and (max-width:690px) and (orientation: landscape) {
    .organisationdivlinks {
        min-width: 235px;
    }
}

@media screen and (max-width:667px) and (orientation: landscape) {
    .organisationcontainer {
        min-width: auto;
    }
}

/* @media screen and (max-width:640px) {
    
} */

@media screen and (max-width:620px) { /* war mal max-width:600px */
    .organisationcontainer {
        max-width: 250px !important;
        min-width: 50px !important;
    }

    .kuratorium {
        margin-top: 5px;
    }

    /* Organisation Rechnerbetrieb, Sekretariat und PR */
    .orgarbsekpr {
        margin-top: 5px;
    }

    #header {
        width: 590px;
    }

    #col3 {
        width: 400px !important;
        margin: 0 0 0 200px;
    }

    #col3_content {
        padding: 0px 10px 10px 10px;
    }

    .page_margins {
        margin: 0px;
        width: 400px;
    }

    /* fuer Elemente die erst ab einer bestimmten Aufloesung angezeigt werden sollen */
    .rahmen-hidden {
        display: none;
    }

}

@media screen and (max-width:540px) { /* z.B. nexus S */
    #col3 {
        margin: 0 0 0 200px;
        width: 320px !important;
    }

    #col3_content {
        padding: 0px 10px 10px 10px;
    }

    .page_margin {
        width: 450px;
    }

    #header {
        width: 520px;
    }
}

@media screen and (max-width:480px) and (orientation: portrait) {
    #col3 {
        margin: 0 0 0 200px;
        width: 260px !important;
    }

    #col3_content {
        padding: 0px 10px 10px 10px;
    }

    .page_margin {
        width: 450px;
    }

    #header {
        width: 450px;
    }

    /* Bilderunterschrift im Newstext unter dem Bild */
    #header {
        float: none;
    }

}

/* Ab hier springt col3 unter col1 */
@media screen and (max-width:424px) {  /* LG Optimus LTE, Optimus 4X */
    #header {
        width: 400px;
    }

    .page_margins {
        width: 10px;
    }

    #hni-mosaic {
        display: none;
    }

    /* Social Media Button ausblenden - #quick_access  wird jedoch fuer die internen Dienste verwendet */
    #quick_access, .socialbuttons {
        display: none;
    }

    #col2 {
        /*        display: none;*/
    }

    #col1 {
        width: 400px;
        margin: 20px 0px 0px 0px;
    }

    #col3 {
        margin: 0;
        width: 400px !important;;
        float: left;
    }

    /* Newsansicht - Text unter dem Bild */
    .news-latest-item p, .news-latest-item h2 {
        margin-left: 15px;
        hyphens: auto;
        -moz-hyphens: auto;
        clear: both;
    }

    /* Newsansicht Detail - Bildunterschrift unter dem Bild */
    .news-single-item .news-single-img .news-single-imgcaption {
        clear: both;
    }

    .news-latest-image {
        padding: 0px 10px;
    }

}

/* iphone 6 plus */
@media screen and (max-width:414px) {
    #header {
        width: 400px;
    }

    .page_margins {
        width: 10px;
    }

    #hni-mosaic {
        display: none;
    }

    /* Social Media Button ausblenden - #quick_access  wird jedoch fuer die internen Dienste verwendet */
    #quick_access, .socialbuttons {
        display: none;
    }

    #col2 {
        /*        display: none;*/
    }

    #col1 {
        width: 400px;
        margin: 20px 0px 0px 0px;
    }

    #col3 {
        margin: 0;
        width: 390px !important;;
        float: left;
    }
    
    #col3_content {
        padding: 5px 0px 10px 20px;
    }

    #search input[type="submit"] {
        left: 10px;
    }
}

/* Google Nexus 6 */
@media screen and (max-width:412px) {
    #col3 {
        width: 330px !important;;
        float: left;
    }
    #col3_content {
        padding: 5px 0px 10px 20px;
    }
}

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

    #col3 {
        margin: 0;
        width: 370px !important;;
        float: left;
    }

    #col3_content {
        padding: 5px 0px 10px 20px;
    }                       
}

@media screen and (max-width:384px) { /* Nexus 4 */
    #header {
        width: 360px;
    }

    .page_margins {
        width: 10px;
    }

    #topnav {
        position: relative;
        top: 80px;
        left: 18px;
    }

    div#topnav .login {
        float: left;
        margin: 0 10px 0 0;
    }

    div#topnav .login #logout {
        height: 15px;
        width: 15px;
        margin-bottom: 0px;
    }

    #hni-mosaic {
        display: none;
    }

    /* Social Media Button ausblenden - #quick_access  wird jedoch fuer die internen Dienste verwendet */
    #quick_access, .socialbuttons {
        display: none;
    }

    #col2 {
        /*       display: none;*/
    }

    #col1 {
        width: 350px;
        margin: 20px 0px 0px 0px;
    }

    #col3 {
        margin: 0;
        width: 340px !important;;
        float: left;
    }  

}

@media screen and (max-width:375px) { /* iphone 6 */

    #header {
        width: 350px;
    }

    .page_margins {
        width: 10px;
    }

    #topnav {
        position: relative;
        top: 80px;
        left: 18px;
    }

    div#topnav .login {
        float: left;
        margin: 0 10px 0 0;
    }

    div#topnav .login #logout {
        height: 15px;
        width: 15px;
        margin-bottom: 0px;
    }

    #hni-mosaic {
        display: none;
    }

    /* Social Media Button ausblenden - #quick_access  wird jedoch fuer die internen Dienste verwendet */
    #quick_access, .socialbuttons {
        display: none;
    }

    #col2 {
        /*        display: none;*/
    }

    #col1 {
        width: 330px;
        margin: 20px 0px 0px 0px;
    }

    #col3 {
        margin: 0;
        width: 330px !important;;
        float: left;
    }
}


@media screen and (max-width:360px) {
    #col1 {
        width: 300px;
        margin: 20px 0px 0px 0px;
    }

    #col3 {
        margin: 0;
        width: 320px !important;;
        float: left;
    }

    #col3_content {
        padding: 5px 0px 10px 20px;
    }

    #hni-mosaic {
        display: none;
    }

    #col2 {
        /*        display: none;*/
    }

    /* Social Media Button ausblenden - #quick_access  wird jedoch fuer die internen Dienste verwendet */
    #quick_access, .socialbuttons {
        display: none;
    }

    #nav { /* Mehr Abstand bei der Navigation nach unten */
        margin: 0px 0px 15px 0px;
    }

    .page_margins {
        width: 150px;
    }

    #header {
        width: 250px;
    }

    #topnav {
        /*        display:none;*/
        position: relative;
        top: 80px;
        left: 18px;
    }

    div#topnav .login {
        float: left;
        margin: 0 10px 0 0;
    }

    div#topnav .login #logout {
        height: 15px;
        width: 15px;
        margin-bottom: 0px;
    }

}

/* z.b iphone 5*/
@media screen and (max-width:320px) {
    #col1 {
        width: 300px;
        margin: 20px 0px 0px 0px;
    }

    #col3 {
        margin: 0;
        width: 270px !important;;
        float: left;
    }

    #col3_content {
        padding: 5px 0px 10px 20px;
    }

    #hni-mosaic {
        display: none;
    }

    #col2 {
        /*        display: none;*/
    }

    /* Social Media Button ausblenden - #quick_access  wird jedoch fuer die internen Dienste verwendet */
    #quick_access, .socialbuttons {
        display: none;
    }

    #nav { /* Mehr Abstand bei der Navigation nach unten */
        margin: 0px 0px 15px 0px;
    }

    .page_margins {
        width: 150px;
    }

    #header {
        width: 250px;
    }

    #topnav {
        position: relative;
        top: 80px;
        left: 18px;
    }

    div#topnav .login {
        float: left;
        margin: 0 10px 0 0;
    }

    div#topnav .login #logout {
        height: 15px;
        width: 15px;
        margin-bottom: 0px;
    }

    /* Bildunterschriften unter der fancybox */
    .fancybox-title-float-wrap {
        position: absolute !important;
        bottom: -40px !important; /* bottom muss dynamisch sein */
    }

    .fancybox-title-float-wrap .child {

    }
}

/* TODO: Working */
/* z.b iphone 6plus - landscape */
@media screen and (max-width:736px) and (orientation: landscape) {
    #header {
        width: 720px !important;
    }
    
    #col3 {
        width: 520px !important;
    }
}

/* z.b Nexus 6 - landscape */
@media screen and (max-width:690px) and (orientation: landscape) {
    #header {
        width: 680px !important;
    }
    
    #col3 {
        width: 480px !important;
    }
}

/* z.b iphone 6 - landscape */
@media screen and (max-width:667px) and (orientation: landscape) {
    #header {
        width: 660px !important;
    }
    
    #col3 {
        width: 450px !important;
    }
}

/* z.b Blackberry Z30, Samsung Galaxy Note II, S III, S4 & 3, Nokia N9 - landscape */
@media screen and (max-width:640px) and (orientation: landscape) {
    #header {
        width: 630px !important;
    }
    
    #col3 {
        width: 430px !important;
    }
}

/* z.b Nexus 4 - landscape */
@media screen and (max-width:598px) and (orientation: landscape) {
    #header {
        width: 590px !important;
    }
    
    #col3 {
        width: 390px !important;
    }
}

/* z.b iphone 5 - landscape */
@media screen and (max-width:568px) and (orientation: landscape) {
    #header {
        width: 560px !important;
    }
    
    #col3 {
        width: 350px !important;
    }
}

/* z.b Nokia Lumia 520 - landscape */
@media screen and (max-width:533px) and (orientation: landscape) {
    #header {
        width: 530px !important;
    }
    
    #col3 {
        width: 325px !important;
    }
}

/* z.b iphone 4 - landscape */
@media screen and (max-width:480px) and (orientation: landscape) {
    #header {
        width: 470px !important;
    }
    
    #col3 {
        width: 270px !important;
    }
}


@media screen and (max-width:213px) { /* LG Optimus One */
    #col1 {
        width: 200px;
        margin: 20px 0px 0px 0px;
    }

    #col3 {
        margin: 0;
        width: 200px !important;;
        float: left;
    }

    #col3_content {
        padding: 5px 0px 10px 5px;
    }

    #hni-mosaic {
        display: none;
    }

    #col2 {
        /*        display: none;*/
    }

    /* Social Media Button ausblenden - #quick_access  wird jedoch fuer die internen Dienste verwendet */
    #quick_access, .socialbuttons {
        display: none;
    }

    #nav { /* Mehr Abstand bei der Navigation nach unten */
        margin: 0px 0px 15px 0px;
    }

    .page_margins {
        width: 150px;
    }

    #header {
        width: 200px;
    }

    #topnav {
        position: relative;
        top: 80px;
        left: 18px;
    }

    div#topnav .login {
        display: none;
    }

    div#topnav .login #logout {
        display: none;
    }

}