/* -------------------------------------------------- Background sprites Icon sprites */ /* Backgrounds -------------------------------------------------- */ /* Put all elements here that share the background image, * For positioning, use a separate declaration below. */ .global-nav, .global-nav .well, .nav .active > a, .btn-tweet, .btn-tweet:hover, .btn-tweet:active, .nav .active > a, .card-soccer .cover { background-image: url(/oilspill/20120916185449oe_/http://twitter.com/t1/img/twitter_web_sprite_bgs.png); background-repeat: repeat-x; } /* Global nav ------------------------- */ .global-nav { background-position: 0 0; background-color: #252525; } /* Active topbar links ------------------------- */ .nav .active > a { background-position: 0 -50px; } /* Global nav well for tweet button and avatar ------------------------- */ .global-nav .well { background-position: 0 -100px; } /* Tweet button ------------------------- */ .btn-tweet { background-position: 0 -140px; background-color: #2c77ba; filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); /* Disable IE gradient filter to allow sprite to shine through */ } .btn-tweet:hover { background-position: 0 -170px; } .btn-tweet:active { background-position: 0 -200px; } /* Icons -------------------------------------------------- */ /* The tag is reserved for icons leveraging the primary web sprite. * To create a new icon, edit the sprite PSD and export the flattened * PNG to the img directory. From there, add a new class below and give * it a width, height, and background-position. Your HTML for the icon * will then look like . */ i { display: inline-block; zoom: 1; /* IE7 inline-block hack part 1*/ *display: inline; /* IE7 inline-block hack part 2 */ vertical-align: text-top; background-image: url(/oilspill/20120916185449oe_/http://twitter.com/t1/img/twitter_web_sprite_icons.png); background-position: 0 0; background-repeat: no-repeat; } /* Twitter logos ------------------------- */ /* Stream end bird */ .bird-etched { width: 34px; height: 26px; } /* Topbar birds */ .bird-topbar-etched, .bird-topbar-blue, .bird-topbar-white { width: 24px; height: 21px; } .bird-topbar-etched { background-position: -40px 0; } .bird-topbar-blue { background-position: -80px 0; } /* Non-app topbar */ /* Extra styles here for the blue corpbar since we only import this file into that old Rails layout */ .bird-corpbar, .bird-topbar-phx { float: left; padding: 7px 20px 9px; } .bird-corpbar:hover, .bird-topbar-phx:hover { background-color: rgba(255,255,255,.1); } /* White bird itself */ .bird-topbar-white { background-position: -120px 0; } /* Navigation icons ------------------------- */ .nav-home, .nav-topics, .nav-people, .nav-me, .nav-tweet { height: 22px; } .nav-home { background-position: 0 -50px; width: 21px; } .nav-topics { background-position: -40px -50px; width: 17px; } .nav-people { background-position: -80px -50px; width: 21px; } .nav-me { background-position: -120px -50px; width: 21px; } .nav-session { background-position: -160px -50px; width: 20px; height: 21px; } .nav-tweet { background-position: -200px -50px; width: 22px; height: 18px; } /* Divider in the topbar */ .topbar-divider { background-position: -240px -50px; width: 2px; height: 32px } /* Nav breaker for collapsing tweets */ .nav-breaker { background-position: -260px -50px; width: 18px; height: 19px; } /* blue glow indicator */ .nav-new { background-position: -200px -80px; width: 24px; height: 3px; } /* Hover states */ .global-nav a:hover .nav-home { background-position: 0 -80px; } .global-nav a:hover .nav-topics { background-position: -40px -80px; } .global-nav a:hover .nav-people { background-position: -80px -80px; } .global-nav a:hover .nav-me { background-position: -120px -80px; } .global-nav a:hover .nav-session, .global-nav .open .nav-session { background-position: -160px -80px; } .global-nav a:hover .nav-breaker { background-position: -260px -80px; } /* Active and active :hover states */ .active .nav-home, .active a:hover .nav-home { background-position: 0 -110px; } .active .nav-topics, .active a:hover .nav-topics { background-position: -40px -110px; } .active .nav-people, .active a:hover .nav-people { background-position: -80px -110px; } .active .nav-me, .active a:hover .nav-me { background-position: -120px -110px; } .active .nav-session, .active a:hover .nav-session { background-position: -160px -110px; } /* Chevrons ------------------------- */ .chev-right { background-position: 0 -140px; width: 9px; height: 13px; } /* on hover and active, darken */ .list-link:hover .chev-right, .active .chev-right { background-position: 0 -160px; } /* Small general icons ------------------------- */ /* Default icons, dimensions only */ .sm-reply, .sm-rt, .sm-fav, .sm-image, .sm-video, .sm-audio, .sm-geo, .sm-in, .sm-lock, .sm-trash, .sm-page, .sm-embed, .sm-summary, .sm-chat, .sm-bird, .sm-top-tweet { height: 13px; background-color: #999; } /* Gray mask for icons */ .tweet:hover .sm-reply, .simple-tweet .sm-reply, .hovered-stream-item .sm-reply, .simple-tweet.opened-tweet:hover .sm-reply { background-position: 0 -220px; } .tweet:hover .sm-rt, .simple-tweet .sm-rt, .hovered-stream-item .sm-rt, .simple-tweet.opened-tweet:hover .sm-rt { background-position: -20px -220px; } .tweet:hover .sm-fav, .simple-tweet .sm-fav, .hovered-stream-item .sm-fav, .simple-tweet.opened-tweet:hover .sm-fav { background-position: -40px -220px; } .tweet:hover .sm-image, .simple-tweet .sm-image, .hovered-stream-item .sm-image, .simple-tweet.opened-tweet:hover .sm-image { background-position: -60px -220px; } .tweet:hover .sm-video, .simple-tweet .sm-video, .hovered-stream-item .sm-video, .simple-tweet.opened-tweet:hover .sm-video { background-position: -80px -220px; } .tweet:hover .sm-audio, .simple-tweet .sm-audio, .hovered-stream-item .sm-audio, .simple-tweet.opened-tweet:hover .sm-audio { background-position: -100px -220px; } .tweet:hover .sm-geo, .simple-tweet .sm-geo, .hovered-stream-item .sm-geo, .simple-tweet.opened-tweet:hover .sm-geo { background-position: -120px -220px; } .tweet:hover .sm-lock, .simple-tweet .sm-lock, .hovered-stream-item .sm-lock, .simple-tweet.opened-tweet:hover .sm-lock { background-position: -140px -220px; } .tweet:hover .sm-trash, .simple-tweet .sm-trash, .hovered-stream-item .sm-trash, .simple-tweet.opened-tweet:hover .sm-trash { background-position: -160px -220px; } .tweet:hover .sm-embed, .simple-tweet .sm-embed, .hovered-stream-item .sm-embed, .simple-tweet.opened-tweet:hover .sm-embed, .tweet:hover .sm-summary, .simple-tweet .sm-summary, .hovered-stream-item .sm-summary, .simple-tweet.opened-tweet:hover .sm-summary { background-position: -180px -220px; } .tweet:hover .sm-chat, .simple-tweet .sm-chat, .hovered-stream-item .sm-chat, .simple-tweet.opened-tweet:hover .sm-chat { background-position: -200px -220px; } .sm-bird { background-position: -220px -220px; } /* unused */ .sm-top-tweet { background-position: -240px -220px; } /* only for disco */ .sm-details { background-position: -260px -220px; } /* unused */ .tweet:hover .sm-translate, .simple-tweet .sm-translate, .hovered-stream-item .sm-translate, .simple-tweet.opened-tweet:hover .sm-translate { background-position: -280px -220px; } /* Set background position for one white by default */ /* Positioned after the gray mask because then we don't have to use crazy selectors or duplicate CSS to override hover styles */ .sm-reply, .opened-tweet:hover .sm-reply, .stream-item-activity .tweet:hover .sm-reply { background-position: 0 -190px; width: 12px; } .sm-rt, .opened-tweet:hover .sm-rt, .stream-item-activity .tweet:hover .sm-rt { background-position: -20px -190px; width: 14px; } .sm-fav, .opened-tweet:hover .sm-fav, .stream-item-activity .tweet:hover .sm-fav { background-position: -40px -190px; width: 10px; } .sm-image, .opened-tweet:hover .sm-image, .stream-item-activity .tweet:hover .sm-image { background-position: -60px -190px; width: 12px; } .sm-video, .opened-tweet:hover .sm-video, .stream-item-activity .tweet:hover .sm-video { background-position: -80px -190px; width: 12px; } .sm-audio, .opened-tweet:hover .sm-audio, .stream-item-activity .tweet:hover .sm-audio { background-position: -100px -190px; width: 9px; } .sm-geo, .opened-tweet:hover .sm-geo, .stream-item-activity .tweet:hover .sm-geo { background-position: -120px -190px; width: 9px; } .sm-lock, .opened-tweet:hover .sm-lock, .stream-item-activity .tweet:hover .sm-lock { background-position: -140px -190px; width: 8px; } .sm-trash, .opened-tweet:hover .sm-trash, .stream-item-activity .tweet:hover .sm-trash { background-position: -160px -190px; width: 9px; } .sm-embed, .opened-tweet:hover .sm-embed, .stream-item-activity .tweet:hover .sm-embed, .opened-tweet:hover .sm-summary, .stream-item-activity .tweet:hover .sm-summary, .sm-summary { background-position: -180px -190px; width: 9px; } .sm-chat, .opened-tweet:hover .sm-chat, .stream-item-activity .tweet:hover .sm-chat { background-position: -200px -190px; width: 10px; } /* unused */ .sm-bird { background-position: -220px -190px; width: 14px; } /* unused */ .sm-top-tweet { background-position: -240px -190px; width: 11px; } .sm-details { background-position: -260px -190px; width: 11px; } /* unused */ .sm-translate, .opened-tweet:hover .sm-translate, .stream-item-activity .tweet:hover .sm-translate { background-position: -280px -190px; width: 11px; } /* Black mask for icons on photo permalink */ .gallery-tweet .sm-reply, .gallery-tweet .tweet:hover .sm-reply { background-position: 0 -250px; } .gallery-tweet .sm-rt, .gallery-tweet .tweet:hover .sm-rt { background-position: -20px -250px; } .gallery-tweet .sm-fav, .gallery-tweet .tweet:hover .sm-fav { background-position: -40px -250px; } .gallery-tweet .sm-image, .gallery-tweet .tweet:hover .sm-image { background-position: -60px -250px; } .gallery-tweet .sm-video, .gallery-tweet .tweet:hover .sm-video { background-position: -80px -250px; } .gallery-tweet .sm-audio, .gallery-tweet .tweet:hover .sm-audio { background-position: -100px -250px; } .gallery-tweet .sm-geo, .gallery-tweet .tweet:hover .sm-geo { background-position: -120px -250px; } .gallery-tweet .sm-in, .gallery-tweet .tweet:hover .sm-in { background-position: -140px -250px; } .gallery-tweet .sm-lock, .gallery-tweet .tweet:hover .sm-lock { background-position: -160px -250px; } .gallery-tweet .sm-trash, .gallery-tweet .tweet:hover .sm-trash { background-position: -180px -250px; } .gallery-tweet .sm-page, .gallery-tweet .tweet:hover .sm-page { background-position: -200px -250px; } .gallery-tweet .sm-embed, .gallery-tweet .tweet:hover .sm-embed { background-position: -240px -250px; } .gallery-tweet .sm-chat, .gallery-tweet .tweet:hover .sm-chat { background-position: -100px -250px; } .gallery-tweet .sm-bird, .gallery-tweet .tweet:hover .sm-bird { background-position: -100px -250px; } .gallery-tweet .sm-top-tweet, .gallery-tweet .tweet:hover .sm-top-tweet { background-position: -100px -250px; } /* Large tweet actions ------------------------- */ /* Shared */ .permalink-tweet .sm-reply, .permalink-tweet .sm-rt, .permalink-tweet .sm-fav, .permalink-tweet .sm-trash, .permalink-tweet .sm-translate { height: 16px; margin-top: -2px; } /* Dimensions and positions */ .permalink-tweet .sm-reply, .permalink-tweet:hover .sm-reply { background-position: 0 -280px; width: 18px; } .permalink-tweet .sm-rt, .permalink-tweet:hover .sm-rt { background-position: -30px -280px; width: 22px; } .permalink-tweet .sm-fav, .permalink-tweet:hover .sm-fav { background-position: -60px -280px; width: 16px; } .permalink-tweet .sm-trash, .permalink-tweet:hover .sm-trash { background-position: -90px -280px; width: 11px; } .permalink-tweet .sm-translate, .permalink-tweet:hover .sm-translate { background-position: -120px -280px; width: 15px; } /* Tweet badges ------------------------- */ .badge-promoted, .badge-top, .badge-political, .badge-retweeted { width: 16px; height: 12px; background-color: transparent; vertical-align: -1px; *vertical-align: middle; } .badge-promoted { background-position: 0 -350px; } .badge-political { background-position: -20px -350px; } .badge-top { background-position: -40px -350px; } .badge-retweeted { background-position: -60px -350px; } /* Media controls ------------------------- */ .play-large { background-position: 0 -370px; width: 48px; height: 48px; } .play-medium { background-position: -60px -370px; width: 32px; height: 32px; } .play { background-position: -100px -370px; width: 21px; height: 21px; } /* Follow/Save actions ------------------------- */ .follow { margin-top: 2px; } .account-arrow, .search-toggle { margin-top: 1px; } .follow { background-position: 0 -430px; width: 18px; height: 14px; } .block { background-position: -30px -430px; width: 14px; height: 14px; } .account-arrow { background-position: -60px -430px; width: 22px; height: 12px; } .search-toggle { background-position: -90px -430px; width: 23px; height: 14px; } /* DMs envelope */ .dm-envelope { background-position: -120px -430px; width: 20px; height: 14px; } /* Tweet Dogears ------------------------- */ /* Hide the dogears in the corners by default */ .dogear { position: absolute; top: 0; right: 0; display: none; width: 24px; height: 24px; } .retweeted .dogear { background-position: 0 -450px; } .favorited .dogear { background-position: -30px -450px; } .retweeted.favorited .dogear { background-position: -60px -450px; } /* When the tweet has the right class, show the right dogear */ .retweeted .dogear, .favorited .dogear, .retweeted.favorited .dogear { display: block; } /* Badges ------------------------- */ /* Dimensions */ .verified-large, .translator-large { width: 22px; height: 22px; } .verified, .translator { width: 15px; height: 15px; margin: -1px 3px 0 2px; } /* Positioning */ .verified-large { background-position: 0 -480px; } .verified { background-position: -30px -480px; } .translator-large { background-position: -60px -480px; } .translator { background-position: -90px -480px; } /* Bordered badges */ .verified-large-border, .translator-large-border { width: 21px; height: 21px; } .verified-large-border { background-position: -120px -480px; } .translator-large-border { background-position: -160px -480px; } .lock-large { background-position: -200px -480px; width: 15px; height: 18px; } /* Close icons ------------------------- */ /* for modals */ .close-large { background-position: 0 -510px; width: 12px; height: 13px; } /* for inline dismiss of WTF and Promoted */ .close { background-position: -20px -510px; width: 9px; height: 9px; } .dismiss:hover .close { background-position: -40px -510px; } /* new close for modals (replaces large?) */ /* set widths (change classnames to be the same in the future) */ .close-medium, .error-x, .dismiss-white { width: 10px; height: 12px; } /* positions */ .close-medium { background-position: -60px -510px; } .modal-close:hover .close-medium { background-position: -80px -510px; } /* red x */ .error-x { background-position: -100px -510px; } /* white x */ .dismiss-white { background-position: -120px -510px; } /* Tweet sheet actions ------------------------- */ .tweet-hash, .tweet-at, .tweet-camera, .tweet-geo { height: 17px; } .tweet-hash { background-position: 0 -530px; width: 16px; } .tweet-at { background-position: -30px -530px; width: 16px; } .tweet-camera { background-position: -60px -530px; width: 20px; } .tweet-geo { background-position: -90px -530px; width: 11px; } /* active/"lit up" button state */ .active .tweet-hash { background-position: 0 -590px; } .active .tweet-at { background-position: -30px -590px; } .active .tweet-camera { background-position: -60px -590px; } .active .tweet-geo { background-position: -90px -590px; } /* Unread indicators ------------------------- */ .unread { background-position: 0 -620px; width: 13px; height: 12px; } .replied { background-position: -20px -620px; width: 13px; height: 10px; } /* Service icons ------------------------- */ .service-gmail, .service-gmail2, .service-yahoo, .service-hotmail, .service-aol, .service-linkedin, .service-msn, .service-yahoojapan, .service-yandex { width: 24px; height: 24px; } .service-gmail, .service-gmail2 { background-position: 0 -640px; } .service-yahoo { background-position: -30px -640px; } .service-hotmail { background-position: -60px -640px; } .service-aol { background-position: -90px -640px; } .service-linkedin { background-position: -120px -640px; } .service-msn { background-position: -150px -640px; } .service-daum { background-position: -180px -640px; } .service-yahoojapan { background-position: -210px -640px; } .service-yandex { background-position: -240px -640px; } /* Small version */ .service-sm-gmail2, .service-sm-yahoo, .service-sm-hotmail, .service-sm-aol, .service-sm-linkedin, .service-sm-facebook, .service-sm-msn, .service-sm-daum { height: 16px; } .service-sm-gmail, .service-sm-gmail2 { background-position: 0 -670px; width: 16px; } .service-sm-yahoo { background-position: -30px -670px; width: 20px; } .service-sm-hotmail { background-position: -60px -670px; width: 16px; } .service-sm-aol { background-position: -90px -670px; width: 16px; } .service-sm-linkedin { background-position: -120px -670px; width: 15px; } .service-sm-facebook { background-position: -150px -670px; width: 14px; } .service-sm-msn { background-position: -180px -670px; width: 16px; } .service-sm-daum { background-position: -210px -670px; width: 14px; } .service-sm-yandex { background-position: -230px -670px; width: 16px; } .service-sm-native-photobucket { background-position: -270px -670px; width: 16px; height: 14px; *margin-right: 3px; } /* Misc icons ------------------------- */ .checkmark, .dropdown-check { width: 10px; height: 12px; } .checkmark { background-position: 0 -690px; } .dropdown-check { background-position: -20px -690px; } .geo-focused .checkmark, a:hover .dropdown-check, .dropdown-link:hover .dropdown-check, .selected .dropdown-check { background-position: -40px -690px; } /* Nav searchbar icon (lighter when unfocused) ------------------------- */ .nav-search, .generic-search { width: 12px; height: 14px; } .nav-search { background-position: -20px -710px; } /* Saved searches in dropdown */ .generic-search { background-position: -40px -710px; } a:hover .generic-search, .selected .generic-search { background-position: -60px -710px; } /* Geo ------------------------- */ .geo-search { background-position: 0 -710px; width: 12px; height: 14px; } .geo-check { background-position: 0 -690px; width: 15px; height: 14px; } .geo-turn-off { background-position: -60px -510px; width: 10px; height: 12px; } /* Watermark lock ------------------------- */ .watermark-lock { background-position: 0 -730px; width: 75px; height: 85px; } /* Activity icons ------------------------- */ /* set the height so all icons appear on same baseline */ .activity-follow, .activity-fav, .activity-list, .activity-rt, .activity-reply { height: 14px; width: 14px; } /* set position and width independently */ .activity-follow { background-position: 0 -820px; } .activity-fav { background-position: -20px -820px; } .activity-list { background-position: -40px -820px; } .activity-rt { background-position: -60px -820px; } /* Tweet embed dialog button icons ---------------------------------- */ .embed-align-none { background-position: 0 -840px } .embed-align-left { background-position: -22px -840px } .embed-align-right { background-position: -42px -840px } .embed-align-center { background-position: -63px -840px } /* active state */ .active .embed-align-none { background-position: 0 -860px } .active .embed-align-left { background-position: -22px -860px } .active .embed-align-right { background-position: -42px -860px } .active .embed-align-center { background-position: -63px -860px } /* DM icons ---------------------------------- */ .trash { background-position: 0 -880px; width: 11px; height: 14px; } a:hover .trash { background-position: -20px -880px; } /* Disco icons for view details. Switching out the video and image icons with CSS only. ------------------------- */ .disco-media-type { width: 14px; height: 13px; } .story.image .disco-media-type { background-position: 0 -900px; } .story.video .disco-media-type { background-position: -20px -900px; } /* Cropper icons ---------------------------------- */ .image-gray { background-position: -40px -900px; width: 15px; height: 12px; } .image-gray-large { background-position: -60px -900px; width: 19px; height: 16px; } /* Search icon mask (gray) ------------------------- */ .sm-search { background-position: 0 -930px; width: 12px; height: 14px; } /* Stork ------------------------- */ /* Set position of stork bg image depending on where we're pointing */ .stork-pip-up, .stork-pip-down, .stork-pip-left, .stork-pip-right { width: 60px; height: 50px; } .stork-pip-right { background-position: 0 -970px; } .stork-pip-left { background-position: -60px -970px; } .stork-pip-up { background-position: -90px -970px; height: 60px; } .stork-pip-down { background-position: -120px -970px; height: 60px; } .stork-pip-right:hover { background-position: 0 -1030px; } .contrast-flex-module .pointer { background-position: -240px -970px; width: 25px; height: 30px; } /* icons used inside of stork pips */ .stork-open-tweet { background-position: 0 -900px; } /* Unused? Maps to the trash icon currently */ .stork-help { background-position: -280px -970px; height: 20px; } /* Profile icons ------------------------- */ /* set heights */ .icon-nav-tweets, .icon-nav-people, .icon-nav-lists, .icon-nav-favorites { background-color: #ccc; height: 17px; } .icon-nav-tweets { background-position: 0 -1100px; width: 16px; } .icon-nav-people { background-position: -30px -1100px; width: 22px; } .icon-nav-lists { background-position: -60px -1100px; width: 18px; } .icon-nav-favorites { background-position: -90px -1100px; width: 16px; } /* Mark as spam ------------------------- */ /* set heights */ .mark-as-spam-flag, .mark-as-spam-silhouette { background-color: #ccc; height: 12px; } /* position and width */ .mark-as-spam-flag, .tweet.opened-tweet:hover .mark-as-spam-flag { background-position: 0 -1130px; width: 10px; } .mark-as-spam-silhouette, .tweet.opened-tweet:hover .mark-as-spam-silhouette { background-position: -20px -1130px; width: 13px; } /* gray versions for tweets on hover */ .tweet:hover .mark-as-spam-flag { background-position: 0 -1160px; } .tweet:hover .mark-as-spam-silhouette { background-position: -20px -1160px; } /* Events page autoplay ------------------------- */ .stream-autoplay-marker .arrow { background-position: -120px -1187px; } .autoplay-control .autoplay-play { background-position: -60px -1190px; } .autoplay-control .autoplay-play:hover { background-position: -90px -1190px; } .autoplay-control .autoplay-pause { background-position: 0px -1190px; } .autoplay-control .autoplay-pause:hover { background-position: -30px -1190px; } /* Icons paired with text ------------------------- */ .with-icn { font-size: 12px; color: #999; } .with-icn i { margin-right: 1px; } .with-icn b { font-weight: normal; color: inherit; } .with-icn:hover { text-decoration: none; } .with-icn:hover b { text-decoration: underline; } /* Configurator Icons ------------------------- */ .configurator-user, .configurator-search, .configurator-list, .configurator-favorites { margin: -3px 10px 0 0; width: 24px; height: 22px; } .configurator-user { background-position: 0 -1220px; } .configurator-search { background-position: -97px -1220px; } .configurator-list { background-position: -31px -1220px; } .configurator-favorites { background-position: -63px -1220px; }