/* Map Cards */ .map { display:inline-block; width:220px; height:340px; font-size: 12px; text-align: left; overflow: visible; background: #e8e8e8; border-radius:2px; margin:16px; box-shadow: 0px 3px 3px rgba(0,0,0,0.23), 0 3px 3px rgba(0,0,0,0.16); &.newMap { float: left; position: relative; &:hover { background: #dcdcdc; .newMapImage { background-position: 0 -72px; } } a { height: 340px; display: block; position: relative; } .newMapImage { display: block; width: 72px; height: 72px; background-image: url("<%= asset_data_uri('newmap_sprite.png') %>"); background-repeat: no-repeat; background-position: 0 0; position: absolute; left: 50%; margin-left: -36px; top: 50%; margin-top: -36px; } span { font-family: 'din-regular', sans-serif; font-size: 18px; line-height: 22px; text-align: center; display: block; padding-top: 220px; } } .mapCard { position:relative; width:100%; height:308px; padding: 0 0 16px 0; color: #424242; .mapHasMapper, .mapHasConversation { position: absolute; top: 5px; left: 5px; width: 32px; height: 32px; } .mapHasMapper { background: url('<%= asset_path('junto.png') %>'); } .mapHasConversation { background: url('<%= asset_path('junto.gif') %>'); } .mapScreenshot { width: 100%; height: 220px; } .mapScreenshot img { width: 100%; } .title { word-wrap: break-word; font-size:18px; line-height:22px; height: 71px; display:table; padding: 0 16px; font-family: 'din-regular', sans-serif; margin: 0 auto; .innerTitle { display: table-cell; vertical-align: middle; text-align: center; } } .creatorAndPerm { padding: 8px; } .creatorImage { display: inline-block; border-radius: 16px; vertical-align: middle; width: 32px; height: 32px; } span.creatorName { margin-left: 8px; } .scroll { display:block; font-family: helvetica, sans-serif; font-size: 12px; word-wrap: break-word; text-align: center; margin-top: 16px; } &:hover .mainContent { filter: blur(2px); } &:hover .mapMetadata { display: block; } .mapMetadata { display: none; position: absolute; top: 0; left: 0; padding: 40px 20px 0; height: 300px; font-family: 'din-regular', sans-serif; font-size: 12px; color: #FFF; background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.43) 81%, rgba(0,0,0,0) 100%); background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.43) 81%,rgba(0,0,0,0) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.43) 81%,rgba(0,0,0,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); } .metadataSection { padding: 16px 0; width: 90px; float: left; font-family: 'din-medium', sans-serif; text-align: center; } } }