/* CSS Document */ .a2zaal_widget ul { display: grid; grid-template-columns: repeat( auto-fill, minmax( 2.625rem, 1fr ) ); justify-items: center; list-style: none; margin: 0; } .a2zaal_widget ul.counts { grid-template-columns: repeat( auto-fill, minmax( 3rem, 1fr ) ); } .a2zaal_widget li { position: relative; } .a2zaal_widget a { border-bottom: 1px solid transparent; display: block; padding: 0.625rem 0.5rem; text-align: center; } .a2zaal_widget a:hover { border-bottom: 1px solid blue; color: blue; text-decoration: underline; } .a2zaal_widget a.count > span { font-size: 75%; padding-left: 0.4em; vertical-align: super; white-space: nowrap; } /* premium styles for sliding counts .a2zaal_widget ul.counts { grid-template-columns: repeat( auto-fit, minmax( 2.5em, 1fr ) ); } .a2zaal_widget li.count:after { content: ''; z-index: 2; position: absolute; top: 10px; right: -2px; width: 5px; height: 6px; opacity: .95; background: #eb6b22; border-radius: 3px 0 0 3px; -webkit-box-shadow: inset 1px 0 #99400e; box-shadow: inset 1px 0 #99400e; } .a2zaal_widget li a, .a2zaal_widget li a span { display: block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; white-space: nowrap; } .a2zaal_widget li a { padding: 0.25em 0.5em; font-size: 0.75em; font-weight: 700; color: #555; text-decoration: none; text-shadow: 0 1px white; background: #fafafa; border-width: 1px 1px 1px 1px; border-style: solid; border-color: #dadada #d2d2d2 #c5c5c5; border-radius: 3px 3px 3px 3px; background-image: -webkit-linear-gradient(top, #fcfcfc, #f0f0f0); background-image: -moz-linear-gradient(top, #fcfcfc, #f0f0f0); background-image: -o-linear-gradient(top, #fcfcfc, #f0f0f0); background-image: linear-gradient(to bottom, #fcfcfc, #f0f0f0); -webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 1px 2px rgba(0, 0, 0, 0.05); } .a2zaal_widget a:hover span { padding: 0.2em 7px 0.2em 6px; max-width: 40px; -webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15), 1px 1px 2px rgba(0, 0, 0, 0.2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15), 1px 1px 2px rgba(0, 0, 0, 0.2); } .a2zaal_widget span { position: absolute; top: 1px; left: 100%; z-index: 2; overflow: hidden; max-width: 0; line-height: 1.5; padding: 0.2em 0 0.2em 1px; color: white; text-shadow: 0 -1px rgba(0, 0, 0, 0.3); background: #eb6b22; border: 1px solid; border-color: #d15813 #c85412 #bf5011; border-radius: 0 2px 2px 0; opacity: .95; background-image: -webkit-linear-gradient(top, #ed7b39, #df5e14); background-image: -moz-linear-gradient(top, #ed7b39, #df5e14); background-image: -o-linear-gradient(top, #ed7b39, #df5e14); background-image: linear-gradient(to bottom, #ed7b39, #df5e14); -webkit-transition: 0.3s ease-out; -moz-transition: 0.3s ease-out; -o-transition: 0.3s ease-out; transition: 0.3s ease-out; -webkit-transition-property: padding, max-width; -moz-transition-property: padding, max-width; -o-transition-property: padding, max-width; transition-property: padding, max-width; } */