@font-face { font-family: "Open Sans"; src: url("OpenSans-Regular.ttf"); font-weight: normal; font-style: normal; } @font-face { font-family: "Open Sans"; src: url("OpenSans-Bold.ttf"); font-weight: bold; } @font-face { font-family: "Symbola"; src: url("Symbola.ttf"); } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, textarea { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; box-sizing: border-box; font-family: 'Open Sans', sans-serif, Symbola; } textarea, input { outline: none; } ol, ul, li { list-style: none; } a { color: #E34F42; text-decoration: none; } a:hover { text-decoration: underline; cursor: pointer; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } html, body { height: 100%; min-height: 100%; background: #ede9dc; } h3 { font-size: 14px; color: rgba( 0, 0, 0, .5 ); } samp { background-color: #F0EFCC; padding-left: 2px; padding-right: 2px; } .clearfix:before, .clearfix:after { display: block; content: ""; clear: both; } .isFollowing:after { color: #1a1; content: '\2714'; } /************************************* ************** BUTTONS *************** **************************************/ button { color: rgba(255, 255, 255, .8); background: #45474d; border: none; padding: 5px 10px; cursor: pointer; } button:hover { color: #fff; } button:disabled, button.disabled { opacity: .4; } button:disabled:hover, button.disabled:hover { color: rgba(255, 255, 255, .8); } button.follow, button.unfollow, .following-own-modal .following-list button.private { color: rgba( 0, 0, 0, .4 ); background: none; border: solid 1px rgba( 0, 0, 0, .2 ); padding: 3px 15px; font-size: 12px; } .following-own-modal .following-list .public-following { padding: 4px 16px; font-size: 12px; } .following-own-modal .following-list .public-following:hover { color: rgba( 0, 0, 0, .4 ); background: none; border: solid 1px rgba( 0, 0, 0, .2 ); padding: 3px 15px; } button.follow:hover, button.unfollow:hover, .following-own-modal .following-list button.private:hover { color: #fff; background: #45474d; } .follow-suggestions .follow, .follow-suggestions .unfollow { display: inline-block; float: right; margin-right: 10px; } .a-button { color: dimgrey; background-color: whitesmoke; border: none; font-size: 12px; text-align: center; width: auto; padding: 4px 12px; vertical-align: middle; transition: all .1s linear; } .a-button:hover { color: #000; background: #fff; } .a-button:disabled { opacity: .9; } .a-button:disabled:hover { color: dimgrey; } .b-buttons { text-align: right; padding: 4px; } .b-buttons button { color: rgba(0, 0, 0, .7); background-color: rgba(0, 0, 0, .08); border: none; font-size: 12px; text-align: center; width: auto; padding: 4px 12px; transition: all .1s linear; } .b-buttons button:hover { color: #FFF; background: #45474D; } /************************************* **************** MENU **************** **************************************/ .userMenu { width: 900px; position: fixed; left: 50%; margin: 0 0 0 -450px; height: 40px; background: #45474d; z-index: 2; } .userMenu.w1200 { width: 1200px; margin-left: -600px; } .userMenu:after { content: ""; position: absolute; right: 0; width: 34px; height: 54px; background: url(../img/twisterarmy.png) no-repeat right 5px; } .userMenu > ul > li { float: left; height: 40px; margin: 0; } .userMenu > ul > li > a { line-height: 40px; height: 40px; padding: 0 20px 0 45px; display: inline-block; color: #fff; font-size: 14px; font-weight: bold; opacity: .7; transition: all .2s linear; position: relative; } .userMenu li:hover, .userMenu li:active { background-color: rgba(0, 0, 0 , .4); } .userMenu li:hover > a, .userMenu li:active > a { text-decoration: none; opacity: 1; } .userMenu li.current { background-color: #B43E34; } .userMenu li.current > a { color: #fff; opacity: 1; } .userMenu li.userMenu-home > a { background: url(../img/home.png) no-repeat 5px center; } .userMenu li.userMenu-connections > a { background: url(../img/connections.png) no-repeat 5px center; padding: 0 24px; opacity: 1; } .userMenu li.userMenu-network > a { background: url(../img/network.png) no-repeat 5px center; } .userMenu li.userMenu-messages > a { background: url(../img/messages.png) no-repeat center center; padding: 0 24px; opacity: 1; } .userMenu li.userMenu-messages > a:empty { padding: 0 20px 0 30px; opacity: .7; } .userMenu li.userMenu-groupmessages > a { background: url(../img/groupmessages.png) no-repeat center center; background-size: 22px 22px; padding: 0 24px; opacity: 0.9; } .userMenu li.userMenu-favs > a { padding: 0 14px; opacity: 1; } .userMenu li.userMenu-favs > a:before { content: '★'; font-size: 24px; } .userMenu li.userMenu-config { float: right; position: relative; margin-right: 40px; } .userMenu li.userMenu-search { float: right; position: relative; } .userMenu li.userMenu-search:hover { background-color: transparent; } .userMenu li.userMenu-config > a { background: url(../img/config.png) no-repeat 5px center; padding: 0 30px 0 45px; } .userMenu li.userMenu-config > a:after { content: "▼"; position: absolute; font-size: 10px; transition: all .2 linear; } .wrapper { width: 900px; margin: 0 auto; background: #f8f5ee; padding: 55px 15px 15px 15px; position: relative; z-index: 1; min-height: 100%; } .wrapper.w1200 { width: 1200px; padding: 55px 7px 15px 7px; } .dashboard.left { width: 320px; position: fixed; top: 55px; } .dashboard.right { width: 320px; position: fixed; top: 55px; margin-left: 864px; } .module { border: solid 1px rgba( 69, 71, 77, .1 ); background: #fff; } .dashboard .module { margin: 0 0 3%; } .messages-qtd { position: absolute; background: #b43e34; color: #fff; padding: 3px; line-height: 12px; font-size: 8px; margin-top: 4px; } .userMenu-connections .messages-qtd { margin: 4px 0 0 10px; } #modals-minimized { background-color: rgba(0, 0, 0, 0); z-index: 9000; position: fixed; bottom: 0; left: 50%; width: 900px; height: 24px; overflow: auto; margin-left: -450px; padding: 0 4%; } #modals-minimized.w1200 { width: 1200px; margin-left: -600px; } #modals-minimized li { display: inline-block; opacity: .88; font-size: 10px; color: #FFF; background-color: #B43E34; margin: 0 2px; padding: 4px 8px; } #modals-minimized li:hover { opacity: 1; cursor: pointer; } /******************************************************* ****************** CONFIG SUBMENU & SEARCH RESULTS ***** *******************************************************/ .dialog-modal { display: none; background: rgba( 255, 255, 255, 1 ); position: absolute; top: 45px; right: 10px; width: 250px; border: solid 1px rgba( 69, 71, 77, .1 ); border-right: solid 6px rgba( 227, 79, 66, .82 ); box-shadow: 8px 10px 15px 0px rgba(0,0,0, .3); } .dialog-modal:after { content:""; width: 1px; background: transparent; position: absolute; top: -10px; right: 30px; border-right: solid 10px transparent; border-left: solid 10px transparent; border-bottom: solid 10px rgba( 255, 255, 255, 1 ); } .userMenu-search .dialog-modal:after { right: auto; left: 80px; } .dropdown-menu-item { display: block; padding: 10px; font-size: 12px; border-top: solid 1px rgba( 69, 71, 77, .1 ); color: rgba( 0, 0, 0, .7 ); } .dropdown-menu-item, .dropdown-menu-item:hover { text-decoration: none; } .dropdown-menu-item:hover, .userMenu-search-sugestions a:hover, .userMenu-search-profiles li:hover a { background: #FEFEDF; } .userMenu-search-profiles button { position: absolute; right: 5px; bottom: 5px; background: #fff; z-index: 2; } .userMenu-search input[type="text"] { float: right; padding: 3px 10px; margin: 9px 20px 0 0; border-radius: 10px; border: none; height: 16px; font-size: 13px; } .userMenu-search-sugestions { border-bottom: solid 1px rgba( 69, 71, 77, .1 ); } .userMenu-search-sugestions a { color: rgba( 0, 0, 0, .7 ); padding: 5px 20px; font-size: 12px; display: block; } .userMenu-search-profiles a { padding: 7px 4px; display: block; position: relative; z-index: 1; } .userMenu-search-profiles .mini-profile-info { padding: 0; } .userMenu-search-profiles .mini-profile-photo { width: 36px; height: 36px; margin: 0 5px; } .userMenu-search-profiles .mini-profile-name { font-size: 12px; font-weight: bold; color: rgba( 0, 0, 0, .7 ); padding: 0 75px 0 15px; } /*********************************** ********************* MINI PROFILE ***********************************/ .mini-profile { margin-bottom: 10px; } .mini-profile-info { position: relative; padding: 5px; } .mini-profile-view { display: block; color: rgba( 0, 0, 0, .5 ); font-size: 12px; position: absolute; top: 32px; left: 65px; z-index: 1; } .mini-profile-name { padding: 10px 5px 30px 5px; display: block; position: relative; z-index: 2; } .profile-data { border-left: none; border-right: none; height: 60px; display: table; width: 100%; } .profile-data li { border-right: solid 1px rgba( 69, 71, 77, .1 ); padding: 10px 15px 2px 10px; height: 100%; display: table-cell; } .profile-data li:last-child { border-right: none; } .profile-data li a { color: rgba( 0, 0, 0, .5 ); font-size: 13px; } .profile-data li a:hover { color: #b43e34; } .profile-data li a span.posts-count, .profile-data li a span.following-count, .profile-data li a span.followers-count { font-weight: bold; display: block; font-size: 16px; } .mini-profile-actions { position: absolute; top: 0; right: 8px; } .mini-profile-actions span { color: #e34f42; cursor: pointer; font-size: 12px; display: inline-block; position: relative; z-index: 10; } .mini-profile-actions ul { height: 0; overflow: hidden; position: absolute; z-index: 20; right: 0; transition: height .2s linear; background: #fff; } .mini-profile-actions:hover ul { /*height: ;*/ border: solid 1px rgba(69, 71, 77, .1); border-right: solid 4px rgba(227, 79, 66, .82); box-shadow: 8px 10px 10px 0px rgba(0, 0, 0, .2); } .mini-profile-actions ul > li { white-space: nowrap; color: rgba(0, 0, 0, .7); font-size: 12px; cursor: pointer; padding: 4px 16px 4px 8px; } .mini-profile-actions ul > li:hover { background-color: #FEFEDF; } .mini-profile-info a:hover { text-decoration: none; } .who-follow { height: auto; background-color: rgba(69, 71, 77, 0.1); overflow: hidden; font-size: 12px; } .show-more-followers { color: #f11; font-weight: bold; cursor: pointer; float: right; } .mini-follower-link { display: inline-block; margin-right: 10px; } .mini-follower-link:before { content: " \2027"; } /*********************************** ********************* POST AREA **** ***********************************/ .post-area-new { padding-bottom: 4px; } .post-area-new textarea { resize: none; width: 445px; display: block; transition: all .3s linear; -webkit-transition: height 0.3s linear; -moz-transition: height 0.3s linear; -o-transition: height 0.3s linear; -ms-transition: height 0.3s linear; height: 28px; border-radius: 3px; border: solid 1px rgba(0, 0, 0, .3 ); margin-left: 55px; padding: 4px; font-size: 13px; } .post-area-new textarea:focus { border: solid 1px rgba( 227, 79, 66, .5 ); } .mini-profile .post-area-new { padding: 9px; } .mini-profile .post-area-new textarea { margin-left: 0; width: 100%; } .post-area-new.open textarea { height: 80px; } textarea.splited-post { box-shadow: none!important; height: 28px; } #post-preview { background-color: #F2FFBA; border: solid 1px #B4C669; font-size: 11px; line-height: normal; margin: 4px 0; padding: 4px; word-wrap: break-word; } #opt-form-post-preview #post-preview { width: 76%; margin-left: 16px; padding: 8px; } #opt-form-post-preview #post-preview .preview-container { margin-top: 8px; margin-bottom: -10px; /* to neutralize .image-preview */ } .splited-post-counter { color: rgba(0, 0, 0, 0.3); font-weight: bold; } .splited-post-counter:before { content: '\2026'; } .post-area-extras { overflow: hidden; height: 0; text-align: right; } .post-submit { background: #45474d; color: rgba( 255, 255, 255, .8 ); border: none; padding: 5px 10px; cursor: pointer; display: inline-block; margin-top: 4px; } .undo-unicode { font-family: sans-serif, Symbola; } .post-area-new.open > .post-area-extras { height: 35px; transition: all .6s linear; } .post-area-new .post-textarea-edit-bar { font-size: 11px; margin: 2px 0; } .post-area-new .post-textarea-edit-bar > * { margin: 2px 4px; } .post-area-remaining { font-size: 13px; } .post-area-remaining.warn { color: #ff0000; } .post .show-more { font-size: 13px; font-weight: bold; margin-left: 60px; color: rgba(0, 0, 0, 0.5); } .post .show-more:before { content: '💭'; } /* FIXME need to rework and replace all .twister-user to get same vis */ .twister-peer { margin: 0; min-height: 72px; padding: 4px; border-bottom: solid 1px rgba(69, 71, 77, .1); border-top: solid 1px rgba(69, 71, 77, .1); } .twister-peer + .twister-peer { border-top: none; } .twister-peer .avatar { float: left; width: 48px; height: 48px; overflow: hidden; margin: 4px; } .twister-peer .avatar img { width: 48px; height: auto; border-radius: 16%; } .twister-peer .name, .twister-peer .alias { color: #E34F42; display: inline-block; } .twister-peer .name { font-weight: 600; } .twister-peer .avatar:hover, .twister-peer .name:hover, .twister-peer .alias:hover { cursor: pointer; } .twister-peer .bio { text-align: center; padding: 4px; } .twister-peer .bio a { color: #E34F42; } .avatar.tiny { width: 24px; height: 24px; border-radius: 100%; } /*********************************** ********************* WHO TO FOLLOW ***********************************/ .who-to-follow, .new-users { padding: 10px; margin-bottom: 10px; } .who-to-follow h3, .new-users h3 { display: inline; } .twister-user { clear: both; overflow: hidden; padding-bottom: 4px; margin-top: 4px; border-bottom: solid 1px rgba( 69, 71, 77, .1 ); border-top: solid 1px rgba( 69, 71, 77, .1 ); } .twister-user + .twister-user { border-top: none; } .twister-user-photo { margin: 5px; display: inline-block; float: left; vertical-align: middle; width: 48px; height: 48px; overflow: hidden; border-radius: 20%; /*transform: rotate( 45deg );*/ } .twister-user-info { position: relative; } .twister-user-info span { vertical-align: top; } .twister-user .bio a { color: #e34f42; } .followers, .latest-activity { font-size: 12px; color: rgba( 0, 0, 0, .6 ); margin-left: 58px; } .followed-by, .latest-activity .time { color: #e34f42; font-size: 13px; cursor: pointer; } .twister-user-name, .twister-by-user-name { font-weight: bold; font-size: 14px; color: #e34f42; text-decoration: none; } .twister-user-tag { font-style: italic; font-size: 12px; opacity: .6; margin-top: 4px; display: inline-block; letter-spacing: 0px; } .twister-user-remove{ float: right; font-size: 12px; margin: 5px; opacity: .5; text-decoration: none; font-weight: bold; cursor: pointer; position: absolute; top: 0; right: 0; font-size: 120%; display: none; } .twister-user:hover .twister-user-remove{ display: inline-block; text-decoration: none; } .twister-user-remove:hover{ opacity: 1; } .refresh-toptrends, .twistday-reminder .refresh, .refresh-users, .view-all-users { color: #e34f42; cursor: pointer; font-size: 12px; } /*********************************** ************ TOP TRENDS ************ ***********************************/ .module.toptrends { padding: 8px 4px; } ol.toptrends-list { margin: 0% 5% 5% 5%; padding: 5px; border-bottom: solid 1px rgba( 69, 71, 77, .1 ); border-top: solid 1px rgba( 69, 71, 77, .1 ); } .toptrends h3 { margin: 5% 0% 2% 5%; display: inline; } /*********************************** ********* TWISTDAY REMINDER ******** ***********************************/ .module.twistday-reminder { padding: 8px 4px; } .twistday-reminder h3 { margin: 5% 0% 2% 5%; display: inline; } .twistday-reminder h4 { margin: 1% 1% 1% 16%; font-size: 10px; color: rgba(0, 0, 0, 0.5); } .twistday-reminder a:hover { text-decoration: none; } .twistday-reminder .list { margin: 0% 5% 5% 5%; padding: 5px; } .twistday-reminder .twister-user-info { margin: 1.2% 0 -2.8% 0; } .twistday-reminder .twister-user-tag, .twistday-reminder .twister-user-full { display: block; margin: 0; text-align: center; } .twistday-reminder .twisterday { font-size: 11px; margin-left: 11%; } .twistday-reminder .twisterday:hover { cursor: pointer; } /*********************************** ********************* POST BOARD *** ***********************************/ .postboard { margin-left: 335px; /*height: 150%;*/ background: rgba( 255, 255, 255, .5 ); border: solid 1px rgba( 69, 71, 77, .05 ); padding: 10px; } .w1200 .postboard { margin-left: 327px; width: 530px; } .postboard h2 { font-weight: bold; line-height: 40px; color: rgba( 255, 255, 255, 1 ); font-variant: small-caps; border-bottom: solid 1px rgba( 69, 71, 77, .1 ); margin: 0 0 5px 0; padding-left: 10px; background: #e34f42; width: 100%; } .postboard-posts { position: relative; z-index: 1; } .postboard-news { float: right; background: rgba( 0, 0, 0, .2 ); border: none; display: inline-block; margin: 0; color: rgba( 255, 255, 255, .8 ); padding: 0 15px; line-height: 40px; cursor: pointer; transition: all .2s linear; -moz-transition: all .2s linear; } .postboard-news:hover { color: #fff; padding: 0 15px 0 25px; } .post, .post .post, .post .original.post, .post .post.open { background: #fff; position: relative; margin: 0 0 1px 0; transition: background .1s linear; -moz-transition: background .1s linear; } .post.new { background-color: #FFFFED; } .post.promoted > .post-data .post-text::after { font-size: 8px; color: #FFF; background-color: #E34F42CC; margin: 0px 8px; padding: 2px 4px; content: attr(data-promoted); } .post.promoted > .post-data:hover .post-text::after { background-color: #E34F42; } .post.open { margin: 10px 0; } .postboard-posts > .post.open { /*border-left: none; border-right: none; border-top: solid 2px #e34f42; border-bottom: solid 2px #e34f42;*/ border: none; } .postboard-posts > .post:after { content: ""; position: absolute; right: 0; top: 0; width: 0; height: 100%; background: #e34f42; transition: all .2s linear; } .postboard-posts > .post.open:after { width: 5px; /*right: -5px;*/ } .post:hover { background: #fefedf; cursor: pointer; } .post .expanded-post .original { background: #fefedf; } .post-photo, .mini-profile-photo { display: inline-block; float: left; vertical-align: middle; width: 48px; height: 48px; overflow: hidden; border-radius: 20%; margin: 6px; /*transform: rotate( 45deg );*/ } .post-photo img, .mini-profile-photo img { width: 48px; height: auto; } .post-info span { vertical-align: top; } .post-info-name, .mini-profile-name { font-weight: bold; font-size: 14px; color: #e34f42; text-decoration: none; padding-left: 2px; } .post-info-tag { font-style: italic; font-size: 12px; opacity: .6; margin-top: 4px; display: inline-block; letter-spacing: 0px; } .post-info-time { float: right; font-size: 12px; margin: 4px 8px 0; opacity: .5; text-decoration: none; } .post-text { font-size: 13px; margin: 2px 16px 4px 60px; word-wrap: break-word; } .post-context { font-size: 11px; margin: 2px 16px 4px 60px; } .confirm-popup .message a, .post-text a, .post-context a, .mini-screen-name { color: #E34F42; } .mini-screen-name { font-size: 13px; top: 40px; } .post-rt-by div { display: inline; } .post-rt-by .prep:before, .post-rt-by .prep:after { content: ' '; } .post-rt-icon { display: inline-block; width: 16px; height: 16px; background: url(../img/repost.png) no-repeat left center; vertical-align: middle; margin: 2px; } .post-interactions { margin: 2px 10px 10px 60px; text-align: right; height: 23px; } .post-interactions span, .post-expand, .prompt-wrapper .switch-mode { color: #e34f42; cursor: pointer; font-size: 11px; } .post-expand { position: absolute; left: 60px; padding-top: 3px; } .related .post-expand { display: none; } .post-translate, .post-reply, .post-propagate, .post-favorite { background: url(../img/reply.png) no-repeat left center; padding-left: 18px; margin-right: 3px; opacity: .7; display: none; } .post:hover .post-translate, .post:hover .post-reply, .post:hover .post-propagate, .post:hover .post-favorite, .original.open .post-interactions .post-translate, .original.open .post-interactions .post-reply, .original.open .post-interactions .post-propagate, .original.open .post-interactions .post-favorite, .post:hover .original .post-interactions .post-translate, .post:hover .original .post-interactions .post-reply, .post:hover .original .post-interactions .post-propagate, .post:hover .original .post-interactions .post-favorite { display: inline-block; } .related.post:hover .post-translate, .related.post:hover .post-reply, .related.post:hover .post-propagate, .related.post:hover .post-favorite { display: inline-block; } .open .related .post-translate, .open .related .post-reply, .open .related .post-propagate, .open .related .post-favorite { display: none!important; } .open .related:hover .post-translate, .open .related:hover .post-reply, .open .related:hover .post-propagate, .open .related:hover .post-favorite { display: inline-block!important; } .post-propagate { background: url(../img/repost.png) no-repeat left center; } .post-translate { background: none; padding-left: 0; } .post-favorite { background: none; padding-left: 0; } .post-favorite:before { content: "★"; font-size: 18px; } .post-translate:hover, .post-reply:hover, .post-propagate:hover, .post-favorite:hover { text-decoration: underline; opacity: 1; } .expanded-content { display: none; padding: 5px 5px 0 5px; } .image-preview { max-height: 500px; max-width: 495px; width: auto; display: block; margin: 0 auto 10px auto; } .image-preview video { width: 100%; } .image-preview img { max-width: 100%; } .preview-container { max-height: 500px; width: 100%; text-align: center; overflow-y: auto; } .post-stats { display: flex; height: 34px; margin: 0 12px 8px 55px; border-top: solid 1px rgba(69, 71, 77, .1); border-bottom: solid 1px rgba(69, 71, 77, .1); } .post-stats > div { line-height: 16px; vertical-align: middle; } .post-stats .stat-count { font-size: 12px; color: rgba(0, 0, 0, .5); padding-right: 4px; border-right: solid 1px rgba(69, 71, 77, .1); } .post-stats .stat-count .stat-count-value { font-weight: bold; } .post-stats .avatar-row { padding: 4px; } .post-stats .avatar-row a { display: inline-block; position: relative; margin-right: 2px; } .post-stats .avatar-row a:hover .user-name-tooltip { display: inline-block; } .post .new-replies-available { text-align: center; } .post .new-replies-available button { font-size: 10px; color: #E34F42; background-color: unset; width: 100%; padding: 1px; } .post .new-replies-available button:hover { cursor: pointer; background-color: #FFF; } .user-name-tooltip { display: none; position: absolute; background: #e34f42; font-size: 12px; white-space: nowrap; padding: 3px 5px; color: #fff; top: -28px; left: 2px; border-radius: 5px; } .user-name-tooltip:after { content: ""; position: absolute; width: 0; left: 4px; bottom: -4px; border-top: solid 5px #e34f42; border-left: solid 5px transparent; border-right: solid 5px transparent; } .post-replies .sub-replies { border-left: solid 3px #E34F42; margin-left: 2px; } /*********************************** ******** LOGIN AND NETWORK PAGES *** ***********************************/ .singleBlock { background: rgba( 255, 255, 255, .5 ); border: solid 1px rgba( 69, 71, 77, .05 ); padding: 10px; } .singleBlock h2 { font-weight: bold; line-height: 40px; color: rgba( 255, 255, 255, 1 ); font-variant: small-caps; border-bottom: solid 1px rgba( 69, 71, 77, .1 ); margin: 0px 0px 12px 0px; padding-left: 5px; background: #e34f42; } .singleBlock h3 { font-weight: bold; margin: 10px 20% 10px 10px; border-bottom: solid 1px rgba( 0, 0, 0, .2 ); padding-bottom: 10px; } .network.singleBlock ul { padding-left: 20px; margin-left: 20px; } .network.singleBlock ul li { line-height: 36px; font-size: 13px; list-style: circle; } .network.singleBlock ul li > span { font-weight: bold; opacity: .7; } .singleBlock .spam-msg { resize: none; width: 100%; display: block; border-radius: 3px; padding: 4px; font-size: 13px; height: 80px; border: solid 1px rgba( 227, 79, 66, .5 ); box-shadow: 0 0 10px rgba(0, 0, 0, .3 ); line-height: 20px; position: relative; margin-left: -20px; margin-bottom: 10px; } .highlight { background: rgba(255, 230, 0, 0.5); padding: 3px 5px; margin: -3px -5px; line-height: 1.7; border-radius: 3px; display:inline-block; } .connection-status { border: 2px solid red; } .connection-status.connected { border: 2px solid green; } .network .post-area-extras { margin-right: 20px; } /************************************* ************* POPUP MODAL ************ **************************************/ .modal-wrapper { background: #fff; z-index: 3; position: fixed; top: 50%; left: 50%; width: 580px; height: 720px; overflow: hidden; margin: -360px 0 0 -290px; border-radius: 5px; box-shadow: 10px 12px 18px 0px rgba(0,0,0, .3); } .modal-header { background: #e34f42; position: relative; height: 30px; } .modal-header h3 { color: #fff; padding: 5px 10px; font-weight: bold; } .modal-content { background: #fff; overflow-y: auto; } .modal-blackout { background: rgba(0,0,0, .6); z-index: -1; position: fixed; left: 0; top: 0; width: 100%; height: 100%; } .modal-close, .minimize-modal { position: absolute; right: 0; top: 0; padding: 1px 10px; cursor: pointer; color: rgba( 255, 255, 255, .7 ); font-weight: bold; border-left: solid 1px rgba( 255, 255, 255, .3 ); transition: all .1s linear; } .modal-close:hover, .minimize-modal:hover { color: #fff; background: rgba( 0, 0, 0, .1 ); } .minimize-modal { right: 30px; } .modal-back, .mark-all-as-read { position: absolute; right: 60px; top: 0; padding: 1px 10px; cursor: pointer; color: rgba( 255, 255, 255, .7 ); font-weight: bold; border-left: solid 1px rgba( 255, 255, 255, .3 ); transition: all .1s linear; display: none; } .modal-back:hover, .mark-all-as-read:hover { color: #fff; background: rgba( 0, 0, 0, .1 ); } .mark-all-as-read { right: 90px; } .mark-all-as-read:before { content: '\2714'; } .modal-wrapper.reply .post { background: #ececed; padding: 10px 15px; } .inline-warn { background-color: #FEFEDF; padding: 10px; } .inline-warn .close { float: right; font-size: 1.2em; color: #e34f42; cursor: pointer; margin: -8px 2px 8px 8px; } .inline-warn .text { font-size: 0.8em; text-align: center; } .inline-warn .options { font-size: 0.8em; text-align: right; margin-top: 4px; } /************************************* ******* LOGIN TO ACCOUNT MODAL ******* **************************************/ .login-modal.modal-wrapper { height: auto; /*about 580px*/ margin-top: -290px; } .login-modal .module { margin: 4px; } .login-modal .module > div { width: 100%; margin: 4px 0; padding: 4px 12px; } .login-modal .module > div:last-child { text-align: right; margin: 8px 0; } .login-modal .module input { border: solid 1px rgba(0, 0, 0, .3); border-radius: 3px; width: 320px; margin: 12px 16px; padding: 2px 4px; } .login-modal .module select { border: solid 1px rgba(0, 0, 0, .3); border-radius: 3px; width: 310px; margin: 12px 16px; padding: 2px 4px; } .login-modal .module input:focus, .login-modal .module select:focus { border: solid 1px rgba(227, 79, 66, .5); } .login-modal .module .secret-key { width: 500px; } .login-modal .module .availability { color: #45474D; display: inline-block; margin-left: 16px; } /************************************* ******** DIRECT MESSAGES MODAL ******* **************************************/ .direct-messages-list .post { padding: 10px 30px 10px 15px; cursor: pointer; } .direct-messages-list .post:after { content: "►"; position: absolute; right: 10px; top: 50%; margin: -6px 0 0 0; color: rgba( 0, 0, 0, .4 ); } .direct-messages-list .post .messages-qtd { display: none; top: 8px; left: 16px; line-height: 8px; } .direct-messages-thread { padding: 10px; } .direct-messages-thread .post { min-height: 82px; margin-left: 65px; } .direct-messages-thread .post:after, .direct-messages-thread .post:nth-child(2n):after { content: ""; width: 1px; background: transparent; position: absolute; top: 25px; } .direct-messages-thread .post:after { border-top: solid 10px transparent; border-bottom: solid 10px transparent; border-right: solid 10px #ececed; left: -10px; } .direct-messages-thread .post-text { margin: 2px 16px 4px 4px; word-wrap: break-word; } .direct-messages-thread .post-photo { position: absolute; left: -65px; } .direct-messages-thread .post.sent { margin-right: 60px; margin-left: 0; } .direct-messages-thread .post.sent:after { border-top: solid 10px transparent; border-bottom: solid 10px transparent; border-right: none; border-left: solid 10px #ececed; right: -10px; left: auto; } .direct-messages-thread .post.sent .post-info { text-align: right; } .direct-messages-thread .post.sent .post-info-name { margin-right: 2px; } .direct-messages-thread .post.sent .post-info-time { float: left; } .direct-messages-thread .post.sent .post-info-time .post-info-sent { float: right; margin-left: 2px; } .direct-messages-thread .post.sent .post-text { margin: 2px 4px 4px 16px; text-align: right; } .direct-messages-thread .post.sent .post-photo { position: absolute; right: -65px; left: auto; } /************************************* ****** GM NEW GROUP SETUP MODAL ****** **************************************/ .group-messages-new-group.modal-wrapper { height: auto; /*about 320px*/ margin-top: -160px; } .group-messages-new-group .modal-content .module { margin: 4px; } .group-messages-new-group .modal-content div div { width: 100%; margin: 4px 0; padding: 4px 12px; } .group-messages-new-group .modal-content div div:last-child { text-align: right; } .group-messages-new-group .modal-content div div:last-child button { margin: 8px 4px; } .group-messages-new-group .modal-content textarea { border: solid 1px rgba(0, 0, 0, .3); border-radius: 3px; width: 500px; height: 56px; resize: none; margin: 12px 16px; padding: 2px 4px; } .group-messages-new-group .modal-content textarea:focus { border: solid 1px rgba(227, 79, 66, .5); } /************************************* ****** GM JOIN GROUP SETUP MODAL ***** **************************************/ .group-messages-join-group.modal-wrapper { height: auto; /*about 360px*/ margin-top: -204px; } .group-messages-join-group .modal-content .module { margin: 4px; } .group-messages-join-group .modal-content div div { width: 100%; margin: 4px 0; padding: 4px 12px; } .group-messages-join-group .modal-content div div:last-child { text-align: right; } .group-messages-join-group .modal-content div div:last-child button { margin: 8px 4px; } .group-messages-join-group .modal-content input { border: solid 1px rgba(0, 0, 0, .3); border-radius: 3px; width: 500px; margin: 12px 16px; padding: 2px 4px; } .group-messages-join-group .modal-content input:focus { border: solid 1px rgba(227, 79, 66, .5); } .group-messages-join-group .modal-content input[type='checkbox'] { display: inline; width: auto; margin: 2px; } .group-messages-join-group .modal-content .groups-list { height: 120px; overflow-y: auto; margin: 8px 8px 0; } /************************************* ************ HASHTAG MODAL *********** **************************************/ .hashtag-modal .postboard { margin-left: 0; } /************************************* ********* CONVERSATION MODAL ********* **************************************/ .conversation-modal .postboard { margin-left: 0; } /************************************* ********** FOLLOWING MODAL *********** **************************************/ .following-modal ol { margin: 5px; } .following-modal .open-profile-modal:hover { text-decoration: none; } .following-modal .open-profile-modal img { float: none; } .following-modal .open-profile-modal span { vertical-align: middle; } .following-modal .open-profile-modal span:hover { text-decoration: underline; } /************************************* ********* WHO TO FOLLOW MODAL ******** **************************************/ .who-to-follow-modal ol, .new-users-modal ol { margin: 5px; } .who-to-follow-modal .open-profile-modal:hover, .new-users-modal .open-profile-modal:hover { text-decoration: none; } .who-to-follow-modal .open-profile-modal span, .new-users-modal .open-profile-modal span { vertical-align: middle; } .who-to-follow-modal .open-profile-modal span:hover, .new-users-modal .open-profile-modal span:hover { text-decoration: underline; } .who-to-follow-modal .follow, .new-users-modal .follow { float: right; margin: -30px 10px 0 10px; } .who-to-follow-modal .twister-user-info span, .new-users-modal .twister-user-info span { vertical-align: bottom; } .who-to-follow-modal .bio, .new-users-modal .bio { font-size: 12px; color: rgba( 0, 0, 0, .6 ); } /************************************* ********* URI SHORTENER MODAL ******** **************************************/ .uri-shortener-modal .uris-list { font-size: 12px; overflow-x: hidden; } .uri-shortener-modal .uris-list li { padding-left: 2%; padding-right: 2%; margin-bottom: 4px; } .uri-shortener-modal .uris-list li:last-child { margin-bottom: 16px; } .uri-shortener-modal .uris-list li.highlighted, .uri-shortener-modal .uris-list li:hover { background-color: #FEFEDF; } .uri-shortener-modal .uris-list .short { background-color: #F0EFCC; display: inline-block; width: 26%; padding-left: 2px; padding-right: 2px; } .uri-shortener-modal .uris-list .long { margin-left: 4px; } /************************************* ************ POPUP PROMPT ************ **************************************/ .prompt-wrapper { background: #fff; font-size: 13px; z-index: 5; position: fixed; top: 50%; left: 50%; width: 600px; margin-left: -300px; box-shadow: 10px 12px 18px 0px rgba(0,0,0, .3); } .prompt-wrapper .modal-buttons { padding: 4px 16px 16px; text-align: right; } .prompt-wrapper .switch-mode { display: inline-block; float: left; margin: 4px; } /************************************* *********** CONFIRM POPUP ************ **************************************/ .confirm-popup.prompt-wrapper { margin-top: -80px; } .confirm-popup .message { text-align: center; padding: 12px; } .confirm-popup .modal-buttons { text-align: center; } /************************************* ********* NEW ACCOUNT POPUP ********** **************************************/ .new-account-briefing.prompt-wrapper { margin-top: -164px; } /************************************* ****** FOLLOWING-CONFIG PROMPT ******* **************************************/ .following-config-modal.prompt-wrapper { margin-top: -80px; } .following-config-modal .modal-content { padding: 10px; text-align: center; } .following-config-method-buttons { padding: 10px; } /************************************* ******** RETWIST POSTS PROMPT ******** **************************************/ .reTwist.prompt-wrapper { margin-top: -140px; } .reTwist .post-expand, .reTwist .post-interactions { display: none; } .reTwist .post { margin: 8px; padding: 4px; min-height: 68px; } .reTwist .post-area-extras { margin: 4px 16px; } /************************************* ********* REPLY POSTS PROMPT ********* **************************************/ .reply.prompt-wrapper { margin-top: -140px; } .reply .post-expand, .reply .post-interactions { display: none; } .reply .textcomplete-wrapper { padding-top: 10px; } .reply .textcomplete-wrapper textarea { margin: 10px; width: 580px; } .reply .post-area-extras { margin: 4px 16px; } .reply .post { margin: 8px; padding: 4px; min-height: 68px; } /************************************* **************** LOADER ************** **************************************/ .postboard-loading, .loading-roller { clear: both; text-align: center; } .postboard-loading div, .loading-roller div { display: inline-block; width: 120px; height: 10px; background-color: #b43e34; border-radius: 100px; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.05); position: relative; margin: 10px 0 0 0; } .postboard-loading div:after, .loading-roller div:after { border-radius: 50px; content: ""; position: absolute; background-color: white; left: 2px; top: 2px; bottom: 2px; z-index: 999; animation-name: slide; animation-duration: 1.5s; animation-easing-function: linear; animation-iteration-count: infinite; -webkit-animation-name: slide; -webkit-animation-duration: 1.5s; -webkit-animation-easing-function: linear; -webkit-animation-iteration-count: infinite; -moz-animation-name: slide; -moz-animation-duration: 1.5s; -moz-animation-easing-function: linear; -moz-animation-iteration-count: infinite; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } @keyframes slide { 0% { right: 60px; left: 2px; } 5% { left: 2px; } 50% { right: 2px; left: 60px; } 55% { right: 2px; } 100% { right: 60px; left: 2px; } } @-webkit-keyframes slide { 0% { right: 100px; left: 2px; } 5% { left: 2px; } 50% { right: 2px; left: 100px; } 55% { right: 2px; } 100% { right: 100px; left: 2px; } } @-moz-keyframes slide { 0% { right: 60px; left: 2px; } 5% { left: 2px; } 50% { right: 2px; left: 60px; } 55% { right: 2px; } 100% { right: 60px; left: 2px; } } /************************************* **************** OPTIONS ************* **************************************/ .options .module { display: block; width: 720px; padding: 32px 40px; margin: 8px auto; background: #fff; } .options .container { margin: 8px 0px 8px 16px; } .options .label { font-size: 13px; } .options .label-h { font-weight: bold; font-size: 14px; } .options button, .options input, .options select { font-size: 13px; } .options .module input, .options .module select { background: #f3f3f3; border: solid 1px #ccc; transition: box-shadow 0.3s, border 0.3s; } .options .module input:focus, .options .module select:focus { background: #fff; transition: background-color 100ms linear; border: solid 1px rgba( 227, 79, 66, .5 ); box-shadow: 0 0 10px rgba(0, 0, 0, .3 ); } .volValue, #filterLangAccuracyVal { font: 12px "Open Sans", sans-serif; } .suboptions { margin: 5px 30px; border: double 2px rgba( 69, 71, 77, .1 ); height: 0px; overflow: hidden; transition: height 1s linear; -webkit-transition: height 1s linear; -moz-transition: height 1s linear; -o-transition: height 1s linear; -ms-transition: height 1s linear; } .options input[type='checkbox'] { cursor: pointer; vertical-align: sub; } .options input[type='range'] { cursor: pointer; vertical-align: -16px; } .options #filterLangList { width: 80%; } .langFilterSimData { color: rgba( 0, 0, 0, .7 ); font: 10px "Open Sans", sans-serif; text-align: center; } .langFilterSimData em { color: rgba( 227, 79, 66, .7 ); } /************************************* *********** FOLLOWING PAGE *********** **************************************/ .following-own-modal.modal-wrapper { width: 666px; margin-left: -333px; } .following-own-modal .following-list { text-align: center; } .following-own-modal .following-list > li { display: inline-block; text-align: initial; width: 320px; height: 130px; margin: 2px; padding: 2px; border: solid 1px rgba(69, 71, 77, .1); background: #fff; } .following-own-modal .following-list > li:hover { border: solid 1px rgba(227, 79, 66, .5); } .following-own-modal .following-list .mini-profile-name { padding: 4px; } .following-own-modal .following-list .mini-screen-name { position: absolute; top: 32px; } .following-own-modal .following-list .following-config { width: 100%; position: absolute; top: 62px; text-align: center; } .following-own-modal .following-list .following-config button { display: inline-block; } .following-own-modal .following-list .mini-profile-actions:hover ul { height: 50px; } .following-own-modal .following-list .swarm-status { font: 12px "Open Sans", sans-serif; display: block; position: absolute; top: 94px; right: 32px; } .following-own-modal .following-list .latest-activity { position: absolute; top: 110px; right: 32px; margin: 0; } /************************************* *********** AUTOCOMPLETING *********** **************************************/ ul.dropdown-menu { min-width: 160px; padding: 0; margin: 0; list-style: none; background-color: #fff; border-radius: 0px; border: solid 1px rgba( 69, 71, 77, .1 ); border-right: solid 4px rgba( 227, 79, 66, .82 ); box-shadow: 8px 10px 10px 0px rgba(0,0,0, .2); } ul.dropdown-menu li { padding: 3px 20px; font: 13px/20px "Open Sans", sans-serif; white-space: nowrap; } ul.dropdown-menu li:hover, ul.dropdown-menu .active, ul.dropdown-menu .active a { background-color: #fefedf; text-decoration: none; cursor: pointer; } ul.dropdown-menu li a { color: black; } .post-rt-reference { background-color: #FAFAFA; border: 1px solid #ccc; } .post-rt-reference:hover { background-color: #FFF; cursor: pointer; } .post-rt-reference .post-photo { width: 24px; height: 24px; margin: 4px; } .post-rt-reference .post-photo img { width: 24px; height: auto; } .post-rt-reference .post-info-name { font-size: 11px; } .post-rt-reference .post-text { font-size: 11px; margin: 2px 8px 4px 34px; } .post-rt-reference .post-info-time { font-size: 9px; color: #000; }