Instagram CSS

gistfile1.txt

ol,ul {
 list-style:none
}
blockquote,q {
 quotes:none
}
blockquote:after,blockquote:before,q:after,q:before {
 content:none
}
table {
 border-collapse:collapse;
 border-spacing:0
}
#react-root,article,div,footer,header,main,nav,section {
 -webkit-box-align:stretch;
 -webkit-align-items:stretch;
 -ms-flex-align:stretch;
 align-items:stretch;
 border:0 solid #000;
 -webkit-box-sizing:border-box;
 box-sizing:border-box;
 display:-webkit-box;
 display:-webkit-flex;
 display:-ms-flexbox;
 display:flex;
 -webkit-box-orient:vertical;
 -webkit-box-direction:normal;
 -webkit-flex-direction:column;
 -ms-flex-direction:column;
 flex-direction:column;
 -webkit-flex-shrink:0;
 -ms-flex-negative:0;
 flex-shrink:0;
 margin:0;
 padding:0;
 position:relative
}
html {
 -webkit-text-size-adjust:100%
}
body,button,input,textarea {
 font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
 font-size:14px;
 line-height:18px
}

a:active {
 opacity:.5
}
.embedSpriteComment,.embedSpriteGlyph {
 background-image:url(/inst/sprite.png);
 background-repeat:no-repeat;
 background-position:-137px -38px;
 height:24px;
 width:24px
}
.embedSpriteGlyph {
 background-position:-137px -64px
}
.embedSpriteHeartOpen,.embedSpriteHeartOpenRed,.embedSpritePlayButton,.embedSpriteSaveOpen,.embedSpriteStoryRing,.embedSpriteVerifiedBadgeSmall {
 background-image:url(/inst/sprite.png);
 background-repeat:no-repeat;
 background-position:-137px -90px;
 height:24px;
 width:24px
}
.embedSpriteHeartOpenRed,.embedSpritePlayButton,.embedSpriteSaveOpen,.embedSpriteStoryRing,.embedSpriteVerifiedBadgeSmall {
 background-position:0 -137px
}
.embedSpritePlayButton,.embedSpriteSaveOpen,.embedSpriteStoryRing,.embedSpriteVerifiedBadgeSmall {
 background-position:0 0;
 height:135px;
 width:135px
}
.embedSpriteSaveOpen,.embedSpriteStoryRing,.embedSpriteVerifiedBadgeSmall {
 background-position:-26px -137px;
 height:24px;
 width:24px
}
.embedSpriteStoryRing,.embedSpriteVerifiedBadgeSmall {
 background-position:-137px 0;
 height:36px;
 width:36px
}
.embedSpriteVerifiedBadgeSmall {
 background-position:-137px -116px;
 height:12px;
 width:12px
}
@media (min-device-pixel-ratio:1.5),(-webkit-min-device-pixel-ratio:1.5),(min-resolution:144dpi) {
 .embedSpriteComment,.embedSpriteGlyph,.embedSpriteHeartOpen {
  background-image:url(/inst/sprite.png);
  background-size:172px 160px;
  background-position:-136px -37px
 }
 .embedSpriteGlyph,.embedSpriteHeartOpen {
  background-position:-136px -62px
 }
 .embedSpriteHeartOpen {
  background-position:-136px -87px
 }
 .embedSpriteHeartOpenRed,.embedSpritePlayButton,.embedSpriteSaveOpen,.embedSpriteStoryRing,.embedSpriteVerifiedBadgeSmall {
  background-image:url(/inst/sprite.png);
  background-size:172px 160px;
  background-position:0 -136px
 }
 .embedSpritePlayButton,.embedSpriteSaveOpen,.embedSpriteStoryRing,.embedSpriteVerifiedBadgeSmall {
  background-position:0 0
 }
 .embedSpriteSaveOpen,.embedSpriteStoryRing,.embedSpriteVerifiedBadgeSmall {
  background-position:-25px -136px
 }
 .embedSpriteStoryRing,.embedSpriteVerifiedBadgeSmall {
  background-position:-136px 0
 }
 .embedSpriteVerifiedBadgeSmall {
  background-position:-136px -112px
 }
}
.Embed {
 display:block;
 font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
 font-size:14px;
 line-height:18px;
 text-align:left;
 -webkit-user-select:none;
 -moz-user-select:none;
 -ms-user-select:none;
 user-select:none
}
.Embed:hover {
 cursor:pointer
}
.Embed a {
 color:#262626
}
.Embed a:hover {
 text-decoration:underline
}
.Content {
 padding-bottom:100%;
 position:relative
}
.EmbeddedMedia {
 background-color:#fafafa;
 bottom:0;
 left:0;
 position:absolute;
 right:0;
 top:0
}
.EmbeddedMedia:active {
 opacity:1
}
.EmbeddedMediaImage {
 width:100%;
 pointer-events:none
}
.AvatarContainer,.Header {
 display:-webkit-box;
 display:-webkit-flex;
 display:-ms-flexbox;
 display:flex;
 -webkit-box-direction:normal;
 -webkit-box-align:center;
 -webkit-align-items:center;
 -ms-flex-align:center;
 align-items:center
}
.Header {
 height:54px;
 -webkit-box-orient:horizontal;
 -webkit-flex-direction:row;
 -ms-flex-direction:row;
 flex-direction:row;
 padding:10px
}
.AvatarContainer {
 background-color:#fff;
 padding:2px;
 border-radius:50%;
 -webkit-box-orient:vertical;
 -webkit-flex-direction:column;
 -ms-flex-direction:column;
 flex-direction:column;
 -webkit-box-pack:center;
 -webkit-justify-content:center;
 -ms-flex-pack:center;
 justify-content:center
}
.Avatar {
 display:block;
 width:30px;
 height:30px
}
.InsideRing {
 position:absolute
}
.Avatar img {
 border-radius:50%;
 width:30px;
 height:30px
}
.Avatar:hover {
 opacity:.5
}
.StoryRing {
 display:block
}
.AvatarRing {
 background:#f09433;
 background:-webkit-linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
 background:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
 filter:progid:DXImageTransform.Microsoft.gradient(
      startColorstr="#f09433",
      endColorstr="#bc1888",
      GradientType=1
    );
 border-radius:50%;
 padding:2px
}
.HeaderText {
 -webkit-box-align:start;
 -webkit-align-items:flex-start;
 -ms-flex-align:start;
 align-items:flex-start;
 -webkit-flex-shrink:1;
 -ms-flex-negative:1;
 flex-shrink:1;
 margin-left:10px;
 overflow:hidden;
 flex-flow: row;
width: 100%;
}
.LocationAndSponsor,a.Username {
 text-overflow:ellipsis;
 white-space:nowrap
}
a.Username {
 -webkit-box-align:center;
 -webkit-align-items:center;
 -ms-flex-align:center;
 align-items:center;
 display:-webkit-box;
 display:-webkit-flex;
 display:-ms-flexbox;
 display:flex;
 -webkit-box-orient:horizontal;
 -webkit-box-direction:normal;
 -webkit-flex-direction:row;
 -ms-flex-direction:row;
 flex-direction:row;
 font-weight:600;
 line-height:2;
}
.LocationAndSponsor {
 font-size:12px;
 line-height:14px;
 max-width:100%;
 overflow:hidden
}
.VerifiedSprite {
 margin-left:5px
}
a.FollowButton {
 background-color:#3897f0;
 border-radius:3px;
 color:#fff;
 font-weight:600;
 margin-left:auto;
 padding:5px 12px;
 text-decoration:none
}
a.FollowButton:hover {
 background-color:#1372cc;
 text-decoration:none
}
a.FollowButton.is-following {
 background:0 0;
 color:#262626;
 padding-right:0
}
a.FollowButton.is-following:hover {
 background:0 0;
 text-decoration:underline
}
.FollowButton .FollowText {
 display:inline
}
.FollowButton .FollowingText,.FollowButton.is-following .FollowText,.Likes .LikeSpriteHover {
 display:none
}
.FollowButton.is-following .FollowingText {
 display:inline
}
.Feedback,.Feedback a {
 display:-webkit-box;
 display:-webkit-flex;
 display:-ms-flexbox;
 display:flex
}
.Feedback {
 -webkit-box-orient:horizontal;
 -webkit-box-direction:normal;
 -webkit-flex-direction:row;
 -ms-flex-direction:row;
 flex-direction:row;
 padding:8px 10px
}
.Feedback a {
 -webkit-box-align:center;
 -webkit-align-items:center;
 -ms-flex-align:center;
 align-items:center;
 font-size:80%;
 text-decoration:none
}
.Comments,.Likes {
 margin-right:12px
}
.Likes:hover .LikeSpriteHover {
 display:inline-block
}
.Comments:hover,.Glyph:hover,.Save:hover {
 opacity:.5
}
.Save {
 margin-left:auto
}
.SocialProof {
 -webkit-box-align:start;
 -webkit-align-items:flex-start;
 -ms-flex-align:start;
 align-items:flex-start;
 padding:0 10px 6px
}
.SocialProof a {
 font-weight:600
}
.Caption {
 display:block;
 line-height:18px;
 padding:0 10px 10px
}
.CaptionComments {
 display:block;
 padding-top:6px
}
.Caption a {
 color:#003569
}
a.CaptionUsername {
 color:#262626;
 font-weight:600;
 margin:-5px 0 -5px -5px;
 padding:5px
}
a.CaptionCommentsExpand {
 color:#999
}
.Footer {
 -webkit-box-align:center;
 -webkit-align-items:center;
 -ms-flex-align:center;
 align-items:center;
 border-top:1px solid #eee;
 -webkit-box-orient:horizontal;
 -webkit-box-direction:normal;
 -webkit-flex-direction:row;
 -ms-flex-direction:row;
 flex-direction:row;
 height:44px;
 padding:0 10px
}
a.Timestamp {
 color:#999;
 font-size:70%;
 text-decoration:none;
 text-transform:uppercase
}
.Glyph {
 display:-webkit-box;
 display:-webkit-flex;
 display:-ms-flexbox;
 display:flex;
 margin-left:auto
}
.Sprite,.hidden,.hideText {
 overflow:hidden;
 text-indent:-99999em
}
.hidden {
 height:0;
 width:0
}
.Sprite {
 display:inline-block
}
.EmbedFrame {
 position:relative;
 padding-bottom:100%
}
.EmbedFrameWithSidecar .Image,.Likes:hover .LikeSprite {
 display:none
}
.EmbedRichFrame {
 background-color:#fff;
 height:100%;
 position:absolute;
 width:100%
}
.WithSidecar .EmbedRichFrame {
 height:calc(100% + 36px)
}
.HoverCard .HoverCardRoot {
 background-color:#fff;
 border-top-left-radius:3px;
 border-top-right-radius:3px;
 bottom:32px;
 height:0;
 left:12px;
 overflow:hidden;
 padding-left:12px;
 padding-right:12px;
 padding-top:12px;
 position:absolute;
 -webkit-transition:.25s ease-out;
 transition:.25s ease-out;
 width:209px
}
.HoverCard:hover .HoverCardRoot {
 height:128px;
 -webkit-transition:.25s ease-out;
 transition:.25s ease-out
}
.HoverCardPhotos,.HoverCardProfile,.HoverCardStatus,.HoverCardUserName {
 -webkit-box-align:center;
 -webkit-align-items:center;
 -ms-flex-align:center;
 align-items:center;
 display:-webkit-box;
 display:-webkit-flex;
 display:-ms-flexbox;
 display:flex;
 -webkit-box-orient:horizontal;
 -webkit-box-direction:normal;
 -webkit-flex-direction:row;
 -ms-flex-direction:row;
 flex-direction:row
}
.HoverCardProfile img {
 border-radius:17px;
 height:34px;
 margin-right:12px;
 width:34px
}
.HoverCardUser {
 width:163px
}
.HoverCardUserName .Username {
 color:#262626;
 -webkit-box-flex:0;
 -webkit-flex-grow:0;
 -ms-flex-positive:0;
 flex-grow:0;
 font-size:14px;
 font-weight:600;
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap
}
.HoverCardUserName .VerifiedSprite {
 -webkit-flex-shrink:0;
 -ms-flex-negative:0;
 flex-shrink:0
}
.HoverCardCTA a,.HoverCardStatus span {
 color:#999;
 font-size:12px;
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap
}
.HoverCardPhotos {
 margin-top:12px
}
.HoverCardPhotos img {
 height:104px;
 margin-right:1px;
 width:104px
}
.HoverCardCTA,.WatchOnInstagramContainer {
 display:-webkit-box;
 display:-webkit-flex;
 display:-ms-flexbox;
 display:flex;
 -webkit-box-pack:center;
 -webkit-justify-content:center;
 -ms-flex-pack:center;
 justify-content:center
}
.HoverCardCTA {
 border-bottom:1px solid #efefef;
 height:44px;
 margin-left:12px;
 margin-right:12px
}
.HoverCardCTA a {
 color:#3897f0;
 font-size:14px;
 font-weight:600
}
.WatchOnInstagramContainer {
 -webkit-font-smoothing:antialiased;
 -webkit-box-align:center;
 -webkit-align-items:center;
 -ms-flex-align:center;
 align-items:center;
 background-color:rgba(0,0,0,.5);
 bottom:0;
 color:#fff;
 font-size:14px;
 font-weight:600;
 left:0;
 position:absolute;
 right:0;
 text-shadow:0 1px 2px rgba(0,0,0,.5);
 top:0
}
.WatchOnInstagram {
 margin-top:-10px;
 margin-bottom:20px
}
.EmbedLogo {
 display:block
}
.EmbedIsBroken {
 height:100%
}
.EmbedBrokenMedia {
 -webkit-box-align:center;
 -webkit-align-items:center;
 -ms-flex-align:center;
 align-items:center;
 background-color:#efefef;
 display:-webkit-box;
 display:-webkit-flex;
 display:-ms-flexbox;
 display:flex;
 -webkit-box-orient:vertical;
 -webkit-box-direction:normal;
 -webkit-flex-direction:column;
 -ms-flex-direction:column;
 flex-direction:column;
 height:100%;
 -webkit-box-pack:center;
 -webkit-justify-content:center;
 -ms-flex-pack:center;
 justify-content:center;
 width:100%
}
.ebmLogo {
 margin-bottom:20px
}
.ebmMessage {
 color:#262626;
 font-size:16px;
 font-weight:400;
 line-height:20px;
 margin:0 20px;
 text-align:center
}
.elSprite {
 display:inline-block
}
.embedHideText {
 display:block;
 overflow:hidden;
 text-indent:110%;
 white-space:nowrap
}
.embedNonTextLink:active {
 opacity:1
}