/* @group Gridview */

ul.grid, ul.smallgrid {
    display: -webkit-box; display: -moz-box; display: box;
    margin: 0 auto; padding: 0 4px 0 4px;
    -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
    -webkit-box-orient: horizontal; -moz-box-orient: horizontal; box-orient: horizontal;
    -webkit-box-align: stretch;
    -webkit-box-pack: center;
}

ul.smallgrid {
    padding: 0px 3px;
}

ul.grid li, ul.smallgrid li {
    display: block; position: relative;
    -webkit-box-flex: 0; -moz-box-flex: 0; box-flex: 0;
    min-height: none;
    margin-bottom: 40px;
    border: 0px; border-top: 0px none;
    font-weight: bold;
    color: #FFFFFF;
    text-align: center;
    text-shadow: 1pt 1pt 1.5pt #000, 0pt 0pt 1pt #808080;
}

ul.grid li > a[title]::after {
    display: block; position: absolute;
    top: auto; bottom: -20px; left: 0; right: 0;
    margin: 0px -15px;
    content: attr(title);
    padding: 0px 5px;
    color: inherit;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

ul.grid li > a[title]::after {
    bottom: -30px;
    margin: 0px -25px;
    padding: 0px 10px;
}

ul.grid li > a, ul.smallgrid li > a {
    width: auto;
}

ul.grid li a.active .icon, ul.smallgrid li a.active .icon,
ul.grid li a:active .icon, ul.smallgrid li a:active .icon {
    opacity: 0.7;
}

ul.grid li.active a, ul.smallgrid.active li.active a {
    text-shadow: 1pt 1pt 1pt rgba(0,0,0,0.7), 0pt 0pt 1pt #808080 !important; /* should get rid of !important usage */
}

ul.grid.editmode:not(.noshake) li {
  -webkit-animation-name: shake; -moz-animation-name: shake;
  -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite;
  -webkit-animation-direction: normal; -moz-animation-direction: normal;
}

ul.grid.editmode li:nth-child(even) {
  -webkit-animation-duration: 0.3s; -moz-animation-duration: 0.3s;
}

ul.grid.editmode li:nth-child(odd) {
  -webkit-animation-duration: 0.4s; -moz-animation-duration: 0.4s;
}

ul.grid.editmode li .deleteicon {
    display: block;
    position: absolute;
    min-width: 14px; height: 14px; line-height: 14px;
    font-size: 14px;
    -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
    text-align: center;
    top: 4px; left: 0px;
    padding: 2px 2px 2px 2px;
    background-color: black;
    border: 2.5px solid white;
    color: white;
    font-weight: bold;
    -webkit-box-shadow: rgba(0,0,0,0.5) 1.5px 1.5px 4.5px; -moz-box-shadow: rgba(0,0,0,0.5) 1.5px 1.5px 4.5px; box-shadow: rgba(0,0,0,0.5) 1.5px 1.5px 4.5px;
    z-index: 2;
}

ul.grid.editmode li .editoricon {
    display: block;
    position: absolute;
    min-width: 14px; height: 14px; line-height: 14px;
    font-size: 14px;
    -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
    text-align: center;
    bottom: 4px; right: 0px;
    padding: 2px 2px 2px 2px;
    background-color: darkblue;
    border: 2.5px solid white;
    color: white;
    font-weight: bold;
    -webkit-box-shadow: rgba(0,0,0,0.5) 1.5px 1.5px 4.5px; -moz-box-shadow: rgba(0,0,0,0.5) 1.5px 1.5px 4.5px; box-shadow: rgba(0,0,0,0.5) 1.5px 1.5px 4.5px;
    z-index: 2;
}

ul.grid:not(.editmode) li .deleteicon,
ul.grid.editmode li.nodelete .deleteicon {
    display: none;
}

ul.grid:not(.editmode) li .editoricon,
ul.grid.editmode li.noeditor .editoricon {
    display: none;
}

ul.grid.editmode li::after {
    content: "";
    display: block; position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    z-index: 1;
}

@-webkit-keyframes shake {
    0%   {
        -webkit-transform: rotate(0deg);
        -webkit-animation-timing-function: linear;
    }
    25%   {
        -webkit-transform: rotate(-3deg);
        -webkit-animation-timing-function: linear;
    }
    50%   {
        -webkit-transform: rotate(0deg);
        -webkit-animation-timing-function: linear;
    }
    75%   {
        -webkit-transform: rotate(3deg);
        -webkit-animation-timing-function: linear;
    }
    100% {
        -webkit-transform: rotate(0deg);
        -webkit-animation-timing-function: linear;
    }
}

@-moz-keyframes shake {
    0%   {
        -moz-transform: rotate(0deg);
        -moz-animation-timing-function: linear;
    }
    25%   {
        -moz-transform: rotate(-3deg);
        -moz-animation-timing-function: linear;
    }
    50%   {
        -moz-transform: rotate(0deg);
        -moz-animation-timing-function: linear;
    }
    75%   {
        -moz-transform: rotate(3deg);
        -moz-animation-timing-function: linear;
    }
    100% {
        -moz-transform: rotate(0deg);
        -moz-animation-timing-function: linear;
    }
}

ul.grid li {
    font-size: 8pt;
}

ul.grid li.px114 {
    font-size: 14px;
}

ul.smallgrid li {
    -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
    font-size: 6.5pt;
    margin: 9px 1px 0px;
    padding: 0px 0px;
    width: 44px;
}

ul.grid li a {
    color: inherit;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    vertical-align: bottom;

}

.article h4 {
    position: relative;
    color: grey;
    margin-top: 40px;
    margin-bottom: 20px;
}

ul.grid li small.light,
ul.smallgrid li small.light {
    position: absolute;
    font-size: 8.5pt;
    min-width: 1.2em;
    height: 8.5pt;
    line-height: 8.5pt;
    -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
    text-align: center;
    top: 5%; right: 0; bottom: auto; left: auto;
    padding: 1px 2px 2px 2px;
    background-color: #303080;
    border: 2pt solid white;
    color: white;
    font-weight: bold;
    background-image: -webkit-gradient(radial, 50% -130%, 24, 50% 0, 54, from(rgba(255,255,255,0.3)), to(rgba(255,255,255,0.1)),
      color-stop(4%, rgba(255,255,255,0.3)),
      color-stop(8%, rgba(31,31,31,0.1)),
      color-stop(38%, rgba(239,239,239,0.1)));
}

ul.grid li small,
ul.smallgrid li small {
    position: absolute;
    font-size: 10pt;
    line-height: 1.2em;
    min-width: 1.2em;
    height: 1.2em;
    -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
    text-align: center;
    bottom: 27%; right: 0%; top: auto; left: auto;
    width: auto;
    padding: 1px;
    background-color: #C02020;
    border: 2pt solid white;
    color: white;
    font-weight: bold;
    text-shadow: none;
    -webkit-box-shadow: rgba(0,0,0,0.5) 1pt 1pt 3pt;
    background-image: -webkit-gradient(radial, 50% -130%, 28, 50% 0, 56, from(rgba(255,255,255,0.3)), to(rgba(255,255,255,0.1)),
      color-stop(4%, rgba(255,255,255,0.3)),
      color-stop(8%, rgba(31,31,31,0.1)),
      color-stop(38%, rgba(239,239,239,0.1)));
}

ul.grid li a[title] ~ small,
ul.smallgrid li a[title] ~ small {
    bottom: 10%;
}

ul.grid li .icon::after,
ul.smallgrid li .icon::after,
ul.plastic li .icon::after,
ul.detail li .icon::after {
    display: block;
    position: absolute;
    content: "";
    top: 0; bottom: 0; left: 0; right: 0;
    -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;
    background-image: -webkit-gradient(radial, 50% -58%, 40, 50% -35%, 135, from(rgba(255,255,255,0.35)), to(rgba(255,255,255,0)),
      color-stop(3%, rgba(255,255,255,0.3)),
      color-stop(22%, rgba(239,239,239,0)),
      color-stop(22%, rgba(31,31,31,0.2)),
      color-stop(35%, rgba(127,127,127,0.1)),
      color-stop(38%, rgba(239,239,239,0.1)));
    background-image: -moz-radial-gradient(50% -80%, circle contain, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.5) 200%, rgba(255, 255, 255, 0.2) 265%, rgba(255, 255, 255, 0.05));
}

ul.grid li.px114 .icon::after {
    background-image: -webkit-gradient(radial, 50% -58%, 80, 50% -35%, 270,
      from(rgba(255,255,255,0.35)), to(rgba(255,255,255,0)),
      color-stop(3%, rgba(255,255,255,0.3)),
      color-stop(22%, rgba(239,239,239,0)),
      color-stop(22%, rgba(31,31,31,0.2)),
      color-stop(35%, rgba(127,127,127,0.1)),
      color-stop(38%, rgba(239,239,239,0.1)));
}


ul.plastic li .icon::after, ul.detail li .icon::after {
    background-image: -webkit-gradient(radial, 50% -58%, 30, 50% -35%, 135, from(rgba(255,255,255,0.35)), to(rgba(255,255,255,0)),
      color-stop(3%, rgba(255,255,255,0.3)),
      color-stop(22%, rgba(239,239,239,0)),
      color-stop(22%, rgba(31,31,31,0.2)),
      color-stop(35%, rgba(127,127,127,0.1)),
      color-stop(38%, rgba(239,239,239,0.1)));
}

ul.smallgrid li .icon38 .mask {
    width: 38px;
    height: 38px;
}

ul.grid li .icon,
ul.smallgrid li .icon,
ul.plastic li .icon,
ul.detail li .icon {
    -webkit-background-size: contain; -moz-background-size: contain; background-size: contain;
    background-position: 50% 50%;
    -webkit-background-origin: content-box; -moz-background-origin: content-box; background-origin: content-box;
    background-color: white;
    -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;
    -webkit-box-shadow: rgba(0,0,0,0.5) 2pt 2pt 4pt; -moz-box-shadow: rgba(0,0,0,0.5) 2pt 2pt 4pt; box-shadow: rgba(0,0,0,0.5) 2pt 2pt 4pt;
}

ul.grid li .icon,
ul.smallgrid li .icon {
    display: block;
    width: 57px;
    height: 57px;
}

ul.grid li.px114 .icon {
    width: 114px;
    height: 114px;
}

ul.grid li.active .icon,
ul.smallgrid li.active .icon {
    -webkit-box-shadow: rgba(0,0,0,0.5) 1pt 1pt 4pt; -moz-box-shadow: rgba(0,0,0,0.5) 1pt 1pt 4pt; box-shadow: rgba(0,0,0,0.5) 1pt 1pt 4pt;
}

ul.grid li .icon:active,
ul.smallgrid li .icon:active {
    background-color: #606070;
}

/* @end */