organization list page

app/assets/styles/_grid.scss

@@ -20,7 +20,12 @@
                 display: block;
             }
             &:last-child,
-            & div:last-child {
+            & .grid-dis-col-1:last-child,
+            & .grid-dis-col-2:last-child,
+            & .grid-dis-col-3:last-child,
+            & .grid-dis-col-4:last-child,
+            & .grid-dis-col-1:nth-child(4n),
+            & .grid-dis-col-2:nth-child(2n) {
                 margin: 0;
             }
         }

app/assets/styles/all.scss

@@ -17,6 +17,8 @@
 //
 @import "blocks/logo";
 @import "blocks/entity-badge";
+@import "blocks/organization-list";
+@import "blocks/map";
 //
 @import "header/header";
 @import "header/slogan";

app/assets/styles/blocks/map.scss

@@ -0,0 +1,10 @@
+.map {
+    &__container {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 637px;
+        z-index: 1;
+    }
+}

app/assets/styles/blocks/organization-list.scss

@@ -0,0 +1,152 @@
+.organization-list {
+    &__headline {
+        height: 44px;
+        margin-bottom: 15px;
+        padding: 0 18px 0 56px;
+        box-sizing: border-box;
+        position: relative;
+        display: -webkit-flex;
+        display: -ms-flex;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-content: center;
+        align-items: center;
+        background: #ebebeb;
+        z-index: 2;
+
+        &:before {
+            content: '';
+            position: absolute;
+            width: 49px;
+            height: 49px;
+            border-radius: 50%;
+            left: -10px;
+            top: -8px;
+            border: 5px solid #ffffff;
+            background: url(../img/icon_leftbar_innermenu_01@2x.png) center/50% 50% no-repeat #004d7b;
+        }
+    }
+
+    &__headline-text {
+        width: 900px;
+        margin-right: 20px;
+        font-family: $fontcuprum;
+        font-size: 20px;
+        font-weight: bold;
+        color: #004d7b;
+        overflow: hidden;
+    }
+
+    &__item {
+        border: 1px solid #ebebeb;
+        background: #fff;
+        font-family: $fontcuprum;
+        margin-bottom: 10px;
+        position: relative;
+        padding-right: 30px;
+        display: flex;
+        flex-direction: row;
+
+        &-img {
+            max-width: 110px;
+
+            &-placeholder {
+                width: 110px;
+                height: 73px;
+                background: #ccc;
+            }
+
+            &-container {
+                margin: -1px 9px -1px -1px;
+            }
+        }
+
+        &-title {
+            height: 29px;
+            margin: 5px 0 6px;
+            overflow: hidden;
+
+            &-link {
+                display: table-cell;
+                height: 29px;
+                vertical-align: middle;
+                font-size: 17px;
+                line-height: 14px;
+                color: #3b434d;
+                text-decoration: none;
+            }
+        }
+
+        &-description {
+            height: 29px;
+            overflow: hidden;
+            font-family: $fontopensans;
+            font-size: 13px;
+            line-height: 14px;
+            color: #3b434d;
+        }
+
+        &-link {
+            display: block;
+            width: 14px;
+            height: 14px;
+            position: absolute;
+            top: 50%;
+            right: 4px;
+            margin-top: -7px;
+            background: url(../img/icon_leftbar_title_arrow1.png) no-repeat;
+        }
+
+        &-badge {
+            left: -1px;
+            bottom: 6px;
+        }
+    }
+
+    &__grid {
+        margin: 10px 0;
+    }
+
+    &__side-menu {
+        z-index: 2;
+        position: relative;
+        background: #ffffff;
+
+        &-item {
+            border-bottom: 1px solid #ebebeb;
+
+            &:after {
+                //content: url(../img/icon_leftbar_title_arrow1.png);
+            }
+
+            &.active:after {
+                //transform: rotate(90deg);
+            }
+
+            & ul {
+                display: none;
+                background: #ebebeb;
+            }
+
+            &.active ul {
+                display: block;
+            }
+        }
+
+        &-link {
+            color: #004d7b;
+            text-decoration: none;
+            font-size: 15px;
+            padding: 8px;
+            line-height: 19px;
+            display: block;
+            font-family: $fontcuprum;
+            font-weight: normal;
+
+            &:hover {
+                background: #d2dee9;
+            }
+        }
+    }
+}

app/assets/styles/content/breadcrumbs.scss

@@ -9,6 +9,8 @@
     align-content: center;
     font-size: 11px;
     line-height: 15px;
+    position: relative;
+    z-index: 2;
 
     &__link {
         color: #929292;

app/assets/styles/content/centerbar/centerbar.scss

@@ -1,6 +1,12 @@
 .centerbar {
     width: 78.2%;
 
+    &--with-map {
+        margin-top: 300px;
+        position: relative;
+        z-index: 2;
+    }
+
     @media screen and (max-width: 1220px) {
         width: 100%;
     }

app/assets/styles/content/centerbar/pagination.scss

@@ -78,5 +78,14 @@
         &:hover {
             background: #eb914e;
         }
+
+        &--blue {
+            background: #3b444d;
+
+            &:hover {
+                background: #5597d1;
+                color: #004d7b;
+            }
+        }
     }
 }

app/assets/styles/content/centerbar/specials.scss

@@ -19,6 +19,13 @@
         margin: 15px 10px;
         color: #000000;
         text-decoration: none;
+
+        &:hover {
+            border-color: #d2dee9;
+        }
+        &:hover .special-items__organization-address {
+            background: #d2dee9;
+        }
     }
 
     &__title {

app/assets/styles/content/leftbar/entitybanner.scss

@@ -3,6 +3,7 @@
 
     &__item {
         margin-bottom: 20px;
+        background: #fff;
         border: 1px solid #ebebeb;
         display: -webkit-flex;
         display: -ms-flex;
@@ -10,6 +11,7 @@
         flex-direction: column;
         text-decoration: none;
         border-radius: 10px 0 0 0 / 10px 0 0 0;
+        height: calc(100% - 20px);
 
         &:hover {
             border-color: #d2dee9;
@@ -52,6 +54,7 @@
         margin: auto;
         margin-bottom: 5px;
         position: relative;
+        min-width: 200px;
     }
     &__img {
         width: 100%;

app/www/css/all.css

@@ -278,7 +278,12 @@ body {
   .grid-dis-row img {
     display: block; }
   .grid-dis-row:last-child,
-  .grid-dis-row div:last-child {
+  .grid-dis-row .grid-dis-col-1:last-child,
+  .grid-dis-row .grid-dis-col-2:last-child,
+  .grid-dis-row .grid-dis-col-3:last-child,
+  .grid-dis-row .grid-dis-col-4:last-child,
+  .grid-dis-row .grid-dis-col-1:nth-child(4n),
+  .grid-dis-row .grid-dis-col-2:nth-child(2n) {
     margin: 0; }
 
 .grid-dis-col-1 {
@@ -500,69 +505,221 @@ body {
   color: #fff;
   background-image: url(../img/specials/badge-middle.png);
   font-family: "cuprum", Impact, "Charcoal CY", sans-serif;
-  font-size: 18px;
+    font-size: 18px;
 }
 
 .entity-badge__badge:before {
-  position: absolute;
-  left: -8px;
-  top: 0;
-  content: '';
-  display: block;
-  height: 100%;
-  width: 8px;
-  background-image: url(../img/specials/badge-start.png);
+    position: absolute;
+    left: -8px;
+    top: 0;
+    content: '';
+    display: block;
+    height: 100%;
+    width: 8px;
+    background-image: url(../img/specials/badge-start.png);
 }
 
 .entity-badge__badge:after {
-  position: absolute;
-  right: -10px;
-  top: 0;
-  content: '';
-  display: block;
-  height: 100%;
-  width: 10px;
-  background-image: url(../img/specials/badge-end.png);
+    position: absolute;
+    right: -10px;
+    top: 0;
+    content: '';
+    display: block;
+    height: 100%;
+    width: 10px;
+    background-image: url(../img/specials/badge-end.png);
 }
 
 .entity-badge__badge--orange, .special-items__badge--specials {
-  background-position: 0 0;
+    background-position: 0 0;
 }
 
 .entity-badge__badge--orange:before, .special-items__badge--specials:before, .entity-badge__badge--orange:after, .special-items__badge--specials:after {
-  background-position: 0 0;
+    background-position: 0 0;
 }
 
 .entity-badge__badge--green, .special-items__badge--exhibition {
-  background-position: 0 -36px;
+    background-position: 0 -36px;
 }
 
 .entity-badge__badge--green:before, .special-items__badge--exhibition:before, .entity-badge__badge--green:after, .special-items__badge--exhibition:after {
-  background-position: 0 -36px;
+    background-position: 0 -36px;
 }
 
 .entity-badge__badge--gray, .special-items__badge--school {
-  background-position: 0 -72px;
+    background-position: 0 -72px;
 }
 
 .entity-badge__badge--gray:before, .special-items__badge--school:before, .entity-badge__badge--gray:after, .special-items__badge--school:after {
-  background-position: 0 -72px;
+    background-position: 0 -72px;
 }
 
 .entity-badge__badge--blue, .special-items__badge--conference {
-  background-position: 0 -108px;
+    background-position: 0 -108px;
 }
 
 .entity-badge__badge--blue:before, .special-items__badge--conference:before, .entity-badge__badge--blue:after, .special-items__badge--conference:after {
-  background-position: 0 -108px;
+    background-position: 0 -108px;
 }
 
 .entity-badge__badge-text {
-  overflow: hidden;
-  width: 100%;
-  display: block;
-  white-space: nowrap;
-  text-overflow: ellipsis;
+    overflow: hidden;
+    width: 100%;
+    display: block;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.organization-list__headline {
+    height: 44px;
+    margin-bottom: 15px;
+    padding: 0 18px 0 56px;
+    box-sizing: border-box;
+    position: relative;
+    display: -webkit-flex;
+    display: -ms-flex;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-content: center;
+    align-items: center;
+    background: #ebebeb;
+    z-index: 2;
+}
+
+.organization-list__headline:before {
+    content: '';
+    position: absolute;
+    width: 49px;
+    height: 49px;
+    border-radius: 50%;
+    left: -10px;
+    top: -8px;
+    border: 5px solid #ffffff;
+    background: url(../img/icon_leftbar_innermenu_01@2x.png) center/50% 50% no-repeat #004d7b;
+}
+
+.organization-list__headline-text {
+    width: 900px;
+    margin-right: 20px;
+    font-family: "cuprum", Impact, "Charcoal CY", sans-serif;
+    font-size: 20px;
+    font-weight: bold;
+    color: #004d7b;
+    overflow: hidden;
+}
+
+.organization-list__item {
+    border: 1px solid #ebebeb;
+    background: #fff;
+    font-family: "cuprum", Impact, "Charcoal CY", sans-serif;
+    margin-bottom: 10px;
+    position: relative;
+    padding-right: 30px;
+    display: flex;
+    flex-direction: row;
+}
+
+.organization-list__item-img {
+    max-width: 110px;
+}
+
+.organization-list__item-img-placeholder {
+    width: 110px;
+    height: 73px;
+    background: #ccc;
+}
+
+.organization-list__item-img-container {
+    margin: -1px 9px -1px -1px;
+}
+
+.organization-list__item-title {
+    height: 29px;
+    margin: 5px 0 6px;
+    overflow: hidden;
+}
+
+.organization-list__item-title-link {
+    display: table-cell;
+    height: 29px;
+    vertical-align: middle;
+    font-size: 17px;
+    line-height: 14px;
+    color: #3b434d;
+    text-decoration: none;
+}
+
+.organization-list__item-description {
+    height: 29px;
+    overflow: hidden;
+    font-family: "opensans", Arial, "Helvetica CY", "Nimbus Sans L", sans-serif;
+    font-size: 13px;
+    line-height: 14px;
+    color: #3b434d;
+}
+
+.organization-list__item-link {
+    display: block;
+    width: 14px;
+    height: 14px;
+    position: absolute;
+    top: 50%;
+    right: 4px;
+    margin-top: -7px;
+    background: url(../img/icon_leftbar_title_arrow1.png) no-repeat;
+}
+
+.organization-list__item-badge {
+    left: -1px;
+    bottom: 6px;
+}
+
+.organization-list__grid {
+    margin: 10px 0;
+}
+
+.organization-list__side-menu {
+    z-index: 2;
+    position: relative;
+    background: #ffffff;
+}
+
+.organization-list__side-menu-item {
+    border-bottom: 1px solid #ebebeb;
+}
+
+.organization-list__side-menu-item ul {
+    display: none;
+    background: #ebebeb;
+}
+
+.organization-list__side-menu-item.active ul {
+    display: block;
+}
+
+.organization-list__side-menu-link {
+    color: #004d7b;
+    text-decoration: none;
+    font-size: 15px;
+    padding: 8px;
+    line-height: 19px;
+    display: block;
+    font-family: "cuprum", Impact, "Charcoal CY", sans-serif;
+    font-weight: normal;
+}
+
+.organization-list__side-menu-link:hover {
+    background: #d2dee9;
+}
+
+.map__container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 637px;
+    z-index: 1;
 }
 
 .header {
@@ -703,7 +860,10 @@ body {
   align-items: center;
   align-content: center;
   font-size: 11px;
-  line-height: 15px; }
+    line-height: 15px;
+    position: relative;
+    z-index: 2;
+}
   .breadcrumbs__link {
     color: #929292;
     text-decoration: underline;
@@ -1113,13 +1273,16 @@ body {
   margin-bottom: 20px; }
   .entitybanner__item {
     margin-bottom: 20px;
+      background: #fff;
     border: 1px solid #ebebeb;
     display: -webkit-flex;
     display: -ms-flex;
     display: flex;
     flex-direction: column;
     text-decoration: none;
-    border-radius: 10px 0 0 0 / 10px 0 0 0; }
+      border-radius: 10px 0 0 0 / 10px 0 0 0;
+      height: calc(100% - 20px);
+  }
     .entitybanner__item:hover {
       border-color: #d2dee9; }
     .entitybanner__item:hover .entitybanner__address {
@@ -1156,6 +1319,7 @@ body {
     margin: auto;
     margin-bottom: 5px;
     position: relative;
+      min-width: 200px;
   }
   .entitybanner__img {
     width: 100%;
@@ -1179,8 +1343,8 @@ body {
     font-family: "cuprum", Impact, "Charcoal CY", sans-serif; }
 
 .entitybanner__badge {
-  left: -14px;
-  bottom: 7px;
+    left: -14px;
+    bottom: 7px;
 }
   .entitybanner__item:hover {
     border-color: #d2dee9; }
@@ -1345,6 +1509,12 @@ body {
 
 .centerbar {
   width: 78.2%; }
+
+.centerbar--with-map {
+    margin-top: 300px;
+    position: relative;
+    z-index: 2;
+}
   @media screen and (max-width: 1220px) {
     .centerbar {
       width: 100%; } }
@@ -2276,6 +2446,15 @@ body {
     .pagination__filter:hover {
       background: #eb914e; }
 
+.pagination__filter--blue {
+    background: #3b444d;
+}
+
+.pagination__filter--blue:hover {
+    background: #5597d1;
+    color: #004d7b;
+}
+
 .usefulinfo__title {
   color: #3b434d;
   font-family: "cuprum", Impact, "Charcoal CY", sans-serif;
@@ -2337,6 +2516,14 @@ body {
   color: #000000;
   text-decoration: none; }
 
+.special-items__item:hover {
+    border-color: #d2dee9;
+}
+
+.special-items__item:hover .special-items__organization-address {
+    background: #d2dee9;
+}
+
 .special-items__title {
   display: flex;
   flex-direction: row;