body { background-color: #40415a; margin: 0; padding: 0; text-align: center; font-family: Helvetica, Arial, sans-serif; color: #2f2f32; } h1, h2, h3 { margin: 0; padding: 0; font-weight: normal; } a { text-decoration: none; border: 0; color: #fff; outline: 0; -webkit-transition: color .15s ease-in-out; transition: color .15s ease-in-out; } a:hover { text-decoration: none; } img { vertical-align: bottom; border: 0; } input, textarea, button { border: 0; font-family: Arial, Helvetica, sans-serif; -webkit-transition: background-color .15s ease-in-out; transition: background-color .15s ease-in-out; } ul { list-style: none; margin: 0; padding: 0; } .clearfix { clear: both; } .container { left: 0; right: 0; z-index: 0; text-align: center; min-width: 870px; overflow: hidden; } .simple .container { left: 0; right: 0; z-index: 0; text-align: center; min-width: 320px; overflow: hidden; } .content-centered { margin: 0 auto; width: 460px; position: relative; } /* interior */ .interior-centered { margin: 0 auto; width: 870px; position: relative; } .interior-content { width: 870px; min-height: 500px; margin-top: 0; text-align: left; position: relative; overflow: hidden; } /* simple privacy & TOS pages */ .simple .interior-centered { margin: 0 auto; width: auto; max-width: 660px; padding: 8px; position: relative; } .simple .interior-content { width: auto; min-height: 200px; margin-top: 0; text-align: left; position: relative; background-color: #fff; border-radius: 10px; padding: 20px; color:#2f2f32; line-height:22px; font-size:16px } .simple .content-centered { margin: 0 auto; width: 300px; position: relative; } .simple .interior-content h1 { margin: 0 0 12px 0; font-weight: bold; font-size: 24px; line-height: 1; } .simple .interior-content h2 { margin: 14px 0 2px 0; font-weight: bold; font-size: 20px; } .interior-content h3 { margin: 14px 0 2px 0; font-size: 18px; } .bullet-list { list-style-type: disc; padding-left: 20px; } .bullet-list li { padding-left: 10px; padding-bottom: 4px; } .simple .interior-content a { color: #d55161; text-decoration: none; -webkit-transition: color .15s ease-in-out; transition: color .15s ease-in-out; } .simple .interior-content a:hover { color: #c14857; text-decoration: underline; } .simple .interior-content .btn { display:block; width:auto; height: auto; max-width:300px; font-weight:bold; min-height:12px; line-height:12px; padding:16px 0; text-align:center; text-decoration:none; font-size:16px; color:#fff; border-radius:10px; background-color:#d55161; margin-top:25px; -webkit-transition: background-color .15s ease-in-out; transition: background-color .15s ease-in-out; } .simple .interior-content .btn:hover { background-color:#c14857; color:#fff; } .simple-header { height: 77px; margin: 5px 20px 0; overflow: hidden; text-align: left; } .simple-header-logo { display: inline-block; margin-top: 10px; } .simple-header-developer { display: inline-block; float: right; } /* base layout */ .body-col1 { width: 265px; min-height: 490px; margin-left: 50px; margin-right: 40px; margin-top: 35px; text-align: left; float: left; position: fixed: top: 0; } .body-col1-content { position: fixed; } .body-col2 { width: 460px; margin: 20px 0 20px; text-align: left; overflow: hidden; float: left; position: relative; } .page-feed { margin-bottom: 110px; } .details-page { margin-bottom: 89px; } .rantlist-bg { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; background-color: #e3e3e3; background: url(/static/devrant/img/detailed-bg1.png) top left repeat; min-height: 576px; width: 460px; overflow: hidden; display: block; } .gif-tag { position: absolute; top: 7px; left: 7px; padding: 2px 6px; font-size: 14px; font-weight: bold; color: #fff; background-color: #a973a2; border-radius: 5px; } .details-page .rantlist li { background-color: #fff; } .profile-page .rantlist li { background-color: #fff; } .profile-page .rantlist-bg { min-height: 460px; } .box-ico-container { width: 55px; height: 55px; line-height: 55px; text-align: center; float: left; } .rantlist li.feed-prev-more { background-color: #aaaab8; border-top: 0; padding: 0 15px !important; } .rantlist .feed-prev-more:hover { background-color: #aaaab8; cursor: default; } .rantlist .feed-prev-more a { height: 44px; line-height: 44px; } .rantlist .feed-prev-more a:hover { color: #e0e0ed; } .rantlist .feed-prev-more-link { display: inline-block; vertical-align: top; font-size: 14px; font-weight: bold; } .rantlist .feed-prev-more .icon { display: inline-block; margin: 0 8px; font-size: 24px; } .feed-prev { float: left; } .feed-more { float: right; text-align: right; } /* devrant new */ .plusone, .minusone { width: 32px; height: 32px; text-align: center; line-height: 32px; background-color: #aaaab8; color: #fff; border-radius: 16px; display: inline-block; -webkit-transition: background-color .15s ease-in-out; transition: background-color .15s ease-in-out; } .rantlist-vote-col.vote-state-upvoted .plusone { background-color: #d55161; } .rantlist-vote-col.vote-state-downvoted .minusone { background-color: #d55161; } .rantlist-vote-col.vote-state-novote .btn-vote-circle { background-color: #e3e3e3; } .plusone span, .minusone span { color: #fff; font-size: 13px; } .plusone:hover, .minusone:hover { background-color: #d55161; cursor: pointer; } .votecount { margin: 3px 0; font-size: 14px; color: #aaaab8; text-align: center; } .rantlist li { padding: 12px 20px; border-top: 2px solid #e3e3e3; background-color: #fff; position: relative; -webkit-transition: background-color .15s ease-in-out; transition: background-color .15s ease-in-out; } .rantlist li:first-child { border-top: none; padding-top: 13px; } .rantlist li:last-child { padding-bottom: 15px; } .rantlist li:hover { cursor: pointer; background-color: #f5f5f5; } .rantlist-vote-col { float: left; width: 42px; margin-right: 13px; margin-left: -5px; vertical-align: middle; position: relative; text-align: center; font-weight: bold; z-index: 2; } .rantlist-content-col { float: left; width: 370px; min-height: 86px; position: relative; z-index: 2; } .rantlist-title { font-size: 14px; line-height: 1.3; color: #2f2f32; min-height: 29px; margin: 0; padding: 0; } .rantlist-content, .rantlist-content-tag, .collab-summary { font-size: inherit; line-height: inherit; color: inherit; font-weight: inherit; margin: 0; padding: 0; -webkit-margin-before: 0; -webkit-margin-after: 0; } .rantlist-title-text { float: left; } .rantlist-title-text, .rantlist-content, .collab-summary { width: 370px; word-wrap:break-word; } .rantlist-tags-row { color: #aaaab8; padding-top: 8px; cursor: default; position: relative; } .rantlist-tags { float: left; max-width: 297px; padding-top: 8px; margin-right: 8px; overflow: hidden; font-size: 12px; color: #aaaab8; z-index: 2; } .rantlist-tags a { color: #aaaab8; font-size: 12px; padding: 2px 4px; border: 2px solid #e3e3e3; border-radius: 5px; font-weight: bold; background-color: #fff; display: inline-block; margin-top: 4px; } .rantlist-tags a:hover { color: #d55161; border-color: #d55161; -webkit-transition: all .15s ease-in-out; transition: all .15s ease-in-out; cursor: pointer; } .rantlist-bglink { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .bglink-tags { z-index: -1; } .rantlist-comments, .rantlist-footer-link { float: right; width: 60px; overflow: hidden; font-size: 14px; text-align: right; font-weight: bold; display: block; color: #aaaab8; padding-top: 8px; margin-top: 4px; z-index: 2; } .rantlist-footer-link { margin-top: 6px; } .reply-row .rantlist-footer-link { margin-top: 0; padding-top: 2px; } .rantlist li:hover .rantlist-comments, .rantlist-footer-link:hover { color: #d55161; -webkit-transition: color .15s ease-in-out; transition: color .15s ease-in-out; cursor: pointer; } .rantlist-reply { float: left; text-align: left; } .addrant-btn { position: fixed; bottom: 20px; left: 50%; margin-left: 120px; border-radius: 40px; height: 70px; width: 70px; line-height: 70px; font-size: 36px; color: #fff; text-align: center; background-color: #d55161; display: block; z-index: 10; -webkit-transition: background-color .15s ease-in-out; transition: background-color .15s ease-in-out; } .addcomment-btn { position: fixed; bottom: 20px; left: 50%; margin-left: -60px; border-radius: 10px; height: 48px; width: 420px; line-height: 48px; font-size: 22px; font-weight: bold; color: #fff; text-align: center; background-color: #d55161; display: block; z-index: 10; -webkit-transition: background-color .15s ease-in-out; transition: background-color .15s ease-in-out; } .addrant-btn:hover, .addcomment-btn:hover { background-color: #c14857; } .rant-image { width: 100%; display: block; overflow-y: hidden; max-height: 300px; margin-top: 8px; border-radius: 5px; position: relative; } .rant-image img { width: 100%; display: block; } .details-image { max-height: none; } .bluegrey-bg { height: 485px; width: 100%; position: fixed; top: 0; left: 0; z-index: -1; background-color: #54556e; } /* app btns */ .app-btns { width: 265px; margin-top: 55px; } .btn { height: 48px; line-height: 48px; text-align: center; border-radius: 10px; border: 0; font-size: 22px; font-weight: bold; text-decoration: none !important; display: inline-block; cursor: pointer; -webkit-transition: background-color .15s ease-in-out; transition: background-color .15s ease-in-out; background-color: #d55161; } .btn:hover { background-color: #c14857; } .iphone-btn img, .android-btn img { width: 80%; vertical-align: middle; } .iphone-btn, .android-btn { width: 125px; display: inline-block; } .iphone-btn { margin-right: 10px; } .app-btns.modal-btns { width: 366px; margin-top: 30px; } .modal-btns .iphone-btn, .modal-btns .android-btn { height: 60px; line-height: 60px; width: 175px; } .modal-overlay { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background-color: rgba(66,67,92,0.92); display: block; z-index: 19; display: none; } .modal-x { position: fixed; top: 14px; right: 14px; color: #fff; font-size: 32px; z-index: 22; width: 54px; height: 54px; line-height: 54px; border-radius: 30px; -webkit-transition: background-color .15s ease-in-out; transition: background-color .15s ease-in-out; display: none; background-color: #5c5c78; } .modal-x:hover { background-color: #c14857; } .modal-title { margin-top: 50px; font-family: Comfortaa; font-size: 40px; font-weight: bold; line-height: 1.2; color: #fff; } .modal-screens { width: 284px; margin-right: 40px; float: left; } .modal-text-col { width: 366px; float: left; } .footer-text { margin-top: 22px; color: #c1c1ca; font-size: 11px; text-align: center; line-height: 1.4; } .footer-text a { color: #c1c1ca; text-decoration: none; } .footer-text a:hover { color: #c1c1ca; text-decoration: underline; } .app-text { font-weight: bold; font-size: 13px; margin-top: 10px; color: #c1c1ca; text-align: center; } .post-details .rantlist-tags { width: calc(100% - 68px); } .reply-row .rantlist-vote-col { margin-left: 28px; } .reply-row .rantlist-content-col { width: 337px; } .reply-row .rantlist-tags { width: 263px; } .reply-row .rantlist-title { min-height: 36px; width: 337px; word-wrap:break-word; } .rantlist li.post-details:hover, .rantlist li.reply-row:hover { cursor: auto; background-color: #fff; } .reply-bar { width: 5px; background-color: #e3e3e3; height: 100%; border-radius: 3px; display: inline-block; position: absolute; left: -71px; } .username-row { margin-bottom: 6px; overflow: hidden; } .username-details { font-weight: bold; color: #54556e; font-size: 14px; float: left; -webkit-transition: color .15s ease-in-out; transition: color .15s ease-in-out; } .username-details:hover { color: #d55161; } .username-details:hover .profile-score { background-color: #d55161; } .username-details span { background-color: #54556e; color: #fff; font-weight: bold; font-size: 12px; padding: 2px 4px; border-radius: 4px; display: inline-block; margin-left: 7px; -webkit-transition: background-color .15s ease-in-out; transition: background-color .15s ease-in-out; } .timestamp { float: right; width: 35px; text-align: right; color: #aaaab8; font-weight: bold; font-size: 14px; } .username-row .timestamp { margin-top: 3px; } .back-bar { height: 40px; background-color: #aaaab8; color: #fff; font-weight: bold; font-size: 16px; line-height: 40px; padding-left: 20px; display: block; -webkit-transition: background-color .15s ease-in-out; transition: background-color .15s ease-in-out; } .back-bar:hover { background-color: #d55161; } .back-bar .icon { padding-right: 5px; font-size: 22px; display: inline-block; } .back-text { display: inline-block; vertical-align: top; } /* search */ .search-bar { float: left; text-align: left; margin-left: calc(50% - 186px); position: relative; } .search-bar .search-input { background-color: #fff; border-radius: 10px; font-size: 14px; height: 30px; line-height: 30px; padding: 0 8px 0 34px; width: 186px; display: inline-block; vertical-align: top; margin-top: 7px; outline: 0; } .search-bar .search-icon { color: #aaaab8; font-size: 24px; height: 32px; left: -6px; line-height: 32px; position: absolute; text-align: center; top: 6px; width: 50px; } .search-bar .search-btn-icon { color: #fff; font-size: 24px; } .search-bar .search-btn { background-color: #d55161; border-radius: 10px; font-size: 16px; height: 30px; line-height: 30px; width: 40px; display: inline-block; vertical-align: top; margin: 7px 3px 0; padding: 0 5px; cursor: pointer; } .search-bar .search-btn:hover { background-color: #c14857; } .search-base-list a { display: block; border-top: 2px solid #E3E3E3; background-color: #fff; padding: 8px 20px; vertical-align: middle; height: 32px; -webkit-transition: background-color .15s ease-in-out; transition: background-color .15s ease-in-out; } .search-base-list a:first-child { border-top: 0; } .search-base-list a:hover { background-color: #f5f5f5; cursor: pointer; } .search-base-list .icon-search2 { color: #e3e3e3; font-size: 36px; height: 32px; line-height: 32px; text-align: center; display: inline-block; } .search-popular { color: #54556e; font-size: 14px; font-weight: bold; height: 32px; line-height: 32px; display: inline-block; vertical-align: top; margin-left: 10px; } .search-bar .clear-search { width: 20px; height: 20px; border-radius: 10px; background-color: #aaaab8; left: 202px; top: 12px; line-height: 20px; font-size: 14px; color: #fff; position: absolute; text-align: center; cursor: pointer; display: none; -webkit-transition: background-color .15s ease-in-out; transition: background-color .15s ease-in-out; } .search-bar .clear-search:hover { background-color: #d55161; } /* notif page */ .notif-list { margin: 0; padding: 0; } .notif-list a { display: block; background-color: #fff; padding: 8px 20px 8px 18px; vertical-align: middle; min-height: 32px; overflow: hidden; position: relative; -webkit-transition: background-color .15s ease-in-out; transition: background-color .15s ease-in-out; } .notif-list li { border-top: 2px solid #E3E3E3; } .notif-list li:first-child { border-top: 0; } .notif-list a:hover { background-color: #f5f5f5; cursor: pointer; } .notif-list .icon { color: #e3e3e3; font-size: 32px; height: 32px; line-height: 32px; text-align: center; display: inline-block; float: left; } .icon.notif-new { color: #7bc8a4; } .notif-username { color: #54556e; font-weight: bold; } .notif-body { color: #54556e; font-size: 14px; margin: 7px 0 4px; width: calc(100% - 40px); display: inline-block; vertical-align: top; margin-left: 10px; float: left; } .menu-notif.notif-2digits { font-size: 14px; } .top-bar-notif.notif-2digits { font-size: 12px; } /* reset password */ .reset-form { margin-top: 15px; } .reset-password input, .reset-password-confirm input { width: 280px; border: 2px solid #C1C1CA; padding: 10px 8px; font-size: 16px; border-radius: 10px; margin-bottom: 10px; } .reset-password.form-error .error-text, .reset-password-confirm.form-error .error-text { display: block; } .reset-password.form-error input, .reset-password-confirm.form-error input { border: 2px solid #d55161; } .signup-email-password-field.form-error .error-text { margin-bottom: 0; } .simple .interior-content .forgot-email-btn { margin-top: 10px; width: 300px; } /* email beta form */ .email-label { font-size: 13px; font-weight: bold; color: #fff; height: 22px; margin-top: -4px; text-align: center; } .modal-app .email-label { font-size: 18px; height: 28px; margin-top: -8px; } .landing .email-label { margin-top: -6px; } /* sticker page */ .sticker-list { margin-top: 7px; } .sticker-list li { margin-bottom: 9px; } .sticker-col1 { float: left; width: 50%; } .sticker-col2 { margin-left: 5%; width: 45%; float: left; } .sticker-row2 { margin-top: 30px; } .mobile-install-banner { display: none; } .hide { display: none; } .bar-btm-guy { display: none; } .rant-top-bar { height: 44px; background-color: #40415a; color: #fff; font-weight: bold; font-size: 14px; line-height: 44px; display: block; border-top-left-radius: 10px; border-top-right-radius: 10px; overflow: hidden; } .rant-top-bar .btn { background-color: #d55161; border-radius: 10px; font-size: 16px; height: 30px; line-height: 30px; width: 40px; display: inline-block; vertical-align: top; margin: 7px 3px 0; padding: 0 5px; cursor: pointer; } .rant-top-bar .btn.btn-notif-clear { visibility: hidden; } .btn.btn-notif { padding: 0 10px; } .rant-top-bar .btn:hover { background-color: #c14857; } .top-bar-back { font-size: 14px; font-weight: bold; float: left; width: 50%; min-height: 40px; display: block; } .devrant-logo { font-size: 24px; font-weight: bold; float: left; width: 50%; min-height: 40px; display: block; } .devrant-logo .icon { display: none; } .back-search { width: 108px; } .top-bar-back .icon { font-size: 24px; margin: 0 8px 0 20px; display: inline-block; } .top-bar-back a:hover, .feed-top-icons a:hover { color: #c6c7d9; } .btn-back { vertical-align: top; display: inline-block; } .share-icons { float: right; text-align: right; margin-top: 7px; height: 37px; } .feed-top-icons { float: right; text-align: right; margin-right: 20px; height: 44px; } .feed-top-icons a { font-size: 30px; margin-left: 10px; display: inline-block; } .feed-top-icons.menu-icon { float: left; text-align: left; margin-left: 10px; } .filter-top-bar { height: 0; background-color: #aaaab8; color: #fff; font-weight: bold; font-size: 16px; line-height: 44px; display: block; overflow: hidden; text-align: center; } .filter-top-bar form { display: inline-block; } .filter-top-bar input { margin-left: 8px; cursor: pointer; } .filter-top-bar label { cursor: pointer; } .filter-top-bar label:hover, .filter-top-bar input:hover + label { color: #e7e7ee; } .top-tab-bar { height: 44px; background-color: #fff; border-bottom: 2px solid #e3e3e3; color: #fff; font-weight: bold; font-size: 16px; line-height: 44px; display: block; overflow: hidden; text-align: center; width: 100%; } .top-tab { float: left; height: 40px; line-height: 40px; border-bottom: 4px solid transparent; font-weight: bold; font-size: 16px; transition: all .15s ease-in-out; width: 25%; color: #54556e; } .top-tab.selected { border-bottom: 4px solid #54556e; } .top-tab:hover { color: #d55161; border-bottom: 4px solid #d55161; } .news-bar, .weekly-bar { position: relative; background-color: #fff; border-bottom: 2px solid #e3e3e3; font-size: 14px; display: block; overflow: hidden; text-align: left; width: 100%; } .rantlist li.weekly-bar { border-bottom: 0; width: auto; padding: 0; } .news-bar { min-height: 84px; } .news-guy { position: absolute; bottom: 0; right: 15px; width: 100px; } .news-close { position: absolute; top: 6px; right: 8px; color: #aaaab8; font-size: 22px; } .news-close:hover { color: #d55161; } .news-content { width: calc(100% - 146px); padding: 12px 20px; display: block; } .weekly-content { width: 100%; padding: 12px 20px; display: block; } .rantlist li.weekly-bar:hover { background-color: #fff; } .news-content:hover .news-title, .weekly-content:hover .news-title { color: #d55161; } .news-title { font-size: 14px; font-weight: bold; color: #54556e; -webkit-transition: color .15s ease-in-out; transition: color .15s ease-in-out; } .news-body { font-size: 14px; color: #2f2f32; margin-top: 4px; } .news-cta { color: #aaaab8; font-size: 12px; font-weight: bold; margin-top: 4px; } .share-icons a { display: inline-block; margin-left: 5px; padding: 0 12px; height: 30px; line-height: 28px; font-size: 24px; border-radius: 10px; text-align: center; overflow: hidden; -webkit-transition: background-color .15s ease-in-out; transition: background-color .15s ease-in-out; } .share-icons a span { display: inline-block; vertical-align: middle; } .twitter-share { background-color: #00a7ea; } .twitter-share:hover { background-color: #1196de; } .fb-share { background-color: #355ca7; margin-right: 7px; } .fb-share:hover { background-color: #364e84; } .share-text { font-size: 14px; font-weight: bold; padding-left: 5px; } /* profile */ .profile-bar { float: left; width: calc(100% - 152px); text-align: center; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; margin-left: 18px; } .notif-bar { width: calc(100% - 160px); } .title-bar { float: left; width: 110px; text-align: center; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; margin-left: calc(50% - 120px); } .back-profile { width: 60px; } .username-profile { font-family: Comfortaa; font-weight: bold; font-size: 26px; } .profile-details { background-color: #fff; padding: 15px 20px 15px 15px; } .profile-detail-col1 { float: left; width: 32px; font-size: 28px; color: #aaaab8; margin-right: 8px; text-align: center; } .profile-detail-col2 { padding: 6px 0 7px; float: left; width: calc(100% - 40px); font-size: 14px; } .profile-detail-col2 a { color: #2f2f32; } .profile-detail-col2 a:hover { color: #d55161; } .profile-join-date { color: #aaaab8; font-size: 12px; margin: 5px 0 5px 40px; font-weight: bold; } .profile-tabs { background-color: #fff; padding-bottom: 9px; border-bottom: 2px solid #e3e3e3; } .tabs { width: 30.66%; margin-right: 2%; float: left; text-align: center; color: #40415a; cursor: pointer; } .tab1 { margin-left: 2%; } .tab-line { width: 100%; height: 4px; background-color: #40415a; border-radius: 2px; -webkit-transition: background-color .15s ease-in-out; transition: background-color .15s ease-in-out; } .tab-count { font-size: 24px; margin-top: 6px; font-weight: bold; -webkit-transition: color .15s ease-in-out; transition: color .15s ease-in-out; } .tab-label { font-size: 12px; margin-top: -2px; font-weight: bold; -webkit-transition: color .15s ease-in-out; transition: color .15s ease-in-out; } .tabs.highlight .tab-line { background-color: #d55161; } .tabs.highlight .tab-count, .tabs.highlight .tab-label { color: #d55161; } .tabs:hover .tab-line { background-color: #d55161; } .tabs:hover .tab-count, .tabs:hover .tab-label { color: #d55161; } /* signup modal */ .content-centered-container { height: 100%; width: 100%; position: relative; /*overflow-y: hidden;*/ position: absolute; } .content-centered-modal { width: 372px; margin: 0 auto; position: relative; text-align: center; z-index: 21; color: #fff; font-size: 18px; } .signup-login-forms a { color: #fff; } .signup-login-forms a:hover { color: #fff; text-decoration: underline; } .content-centered-modal .btn:hover { color: #fff; } .overlay { width: 100%; background-color: #000; opacity: 0.8; position: fixed; top: 0; left: 0; z-index: 20; display: none; } .signup-title { font-family: Comfortaa; font-size: 42px; margin-bottom: 8px; font-weight: bold; line-height: 1.2; } .signup-subtitle { font-size: 18px; margin-bottom: 22px; color: #babacc; } .signup-fb-btn { background-color: #3b5b9a; } .signup-fb-btn .icon { font-size: 40px; width: 55px; height: 70px; line-height: 70px; display: inline-block; margin-left: -15px; } .btn-text { display: inline-block; vertical-align: top; height: 70px; line-height: 70px; } .signup-fb-btn:hover { background-color: #274683; } .signup-email-title { font-size: 22px; margin-top: 10px; margin-bottom: 14px; } .signup-login-forms input { height: 34px; line-height: 34px; padding: 5px 20px 5px 55px; border-radius: 10px; border: 2px solid #fff; background-color: #fff; width: 293px; font-size: 18px; } .signup-login-forms textarea { height: 80px; line-height: 1.3; padding: 10px 14px 10px 55px; border-radius: 10px; border: 2px solid #fff; background-color: #fff; width: 299px; font-size: 18px; vertical-align: top; margin-bottom: 10px; } .post-rant-form textarea, .post-comment-form textarea { height: 200px; line-height: 1.3; padding: 10px 14px 10px 14px; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 2px solid #fff; background-color: #fff; width: 340px; font-size: 18px; vertical-align: top; margin-bottom: 0; } .post-rant-bottom { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; background-color: #aaaab8; color: #fff; padding: 8px 14px; font-size: 14px; margin-bottom: 10px; } .post-rant-bottom .post-count { display: inline-block; text-align: left; float: left; } .post-rant-bottom .rant-attached { display: inline-block; float: right; text-align: right; } .rant-attached .icon { margin-right: 6px; font-size: 16px; display: inline-block; vertical-align: top; } .rant-attached .attach-text { display: inline-block; } .rant-attached:hover .attach-text { text-decoration: underline; } .signup-fields { position: relative; } .signup-email-field input { margin-bottom: 10px; } .signup-email-field { clear: both; } .form-error input { border: 2px solid #d55161; margin-bottom: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .form-error textarea { border: 2px solid #d55161; margin-bottom: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .post-rant-form .error-text, .post-comment-form .error-text { border-bottom-right-radius: 0; border-bottom-left-radius: 0; margin-bottom: 0; } .form-error .form-error-alert, .form-error .error-text { display: block; } .form-error-alert { position: absolute; top: 4px; left: 4px; width: 18px; height: 18px; line-height: 18px; font-size: 13px; font-weight: bold; background-color: #d55161; border-radius: 50%; z-index: 24; border: 2px solid #fff; display: none; } .error-text { font-size: 12px; text-align: left; padding: 4px 12px 4px; background-color: #d55161; margin-bottom: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; display: none; } .modal-btn { background-color: #d55161; width: 372px; color: #fff; margin-top: 15px; } .modal-btn:hover { background-color: #c14857; } .forgot-email-btn { margin-top: 5px; } .signup-fields .form-icon { position: absolute; top: 0; left: 6px; height: 48px; width: 48px; text-align: center; line-height: 48px; color: #aaaab8; font-size: 32px; } .form-char-count { position: absolute; bottom: 13px; left: 14px; text-align: left; color: #aaaab8; font-size: 12px; } .login-form .signup-email-container, .forgot-form .signup-email-container { display: block; } .signup-login-link-container { margin-top: 40px; margin-bottom: 10px; color: #babacc; } .login-signup-link-container, .forgot-signup-link-container { margin-top: 30px; color: #babacc; } .forgot-signup-link-container a, .login-signup-link-container a { color: #babacc; } .signup-skip { margin-top: 20px; } .signup-login-link, .modal-alert-btn { background-color: #5c5c78; width: 100%; } .signup-login-link:hover { background-color: #c14857; } .btn-red { background-color: #d55161; } .menu-modal-list li a { min-height: 48px; line-height: 48px; font-size: 22px; font-weight: bold; display: block; border-radius: 10px; } .menu-modal-list li a:hover { text-decoration: none; background-color: #c14857; } .menu-modal-list .icon { font-size: 32px; color: #babacc; line-height: 48px; vertical-align: middle; margin-right: 10px; } .menu-modal-list li a:hover .icon { color: #fff; } .menu-modal-list .icon-bell1 { position: relative; } .notif-badge { width: 25px; height: 25px; line-height: 25px; color: #fff; font-size: 16px; font-weight: bold; background-color: #7bc8a4; margin-left: 8px; border-radius: 12px; display: inline-block; text-align: center; -webkit-transition: background-color .15s ease-in-out; transition: background-color .15s ease-in-out; } .top-bar-notif { display: block; position: absolute; top: 2px; right: -12px; width: 20px; height: 20px; line-height: 20px; font-size: 14px; border: 2px solid #40415a; } .rant-top-bar .menu-icon { position: relative; } .rant-top-bar .menu-icon a:hover .notif-badge { background-color: #62b38d; } .state-logged-in .menu-modal .menu-option-log-in { display: none; } .state-logged-out .menu-modal .menu-option-log-out { display: none; } .state-logged-out .menu-modal .menu-option-profile { display: none; } .state-logged-out .menu-modal .menu-option-settings { display: none; } .list-login { margin: 10px 0 20px; } .menu-modal .menu-logo { text-align: center; font-size: 42px; color: #fff; text-align: center; margin-bottom: 20px; display: block; } .menu-modal .menu-logo:hover { text-decoration: none; } .grey-btns { margin-top: 15px; } .grey-btns a { background-color: #5c5c78; margin-bottom: 10px; } /* outline color btn .signup-skip-btn:hover { border: solid 2px #e00b38; color: #e00b38 !important; } */ .no-link { text-decoration: none !important; color: #fff !important; cursor: default !important; } .no-link:hover { text-decoration: none !important; color: #fff !important; cursor: default !important; } .reset-form-body .container { width: 400px; overflow: hidden; } .modal-base { top: 150px; width: 372px; display: none; position: fixed; } .reset-form, .reset-form .signup-email-container { display: block; } .reset-form { margin-top: 110px;; } .reset-form .signup-title { line-height: 50px; margin-bottom: 12px; } .alert-modal .signup-title { margin-bottom: 15px; } .post-rant-form .signup-title, .post-comment-form .signup-title { margin-bottom: 13px; } .reset-logo { text-align: center; font-size: 110px; } .signup-form { top: 150px; } .details-form { top: 150px; } .signup-tos-print { font-size: 12px; color: #babacc; margin-top: 12px; line-height: 1.3; } .signup-tos-print a { color: #babacc; text-decoration: underline; } .signup-tos-print a:hover { color: #fff; } .save-login-container { font-size: 18px; margin-top: 12px; display: block; color: #babacc; } .save-login-container label { cursor: pointer; } .save-login-container label span { -webkit-transition: color .15s ease-in-out; transition: color .15s ease-in-out; } .save-login-container label:hover span { color: #fff; } input.save-login-input { height: auto; line-height: 1.2; width: auto; cursor: pointer; } .stickers-img { margin-bottom: 30px; display: block; } .stickers-img img { width: 80%; } .btn-loader { background-image: url(/static/devrant/img/pink-dots-animation1.gif); background-position: center center; background-repeat: no-repeat; background-color: #c14857; background-size: 53px 13px; color: transparent; } .btn-loader:hover { background-color: #c14857; color: transparent !important; } .product-list { width: calc(100% + 10px); overflow: hidden; margin-left: -10px; } .product-list li { width: calc(33.333333333% - 10px); position: relative; float: left; margin-left: 10px; margin-bottom: 10px; } .product-list li:hover { opacity: 0.9; } .product-list li img { width: 100%; } .product-list li span { position: absolute; bottom: 5px; right: 5px; border-radius: 5px; padding: 3px 5px; background-color: #d55161; color: #fff; font-size: 12px; font-weight: bold; } .stack-list { width: calc(100% + 10px); overflow: hidden; margin-left: -10px; } .stack-list li { width: calc(33.333333333% - 10px); position: relative; float: left; margin-left: 10px; text-align: center; } .stack-description { margin-top: 5px; min-height: 90px; } .stack-list li img { width: 100%; border-radius: 5px; } .stack-list a.stack-link { text-decoration: none; color: #2f2f32; height: 100%: width: 100%; } .stack-list a.stack-link:hover { text-decoration: none; } .profile-avatar-container { background-image: url(/static/devrant/img/profile-banner-bg1b.png); background-position: center center; background-repeat: no-repeat; background-size: cover; height: 290px; width: 100%; overflow: hidden; background-color: #fff; position: relative; text-align: center; } .profile-avatar-circle { width: 260px; height: 260px; border-radius: 50%; overflow: hidden; background-color: transparent; display: block; top: 15px; left: calc(50% - 130px); position: absolute; z-index: 2; } .avatar-blank { background-image: url(/static/devrant/img/profile-circle-dots1.png); background-position: center center; background-repeat: no-repeat; background-size: 100%; width: 100%; height: 100%; display: inline-block; -webkit-transition: all .15s ease-in-out; transition: all .15s ease-in-out; } .avatar-blank:hover { opacity: 0.8; } .avatar-blank span { display: block; text-align: center; margin: 0 auto; font-weight: bold; color: #fff; font-size: 24px; margin-top: calc(50% - 36px); } .username-row .profile-avatar-circle { width: 50px; height: 50px; margin-right: 10px; border-radius: 50%; overflow: hidden; background-color: #54556E; display: inline-block; top: auto; left: auto; position: relative; z-index: 1; float: left; } .profile-avatar-circle img { width: 100%; } .avatar-edit .circledots { position: absolute; top: 0; left: 0; z-index: 2; opacity: 0; width: 100%; height: 100%; display: inline-block; transition: opacity .15s ease-in-out; -moz-transition: opacity .15s ease-in-out; -webkit-transition: opacity .15s ease-in-out; } .avatar-edit:hover .circledots { opacity: 1; } .profile-avatar-overlay { width: 100%; height: 100%; opacity: 0.66; background-color: #54556E; position: absolute; top: 0; left: 0; display: block; z-index: 0; } .profile-score { position: absolute; top: 15px; left: 20px; background-color: #54556e; color: #fff; font-weight: bold; font-size: 14px; padding: 3px 5px; border-radius: 4px; display: inline-block; vertical-align: top; line-height: 1.2; -webkit-transition: background-color .15s ease-in-out; transition: background-color .15s ease-in-out; z-index: 2; } .username-row .profile-score { position: relative; top: auto; left: auto; background-color: #54556e; color: #fff; font-weight: bold; font-size: 12px; padding: 2px 4px; border-radius: 4px; display: inline-block; vertical-align: top; line-height: 1.2; -webkit-transition: background-color .15s ease-in-out; transition: background-color .15s ease-in-out; z-index: 1; } .username-row .rant-username { margin: 3px 0 4px; } .collab-subtitle { color: #aaaab8; font-size: 12px; font-weight: bold; margin-bottom: 1px; margin-top: 9px; } .collab-content a:hover { text-decoration: underline; } .blog-title { color: #54556e; font-weight: bold; font-size: 20px; margin-bottom: 4px; } .blog-subtitle { color: #aaaab8; font-size: 12px; font-weight: bold; } .blog-container { background-color: #fff; padding: 12px 20px; font-size: 14px; line-height: 1.3; } .blog-container a { color: #54556e; } .blog-container a:hover { color: #c14857; } .blog-footer { color: #54556e; margin-top: 20px; padding-top: 16px; padding-bottom: 6px; border-top: 2px solid #e3e3e3; font-size: 12px; font-weight: bold; line-height: 1.8; } @media screen and (max-width: 640px) { .sticker-col1 { float: none; width: 100%; } .sticker-col2 { margin-top: 12px; margin-left: 5%; width: 90%; float: none; } .bluegrey-bg { display: none; } .container { min-width: 320px; } .modal-content { width: 100%; margin-top: 90px; } .modal-screens { display: none; width: 70%; margin: 0 float: none; position: fixed; bottom: -200px; } .modal-title { width: 100%; font-size: 28px; } .app-btns.modal-btns { width: 100%; } .modal-text-col { width: 80%; margin-left: 10%; } .iphone-btn, .android-btn { display: none; margin: 0; height: 60px; line-height: 60px; } .iphone-btn img, .android-btn img { width: 150px; vertical-align: middle; } .app-btns-android .android-btn { width: 100%; display: block; } .app-btns-ios .iphone-btn { width: 100%; display: block; } .app-btns-android.app-btns-ios .android-btn, .app-btns-android.app-btns-ios .iphone-btn { margin-bottom: 10px; } .mobile-install-banner { display: block; height: 80px; background-color: #54556E; width: 100%; position: fixed; bottom: 0; padding: 0 4%; z-index: 8; } .mobile-install-banner .app-btns { width: 62%; margin-top: 10px; } .mobile-install-banner .app-btns-android.app-btns-ios .android-btn, .mobile-install-banner .app-btns-android.app-btns-ios .iphone-btn { margin-bottom: 0; display: inline-block; width: 47%; } .mobile-install-banner .app-btns-android.app-btns-ios .android-btn img, .mobile-install-banner .app-btns-android.app-btns-ios .iphone-btn img { width: 85%; } .mobile-install-banner .app-btns-android.app-btns-ios .iphone-btn img { margin-right: 6%; } .bar-btm-guy { width: 25%; position: fixed; bottom: 0; right: 4%; z-index: 9; display: block; } .interior-content { width: 100%; min-height: 100px; } .interior-centered { width: 100%; } .body-col1 { display: none; } .body-col2 { width: 100%; min-height: 100px; background-color: transparent; margin: 0; text-align: left; border-radius: 0; overflow: hidden; float: left; padding-bottom: 130px; } .rantlist-content-col { width: calc(100% - 50px); } .rantlist-title-text, .rantlist-content, .collab-summary { width: 100%; word-wrap:break-word; } .reply-row .rantlist-content-col { width: calc(100% - 83px); } .reply-row .rantlist-title { width: 100%; word-wrap:break-word; } .details-page { background-image: none; } body.landing-rant { background: url(/static/devrant/img/detailed-bg1.png) top left repeat; } .rant-top-bar { background-color: #54556E; height: 50px; line-height: 50px; position: fixed; top: 0; z-index: 8; width: 100%; padding: 0; border-radius: 0; overflow: hidden; } .devrant-logo { font-size: 24px; float: left; width: 50%; height: 50px; line-height: 50px; } .rant-top-bar .devrant-logo .icon { padding-left: 20px; display: block; height: 50px; line-height: 50px; } .share-icons { float: right; text-align: right; margin-top: 5px; } .share-icons a { display: inline-block; margin-left: 5px; width: 50px; height: 40px; line-height: 40px; padding: 0; font-size: 28px; } .share-text { display: none; } .rantlist { padding-top: 50px; } .rantlist-bg { width: auto; min-height: auto; border-radius: 0; } .addcomment-btn { bottom: 92px; width: 90%; left: 0; margin-left: 5%; z-index: 8; } .addrant-btn { bottom: 95px; left: calc(50% - 35px); margin: 0 auto; } .profile-avatar-container { margin-top: 50px; height: 240px; } .profile-avatar-circle { width: 210px; height: 210px; left: calc(50% - 105px); } .page-feed .rantlist { padding-top: 0; } .profile-page .rantlist { padding-top: 0; } .profile-bar .profile-score { background-color: #40415a; margin-top: 14px; } .username-profile { font-size: 22px; } .rant-top-bar .btn { margin-top: 9px; } .search-bar { margin-left: calc(50% - 160px); margin-top: 2px; } .search-bar .search-input { width: 140px; } .filter-top-bar { margin-top: 50px; } .content-centered-modal { width: auto; margin: 0; } .modal-base { width: 90%; margin: 0 5%; } .signup-title { font-size: 32px; } .install-modal .signup-title { font-size: 32px; margin-bottom: 18px; } .signup-login-forms input { width: calc(100% - 80px); } input.save-login-input { width: auto; } .modal-btn { width: 100%; } .signup-login-forms textarea { width: calc(100% - 73px); } .signup-login-forms textarea { height: 58px; } .post-rant-form textarea, .post-comment-form textarea { width: calc(100% - 32px); } .stickers-img img { width: 70%; } .search-bar .clear-search { left: 157px; } .top-bar-notif { border: 2px solid #54556E; } .notif-list { margin-top: 50px; } .open-btn { width: 100%; display: block; height: 60px; line-height: 60px; } .product-list li { width: calc(50% - 10px); } .stack-list li { width: calc(50% - 10px); } .title-bar { display: none; } .blog-container { margin-top: 50px; } } .top-bar-notif { display: none; } .meetup-container { margin-top: 10px; }