/* ======================================================= */
/* style.css                                               */
/* Created by Andreas Schlager 2020                        */
/* Copyright © 2020 Andreas Schlager. All rights reserved. */
/* ======================================================= */

html {
    font-size: 62.5%;
}


body {
    font-family: 'Lato';
    font-weight: 300;
    color: #000000;
    background-color: #FFFFFF;
}


/* ----------------- */
/* classes for fonts */
/* ----------------- */

/* lato-300 - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/lato-v16-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Lato Light'), local('Lato-Light'),
       url('../fonts/lato-v16-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/lato-v16-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/lato-v16-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/lato-v16-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/lato-v16-latin-300.svg#Lato') format('svg'); /* Legacy iOS */
}

/* classes for font sizes */
.large {
    font-size: 4.0em;
}

.largeMedium {
    font-size: 2.5em;
}

.medium {
    font-size: 2.0em;
}

.mediumSmall {
    font-size: 1.6em;
}

.small {
    font-size: 1.1em;
}

/* ------------------ */
/* classes for images */
/* ------------------ */

/* class for height of address provided as image */
.addressHeight {
    height: 5.4em;
}

/* ---------------- */
/* link decorations */
/* ---------------- */

a:link {
    text-decoration: none;
    color: #007AFF;
}

a:visited {
    text-decoration: none;
        color: #007AFF;
}

a:hover {
    
    text-decoration: none;
    color: #007AFF;
    cursor: pointer;
}

/* class for links on right side of page */
.rightLink {
    text-align: right;
    color: #007AFF;
}

/* class for links on left side of page */
.leftLink {
    color: #007AFF;
}

/* class for links on top of page */
.topLink {
    position: fixed;
    color: #007AFF;
    background-color: #FFFFFF;
}

/* class for links somewhere on the page */
.otherLink {
    color: #007AFF;
}


/* ------------------------------------------------------------------------------ */
/* container for contents that may be retrieved and inserted by using jQuery/Ajax */
/* also the dimensions are set out for the non javascript-version of the website  */
/* ------------------------------------------------------------------------------ */
#contentArea {
    margin: 0 auto 0;   /* Centre of browser */ 
    max-width: 90em;
    min-width: 45em;
}


/* ---------------------------------------------------------------------------------- */
/* width and height classes:                                                          */
/* the ratio is about '1 to sqare root 2' which allows half sizes with the same ratio */
/* ---------------------------------------------------------------------------------- */

/* width for double column view: 90em - large screen devices        */
/* width for single column view: 45em - small screen mobile devices */

/* variable width element - see responsive webdesign section below ...               */
/* width will be reduced from 90em to 45em in a single column view on mobile devices */
.width90_45 {
    float: left;
    width: 90em;
}

/* variable width element for links - see responsive webdesign section below ...       */
/* width will be reduced from 45em to 22.5em in a single column view on mobile devices */
.width45_22 {
    float: left;
    width: 45em;
}

/* fixed width elements */
.width45 {
    float: left;
    width: 45em;
}

/* class to horizontally center an element within a fixed width element                          */
/* unused for the time - could be used to horizontally center a portrait-image within a thumbnail*/
.horizontalCentered {
    float: left;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

/* fixed height elements                               */
/*                                                     */
/* the ratio is about '1 to sqare root 2'              */
/* 90em 64em 45em 32em 22.5em 16em 11.25em 8em 5.625em */
/* height90/45/22/16/11 are unused for the time        */
/* presently used heights in different files:          */
/* 'index.html'     - height32, height08               */
/* 'impressum.html' - height32, height05               */
/* 'about.html'     - height64, height05               */
/* 'projekte.html'  - height32, height05               */
/* 'projektX.html'  - height05                         */

.height90 {
    height: 90em;
}

.height64 {
    height: 64em;
}

.height45 {
    height: 45em;
}

.height32 {
    height: 32em;
}

.height22 {
    height: 22.5em;
}

.height16 {
    height: 16em;
}

.height11 {
    height: 11.25em;
}

.height08 {
    height: 8em;
}

.height05 {
    height: 5.625em;
}

/* class to vertically center an element within a fixed height element */
.verticalCentered {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

/* vertical margin to separate links from image */
.verticalMargin {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}


/* ---------------------------------------------------- */
/* classes for thumbnails                               */
/*                                                      */
/*                                                      */
/* thumbnail image 'thumbnailInner':    12.8em x 12.8em */
/* including border-width 0.1em':       13.0em x 13.0em */
/*                                                      */
/*                                                      */
/* 90.0em content width - 6 thumbnails in a row:        */
/*                                                      */
/* including margin 1.2em (90em width): 15.4em x 15.4em */
/* total: 6 x 15.4em = 92.4em                           */
/* 92.4em - (2 x 1.2em) = 90.0em                        */
/* therefore 'negative margin' of -1.2em is used        */
/*                                                      */
/*                                                      */
/* 45.0em content width - 3 thumbnails in a row:        */
/*                                                      */
/* including margin 1.5em (45em width): 16.0em x 16.0em */
/* total: 3 x 16.0em = 48.0em                           */
/* 48.0em - (2 x 1.5em) = 45.0em                        */
/* therefore 'negative margin' of -1.5em is used        */
/* ---------------------------------------------------- */

/* variable width thumbnail elements - see responsive webdesign section below ...      */
/* width will be reduced from 92.4em to 48em in a single column view on mobile devices */
.thumbnail90_45 {
    float: left;
    width: 92.4em;
    margin: -1.2em;
}

.thumbnailOuter {
    float: left;
    width: 12.8em;
    height: 12.8em;
    border-style: solid;
    border-width: 0.1em;
    border-color: #007AFF;
    margin: 1.2em;
}

/* fixed width element */
.thumbnailInner {
    float: left;
    width: 12.8em;
}

/* fixed height element */
.thumbnailInnerPortrait {
    height: 12.8em;
}

/* ----------------------------------- */
/* classes for 'projektX' detail pages */
/* ----------------------------------- */

/* used to embed images on 'projektX' pages - reduces first (top) and last (bottom) 'imageMargin' */
.imageContainer {
    margin-top: -0.5em;
    margin-bottom: -0.5em;
}

/* vertical margin for images on 'projektX' pages */
.imageMargin {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

/* ---------------------- */
/* classes for about page */
/* ---------------------- */

/* variable width image elements to embed portrait images in a double column view on wide screens */
/* used for about page portait images - see responsive webdesign section below ...                */
/* width will be reduced from 91.0em to 45.0em in a single column view on mobile devices          */
.image90_45 {
    float: left;
    width: 91.0em;
    margin-left: -0.5em;    
    margin-right: -0.5em;    
}

/* class '.image45' used instead of class '.imageMargin' for portrait-images on about page */
/* width will be increased from 44.5em to 45.0em in a single column view on mobile devices */
.image45 {
    float: left;
    width: 44.5em;
    margin: 0.5em;
}


/* ----------------------------------------------------- */
/* responsive webdesign - media query for mobile devices */
/* width for single column view: 45em                    */
/* ----------------------------------------------------- */
@media(max-width: 920px) {

    html {
        font-size: 62.5%;
    }
    
    
    /* ------------------------------------------------------------------------------ */
    /* container for contents that may be retrieved and inserted by using jQuery/Ajax */
    /* also the dimensions are set out for the non javascript-version of the website  */
    /* ------------------------------------------------------------------------------ */
    #contentArea {
        margin: 0 auto 0;   /* Centre of browser */ 
        max-width: 45em;
        min-width: 45em;
    }
    
    /* variable width elements - see width section section above ...                     */
    /* width will be reduced from 90em to 45em in a single column view on mobile devices */
    .width90_45 {
        float: left;
        width: 45em;
        
    }
    
    /* variable width element for links - see width section section above ...              */
    /* width will be reduced from 45em to 22.5em in a single column view on mobile devices */
    .width45_22 {
        float: left;
        width: 22.5em;
    }
    
    /* variable width thumbnail elements - see thumbnail section above ...                 */
    /* width will be reduced from 92.4em to 48em in a single column view on mobile devices */
    .thumbnail90_45 {
        float: left;
        width: 48em;
        margin: -1.5em;
    }
    
    .thumbnailOuter {
        float: left;
        width: 12.8em;
        height: 12.8em;
        border-style: solid;
        border-width: 0.1em;
        border-color: #007AFF;
        margin: 1.5em;
    }

    /* variable width image elements to embed portrait images in a double column view on wide screens */
    /* used for about page portait images - see about page section above ...                          */
    /* width will be reduced from 91.0em to 45.0em in a single column view on mobile devices          */
    .image90_45 {
        width: 45.0em;
    }
    
    /* class '.image45' used instead of class '.imageMargin' for portrait-images on about page */
    /* width will be increased from 44.5em to 45.0em in a single column view on mobile devices */
    .image45 {
        float: left;
        width: 45.0em;
    }

}