/*  Common styles are "mobile first" and arrange the site elements one
 *  underneath each other and display the mobile navigation and selection
 *  boxes. */

/* For large displays we rearrange a desktop design with 2 columns and
 * traditional navigation menue                                               */
@media(min-width: 780px) {    //oder 1024?

    header {
        #service-panel {

            #service-panel-wrapper {
                display: flex;

                div {
                    padding-top: 0.8em;

                    &#language-switcher {
                        flex: 1;

                        button {
                            display: none;
                        }

                        ul {
                            background-color: transparent;
                            display         : block;
                            margin-left     : 0;
                            padding-left    : 0;

                            li {
                                margin-left: 1em;
                            }
                        }
                    }

                    &#shortcuts {
                        flex      : 1;
                        text-align: right;

                        button {
                            display: none;
                        }

                        ul {
                            display      : block;
                            margin-right : 0;
                            padding-right: 0;

                            li {
                                margin-right: 1em;
                            }
                        }
                    }

                    ul {
                        li {
                            display: inline-block;
                        }
                    }
                }
            }
        }
    }

    nav#main-navigation {
        button {
            display: none;
        }

        div#nav-wrapper {
            display       : table;
            height        : 100%;
            margin-left   : auto;
            margin-right  : auto;
            padding-bottom: 0;
            text-align    : center;
            vertical-align: middle;

            ul {
                display       : table-cell;
                height        : 100%;
                vertical-align: middle;

                li {
                    display       : table-cell;
                    height        : 100%;
                    vertical-align: middle;

                    &.active {
                        border: none;
                    }
                }

                ul {   //submenu items
                    display: none;
                }
            }
        }

        ul {                           // eigentlich ueberfluessig
            margin-left  : 0;
            margin-right : 0;
            padding-left : 0;
            padding-right: 0;
            list-style   : none;

            li {
                display: inline;
            }
        }
    }

    div#breadcrumbs-top {
        font-size   : 1em;
        padding-left: 0;
    }

    div#main-wrapper {
        display     : -webkit-flex;
        display     : flex;
        max-width   : @dim-page-width;
        margin-left : auto;
        margin-right: auto;

        main {
            -webkit-flex: 3;
            flex        : 3;
            /*max-width: 60em;*/
            /*margin-left: auto;*/
            /*margin-right: auto;*/
            div.related-links-file-attachments {
                display: -webkit-flex;
                display: flex;

                ul {
                    -webkit-flex: 1;
                    flex        : 1;
                }
            }
        }

        nav.subnav {
            -webkit-flex: 1;
            flex        : 1;
            display:block   //testweise
        }
    }

    main {
        dl.event-details {
            -moz-column-count   : 2;
            -webkit-column-count: 2;
            column-count        : 2;
        }

        div.scipublication {
            div.data {
                display: -webkit-flex;
                display: flex;

                dl {
                    -webkit-flex        : 3;
                    flex                : 3;
                    -moz-column-count   : 2;
                    -webkit-column-count: 2;
                    column-count        : 2;
                }

                div.export-links {
                    -webkit-flex: 1;
                    flex        : 1;
                    order       : 2;
                    margin-left : 2em;
                }
            }
        }
    }

    main.welcome {
        display: -webkit-flex;
        display: flex;

        div#left {
            -webkit-flex: 3;
            flex        : 3;
        }

        aside {
            margin-top  : 1em;
            margin-left : 2em;
            -webkit-flex: 1;
            flex        : 1;
        }
    }
}  // media(min-width: 780px)



/*  With display width smaller as the @dim-page-width restriction we add a bit
    of padding  @dim-page-width currently 1280px  */
@media(max-width: @dim-page-width) {

        div#breadcrumbs-top {
            padding-left : 0.3em;
            padding-right: 0.3em;
        }

        div#main-wrapper {
            padding-left : 0.3em;
            padding-right: 0.3em;
        }

        div.nav-quicklinks {
            padding-left : +0.3em;
            padding-right: +0.3em;

            dl {
                padding      : +0 +0.3em;
            }
        }

        footer {
            #footer-wrapper {
               padding-left : 0.3em;
               padding-right: 0.3em;

               #breadcrumbs-bottom {
                //   margin-left : 1em;
                //   margin-right: 1em;
               }

               div#footer-logo-wrapper {
                //   margin-left : 1em;
               }

               ul#footer-links {
                 right: 0.3 em;
               }
            }

            ul#footer-links {
              right: 0.3 em;
            }
        }
}


/* mobile displays */
@media(max-width: 480px) {

    header {
        #service-panel {
          height: 30%;

          #service-panel-wrapper {

            div#language-switcher {

              button {
                  font-size       : 0.85em;
              }
            }
          }
        }

        .header-logo {
            height: 60%;

            img {
                width: 22%;
            }

            p {
                display: none;
            }
        }
        //#shortcuts {
        //    display: none;
        //}
    }

    nav#main-navigation {
      min-height: 30%;

        div#nav-wrapper {
            height: 30%;

            button {
              font-size   : 1.4em;
              margin-top  : 0.08em;
              margin-left : 0.35em;
            }
        }
    }

    div#breadcrumbs-top {
        display: none;
    }
}