MediaWiki:Common.css: verschil tussen versies

k
k
 

/* Korrektur der Darstellung von Tokens-Input-Feldern */ .inputSpan > .pfTokens > ul, .inputSpan > .pfTokens {

   margin: 0 0 0 0!important;

}

table.container {

                 max-width: 1335px;
 margin: 0 auto;

            

}

.grid-row {

                 display: flex;
 flex-flow: row wrap;
 justify-content: flex-start;

            

}

.grid-item {

                 height: 550px;
 flex-basis: 20%;
 -ms-flex: auto;
 width: 259px;
 position: relative;
 padding: 10px;
 box-sizing: border-box;

            

}

.grid-row a {

                 text-decoration: none;

            

}

.wrapping-link {

                 position: absolute;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
 z-index: 2;
 color: currentColor;

            

}

.grid-item-wrapper {

                 -webkit-box-sizing: initial;
 -moz-box-sizing: initial;
 box-sizing: initial;
 background: #ececec;
 margin: 0;
 height: 100%;
 width: 100%;
 overflow: hidden;
 -webkit-transition: padding 0.15s cubic-bezier(0.4,0,0.2,1), margin 0.15s cubic-bezier(0.4,0,0.2,1), box-shadow 0.15s cubic-bezier(0.4,0,0.2,1);
 transition: padding 0.15s cubic-bezier(0.4,0,0.2,1), margin 0.15s cubic-bezier(0.4,0,0.2,1), box-shadow 0.15s cubic-bezier(0.4,0,0.2,1);
 position: relative;

            

}

.grid-item-container {

                 height: 100%;
 width: 100%;
 position: relative;

            

}

.grid-image-top {

                 height: 45%;
 width: 120%;
 background-size: cover;
 position: relative;
 background-position: 50% 50%;
 left: -10.5%;
 top: -4.5%;

            

}

.grid-image-top .centered {

                 text-align: center;
 transform: translate(-50%, -50%);
 background-size: contain;
 background-repeat: no-repeat;
 position: absolute;
 top: 54.5%;
 left: 50%;
 width: 60%;
 height: 60%;
 background-position: center;

            

}

.grid-image-top.rex-ray {

                 background: -webkit-gradient(linear,left top, left bottom,from(#007DB8),to(#00447C));
 background: -webkit-linear-gradient(#007DB8,#00447C);
 background: -o-linear-gradient(#007DB8,#00447C);
 background: linear-gradient(#007DB8,#00447C);

            

}

.rex-ray-image {

                 background-image: url(https://thecodeteam.com/wp-content/uploads/2017/08/Rex-Ray-icon-209x300.png);

            

}

.grid-image-top.sputnik {

                 background: -webkit-gradient(linear,left top, left bottom,from(#1AA9FB),to(#1785C4));
 background: -webkit-linear-gradient(#1AA9FB,#1785C4);
 background: -o-linear-gradient(#1AA9FB,#1785C4);
 background: linear-gradient(#1AA9FB,#1785C4);

            

}

.sputnik-image {

                 background-image: url(https://thecodeteam.com/wp-content/uploads/2017/08/sputnik-1-300x257.png);

            

}

.grid-image-top.edgex {

                 background: -webkit-gradient(linear,left top, left bottom,from(#952f4c),to(#3e1a51));
 background: -webkit-linear-gradient(#952f4c,#3e1a51);
 background: -o-linear-gradient(#952f4c,#3e1a51);
 background: linear-gradient(#952f4c,#3e1a51);

            

}

.edgex-image {

                 background-image: url(https://thecodeteam.com/wp-content/uploads/2017/08/edge-x-300x287.png);

            

}

.grid-image-top.openswitch {

                 background: -webkit-gradient(linear,left top, left bottom,from(#2db89a),to(#00793d));
 background: -webkit-linear-gradient(#2db89a,#00793d);
 background: -o-linear-gradient(#2db89a,#00793d);
 background: linear-gradient(#2db89a,#00793d);

            

}

.openswitch-image {

                 background-image: url(https://thecodeteam.com/wp-content/uploads/2017/08/open-switch-300x207.png);

            

}

.grid-image-top.scaleio {

                 background: -webkit-gradient(linear,left top, left bottom,from(#2e96dd),to(#326de6));
 background: -webkit-linear-gradient(#2e96dd,#326de6);
 background: -o-linear-gradient(#2e96dd,#326de6);
 background: linear-gradient(#2e96dd,#326de6);

            

}

.scaleio-image {

                 background-image: url(https://thecodeteam.com/wp-content/uploads/2017/08/K8s_ScaleIO_Color-white-thumb-221x300.png);

            

}

.grid-image-top.csi {

                 background: -webkit-gradient(linear,left top, left bottom,from(#464646),to(#000000));
 background: -webkit-linear-gradient(#464646,#000000);
 background: -o-linear-gradient(#464646,#000000);
 background: linear-gradient(#464646,#000000);

            

}

.csi-image {

                 background-image: url(https://thecodeteam.com/wp-content/uploads/2017/08/csi-1-300x99.png);

            

}

.grid-image-top.kubernetes {

                 background: -webkit-gradient(linear,left top, left bottom,from(#09C1D1),to(#326DE6));
 background: -webkit-linear-gradient(#09C1D1,#326DE6);
 background: -o-linear-gradient(#09C1D1,#326DE6);
 background: linear-gradient(#09C1D1,#326DE6);

            

}

.kubernetes-image {

                 background-image: url(https://thecodeteam.com/wp-content/uploads/2017/08/kubernetes-300x293.png);

            

}

.grid-image-top.grpc {

                 background: -webkit-gradient(linear,left top, left bottom,from(#0CC1C8),to(#2E838C));
 background: -webkit-linear-gradient(#0CC1C8,#2E838C);
 background: -o-linear-gradient(#0CC1C8,#2E838C);
 background: linear-gradient(#0CC1C8,#2E838C);

            

}

.grpc-image {

                 background-image: url(https://thecodeteam.com/wp-content/uploads/2017/08/grpc-300x105.png);

            

}

.grid-image-top.envoy {

                 background: -webkit-gradient(linear,left top, left bottom,from(#290B54),to(#130229));
 background: -webkit-linear-gradient(#290B54,#130229);
 background: -o-linear-gradient(#290B54,#130229);
 background: linear-gradient(#290B54,#130229);

            

}

.envoy-image {

                 background-image: url(https://thecodeteam.com/wp-content/uploads/2017/08/envoy_logo-5028052-300x91.png);

            

}

.grid-image-top.istio {

                 background: -webkit-gradient(linear,left top, left bottom,from(#4A73C0),to(#466BB0));
 background: -webkit-linear-gradient(#4A73C0,#466BB0);
 background: -o-linear-gradient(#4A73C0,#466BB0);
 background: linear-gradient(#4A73C0,#466BB0);

            

}

.istio-image {

                 background-image: url(https://thecodeteam.com/wp-content/uploads/2017/08/istio-203x300.png);

            

}

.grid-item-content {

                 padding: 0 20px 20px 20px;

            

}

.item-title {

                 font-size: 24px;
 line-height: 26px;
 font-weight: 700;
 margin-bottom: 18px;
 display: block;

            

}

.item-category {

                 text-transform: uppercase;
 display: block;
 margin-bottom: 20px;
 font-size: 14px;

            

}

.item-excerpt {

                 margin-bottom: 20px;
 display: block;
 font-size: 14px;

            

}

.more-info {

                 position: absolute;
 bottom: 0;
 margin-bottom: 25px;
 padding-left: 0;
 transition-duration: .5s;
 font-size: 12px;
 display: flex;

            

}

.more-info i {

                 padding-left: 5px;
 transition-duration: .5s;

            

}

.grid-item:hover .more-info i {

                 padding-left: 20px;
 transition-duration: .5s;

            

}

.more-info i::before {

                 font-size: 16px;

            

}

.grid-item:hover .grid-item-wrapper {

                 padding: 2% 2%;
 margin: -2% -2%;

            

}

@media(max-width: 1333px) {

                 .grid-item {
   flex-basis: 33.33%;
 }

            

}

@media(max-width: 1073px) {

                  .grid-item {
   flex-basis: 33.33%;
 }

            

}

@media(max-width: 815px) {

                 .grid-item {
   flex-basis: 50%;
 }

            

}

@media(max-width: 555px) {

                 .grid-item {
   flex-basis: 100%;
 }

            

}

organisationsprofil-table{ display: block;

                   padding-top: 20px;
   padding-bottom: 20px;
   padding-left: 20px;
   text-align: left;
   font-size: 13px;
   width: 100%;
   background: white;
   box-shadow: 2px 2px 5px #DEDEDE, -2px -2px 5px #DEDEDE;

            

} tr.organisationsprofil-row{

                   width: 50px;
   height: 10px;

            

} tr.organisationsprofil-row > th{ padding-right: 10px; } tr.organisationsprofil-row > td{ padding-right: 10px; } tr.organisationsprofil-row > td + td b{ padding-left: 20px; } tr.organisationsprofil-row > td > div.hw-protokolle-inputbox, tr.organisationsprofil-row > td > div.hw-protokolle-results{ margin-left: 25px; }

/* imagemap hover test */ area:hover {

                   opacity:0.2;
   background-color: yellow;

            

}

/* Korrektur der Darstellung von Tokens-Input-Feldern */
        
        .inputSpan > .pfTokens > ul, .inputSpan > .pfTokens {
        
            margin: 0 0 0 0!important;
        
        }
        
        
        
        
        .container {
            
              max-width: 1335px;
            
              margin: 0 auto;
            
            }
            
            
            
            .grid-row {
            
              display: flex;
            
              flex-flow: row wrap;
            
              justify-content: flex-start;
            
            }
            
            
            
            .grid-item {
            
              height: 550px;
            
              flex-basis: 20%;
            
              -ms-flex: auto;
            
              width: 259px;
            
              position: relative;
            
              padding: 10px;
            
              box-sizing: border-box;
            
            }
            
            
            
            .grid-row a {
            
              text-decoration: none;
            
            }
            
            
            
            .wrapping-link {
            
              position: absolute;
            
              top: 0;
            
              left: 0;
            
              bottom: 0;
            
              right: 0;
            
              z-index: 2;
            
              color: currentColor;
            
            }
            
            
            
            .grid-item-wrapper {
            
              -webkit-box-sizing: initial;
            
              -moz-box-sizing: initial;
            
              box-sizing: initial;
            
              background: #ececec;
            
              margin: 0;
            
              height: 100%;
            
              width: 100%;
            
              overflow: hidden;
            
              -webkit-transition: padding 0.15s cubic-bezier(0.4,0,0.2,1), margin 0.15s cubic-bezier(0.4,0,0.2,1), box-shadow 0.15s cubic-bezier(0.4,0,0.2,1);
            
              transition: padding 0.15s cubic-bezier(0.4,0,0.2,1), margin 0.15s cubic-bezier(0.4,0,0.2,1), box-shadow 0.15s cubic-bezier(0.4,0,0.2,1);
            
              position: relative;
            
            }
            
            
            
            .grid-item-container {
            
              height: 100%;
            
              width: 100%;
            
              position: relative;
            
            }
            
            
            
            .grid-image-top {
            
              height: 45%;
            
              width: 120%;
            
              background-size: cover;
            
              position: relative;
            
              background-position: 50% 50%;
            
              left: -10.5%;
            
              top: -4.5%;
            
            }
            
            
            
            .grid-image-top .centered {
            
              text-align: center;
            
              transform: translate(-50%, -50%);
            
              background-size: contain;
            
              background-repeat: no-repeat;
            
              position: absolute;
            
              top: 54.5%;
            
              left: 50%;
            
              width: 60%;
            
              height: 60%;
            
              background-position: center;
            
            }
            
            
            
            .grid-image-top.rex-ray {
            
              background: -webkit-gradient(linear,left top, left bottom,from(#007DB8),to(#00447C));
            
              background: -webkit-linear-gradient(#007DB8,#00447C);
            
              background: -o-linear-gradient(#007DB8,#00447C);
            
              background: linear-gradient(#007DB8,#00447C);
            
            }
            
            
            
            .rex-ray-image {
            
              background-image: url(https://thecodeteam.com/wp-content/uploads/2017/08/Rex-Ray-icon-209x300.png);
            
            }
            
            
            
            .grid-image-top.sputnik {
            
              background: -webkit-gradient(linear,left top, left bottom,from(#1AA9FB),to(#1785C4));
            
              background: -webkit-linear-gradient(#1AA9FB,#1785C4);
            
              background: -o-linear-gradient(#1AA9FB,#1785C4);
            
              background: linear-gradient(#1AA9FB,#1785C4);
            
            }
            
            
            
            .sputnik-image {
            
              background-image: url(https://thecodeteam.com/wp-content/uploads/2017/08/sputnik-1-300x257.png);
            
            }
            
            
            
            .grid-image-top.edgex {
            
              background: -webkit-gradient(linear,left top, left bottom,from(#952f4c),to(#3e1a51));
            
              background: -webkit-linear-gradient(#952f4c,#3e1a51);
            
              background: -o-linear-gradient(#952f4c,#3e1a51);
            
              background: linear-gradient(#952f4c,#3e1a51);
            
            }
            
            
            
            .edgex-image {
            
              background-image: url(https://thecodeteam.com/wp-content/uploads/2017/08/edge-x-300x287.png);
            
            }
            
            
            
            .grid-image-top.openswitch {
            
              background: -webkit-gradient(linear,left top, left bottom,from(#2db89a),to(#00793d));
            
              background: -webkit-linear-gradient(#2db89a,#00793d);
            
              background: -o-linear-gradient(#2db89a,#00793d);
            
              background: linear-gradient(#2db89a,#00793d);
            
            }
            
            
            
            .openswitch-image {
            
              background-image: url(https://thecodeteam.com/wp-content/uploads/2017/08/open-switch-300x207.png);
            
            }
            
            
            
            .grid-image-top.scaleio {
            
              background: -webkit-gradient(linear,left top, left bottom,from(#2e96dd),to(#326de6));
            
              background: -webkit-linear-gradient(#2e96dd,#326de6);
            
              background: -o-linear-gradient(#2e96dd,#326de6);
            
              background: linear-gradient(#2e96dd,#326de6);
            
            }
            
            
            
            .scaleio-image {
            
              background-image: url(https://thecodeteam.com/wp-content/uploads/2017/08/K8s_ScaleIO_Color-white-thumb-221x300.png);
            
            }
            
            
            
            .grid-image-top.csi {
            
              background: -webkit-gradient(linear,left top, left bottom,from(#464646),to(#000000));
            
              background: -webkit-linear-gradient(#464646,#000000);
            
              background: -o-linear-gradient(#464646,#000000);
            
              background: linear-gradient(#464646,#000000);
            
            }
            
            
            
            .csi-image {
            
              background-image: url(https://thecodeteam.com/wp-content/uploads/2017/08/csi-1-300x99.png);
            
            }
            
            
            
            .grid-image-top.kubernetes {
            
              background: -webkit-gradient(linear,left top, left bottom,from(#09C1D1),to(#326DE6));
            
              background: -webkit-linear-gradient(#09C1D1,#326DE6);
            
              background: -o-linear-gradient(#09C1D1,#326DE6);
            
              background: linear-gradient(#09C1D1,#326DE6);
            
            }
            
            
            
            .kubernetes-image {
            
              background-image: url(https://thecodeteam.com/wp-content/uploads/2017/08/kubernetes-300x293.png);
            
            }
            
            
            
            .grid-image-top.grpc {
            
              background: -webkit-gradient(linear,left top, left bottom,from(#0CC1C8),to(#2E838C));
            
              background: -webkit-linear-gradient(#0CC1C8,#2E838C);
            
              background: -o-linear-gradient(#0CC1C8,#2E838C);
            
              background: linear-gradient(#0CC1C8,#2E838C);
            
            }
            
            
            
            .grpc-image {
            
              background-image: url(https://thecodeteam.com/wp-content/uploads/2017/08/grpc-300x105.png);
            
            }
            
            
            
            .grid-image-top.envoy {
            
              background: -webkit-gradient(linear,left top, left bottom,from(#290B54),to(#130229));
            
              background: -webkit-linear-gradient(#290B54,#130229);
            
              background: -o-linear-gradient(#290B54,#130229);
            
              background: linear-gradient(#290B54,#130229);
            
            }
            
            
            
            .envoy-image {
            
              background-image: url(https://thecodeteam.com/wp-content/uploads/2017/08/envoy_logo-5028052-300x91.png);
            
            }
            
            
            
            .grid-image-top.istio {
            
              background: -webkit-gradient(linear,left top, left bottom,from(#4A73C0),to(#466BB0));
            
              background: -webkit-linear-gradient(#4A73C0,#466BB0);
            
              background: -o-linear-gradient(#4A73C0,#466BB0);
            
              background: linear-gradient(#4A73C0,#466BB0);
            
            }
            
            
            
            .istio-image {
            
              background-image: url(https://thecodeteam.com/wp-content/uploads/2017/08/istio-203x300.png);
            
            }
            
            
            
            .grid-item-content {
            
              padding: 0 20px 20px 20px;
            
            }
            
            
            
            .item-title {
            
              font-size: 24px;
            
              line-height: 26px;
            
              font-weight: 700;
            
              margin-bottom: 18px;
            
              display: block;
            
            }
            
            
            
            .item-category {
            
              text-transform: uppercase;
            
              display: block;
            
              margin-bottom: 20px;
            
              font-size: 14px;
            
            }
            
            
            
            .item-excerpt {
            
              margin-bottom: 20px;
            
              display: block;
            
              font-size: 14px;
            
            }
            
            
            
            .more-info {
            
              position: absolute;
            
              bottom: 0;
            
              margin-bottom: 25px;
            
              padding-left: 0;
            
              transition-duration: .5s;
            
              font-size: 12px;
            
              display: flex;
            
            }
            
            
            
            .more-info i {
            
              padding-left: 5px;
            
              transition-duration: .5s;
            
            }
            
            
            
            .grid-item:hover .more-info i {
            
              padding-left: 20px;
            
              transition-duration: .5s;
            
            }
            
            
            
            .more-info i::before {
            
              font-size: 16px;
            
            }
            
            
            
            .grid-item:hover .grid-item-wrapper {
            
              padding: 2% 2%;
            
              margin: -2% -2%;
            
            }
            
            
            
            @media(max-width: 1333px) {
            
              .grid-item {
            
                flex-basis: 33.33%;
            
              }
            
            }
            
            
            
            @media(max-width: 1073px) {
            
               .grid-item {
            
                flex-basis: 33.33%;
            
              }
            
            }
            
            
            
            @media(max-width: 815px) {
            
              .grid-item {
            
                flex-basis: 50%;
            
              }
            
            }
            
            
            
            @media(max-width: 555px) {
            
              .grid-item {
            
                flex-basis: 100%;
            
              }
            
            }table.organisationsprofil-table{
            
            	display: block;
            
                padding-top: 20px;
            
                padding-bottom: 20px;
            
                padding-left: 20px;
            
                text-align: left;
            
                font-size: 13px;
            
                width: 100%;
            
                background: white;
            
                box-shadow: 2px 2px 5px #DEDEDE, -2px -2px 5px #DEDEDE;
            
            }
            
            tr.organisationsprofil-row{
            
                width: 50px;
            
                height: 10px;
            
            }
            
            tr.organisationsprofil-row > th{
            
            	padding-right: 10px;
            
            }
            
            tr.organisationsprofil-row > td{
            
            	padding-right: 10px;
            
            }
            
            tr.organisationsprofil-row > td + td b{
            
            	padding-left: 20px;
            
            }
            
            tr.organisationsprofil-row > td > div.hw-protokolle-inputbox,
            
            tr.organisationsprofil-row > td > div.hw-protokolle-results{
            
            	margin-left: 25px;
            
            }
            
            
            
            /* imagemap hover test */
            
            area:hover {
            
                opacity:0.2;
            
                background-color: yellow;
            
            }
(36 tussenliggende versies door 3 gebruikers niet weergegeven)
Regel 4: Regel 4:
 
}
 
}
  
.container {
+
table.organisationsprofil-table{
  max-width: 1335px;
+
display: block;
  margin: 0 auto;
+
    padding-top: 20px;
 +
    padding-bottom: 20px;
 +
    padding-left: 20px;
 +
    text-align: left;
 +
    font-size: 13px;
 +
    width: 100%;
 +
    background: white;
 +
    box-shadow: 2px 2px 5px #DEDEDE, -2px -2px 5px #DEDEDE;
 
}
 
}
 
+
tr.organisationsprofil-row{
.grid-row {
+
    width: 50px;
  display: flex;
+
    height: 10px;
  flex-flow: row wrap;
 
  justify-content: flex-start;
 
}
 
 
 
.grid-item {
 
  height: 550px;
 
  flex-basis: 20%;
 
  -ms-flex: auto;
 
  width: 259px;
 
  position: relative;
 
  padding: 10px;
 
  box-sizing: border-box;
 
}
 
 
 
.grid-row a {
 
  text-decoration: none;
 
}
 
 
 
.wrapping-link {
 
  position: absolute;
 
  top: 0;
 
  left: 0;
 
  bottom: 0;
 
  right: 0;
 
  z-index: 2;
 
  color: currentColor;
 
}
 
 
 
.grid-item-wrapper {
 
  -webkit-box-sizing: initial;
 
  -moz-box-sizing: initial;
 
  box-sizing: initial;
 
  background: #ececec;
 
  margin: 0;
 
  height: 100%;
 
  width: 100%;
 
  overflow: hidden;
 
  -webkit-transition: padding 0.15s cubic-bezier(0.4,0,0.2,1), margin 0.15s cubic-bezier(0.4,0,0.2,1), box-shadow 0.15s cubic-bezier(0.4,0,0.2,1);
 
  transition: padding 0.15s cubic-bezier(0.4,0,0.2,1), margin 0.15s cubic-bezier(0.4,0,0.2,1), box-shadow 0.15s cubic-bezier(0.4,0,0.2,1);
 
  position: relative;
 
}
 
 
 
.grid-item-container {
 
  height: 100%;
 
  width: 100%;
 
  position: relative;
 
}
 
 
 
.grid-image-top {
 
  height: 45%;
 
  width: 120%;
 
  background-size: cover;
 
  position: relative;
 
  background-position: 50% 50%;
 
  left: -10.5%;
 
  top: -4.5%;
 
}
 
 
 
.grid-image-top .centered {
 
  text-align: center;
 
  transform: translate(-50%, -50%);
 
  background-size: contain;
 
  background-repeat: no-repeat;
 
  position: absolute;
 
  top: 54.5%;
 
  left: 50%;
 
  width: 60%;
 
  height: 60%;
 
  background-position: center;
 
}
 
 
 
.grid-image-top.rex-ray {
 
  background: -webkit-gradient(linear,left top, left bottom,from(#007DB8),to(#00447C));
 
  background: -webkit-linear-gradient(#007DB8,#00447C);
 
  background: -o-linear-gradient(#007DB8,#00447C);
 
  background: linear-gradient(#007DB8,#00447C);
 
}
 
 
 
.rex-ray-image {
 
  background-image: url(https://thecodeteam.com/wp-content/uploads/2017/08/Rex-Ray-icon-209x300.png);
 
}
 
 
 
.grid-image-top.sputnik {
 
  background: -webkit-gradient(linear,left top, left bottom,from(#1AA9FB),to(#1785C4));
 
  background: -webkit-linear-gradient(#1AA9FB,#1785C4);
 
  background: -o-linear-gradient(#1AA9FB,#1785C4);
 
  background: linear-gradient(#1AA9FB,#1785C4);
 
}
 
 
 
.sputnik-image {
 
  background-image: url(https://thecodeteam.com/wp-content/uploads/2017/08/sputnik-1-300x257.png);
 
}
 
 
 
.grid-image-top.edgex {
 
  background: -webkit-gradient(linear,left top, left bottom,from(#952f4c),to(#3e1a51));
 
  background: -webkit-linear-gradient(#952f4c,#3e1a51);
 
  background: -o-linear-gradient(#952f4c,#3e1a51);
 
  background: linear-gradient(#952f4c,#3e1a51);
 
 
}
 
}
 
+
tr.organisationsprofil-row > th{
.edgex-image {
+
padding-right: 10px;
  background-image: url(https://thecodeteam.com/wp-content/uploads/2017/08/edge-x-300x287.png);
 
 
}
 
}
 
+
tr.organisationsprofil-row > td{
.grid-image-top.openswitch {
+
padding-right: 10px;
  background: -webkit-gradient(linear,left top, left bottom,from(#2db89a),to(#00793d));
 
  background: -webkit-linear-gradient(#2db89a,#00793d);
 
  background: -o-linear-gradient(#2db89a,#00793d);
 
  background: linear-gradient(#2db89a,#00793d);
 
 
}
 
}
 
+
tr.organisationsprofil-row > td + td b{
.openswitch-image {
+
padding-left: 20px;
  background-image: url(https://thecodeteam.com/wp-content/uploads/2017/08/open-switch-300x207.png);
 
 
}
 
}
 
+
tr.organisationsprofil-row > td > div.hw-protokolle-inputbox,
.grid-image-top.scaleio {
+
tr.organisationsprofil-row > td > div.hw-protokolle-results{
  background: -webkit-gradient(linear,left top, left bottom,from(#2e96dd),to(#326de6));
+
margin-left: 25px;
  background: -webkit-linear-gradient(#2e96dd,#326de6);
 
  background: -o-linear-gradient(#2e96dd,#326de6);
 
  background: linear-gradient(#2e96dd,#326de6);
 
}
 
 
 
.scaleio-image {
 
  background-image: url(https://thecodeteam.com/wp-content/uploads/2017/08/K8s_ScaleIO_Color-white-thumb-221x300.png);
 
}
 
 
 
.grid-image-top.csi {
 
  background: -webkit-gradient(linear,left top, left bottom,from(#464646),to(#000000));
 
  background: -webkit-linear-gradient(#464646,#000000);
 
  background: -o-linear-gradient(#464646,#000000);
 
  background: linear-gradient(#464646,#000000);
 
}
 
 
 
.csi-image {
 
  background-image: url(https://thecodeteam.com/wp-content/uploads/2017/08/csi-1-300x99.png);
 
}
 
 
 
.grid-image-top.kubernetes {
 
  background: -webkit-gradient(linear,left top, left bottom,from(#09C1D1),to(#326DE6));
 
  background: -webkit-linear-gradient(#09C1D1,#326DE6);
 
  background: -o-linear-gradient(#09C1D1,#326DE6);
 
  background: linear-gradient(#09C1D1,#326DE6);
 
}
 
 
 
.kubernetes-image {
 
  background-image: url(https://thecodeteam.com/wp-content/uploads/2017/08/kubernetes-300x293.png);
 
}
 
 
 
.grid-image-top.grpc {
 
  background: -webkit-gradient(linear,left top, left bottom,from(#0CC1C8),to(#2E838C));
 
  background: -webkit-linear-gradient(#0CC1C8,#2E838C);
 
  background: -o-linear-gradient(#0CC1C8,#2E838C);
 
  background: linear-gradient(#0CC1C8,#2E838C);
 
}
 
 
 
.grpc-image {
 
  background-image: url(https://thecodeteam.com/wp-content/uploads/2017/08/grpc-300x105.png);
 
}
 
 
 
.grid-image-top.envoy {
 
  background: -webkit-gradient(linear,left top, left bottom,from(#290B54),to(#130229));
 
  background: -webkit-linear-gradient(#290B54,#130229);
 
  background: -o-linear-gradient(#290B54,#130229);
 
  background: linear-gradient(#290B54,#130229);
 
}
 
 
 
.envoy-image {
 
  background-image: url(https://thecodeteam.com/wp-content/uploads/2017/08/envoy_logo-5028052-300x91.png);
 
}
 
 
 
.grid-image-top.istio {
 
  background: -webkit-gradient(linear,left top, left bottom,from(#4A73C0),to(#466BB0));
 
  background: -webkit-linear-gradient(#4A73C0,#466BB0);
 
  background: -o-linear-gradient(#4A73C0,#466BB0);
 
  background: linear-gradient(#4A73C0,#466BB0);
 
}
 
 
 
.istio-image {
 
  background-image: url(https://thecodeteam.com/wp-content/uploads/2017/08/istio-203x300.png);
 
}
 
 
 
.grid-item-content {
 
  padding: 0 20px 20px 20px;
 
}
 
 
 
.item-title {
 
  font-size: 24px;
 
  line-height: 26px;
 
  font-weight: 700;
 
  margin-bottom: 18px;
 
  display: block;
 
}
 
 
 
.item-category {
 
  text-transform: uppercase;
 
  display: block;
 
  margin-bottom: 20px;
 
  font-size: 14px;
 
}
 
 
 
.item-excerpt {
 
  margin-bottom: 20px;
 
  display: block;
 
  font-size: 14px;
 
}
 
 
 
.more-info {
 
  position: absolute;
 
  bottom: 0;
 
  margin-bottom: 25px;
 
  padding-left: 0;
 
  transition-duration: .5s;
 
  font-size: 12px;
 
  display: flex;
 
}
 
 
 
.more-info i {
 
  padding-left: 5px;
 
  transition-duration: .5s;
 
}
 
 
 
.grid-item:hover .more-info i {
 
  padding-left: 20px;
 
  transition-duration: .5s;
 
}
 
 
 
.more-info i::before {
 
  font-size: 16px;
 
}
 
 
 
.grid-item:hover .grid-item-wrapper {
 
  padding: 2% 2%;
 
  margin: -2% -2%;
 
}
 
 
 
@media(max-width: 1333px) {
 
  .grid-item {
 
    flex-basis: 33.33%;
 
  }
 
}
 
 
 
@media(max-width: 1073px) {
 
  .grid-item {
 
    flex-basis: 33.33%;
 
  }
 
}
 
 
 
@media(max-width: 815px) {
 
  .grid-item {
 
    flex-basis: 50%;
 
  }
 
 
}
 
}
  
@media(max-width: 555px) {
+
/* imagemap hover test */
  .grid-item {
+
area:hover {
     flex-basis: 100%;
+
    opacity:0.2;
  }
+
     background-color: yellow;
 
}
 
}