* IE11 layout added

* grid css code moved to @supports tag

public/styles/main.css

@@ -35,35 +35,18 @@ section {
 /* app main grid container */
 .app-container {
     margin: auto;
-    display: grid;
-    grid-column-gap: 20px;
-    grid-row-gap: 0;
     min-height: 100%;
 }
 
 section.home {
     padding-left: 20px;
     border-left: 1px solid #003b70;
-    grid-area: content;
-    display: grid;
-    grid-column-gap: 20px;
-    grid-row-gap: 20px;
-    align-self: start;
 }
 
 section.article {
     padding-left: 20px;
     padding-right: 20px;
     border-left: 1px solid #003b70;
-    grid-area: content;
-    display: grid;
-    grid-column-gap: 20px;
-    grid-row-gap: 20px;
-    align-self: start;
-}
-
-section.error {
-    grid-area: content;
 }
 
 footer {
@@ -73,7 +56,6 @@ footer {
 }
 
 footer.main-footer {
-    grid-area: footer;
     line-height: 70px;
 }
 
@@ -92,317 +74,533 @@ footer .ericsson-logo {
     margin-left: 50px;
 }
 
-/* mobile */
+/* IE 10-11 */
-@media only screen and (max-width: 779px) {
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
     .app-container {
-        grid-template-columns: auto;
+        width: 1180px;
-        grid-template-rows: auto auto auto 70px;
+        margin: auto;
-        grid-template-areas:
+        overflow: hidden;
-                "header"
-                "nav"
-                "content"
-                "footer";
     }
 
-    section.home {
+    nav.main {
-        max-width: calc(100% - 40px);
+        float: left;
-        grid-template-columns: auto auto;
+        width: 160px;
-        grid-template-rows: auto auto auto auto;
-        grid-template-areas:
-                "bigimg bigimg"
-                "article article"
-                "smallimg1 smallimg2"
-                "download download";
     }
 
-    section.home > img {
+    section.home,
-        width: 100%;
+    section.article,
-    }
+    section.awardees,
-
+    section.profile {
-    section.article {
+        width: 960px;
-        grid-template-columns: auto;
-        grid-template-rows: auto auto;
-        grid-template-areas:
-                "article"
-                "sidebar";
-    }
-
-    section.article > .sidebar {
-        display: none;
-    }
-
-    img.embedded-image {
-        display: block;
-        max-width: 100%;
-        margin-left: auto;
-        margin-right: auto;
-        margin-bottom: 10px;
-    }
-
-    img.embedded-image.keep-small-right {
-        max-width: 30%;
         float: right;
     }
 
-    section.judge {
+    section.awardees > section.judges {
-        width: calc(100% - 40px);
+        clear: both;
-        margin-left: 20px;
+        overflow: hidden;
+    }
+
+    section.awardees section.judge {
+        width: 440px;
+        height: 120px;
+        float: left;
+    }
+
+    a.awardee {
+        width: 460px;
+        float: left;
+        margin-right: 20px;
+    }
+
+    .awardee img.profile {
+        float: left;
+        width: 180px;
+        height: 180px;
+        border-radius: 90px;
         margin-right: 20px;
         margin-bottom: 20px;
-        float: left;
     }
 
-    a.awardee {
+    .awardee .description {
+        clear: both;
+    }
+
+    section.home > img.bimg {
         float: left;
         margin-right: 20px;
-        grid-template-columns: 80px auto;
     }
 
-    section.awardee {
+    section.home > img.simg1,
-        grid-template-columns: 80px auto;
+    section.home > img.simg2 {
+        float: left;
+        margin-bottom: 20px;
     }
 
-    a.awardee {
+    section.home > article {
-        width: auto;
+        clear: left;
+        float: left;
+        width: 480px;
+    }
+
+    section.home section.download {
+        float: right;
+        width: 460px;
+    }
+
+    section.article img.embedded-image {
+        display: none;
+    }
+
+    section.article > article {
+        float: left;
+        width: 560px;
+    }
+
+    section.article > section.sidebar {
+        float: right;
+        width: 380px;
+    }
+
+    section.profile > section.awardee {
+        float: left;
+        width: 560px;
+    }
+
+    section.profile > aside.sidebar {
+        float: right;
+        width: 380px;
+        padding-top: 300px;
+    }
+
+    section.profile > section.sidebar > img {
+
+    }
+
+    footer.main-footer {
+        clear: both;
+        width: 100%;
         padding-left: 20px;
-        padding-right: 20px;
+    }
+}
+
+@supports (display: grid) {
+
+    .app-container {
+        margin: auto;
+        display: grid;
+        grid-column-gap: 20px;
+        grid-row-gap: 0;
+        min-height: 100%;
     }
 
-    section.awardees > .awardee > img.profile,
+    section.home {
-    section.profile> .awardee > img.profile {
+        display: grid;
-        width: 80px;
+        grid-area: content;
-        height: 80px;
+        grid-column-gap: 20px;
-        border-radius: 40px;
+        grid-row-gap: 20px;
-        align-self: center;
+        align-self: start;
     }
 
-    header,
+    section.article {
-    footer,
+        display: grid;
-    nav {
+        grid-area: content;
-        padding-left: 20px;
+        grid-column-gap: 20px;
-        padding-right: 20px;
+        grid-row-gap: 20px;
-    }
+        align-self: start;
-
-    header.main .title img {
-        width: 55px;
-    }
-
-    footer .footer-lead {
-        width: 140px;
-    }
-
-    footer .sigma-logo {
-        width: 78px;
-    }
-
-    footer .ericsson-logo {
-        width: 82px;
-        margin-left: 10px;
-    }
-
-    section.profile {
-        grid-template-columns: auto;
-        grid-template-rows: auto auto;
-        grid-template-areas:
-                "profile"
-                "sidebar";
-    }
-
-    section.awardee {
-        margin-left: 20px;
-        margin-right: 20px;
     }
 
     section.error {
-        margin-left: 20px;
+        grid-area: content;
-        margin-right: 20px;
-    }
-}
-
-/* tablet */
-@media only screen and (min-width: 780px) and (max-width: 1219px) {
-    .app-container {
-        grid-template-columns: auto 180px 580px auto;
-        grid-template-rows: 170px auto 70px;
-        grid-template-areas:
-                ". header header ."
-                ". nav content ."
-                "footer footer footer footer";
     }
 
-    section.home {
+    footer.main-footer {
-        grid-template-columns: 280px 280px;
+        grid-area: footer;
-        grid-template-rows: 370px 175px auto;
-        grid-template-areas:
-                "bigimg bigimg"
-                "smallimg1 smallimg2"
-                "article article"
-                "download download";
     }
 
-    section.article {
+
-        grid-template-columns: 580px 380px;
+        /* mobile */
-        grid-template-rows: auto;
+    @media only screen and (max-width: 779px) {
-        grid-template-areas:
+        .app-container {
-                "article"
+            grid-template-columns: auto;
-                "sidebar";
+            grid-template-rows: auto auto auto 70px;
+            grid-template-areas:
+                    "header"
+                    "nav"
+                    "content"
+                    "footer";
+        }
+
+        section.home {
+            max-width: calc(100% - 40px);
+            grid-template-columns: auto auto;
+            grid-template-rows: auto auto auto auto;
+            grid-template-areas:
+                    "bigimg bigimg"
+                    "article article"
+                    "smallimg1 smallimg2"
+                    "download download";
+        }
+
+        section.home > img {
+            width: 100%;
+        }
+
+        section.article {
+            grid-template-columns: auto;
+            grid-template-rows: auto auto;
+            grid-template-areas:
+                    "article"
+                    "sidebar";
+        }
+
+        section.article > .sidebar {
+            display: none;
+        }
+
+        img.embedded-image {
+            display: block;
+            max-width: 100%;
+            margin-left: auto;
+            margin-right: auto;
+            margin-bottom: 10px;
+        }
+
+        img.embedded-image.keep-small-right {
+            max-width: 30%;
+            float: right;
+        }
+
+        section.judge {
+            width: calc(100% - 40px);
+            margin-left: 20px;
+            margin-right: 20px;
+            margin-bottom: 20px;
+            float: left;
+        }
+
+        a.awardee {
+            float: left;
+            margin-right: 20px;
+            grid-template-columns: 80px auto;
+        }
+
+        section.awardee {
+            grid-template-columns: 80px auto;
+        }
+
+        a.awardee {
+            width: auto;
+            padding-left: 20px;
+            padding-right: 20px;
+        }
+
+        section.awardees > .awardee > img.profile,
+        section.profile> .awardee > img.profile {
+            width: 80px;
+            height: 80px;
+            border-radius: 40px;
+            align-self: center;
+        }
+
+        header,
+        footer,
+        nav {
+            padding-left: 20px;
+            padding-right: 20px;
+        }
+
+        header.main .title img {
+            width: 55px;
+        }
+
+        footer .footer-lead {
+            width: 140px;
+        }
+
+        footer .sigma-logo {
+            width: 78px;
+        }
+
+        footer .ericsson-logo {
+            width: 82px;
+            margin-left: 10px;
+        }
+
+        section.profile {
+            grid-template-columns: auto;
+            grid-template-rows: auto auto;
+            grid-template-areas:
+                    "profile"
+                    "sidebar";
+        }
+
+        section.awardee {
+            margin-left: 20px;
+            margin-right: 20px;
+        }
+
+        section.error {
+            margin-left: 20px;
+            margin-right: 20px;
+        }
+    }
+
+    /* tablet */
+    @media only screen and (min-width: 780px) and (max-width: 1219px) {
+        .app-container {
+            grid-template-columns: auto 180px 580px auto;
+            grid-template-rows: 170px auto 70px;
+            grid-template-areas:
+                    ". header header ."
+                    ". nav content ."
+                    "footer footer footer footer";
+        }
+
+        section.home {
+            grid-template-columns: 280px 280px;
+            grid-template-rows: 370px 175px auto;
+            grid-template-areas:
+                    "bigimg bigimg"
+                    "smallimg1 smallimg2"
+                    "article article"
+                    "download download";
+        }
+
+        section.article {
+            grid-template-columns: 580px 380px;
+            grid-template-rows: auto;
+            grid-template-areas:
+                    "article"
+                    "sidebar";
+        }
+
+        section.article > .sidebar {
+            display: none;
+        }
+
+        .footer-content {
+            margin: auto;
+            width: 780px;
+        }
+
+        img.embedded-image {
+            max-width: 50%;
+            float: right;
+            margin-left: 20px;
+            margin-bottom: 20px;
+        }
+
+        img.embedded-image.keep-small-right {
+            max-width: 30%;
+        }
+
+        section.judge {
+            width: 440px;
+            margin-right: 20px;
+            float: left;
+        }
+
+        a.awardee {
+            float: left;
+            width: 470px;
+            margin-right: 20px;
+            margin-left: 20px;
+            grid-template-columns: 180px 270px;
+        }
+
+        section.awardee {
+            grid-template-columns: 180px 360px;
+        }
+
+        section.awardees > .awardee > img.profile,
+        section.profile> .awardee > img.profile {
+            width: 180px;
+            height: 180px;
+            border-radius: 90px;
+        }
+
+        section.profile {
+            grid-template-columns: 560px;
+            grid-template-rows: auto auto;
+            grid-template-areas:
+                    "profile"
+                    "sidebar";
+        }
+
+        nav ul.menu_level_1 > li {
+            display: block;
+        }
+    }
+
+    /* monitor */
+    @media only screen and (min-width: 1220px) {
+        .app-container {
+            grid-template-columns: auto 180px 980px auto;
+            grid-template-rows: 170px auto 70px;
+            grid-template-areas:
+                    ". header header  ."
+                    ". nav    content ."
+                    "footer footer footer footer";
+        }
+
+        section.home {
+            /*grid-template-columns: 580px 280px;*/
+            grid-template-columns: 430px 130px 280px;
+            grid-template-rows: 175px 175px auto;
+            grid-template-areas:
+                    "bigimg bigimg smallimg1"
+                    "bigimg bigimg smallimg2"
+                    "article download download";
+        }
+
+        section.article {
+            grid-template-columns: 580px 360px;
+            grid-template-rows: auto;
+            grid-template-areas:
+                    "article sidebar";
+        }
+
+        .footer-content {
+            margin: auto;
+            width: 1180px;
+        }
+
+        img.embedded-image {
+            display: none;
+        }
+
+        section.judge {
+            width: 440px;
+            margin-right: 20px;
+            float: left;
+        }
+
+        a.awardee {
+            float: left;
+            margin-right: 20px;
+            grid-template-columns: 180px 270px;
+            width: 470px;
+        }
+
+        section.awardee {
+            grid-template-columns: 180px 360px;
+        }
+
+        section.awardees > .awardee > img.profile,
+        section.profile> .awardee > img.profile {
+            width: 180px;
+            height: 180px;
+            border-radius: 90px;
+        }
+
+        section.profile {
+            grid-template-columns: 560px 380px;
+            grid-template-rows: auto;
+            grid-template-areas:
+                    "profile sidebar"
+        }
+
+        section.profile > aside.sidebar > img {
+            margin-top: 340px;
+        }
+
+        nav ul.menu_level_1 > li {
+            display: block;
+        }
+    }
+
+    /* home page */
+    section.home > img.bimg {
+        grid-area: bigimg;
+    }
+
+    section.home > img.simg1 {
+        grid-area: smallimg1;
+    }
+
+    section.home > img.simg2 {
+        grid-area: smallimg2;
+    }
+
+    section.home > article {
+        grid-area: article;
+    }
+
+    section.home > section.download {
+        grid-area: download;
+    }
+
+    /* the prize (article) */
+    section.article > article {
+        grid-area: article;
     }
 
     section.article > .sidebar {
-        display: none;
+        grid-area: sidebar;
     }
 
-    .footer-content {
+    /* judges */
-        margin: auto;
+    section.judges {
-        width: 780px;
+        grid-area: content;
     }
 
-    img.embedded-image {
+    /* awardees */
-        max-width: 50%;
+    section.awardees {
-        float: right;
+        grid-area: content;
-        margin-left: 20px;
-        margin-bottom: 20px;
-    }
-
-    img.embedded-image.keep-small-right {
-        max-width: 30%;
-    }
-
-    section.judge {
-        width: 440px;
-        margin-right: 20px;
-        float: left;
-    }
-
-    a.awardee {
-        float: left;
-        width: 470px;
-        margin-right: 20px;
-        margin-left: 20px;
-        grid-template-columns: 180px 270px;
-    }
-
-    section.awardee {
-        grid-template-columns: 180px 360px;
     }
 
     section.awardees > .awardee > img.profile,
     section.profile> .awardee > img.profile {
-        width: 180px;
+        grid-area: image;
-        height: 180px;
-        border-radius: 90px;
     }
 
+    /* awardee (profile) */
     section.profile {
-        grid-template-columns: 560px;
+        display: grid;
-        grid-template-rows: auto auto;
+        grid-area: content;
-        grid-template-areas:
+        grid-column-gap: 20px;
-                "profile"
+        grid-row-gap: 20px;
-                "sidebar";
-    }
-
-    nav ul.menu_level_1 > li {
-        display: block;
-    }
-}
-
-/* monitor */
-@media only screen and (min-width: 1220px) {
-    .app-container {
-        grid-template-columns: auto 180px 980px auto;
-        grid-template-rows: 170px auto 70px;
-        grid-template-areas:
-                ". header header  ."
-                ". nav    content ."
-                "footer footer footer footer";
-    }
-
-    section.home {
-        /*grid-template-columns: 580px 280px;*/
-        grid-template-columns: 430px 130px 280px;
-        grid-template-rows: 175px 175px auto;
-        grid-template-areas:
-                "bigimg bigimg smallimg1"
-                "bigimg bigimg smallimg2"
-                "article download download";
-    }
-
-    section.article {
-        grid-template-columns: 580px 360px;
-        grid-template-rows: auto;
-        grid-template-areas:
-                "article sidebar";
-    }
-
-    .footer-content {
-        margin: auto;
-        width: 1180px;
-    }
-
-    img.embedded-image {
-        display: none;
-    }
-
-    section.judge {
-        width: 440px;
-        margin-right: 20px;
-        float: left;
-    }
-
-    a.awardee {
-        float: left;
-        margin-right: 20px;
-        grid-template-columns: 180px 270px;
-        width: 470px;
     }
 
+    a.awardee,
     section.awardee {
-        grid-template-columns: 180px 360px;
+        display: grid;
-    }
+        grid-column-gap: 20px;
-
+        grid-template-rows: 60px 120px auto;
-    section.awardees > .awardee > img.profile,
-    section.profile> .awardee > img.profile {
-        width: 180px;
-        height: 180px;
-        border-radius: 90px;
-    }
-
-    section.profile {
-        grid-template-columns: 560px 380px;
-        grid-template-rows: auto;
         grid-template-areas:
-                "profile sidebar"
+                "image year"
+                "image name"
+                "content content";
     }
 
-    section.profile > aside.sidebar > img {
+    .awardee .year {
-        margin-top: 340px;
+        grid-area: year;
+        font-family: 'PT Serif', serif;
+        font-size: 32pt;
+        align-self: end;
     }
 
-    nav ul.menu_level_1 > li {
+    .awardee .name {
-        display: block;
+        grid-area: name;
+        font-family: 'PT Serif', serif;
+        font-size: 34pt;
+        line-height: 32pt;
+        font-weight: bold;
+    }
+
+    .awardee > .description {
+        grid-area: content;
+    }
+
+    header.main {
+        grid-area: header;
+    }
+
+    nav.main {
+        grid-area: nav;
     }
 }
 
-/* home page */
-section.home > img.bimg {
-    grid-area: bigimg;
-}
-
-section.home > img.simg1 {
-    grid-area: smallimg1;
-}
-
-section.home > img.simg2 {
-    grid-area: smallimg2;
-}
-
-section.home > article {
-    grid-area: article;
-}
-
-section.home > section.download {
-    grid-area: download;
-}
 
 section.download > img.poster-logo{
     float: left;
@@ -426,24 +624,10 @@ section.download a.download > img{
     margin-right: 5px;
 }
 
-/* the prize (article) */
-section.article > article {
-    grid-area: article;
-}
-
-section.article > .sidebar {
-    grid-area: sidebar;
-}
-
 section.article > .sidebar > img {
     max-width: 100%;
 }
 
-/* judges */
-section.judges {
-    grid-area: content;
-}
-
 section.judges > h1 {
     clear: both;
     padding-top: 40px;
@@ -468,22 +652,9 @@ section.judge > .description {
     font-size: 12pt;
 }
 
-/* awardees */
-section.awardees {
-    grid-area: content;
-}
-
-section.awardees > .awardee > img.profile,
-section.profile> .awardee > img.profile {
-    grid-area: image;
-}
 
 /* awardee (profile) */
 section.profile {
-    grid-area: content;
-    display: grid;
-    grid-column-gap: 20px;
-    grid-row-gap: 20px;
     border-left: 1px solid #003b70;
     padding-left: 20px;
 }
@@ -502,16 +673,6 @@ section.profile > aside.sidebar > .image-label {
     font-weight: bold;
 }
 
-a.awardee,
-section.awardee {
-    display: grid;
-    grid-column-gap: 20px;
-    grid-template-rows: 60px 120px auto;
-    grid-template-areas:
-            "image year"
-            "image name"
-            "content content";
-}
 
 section.awardee ol,
 section.awardee ul {
@@ -524,24 +685,17 @@ section.awardee ul > li {
 }
 
 .awardee .year {
-    grid-area: year;
     font-family: 'PT Serif', serif;
     font-size: 32pt;
-    align-self: end;
 }
 
 .awardee .name {
-    grid-area: name;
     font-family: 'PT Serif', serif;
     font-size: 34pt;
     line-height: 32pt;
     font-weight: bold;
 }
 
-.awardee > .description {
-    grid-area: content;
-}
-
 a.awardee > .description {
     border-left: 1px solid #003b70;
     padding-left: 10px;
@@ -551,10 +705,6 @@ a.awardee > .description {
 
 /* common parts */
 
-header.main {
-    grid-area: header;
-}
-
 header .title {
     margin-top: 30px;
     font-size: 40pt;
@@ -571,10 +721,6 @@ header .description .granprize-logo {
     float: right;
 }
 
-nav.main {
-    grid-area: nav;
-}
-
 nav ul {
     list-style: none;
     padding-left: 0;