/* General */ #ctf{ overflow-y: auto; -ms-overflow-y: auto; } #ctf .ctf-item{ padding: 15px 5px; border-top: 1px solid #ddd; border-top: 1px solid rgba(0,0,0,0.1); overflow: hidden; } #ctf .ctf-item:first-child{ border-top: none; } /* Header */ #ctf .ctf-header{ float: left; clear: both; margin: 0; padding: 5px 5px 15px 5px; line-height: 1.2; width: 100%; border-bottom: 1px solid #ddd; border-bottom: 1px solid rgba(0,0,0,0.1); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #ctf .ctf-header a{ float: left; display: block; min-width: 100%\9; } /* Header avatar */ #ctf .ctf-header-img{ float: left; position: relative; width: 48px; margin: 0 0 0 -100% !important; overflow: hidden; -moz-border-radius: 40px; -webkit-border-radius: 40px; border-radius: 40px; } #ctf .ctf-header-img img{ display: block; float: left; margin: 0 !important; padding: 0 !important; border: none !important; -moz-border-radius: 40px; -webkit-border-radius: 40px; border-radius: 40px; } #ctf .ctf-author-avatar { clear: both; margin: 3px 6px 0 -53px; } #ctf .ctf-author-name { margin-left: 6px; } #ctf .ctf-author-box { margin-left: 53px; } /* Header avatar hover */ #ctf .ctf-header-img-hover, #ctf .ctf-header-generic-icon{ display: none; position: absolute; width: 100%; top: 0; bottom: 0; left: 0; text-align: center; color: #fff; background: #1b95e0; background: rgba(27,149,224,0.85); -moz-border-radius: 40px; -webkit-border-radius: 40px; border-radius: 40px; } #ctf .ctf-header-img-hover .fa, #ctf .ctf-header-generic-icon .fa{ position: absolute; top: 50%; left: 50%; margin-top: -10px; margin-left: -8px; font-size: 20px; } /* Header text */ #ctf .ctf-header-text{ float: left; width: 100%; padding-top: 5px; } #ctf .ctf-no-bio .ctf-header-text{ padding-top: 13px; } #ctf .ctf-header a{ text-decoration: none; } #ctf .ctf-header-text .ctf-header-user, #ctf .ctf-header-text p{ float: left; clear: both; width: auto; margin: 0 0 0 60px !important; padding: 0 !important; } #ctf .ctf-header-name{ font-weight: bold; margin-right: 6px; } #ctf .ctf-header-text .ctf-header-bio{ padding: 0 !important; } #ctf .ctf-header-text .ctf-verified{ margin-right: 5px; } /* Follow */ #ctf .ctf-header .ctf-header-follow{ display: inline-block; padding: 3px 6px; margin: 0 0 0 2px; position: relative; top: -2px; background: #1b95e0; color: #fff; font-size: 11px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; -moz-transition: background 0.6s ease-in-out; -webkit-transition: background 0.6s ease-in-out; -o-transition: background 0.6s ease-in-out; transition: background 0.6s ease-in-out; } #ctf .ctf-header .ctf-header-follow .fa{ margin-right: 3px; font-size: 12px; } #ctf .ctf-header a:hover .ctf-header-follow{ background: #0c7abf; -moz-transition: background 0.2s ease-in-out; -webkit-transition: background 0.2s ease-in-out; -o-transition: background 0.2s ease-in-out; transition: background 0.2s ease-in-out; } /* Generic header version */ #ctf .ctf-header-type-generic .ctf-header-img{ color: #fff; width: 48px; height: 48px; position: relative; } #ctf .ctf-header-type-generic .ctf-header-link:hover .ctf-header-generic-icon{ background: #0c7abf; } #ctf .ctf-header-type-generic .ctf-header-no-bio{ padding-top: 9px !important; font-size: 16px; font-weight: bold; } #ctf .ctf-header-type-generic .ctf-header-generic-icon{ display: block; color: #fff; background: #1b95e0; -moz-transition: background 0.2s ease-in-out; -webkit-transition: background 0.2s ease-in-out; -o-transition: background 0.2s ease-in-out; transition: background 0.2s ease-in-out; } #ctf .ctf-header-type-generic:hover .ctf-header-generic-icon{ display: block; opacity: 1; } #ctf .ctf-header .ctf-header-user{ font-size: 16px; line-height: 1.3; -ms-word-wrap: break-word; word-break: break-word; } #ctf .ctf-header p, #ctf .ctf-header .ctf-header-screenname{ font-size: 13px; line-height: 1.3; } /* screenreader */ .ctf-screenreader{ text-indent: -9999px !important; display: inline-block !important; width: 0 !important; height: 0 !important; line-height: 0 !important; } /* No bio */ #ctf .ctf-header-text.sbi-no-info .ctf-header-user{ padding-top: 9px !important; } #ctf .ctf-header-text.sbi-no-bio .ctf-header-counts{ clear: both; } /* Context */ #ctf .ctf-context { float: left; width: 100%; margin-left: 57px; margin-bottom: 2px; } #ctf .ctf-retweet-icon{ display: inline-block; font-size: inherit; background: #19cf86; color: #fff !important; padding: 1px 3px 3px 3px; line-height: 1; margin: 0 5px 0 0; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } /* Author */ #ctf .ctf-author-box{ margin-left: 56px; } #ctf .ctf-author-avatar{ width: 48px; height: 48px; margin: 3px 6px 0 -56px; float: left; overflow: hidden; border: none; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } #ctf .ctf-author-avatar img{ margin: 0 !important; padding: 0; } #ctf .ctf-author-name, #ctf .ctf-author-screenname, #ctf .ctf-verified, #ctf .ctf-tweet-meta{ margin-left: 4px; margin-right: 4px; display: inline-block; } #ctf .ctf-screename-sep{ margin: 0 2px; display: inline-block; } #ctf .ctf-author-name{ font-weight: bold !important; margin-top: 4px; } #ctf .ctf-author-box-link{ color: black; text-decoration: none; display: inline; line-height: 1.5 !important; } #ctf .ctf-verified, #ctf .ctf-quoted-verified { color: #77c7f7; margin-left: 0; } #ctf .ctf-quoted-verified { margin-right: 4px; } #ctf .ctf-tweet-meta{ display: inline-block; } #ctf .ctf-replied-to-text a { font-size: inherit; color: inherit; font-weight: inherit; } #ctf p.ctf-tweet-text, #ctf p.ctf-media-link { padding: 0 !important; margin: 0 !important; } #ctf .ctf-tweet-content, #ctf .ctf-tweet-actions{ margin-left: 58px; } /* No avatar */ #ctf .ctf-hide-avatar .ctf-context, #ctf .ctf-hide-avatar .ctf-tweet-content, #ctf .ctf-hide-avatar .ctf-tweet-actions, #ctf .ctf-hide-avatar .ctf-quoted-tweet, #ctf .ctf-hide-avatar .ctf-author-box, #ctf.ctf-narrow .ctf-hide-avatar .ctf-context, #ctf.ctf-narrow .ctf-hide-avatar .ctf-tweet-content, #ctf.ctf-narrow .ctf-hide-avatar .ctf-tweet-actions, #ctf.ctf-narrow .ctf-hide-avatar .ctf-quoted-tweet, #ctf.ctf-narrow .ctf-hide-avatar .ctf-author-box, #ctf.ctf-super-narrow .ctf-hide-avatar .ctf-context, #ctf.ctf-super-narrow .ctf-hide-avatar .ctf-tweet-content, #ctf.ctf-super-narrow .ctf-hide-avatar .ctf-tweet-actions, #ctf.ctf-super-narrow .ctf-hide-avatar .ctf-quoted-tweet, #ctf.ctf-super-narrow .ctf-hide-avatar .ctf-author-box{ margin-left: 0; } /*Quoted tweets*/ #ctf .ctf-quoted-tweet{ display: block; /*float: left;*/ clear: both; margin: 7px 0 5px 58px; padding: 8px 12px; border: 1px solid #ddd; border: 1px solid rgba(0,0,0,0.1); text-decoration: none; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-transition: background 0.1s ease-in-out; -webkit-transition: background 0.1s ease-in-out; -o-transition: background 0.1s ease-in-out; transition: background 0.1s ease-in-out; } #ctf .ctf-quoted-tweet:hover, #ctf .ctf-quoted-tweet:focus{ background: #eee; background: rgba(0,0,0,0.05); border: 1px solid #ddd; border: 1px solid rgba(0,0,0,0.05); -moz-transition: background 0.1s ease-in-out; -webkit-transition: background 0.1s ease-in-out; -o-transition: background 0.1s ease-in-out; transition: background 0.1s ease-in-out; } #ctf .ctf-quoted-author-name{ font-weight: bold; margin-right: 4px; } #ctf .ctf-quoted-tweet p{ margin: 2px 0; } /* Actions */ #ctf .ctf-tweet-actions a{ padding: 2px 10px 2px 5px; float: left; } #ctf .ctf-tweet-actions a.ctf-reply, #ctf .ctf-tweet-actions a.ctf-retweet, #ctf .ctf-tweet-actions a.ctf-like{ color: #bbb; color: rgba(0,0,0,0.30); text-decoration: none; border: none; -moz-transition: color 0.1s ease-in-out; -webkit-transition: color 0.1s ease-in-out; -o-transition: color 0.1s ease-in-out; transition: color 0.1s ease-in-out; } #ctf .ctf-tweet-actions .ctf-reply{ margin-left: -5px; } #ctf .ctf-tweet-actions a:hover, #ctf .ctf-tweet-actions a:focus{ -moz-transition: color 0.1s ease-in-out; -webkit-transition: color 0.1s ease-in-out; -o-transition: color 0.1s ease-in-out; transition: color 0.1s ease-in-out; } #ctf .ctf-tweet-actions .ctf-reply:hover, #ctf .ctf-tweet-actions .ctf-reply:focus{ color: #E34F0E !important; } #ctf .ctf-tweet-actions .ctf-retweet:hover, #ctf .ctf-tweet-actions .ctf-retweet:focus{ color: #19cf86 !important; } #ctf .ctf-tweet-actions .ctf-like:hover, #ctf .ctf-tweet-actions .ctf-like:focus{ color: #e81c4f !important; } #ctf .ctf-action-count { display: none; float: right; padding-left: 3px; font-weight: bold; font-size: 11px; line-height: 14px; } #ctf .ctf-tweet-text-media-wrap, #ctf .ctf-quoted-tweet-text-media-wrap{ margin-left: 5px; padding: 0 1px 0 4px; display: inline-block; border: 1px solid #ddd; border: 1px solid rgba(0,0,0,0.15); color: inherit; text-decoration: none; line-height: 1.5; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; -moz-transition: background 0.1s ease-in-out; -webkit-transition: background 0.1s ease-in-out; -o-transition: background 0.1s ease-in-out; transition: background 0.1s ease-in-out; } #ctf .ctf-tweet-text-media-wrap .fa, #ctf .ctf-quoted-tweet-text-media-wrap .fa{ padding-left: 3px; } #ctf .ctf-tweet-text-media-wrap:hover, #ctf .ctf-tweet-text-media-wrap:focus{ background: #eee; background: rgba(0,0,0,0.05); border: 1px solid #ddd; border: 1px solid rgba(0,0,0,0.1); -moz-transition: background 0.1s ease-in-out; -webkit-transition: background 0.1s ease-in-out; -o-transition: background 0.1s ease-in-out; transition: background 0.1s ease-in-out; } /* Load more */ #ctf #ctf-more{ display: block; border: none; background: #eee; background: rgba(0,0,0,0.05); width: 100%; min-height: 30px; padding: 5px 0; margin: 0; position: relative; text-align: center; box-sizing: border-box; outline: none; text-decoration: none; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-transition: background 0.1s ease-in-out; -webkit-transition: background 0.1s ease-in-out; -o-transition: background 0.1s ease-in-out; transition: background 0.1s ease-in-out; } #ctf #ctf-more:hover{ background: #ddd; background: rgba(0,0,0,0.1); -moz-transition: background 0.1s ease-in-out; -webkit-transition: background 0.1s ease-in-out; -o-transition: background 0.1s ease-in-out; transition: background 0.1s ease-in-out; } #ctf #ctf-more.ctf-loading span{ -moz-transition: opacity 0.5s ease-in-out; -webkit-transition: opacity 0.5s ease-in-out; -o-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out; } #ctf #ctf-more.ctf-loading span{ filter: alpha(opacity=0); opacity: 0; } #ctf .ctf-loader { width: 20px; height: 20px; position: absolute; top: 50%; left: 50%; margin: -10px 0 0 -10px; background-color: none; background-color: rgba(0,0,0,0.5); border-radius: 100%; -webkit-animation: ctf-sk-scaleout 1.0s infinite ease-in-out; animation: ctf-sk-scaleout 1.0s infinite ease-in-out; } @-webkit-keyframes ctf-sk-scaleout { 0% { -webkit-transform: scale(0) } 100% { -webkit-transform: scale(1.0); opacity: 0; } } @keyframes ctf-sk-scaleout { 0% { -webkit-transform: scale(0); transform: scale(0); } 100% { -webkit-transform: scale(1.0); transform: scale(1.0); opacity: 0; } } /* Credit link */ .ctf-credit-link{ width: 100%; clear: both; padding: 5px 0; margin-top: 5px; text-align: center; font-size: 12px; } .ctf-credit-link .fa{ margin-right: 4px; } /* Default styles */ #ctf.ctf-styles .ctf-author-screenname, #ctf.ctf-styles .ctf-context, #ctf.ctf-styles .ctf-twitterlink, #ctf.ctf-styles .ctf-tweet-meta{ font-size: 12px; } /* Errors */ #ctf .ctf-error{ width: 100%; text-align: center; } #ctf .ctf-error p, #ctf .ctf-error iframe, #ctf .ctf-error code{ padding: 0; margin: 0 2px; } #ctf .ctf-error-user p{ padding-bottom: 5px; } #ctf .ctf-error-user{ width: 100%; } #ctf .ctf-error-admin{ margin-top: 15px; display: inline-block; } #ctf .ctf-error code{ display: block; padding: 4px; } /* Out of tweets */ #ctf .ctf-out-of-tweets{ width: 100%; } #ctf .ctf-out-of-tweets{ display: block; border: 1px solid rgba(0,0,0,0.1); background: none; background: none; width: 100%; min-height: 30px; padding: 5px 0; margin: 0; position: relative; text-align: center; box-sizing: border-box; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } #ctf .ctf-out-of-tweets p, #ctf .ctf-out-of-tweets iframe{ margin: 0 2px; padding: 0; } #ctf .ctf-out-of-tweets p{ padding: 3px; display: none; } /* Mobile / Narrow */ #ctf.ctf-narrow .ctf-author-avatar, #ctf.ctf-narrow .ctf-author-avatar img{ width: 38px; height: 38px; } #ctf.ctf-narrow .ctf-tweet-content, #ctf.ctf-narrow .ctf-tweet-actions, #ctf.ctf-narrow .ctf-quoted-tweet{ margin-left: 48px; } #ctf.ctf-narrow .ctf-context { margin-left: 49px; } #ctf.ctf-narrow .ctf-author-box{ margin-left: 46px; } #ctf.ctf-narrow .ctf-author-avatar { margin-left: -46px; } #ctf.ctf-narrow .ctf-tweet-content{ padding: 3px 0 5px 0; } #ctf.ctf-narrow .ctf-tweet-actions { float: left; clear: both; } /* Super narrow */ #ctf.ctf-super-narrow .ctf-context, #ctf.ctf-super-narrow .ctf-tweet-content, #ctf.ctf-super-narrow .ctf-tweet-actions, #ctf.ctf-super-narrow .ctf-quoted-tweet { margin-left: 0; } #ctf.ctf-super-narrow .ctf-author-box{ min-height: 32px; margin-bottom: 2px; } #ctf.ctf-super-narrow .ctf-author-avatar, #ctf.ctf-super-narrow .ctf-author-avatar img{ width: 32px; height: 32px; } #ctf.ctf-super-narrow .ctf-author-box{ margin-left: 38px; float: left; clear: both; } #ctf.ctf-super-narrow .ctf-author-avatar { margin-left: -38px; margin-top: 0; } #ctf.ctf-super-narrow .ctf-author-screenname, #ctf.ctf-super-narrow .ctf-screename-sep { display: none; } #ctf.ctf-super-narrow .ctf-context { padding-bottom: 5px; } #ctf.ctf-super-narrow .ctf-author-name{ display: inline-block; } #ctf.ctf-super-narrow .ctf-tweet-content{ float: left; clear: both; } #ctf.ctf-super-narrow .ctf-credit-link{ font-size: 10px; } #ctf.ctf-super-narrow .ctf-header-bio{ margin: 0 !important; padding-top: 5px; } #ctf.ctf-super-narrow .ctf-header-user{ min-height: 48px; } #ctf.ctf-super-narrow .ctf-header-text{ padding-top: 10px; } #ctf.ctf-super-narrow .ctf-header-follow{ margin-top: 5px; } #ctf.ctf-super-narrow .ctf-more span{ display: block; margin-top: 3px; } /* Icons */ @font-face{ font-family:'FontAwesome'; src:url('../fonts/fontawesome-webfont.eot?v=4.6.1'); src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.6.1') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.6.1') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.6.1') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.6.1#fontawesomeregular') format('svg'); font-weight:normal; font-style:normal } #ctf .fa{ display:inline-block; font:normal normal normal 14px/1 FontAwesome; font-size:inherit; text-rendering:auto; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale } #ctf .fa-retweet:before{content:"\f079"} #ctf .fa-reply:before{content:"\f112"} #ctf .fa-heart:before{content:"\f004"} #ctf .fa-check-circle:before{content:"\f058"} #ctf .fa-twitter:before{content:"\f099"} #ctf .fa-file-video-o:before{content:"\f1c8"} #ctf .fa-picture-o:before{content:"\f03e"} /* On mobile make the min-width 100% */ @media all and (max-width: 640px){ #ctf.ctf-width-resp{ width: 100% !important; } }