most_visited.css revision c407dc5cd9bdc5668497f21b26b09d988ab439de
1c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch/* Most Visited */ 2c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 3c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch#most-visited { 4c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch position: relative; 5c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch padding: 0; 6c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch height: 366px; 7c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch margin-top: -10px; 8c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch -webkit-user-select: none; 9c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch} 10c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 11c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch.thumbnail-container { 12c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch position: absolute; 13c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch color: hsl(213, 90%, 24%); 14c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch text-decoration: none; 15c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch -webkit-transition: left .15s, right .15s, top .15s; 16c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch text-decoration: none; 17c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch} 18c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 19c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch.thumbnail-container:focus { 20c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch outline: none; 21c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch} 22c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 23c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch.thumbnail, 24c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch.thumbnail-container > .title { 25c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch width: 207px; /* natural size is 196 */ 26c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch height: 129px; /* 136 */ 27c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch -webkit-transition: width .15s, height .15s; 28c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch} 29c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 30c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch.thumbnail-container > .title { 31c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch line-height: 16px; 32c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch height: 16px; 33c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch margin: 0; 34c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch margin-top: 4px; 35c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch font-size: 100%; 36c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch font-weight: normal; 37c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch padding: 0 3px; 38c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch opacity: 1; 39c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch -webkit-transition: opacity .15s, width .15s; 40c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch color: black; 41c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch} 42c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 43c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch.thumbnail-wrapper { 44c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch display: block; 45c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch background-size: 212px 132px; 46c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch background: no-repeat 4px 4px; 47c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch background-color: white; 48c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch border-radius: 5px; 49c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch -webkit-transition: background-size .15s; 50c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch position: relative; 51c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch} 52c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 53c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch.filler * { 54c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch visibility: hidden; 55c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch} 56c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 57c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch.filler { 58c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch pointer-events: none; 59c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch} 60c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 61c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch.filler .thumbnail-wrapper { 62c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch visibility: visible; 63c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch border: 3px solid hsl(213, 60%, 92%); 64c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch} 65c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 66c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch.filler .thumbnail { 67c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch visibility: inherit; 68c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch border: 1px solid white; 69c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch padding: 0; 70c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch background-color: hsl(213, 60%, 92%); 71c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch} 72c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 73c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch.edit-bar { 74c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch display: -webkit-box; 75c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch -webkit-box-orient: horizontal; 76c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch -webkit-box-align: stretch; 77c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch padding: 3px; 78c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch padding-bottom: 0; 79c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch height: 17px; /* 23 - 2 * 3 */ 80c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch cursor: move; 81c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch font-size: 100%; 82c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch line-height: 17px; 83c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch background: hsl(213, 54%, 95%); 84c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch border-top-left-radius: 4px; 85c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch border-top-right-radius: 4px; 86c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch position: relative; 87c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch margin-top: 21px; 88c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch margin-bottom: -21px; 89c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch -webkit-transition: margin .15s, background .15s; 90c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch} 91c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 92c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch.edit-bar > * { 93c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch display: block; 94c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch position: relative; 95c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch} 96c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 97c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch.thumbnail-container:focus .edit-bar, 98c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch.thumbnail-container:hover .edit-bar { 99c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch margin-top: 0; 100c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch margin-bottom: 0; 101c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch -webkit-transition-delay: .5s, 0s; 102c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 103c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch /* We need background-color as well to get the fade out animation correct */ 104c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch background-color: hsl(213, 66%, 57%); 105c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch background-image: -webkit-gradient(linear, left top, left bottom, 106c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch from(hsl(213, 87%, 67%)), 107c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch to(hsl(213, 66%, 57%))); 108c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch} 109c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 110c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch.edit-bar > .spacer { 111c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch -webkit-box-flex: 1; 112c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch} 113c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 114c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch.edit-bar > .pin, 115c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch.edit-bar > .remove { 116c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch width: 16px; 117c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch height: 16px; 118c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch cursor: pointer; 119c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch background-image: no-repeat 50% 50%; 120c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch} 121c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 122c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch.edit-bar > .pin { 123c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch background-image: url('ntp_pin_off.png'); 124c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch} 125c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 126c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch.edit-bar > .pin:hover { 127c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch background-image: url('ntp_pin_off_h.png'); 128c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch} 129c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 130c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch.edit-bar > .pin:active { 131c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch background-image: url('ntp_pin_off_p.png'); 132c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch} 133c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 134c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch.pinned .edit-bar > .pin { 135c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch background-image: url('ntp_pin_on.png'); 136c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch} 137c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 138c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch.pinned .edit-bar > .pin:hover { 139c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch background-image: url(ntp_pin_on_h.png'); 140c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch} 141c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 142c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch.pinned .edit-bar > .pin:active { 143c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch background-image: url(ntp_pin_on_p.png'); 144c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch} 145c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 146c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch.edit-bar > .remove { 147c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch background-image: url('ntp_close.png'); 148c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch} 149c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 150c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch.edit-bar > .remove:hover { 151c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch background-image: url('ntp_close_h.png'); 152c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch} 153c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 154c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch.edit-bar > .remove:active { 155c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch background-image: url('ntp_close_p.png'); 156c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch} 157c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 158c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch.thumbnail-container > .title > div { 159c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch white-space: nowrap; 160c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch overflow: hidden; 161c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch text-overflow: ellipsis; 162c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch background: no-repeat 0 50%; 163c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch background-size: 16px; 164c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch padding-left: 20px; /* we cannot use padding start here because even if we set 165c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch the direction we always want the icon on the same side 166c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch */ 167c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch padding-right: 0; 168c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch} 169c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 170c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdochhtml[dir=rtl] .thumbnail-container > .title > div { 171c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch background-position-x: 100%; 172c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch padding-left: 0; 173c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch padding-right: 20px; 174c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch text-align: right; 175c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch} 176c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 177c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch.thumbnail { 178c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch border: 3px solid hsl(213, 63%, 93%); 179c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch padding: 1px; 180c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch border-radius: 5px; 181c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch display: block; 182c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch -webkit-box-shadow: 0px 2px 2px hsla(0, 0%, 0%, 0); 183c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch -webkit-transition: width .15s, height .15s, border-color .15s, 184c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch border-top-left-radius .15s, border-top-right-radius .15s, 185c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch -webkit-box-shadow .15s; 186c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch} 187c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 188c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch.edit-mode-border { 189c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch border-radius: 4px; 190c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 191c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch /* when dragged over we move this */ 192c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch position: relative; 193c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch -webkit-transition: top .15s, left .15s; 194c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch} 195c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 196c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch.thumbnail-container:focus .thumbnail, 197c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch.thumbnail-container:hover .thumbnail { 198c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch border-color: hsl(213, 66%, 57%); 199c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch -webkit-box-shadow: 0px 2px 2px hsla(0, 0%, 0%, 0); 200c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch -webkit-border-top-left-radius: 0; 201c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch -webkit-border-top-right-radius: 0; 202c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 203c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch background-image: -webkit-gradient(linear, left top, left bottom, 204c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch from(hsla(0, 0%, 0%, 0)), 205c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch color-stop(0.85, hsla(0, 0%, 47%, 0)), 206c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch to(hsla(0, 0%, 47%, 0.2)) 207c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch ); 208c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 209c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch /* delay border radius transition as much as the edit bar slide delay */ 210c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch -webkit-transition-delay: 0, 0, 0, .5s, .5s, 0; 211c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch} 212c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 213c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch.thumbnail-container:focus > .edit-mode-border, 214c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch.thumbnail-container:hover > .edit-mode-border { 215c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch background-color: hsl(213, 66%, 57%); 216c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch -webkit-box-shadow: 0px 2px 2px hsla(0, 0%, 0%, .5); 217c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch} 218c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 219c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch.dragging, 220c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch.dragging * { 221c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch -webkit-transition: none !important; 222c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch} 223c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 224c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch.dragging > .title { 225c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch opacity: 0; 226c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch} 227c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 228c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch@-webkit-keyframes 'fade-in' { 229c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 0% { 230c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch opacity: 0; 231c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch } 232c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 233c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 100% { 234c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch opacity: 1; 235c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch } 236c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch} 237c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 238c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch.fade-in { 239c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch -webkit-animation: 'fade-in' .15s; 240c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch} 241c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 242c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch@media (max-width: 940px) { 243c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch #most-visited { 244c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch height: 294px; 245c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch } 246c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 247c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch .thumbnail, 248c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch .thumbnail-container > .title { 249c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch width: 150px; 250c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch height: 93px; 251c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch } 252c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 253c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch .thumbnail-container > .title { 254c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch height: auto; 255c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch } 256c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 257c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch .thumbnail-wrapper { 258c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch background-size: 150px 93px; 259c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch } 260c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch} 261