/*
 *
 * Structure
 * ================================================
 * Basic definition of body, cotainers and other
 * structural elements
 *
 */

/* ==============[ first things first. simple font import. ]=============================== */
/* open-sans-300 - latin */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    src: local('Open Sans Light'), local('OpenSans-Light'),
         url('../../Public/Fonts/open-sans-v17-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('../../Public/Fonts/open-sans-v17-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  /* open-sans-300italic - latin */
  @font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 300;
    src: local('Open Sans Light Italic'), local('OpenSans-LightItalic'),
         url('../../Public/Fonts/open-sans-v17-latin-300italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('../../Public/Fonts/open-sans-v17-latin-300italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  /* open-sans-regular - latin */
  @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans Regular'), local('OpenSans-Regular'),
         url('../../Public/Fonts/open-sans-v17-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('../../Public/Fonts/open-sans-v17-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  /* open-sans-italic - latin */
  @font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 400;
    src: local('Open Sans Italic'), local('OpenSans-Italic'),
         url('../../Public/Fonts/open-sans-v17-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('../../Public/Fonts/open-sans-v17-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  /* open-sans-700 - latin */
  @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    src: local('Open Sans Bold'), local('OpenSans-Bold'),
         url('../../Public/Fonts/open-sans-v17-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('../../Public/Fonts/open-sans-v17-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  /* open-sans-700italic - latin */
  @font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 700;
    src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'),
         url('../../Public/Fonts/open-sans-v17-latin-700italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('../../Public/Fonts/open-sans-v17-latin-700italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }

/* ==============[ basic html element settings ]========================================== */
* {
    box-sizing: border-box;
}
html, body {
    position: relative;
    height: 100%;
}
body {
    text-align:center;
    background: @light-blue;
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
    &:before {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: url(../Images/fibonacciBg.svg) no-repeat right bottom;
        background-size: cover;
        content: " ";
        opacity: 0.3;
    }
    &.hidden, &.static {
        background: #fff;
        &:before {
            content: none;
        }
    }
}
a {
    color: lighten(@base-blue,20%);
    text-decoration: none;
}

/* ==============[ 'window' structure with small blue offset ]============================ */
.main-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 12px;
    left: 0;
    background: #fff;
    box-shadow: 0 3px 8px rgba(0,0,0,0.2);
    overflow: hidden;
    .transition();
    .hidden & {
        opacity: 0;
    }
    .static & {
        .transition(none);
    }
    .fullscreen & {
        bottom: 0;
    }
    @media screen and (min-width: @tabletLandscapeViewportWidth) {
        top: 5px;
        right: 5px;
        bottom: 5px;
        left: 5px;
        .fullscreen & {
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }
    }
    @media screen and (min-width: @desktopViewportWidth) {
        top: 20px;
        right: 20px;
        bottom: 25px;
        left: 20px;
    }
}

.document-view {
    position: absolute;
    top: 60px;
    right: 0;
    bottom: 0;
    left: 0;
    .transition();
    .fullscreen & {
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
    }
    .static & {
        .transition(none);
    }
    .tx-dlf-map {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
    .document-functions {
        .provider {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            text-align: left;
            z-index: auto;
            background: #fff;
            display: flex;
            align-items: center;
            padding: 10px;
            .transition();
            > ul > li > a {
                flex: 0 0 70px;
                img {
                    margin-top: 5px;
                    width: 70px;
                    height: 33px;
                    object-fit: contain;
                }
            }
            .mobile-meta {
                position: relative;
                font-size: 12px;
                line-height: 1.3;
                flex: 0 1 auto;
                dt {
                    display: none;
                }
                dd {
                    color: @light-blue;
                    &.tx-dlf-title a {
                        position: relative;
                        font-weight: bold;
                    }
                }
            }
            .mobile-controls {
                position: absolute;
                bottom: -50px;
                right: 15px;
                display: flex;
                form { // The goto page button
                    position: relative;
                    width: 40px;
                    height: 40px;
                    flex: 0 0 40px;
                    margin-right: 5px;
                    label {
                        display: none;
                    }
                    select {
                        position: relative;
                        width: 40px;
                        height: 40px;
                        padding-left: 40px;
                        background: #fff url(../Images/controlIcons.svg) no-repeat -560px -77px;
                        background-size: 600px 120px;
                        outline: none;
                        border-radius: 20px;
                        -webkit-appearance: none;
                        border: 0 none;
                        &[disabled] {
                            display: none;
                        }
                    }
                }
                .fullscreen { // The fullscreen button
                    position: relative;
                    flex: 0 0 40px;
                    width: 40px;
                    height: 40px;
                    border-radius: 20px;
                    .text-hide();
                    background: #fff;
                    &:before,
                    &:after {
                        position: absolute;
                        width: 12px;
                        height: 12px;
                        background: url(../Images/controlIcons.svg) no-repeat -538px -54px;
                        background-size: 600px 120px;
                        display: block;
                        content: " ";
                        .transition();
                        pointer-events: none;
                        .static & {
                            .transition(none);
                        }
                    }
                    &:before {
                        top: 9px;
                        right: 9px;
                    }
                    &:after {
                        bottom: 9px;
                        left: 9px;
                        .transform(rotate(180deg));
                    }
                    &.active {
                        &:before {
                            .transform(rotate(180deg));
                        }
                        &:after {
                            .transform(rotate(0));
                        }
                    }
                }
            }
            .fullscreen & {
                .transform(translateY(-10%));
            }
        }
        &.missing-provider-image {
            .provider {
                > a {
                    display: none;
                    img {
                        display: none;
                    }
                }
                .mobile-meta {
                    padding-left: 10px;
                }
            }
        }
    }
    @media screen and (min-width: @phoneLandscapeViewportWidth) {
        .document-functions .provider {
            .mobile-meta {
                padding-right: 100px;
            }
            .mobile-controls {
                bottom: auto;
                top: 10px;
                .fullscreen & {
                    bottom: -50px;
                    top: unset;
                }
            }
        }
    }
    @media screen and (min-width: @tabletLandscapeViewportWidth) {
        top: 0;
        left: 33%;
        padding: 0;
        .tx-dlf-map {
            top: 0;
        }
        .document-functions {
            .provider {
                top: 10px;
                left: 10px;
                right: auto;
                background: transparent;
                padding: 0;
                ul > li > a {
                    img {
                        width: 108px;
                        height: 50px;
                        border-radius: 4px;
                        object-fit: contain;
                    }
                }
                .mobile-meta,
                .mobile-controls {
                    display: none;
                }
            }
            &.missing-provider-image {
                ul {
                    left: 20px;
                }
            }
        }
    }
    @media screen and (min-width: @desktopViewportWidth) {
        left: 25%;
    }
}
