// ---------------------------------------------------------------- // Project Specific: Main Content Area // ---------------------------------------------------------------- // Apply to
or top level
for styling .content-Base{ background:#f6f0e6; min-height:500px; padding-bottom:50px; h1, h2, h3, h4, h5, h6{ color:#e93250 } } .content, .footer-Content { padding: 20px 3%; @media screen and (min-width:1300px){ padding: 20px 0; } } .single-Col{ max-width:800px; } // About page .twitter-tweet.twitter-tweet-rendered{margin:0 auto 30px!important} // Interior pages .interior .header-Outro { padding-top: 30px; overflow: hidden; } .interior .header-Outro h1 { font-size: 2.5em; margin-top: 15px; } .site-url { font-size:18px; margin-bottom: 8px; word-wrap: break-word; } .site-url a { color: #e93250; font-weight: bold; } .interior .header-Outro .row.content { } .interior .header-Outro .subtitle { font-size: 1em; margin-top: -15px; } .content.wide { padding-left: 6%; padding-right: 6%; } .content.misc-page { background: #FAF6F1; -moz-box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.10); -webkit-box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.10); box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.10); padding: 1px 3% 40px 3%; h1, h2, h3, h4, h5, h6 { margin-top: 1em; } } .content.single-Col.misc-page { background: #FFFFFF; } .content.misc-page h2 { font-size: 1.6em; margin-top: 1em; } .content.misc-page h3, .content.misc-page h4, .content.misc-page h5 { font-size: 1.2em; } .content.misc-page h6 { font-size: 1em; } .content.misc-page h1 { font-size: 2em; margin-bottom: 20px; } .content.misc-page hr { margin: 35px 0 25px 0; } // Dashboard .interior .header-Outro .col.col-50.signup-Area {padding-left: 0;} .interior .header-Outro a {color:#E93250} .interior .header-Outro .btn-Action {color:#fff} .interior .signup-Area { min-height: 164px; } .interior .signup-Area img { -moz-box-shadow: 1px 2px 5px 2px rgba(0,0,0,0.10); -webkit-box-shadow: 1px 2px 5px 2px rgba(0,0,0,0.10); box-shadow: 1px 2px 5px 2px rgba(0,0,0,0.10); border: 4px solid white; } .interior .header-Outro .screenshot { width: 357px; height: 212px; display: block; border: 6px solid white; -moz-background-size:cover; -webkit-background-size:cover; background-size:cover; background-position: center top; } .interior .header-Outro .screenshot.dashboard { width: 249px; background-size: 249px; height: 143px; } .interior .header-Outro ul { margin:0;padding:0; } .interior .header-Outro ul li { list-style: none; font-size: 80%; margin-bottom: 2px; } .interior .signup-Form fieldset { padding: 20px; } .interior .header-Outro h2 { margin-top: 12px; font-size: 1.8em; } .welcome { background: #daeea5 url(/img/heartcat.png) no-repeat 20px center; background-size: 77px 81px; padding: 20px 20px 20px 111px; margin-bottom: 20px; } .welcome h4 { font-size: 1.2em; margin-bottom: .5em; } .welcome .close-button { float: right; background: url(/img/welcome-close.png) no-repeat; width: 19px; height: 19px; } .files { float:left; background: #E4D8CB; width: 100%; position: relative; } .files .header { background: #5E95A1; color: #fff; float:left; width: 100%; padding: 10px 20px; } .files .breadcrumbs { float: left; font-weight:bold; margin-top: 4px; a { color: white; } .fa-angle-right { font-size: 1.3em; margin: 0 .2em 0 .2em; } } .files .actions { float: right; } .files .btn-Action { margin-left: 8px; } .files .list { padding: 20px; } .files .list .upload-Boundary { float: left; border: 3px dashed #F6F0E6; width: 100%; margin: 18px 0; padding: 10px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; min-height: 300px; } .files .list .upload-Boundary.with-instruction { background: url(/img/drag-drop.png) no-repeat center center; } .files .uploading-overlay { width: 100%; height: 100%; position: absolute; background-color:rgba(0, 0, 0, 0.35); z-index: 100; } .files .uploading { background: #fff; font-style: italic; margin-left: auto; margin-right: auto; width: 400px; margin-top: 14%; padding: 25px 40px 28px 40px; -webkit-box-shadow: 1px 1px 21px 5px rgba(50, 50, 50, 0.5); -moz-box-shadow: 1px 1px 21px 5px rgba(50, 50, 50, 0.5); box-shadow: 1px 1px 21px 5px rgba(50, 50, 50, 0.5); border-radius: 10px; } .files .uploading p { margin-bottom: 2px; } .files .progress-bar { background:#CCCCCC; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; width: 100%; position: relative; margin-top: 14px; height: 10px; overflow: hidden; } .files .progress-bar .progress { background: #E93250; height: 100%; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-right-radius: 0px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; -webkit-border-top-left-radius: 20px; -webkit-border-bottom-left-radius: 20px; -moz-border-radius-topleft: 20px; -moz-border-radius-bottomleft: 20px; border-top-left-radius: 20px; border-bottom-left-radius: 20px; position: relative; overflow: hidden; display:block; } .file { float: left; padding: 5px 0px; margin-left: 10px; margin-bottom: 10px; width: 125px; text-align: center; display:block; position:relative; } .file .title { font-weight: bold; font-size: 10px; color: #666; margin-top: 4px; text-decoration: none; white-space: nowrap; overflow: hidden; display: block; } .html-thumbnail { font-size: 11px; margin-top: 5px; margin-left: 10px; display:block; position:relative; width:105px; height:63px; } .html-thumbnail.html img { width: 105px; height:63px; -webkit-box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.3); -moz-box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.3); box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.3); } .html-thumbnail.image img { max-width:105px; max-height:63px; width: auto; height: auto; } .html-thumbnail.misc { width: 63px; height: 63px; margin-left: auto; margin-right: auto; } .misc-icon { background: url(/img/misc-file.png) no-repeat 0px 0px; width: 67px; height: 67px; display: block; padding-top: 35px; font-size: 14px; color: #C0C0C0; font-weight: bold; margin-left: auto; margin-right: auto; } .folder-icon { background: url(/img/folder.png) no-repeat 0px 0px; width: 95px; height: 65px; display: block; padding-top: 35px; } .overlay a { color: white; text-decoration: none; font-size: 14px; display: block; margin-left: 5px; } .overlay .fa-trash, .modal .fa-trash { vertical-align: 1px; } .overlay { position:absolute; top:0; width:0; width:100%; height:100%; background-color:rgba(0, 0, 0, 0.5); display:none; } .link-overlay { display: block; position: absolute; bottom: 0px; left: 0px; width: 123px; height: 30px; } .file > .overlay { -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; padding-top: 15px; background-color:rgba(0, 0, 0, 0.15); } .filehover:hover .overlay, .fileimagehover:hover .overlay { display:block; } .html-thumbnail.misc.fileimagehover .overlay { margin: 1px 0 0 2px; } .site-actions { float: left; margin-top: 20px; font-size: 90%; } .site-actions a { color: #666; } @media(min-width:1200px) { .container { width: 1200px; } } @media(min-width:700px) and (max-width:1200px) { .container { width: 100%; } } .content.misc-page.columns { //.colmask float: left; padding: 0; position: relative; clear: both; width: 100%; } .col-left { float: left; width: 100%; position: relative; border-right: 1px solid #ddd; h2 { margin-top: 1em; float: left; width: 100%; margin-bottom: .75em; } } .right-col { background: #FAF6F1; } .content.misc-page .col-33 h3 { font-size: 1.5em; } .content.misc-page .col-33 h3:nth-of-type(1) { margin-top: 0; } .right-col .col-left { right: 33%; } .content.misc-page.columns .col, .site-profile-padding { padding: 25px 30px 30px 30px; position: relative; } .content.misc-page.columns .col-66 { width: 67%; left: 33%; background: white; } .site-profile .content.misc-page.columns .col-66 { padding: 0; min-height: 38em; } .news-feed .content.misc-page.columns .col-66 { min-height: 56em; } .content.misc-page.columns .col-33 { width: 33%; left: 33%; float: right; } .interior .header-Outro.with-columns { padding-top: 22px; } .interior .header-Outro.with-columns h3 { float: left; margin-bottom: 0; font-size: 1.7em; } .interior .header-Outro.with-columns .content { padding: 0; } .interior .header-Outro.with-columns .col { padding: 25px 0 8px 30px; } .interior .header-Outro.with-columns .col-32 { width: 33%; } .interior .header-Outro.with-columns .col-66 { width: 67%; border-right: 1px solid #0B0F11; } .interior .header-Outro.with-columns .col-32 .edit { margin-top: 4px; float: right; margin-right: 30px; color: #fff; } .feed-filter { float: left; margin-top: 1.4em; font-size: 0.8em; margin-left: 1.5em; } .interior .header-Outro .feed-filter a { color: white; margin-left: 13px; } .site-suggestion { float: left; width: 165px; margin-right: 20px; margin-bottom: 20px; height: 16.8em; } .stats { margin-bottom: 2em; float: left; width: 100%; } .content.misc-page.columns .stats .col { padding: 0; margin-bottom: 2em; } .large-portrait { border: 10px solid white; @include box-shadow(1px 1px 2px 1px rgba(0, 0, 0, 0.15)); width: 322px; height: 241px; background-size: cover; float: left; margin-bottom: 20px; } .site-portrait { border: 5px solid white; @include box-shadow(1px 1px 2px 1px rgba(0, 0, 0, 0.15)); float:left; margin-bottom: .5em; } .site-portrait img { width: 155px; height: 116px; } .site-portrait .caption { display: block; clear: both; font-size: .8em; margin-top: .2em; margin-bottom: -.2em; } a.tag, a.tag:visited { font-size: .7em; text-transform: uppercase; background: #FFFFCC; color: #C1A009!important; float: left; padding: 1px 5px; -moz-box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.2); -webkit-box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.2); box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.2); margin-right: 3px; margin-right: 10px; margin-bottom: 7px; } a.tag:hover { text-decoration: none; background: #FFEE8A; } .follower-list, .following-list { width: 100%; float: left; margin-bottom: 2em; } .avatar { height:37px; width:37px; margin: 0 4px 4px 0; float: left; } .misc-page.columns a:visited { color: $c-Brand-1; } .news-item { width: 100%; float: left; margin: 1.25em 0 1.25em 0; } .news-item:nth-of-type(1) { margin-top: 0!important; } .news-item .user { font-weight: bold; color: #000!important; } .news-item .you { color: #000!important; } .news-item .comment { color: #000; font-style: normal; font-size: .8em; } .news-item.for-me .comment { color: #000; font-style: normal; margin-top: .2em; font-size: .9em; margin-bottom: -.1em; } .news-item .icon { width: 20px; height: 20px; background: #E6E6E6; float: left; margin-right: 12px; } .news-item.comment .icon { background: #DAEEA5; } .news-item.comment.for-me .icon, .news-item.tip.for-me .icon { background-size: 62px 62px; width: 82px; height: 62px; background-position: right top; background-repeat: no-repeat; } .news-item .icon-mini { } .news-item.update .icon { background: #E93250; } .news-item.tip .icon { background: #FFCC00; } .news-item.follow { margin: .3em 0 .3em 0; } .news-item.follow .icon { background: #3399CC; } .news-item .title { margin-bottom: .4em; position: relative; width: 100%; float: left; } .news-item .date { float: right; font-size: 11px; margin-top: .5em; } .news-item .date a { color: #aaa!important; } .news-item .files { background: #F5F5F5; padding: 0px 10px 6px 0px; border-top: 1px solid #E7E7E7; margin-bottom: 4px; } .news-item .file { width: 90px; overflow: hidden; margin-bottom: 0; padding: 0; margin-left: 17px; margin-top: 10px; } .news-item .file .image-container { height: 63px; float: left; width: 100%; } .news-item .file a:hover { text-decoration: none; } .news-item .html-thumbnail { margin-top: 1px; margin-left: 0px; width: auto; } .news-item .site-suggestion { height: auto; margin-bottom: 10px; } .news-item .tag { float: none; margin-left: 4px; } .news-item .comments .actions, .news-item .comments p { margin-left: 47px; } .news-item .comments p { margin-bottom: .4em; margin-top: .15em; font-size: 1em; } .news-item .actions { font-size: 11px; margin-left: 32px; } .news-item .actions a { margin-right: 6px; } .news-item .content { padding: 0; margin-left: 32px; } .news-item.comment .actions, .news-item.comment .content { margin-left: 20px; } .news-item.comment .comments .actions { margin-left: 47px; } .news-item .comments { margin-top: .7em; } .news-item .comments .comment { font-size: .8em; clear: both; margin-top: 1em; } .news-item .comments .comment .user { margin-right: 5px; } .news-item .comments .comment .actions { margin-top: .3em; } .news-item .comment-symbol { font-size: 80%; margin-left: .2em; } .news-item .avatar { margin-right: 10px; } //profile .signup-Area.large { width: 418px; height: 236px; } .interior .header-Outro.with-site-image { padding-top: 20px; } .report { margin-top: 2em; float: left; width: 100%; font-size: .8em; } .report, .report a { color: #999; } .interior .header-Outro .actions a { margin-right: 6px; } .interior .header-Outro .actions a:first-of-type { margin-left: 0; } .interior .header-Outro .stats { margin-bottom: 1.2em; float: left; width: 100%; margin-top: 2em; } .interior .header-Outro .stats strong { font-size: 1.5em; font-weight: bold; color: #DAEEA5; } .interior .header-Outro .stats span { font-size: .7em; text-transform: uppercase; clear: both; display: block; } .interior .header-Outro .stats .stat { float: left; width: 90px; text-align: center; } .interior .header-Outro .stats .stat.tips { width: 60px; } #followLink { .follow { display: inline; } .following { display: none; } .unfollow { display: none; } } #followLink.is-following { width: 8.7em; .follow { display: none; } .following { display: inline; } .unfollow { display: none; } } #followLink.is-following.unfollow { .follow { display: none; } .following { display: none; } .unfollow { display: inline; } } .popover { background-color: #5E95A1; a { color: white; } } .popover.bottom .arrow:after { border-bottom-color: #5E95A1; } .col-33 .stats .stat { margin-bottom: .4em; } .col-33 .stats .stat span { width: 10em; float: left; } .archives { float: left; width: 100%; margin-bottom: 2em; } .archives img { float: left; border: 3px solid white; -webkit-box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.3); -moz-box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.3); box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.3); width: 72px; } .archives img { margin-right: 10px; } .more { float: left; clear: both; margin-top: 1em; font-size: .8em; } .post-comment { background: #DAEEA5; width: 100%; padding: 20px 0 15px 30px; margin: 0 0 3px 0; } .post-comment input { width: 84%; float: left; } .post-comment .btn-Action { margin-left: 10px; margin-top: 4px; } .comment-policy { margin-top: .5em; float: left; font-style: italic; font-size: .8em; margin-right: 45px; } .supporter-badge { background:url(/img/supporter.png); width: 99px; height: 26px; float: left; margin-top: 7px; margin-left: 10px; } .title-with-badge { float: left; width: 100%; } .title-with-badge span { float: left; } .section { padding: 55px 8%; margin: 0 auto; float: left; background: white; width: 100%; } .section h2 { font-size: 2em; text-align: center; line-height: 150%; max-width: 800px; margin: 0 auto; margin-bottom: .5em; } .section h3 { font-size: 1.4em; margin-top: 1.5em; margin-bottom: .6em; line-height: 1.6em; } .section p, .section li { font-size: .85em; } .section.previews { background: #FAF6F1; h3 { line-height: 130%; font-size: 1.6em; margin-top: 0; } h2, h3 { color: #335062; } p { color: #666; line-height: 180%; font-size: .9em; } .row { margin: 5em 10%; padding: 0; &:first-of-type { margin-top: 3.5em; } &:last-of-type { margin-bottom: 2.5em; } .col { padding-left: 0; padding-right: 30px; &.text { padding-top: 2em; } } .screenshot { width: 100%; height: 250px; margin-right: 30px; background: white; border: 6px solid white; @include box-shadow(1px 1px 2px 0px rgba(0, 0, 0, 0.18)); } &.right { .col { padding-right: 0; &.text { padding-right: 30px; } } } } } .section.featured-Websites { background: #971D31; padding: 30px 0; position: relative; } .section.featured-Websites .nav { float:left; width:5%; height:45px; background-size: 22px; background-repeat: no-repeat; background-position: center center; margin: auto 0px; position: absolute; top: 0; bottom: 0; } .section.featured-Websites .nav.prev { background-image:url(/img/hpgallery-prev.png); } .section.featured-Websites .nav.next { background-image:url(/img/hpgallery-next.png); right: 0; } .section.features { background: #4F7E89; text-align: center; } .section.features .col { padding-left: 40px; :first-child { padding-left: 0; } @media (max-device-width:480px), screen and (max-width:800px){ padding-left: 20px; } } .section.features h2, .section.features h3, .section.features p, .section.features a { color: #fff; } .section.features a { text-decoration: underline; &:hover { text-decoration: none; } } .section.features .fa { margin-right: 10px; } .section.features .fa-wrench { vertical-align: 2px; margin-right: 9px; } .section.features .fa-tachometer { margin-right: 11px; } .section.features p, .section.features h3 { text-align: left; } .section .press { display: inline-block; clear: both; margin-top: 30px; margin-bottom: 0px; @media (max-device-width:480px), screen and (max-width:800px){ margin-top: 0; } } .section .logo { float:left; background-repeat: no-repeat; margin-right: 30px; @media (max-device-width:480px), screen and (max-width:800px){ margin-top: 20px !important; } } .section .logo.wired { width: 211px; height: 44px; background-image: url(/img/wired-logo.png); background-size: 211px; margin-top: 6px; margin-right: 38px; } .section .logo.fastco { width: 262px; height: 39px; background-image: url(/img/fastcompany-logo.png); background-size: 262px; margin-top: 7px; } .section .logo.vice { width: 160px; height: 50px; background-image: url(/img/vice-logo.png); background-size: 160px; } .section .logo.ars { width: 187px; height: 62px; background-image: url(/img/ars-logo.png); background-size: 187px; margin-top: -4px; } .section .press .more { color: #A0BAC0; float:right; margin-top: 6px; margin-right: 30px; } .section .quote { width: 70%; margin: 0 auto .5em auto; h3 { text-align: center; font-style: italic; font-size: 1.4em; line-height: 159%; font-family: $times; color: #afcbd1; } a { color: #afcbd1; } } .section.plans { @media(max-device-width:480px), screen and (max-width:550px) { padding: 55px 3%; } } .section.plans h2 { color:#4F7E89; } .plan-overview { margin-top: 3.5em; margin-bottom: 2em; } .plan-overview .header { display:table; width: 100%; } .plan-overview .header .col { font-size:.8em; text-transform: uppercase; padding: 8px 20px; display:table-cell; } .plan-overview .header .personal { background: #D6D6D6; } .plan-overview .header .professional { background: #DAEEA5; } .plan-overview .body { text-align: center; clear:both; display:table; width: 100%; } .plan-overview h3, .plan-chart h3 { color: black; font-weight:bold; font-size:1.2em; font-family: "Lucida Grande", verdana, "Helvetica Neue", Helvetica, Arial, sans-serif; margin-bottom: -3px; margin-top: 0; } .plan-overview .price { font-size: 2em; } .plan-overview .interval { font-size: .8em; margin-top: -.6em; } .plan-overview .btn-Action, .plan-overview .current-plan { margin: .9em 0 1.4em 0; } .plans .current-plan { @extend %btn; background: #777; &:hover{ background: #777; cursor: default; } } .plan-overview .col { padding-bottom:1.5em; padding-left: 0; display: table-cell; background: #F8F8F8; float:none; } .plan-overview .body .col:nth-of-type(2), .plan-overview .body .col:nth-of-type(4) { background: #F5F5F5; } .plan-overview ul { list-style: none; padding: 0; } .plan-overview li { margin: 0; } .plan-overview .plan-image { background-repeat: no-repeat; background-position: center center; height: 81px; margin: 30px 0 5px 0; } .plan-overview .free .plan-image { background-image: url(/img/plaincat.png); background-size: 77px; } .plan-overview .supporter .plan-image { background-image: url(/img/heartcat.png); background-size: 77px; } .plan-overview .catbus .plan-image { background-image: url(/img/catbus.png); background-size: 95px; } .plan-overview .fatcat .plan-image { background-image: url(/img/fatcat.png); background-size: 70px; } .plan-chart { margin: 2em 0 0 0; width: 100%; } .plan-overview, .plan-chart { @media(max-width:800px) { font-size: 90%; } @media(max-device-width:480px), screen and (max-width:550px) { font-size: 80%; } } .plan-chart th { background: #D6D6D6; padding: 15px 0; font-weight: normal; } .plan-chart th.professional { background: #DAEEA5; } .plan-chart th p { margin: .3em 0 .6em 0; } .plan-chart td { border: 1px solid #ECECEC; background:#F5F5F5; padding: 7px 0; text-align: center; } .plan-chart .feature-column { width: 21em; text-align:right; font-size: .9em; font-weight: bold; border: 0; background: 0; padding-right: 15px; span { border-bottom: 1px dotted #bbb; cursor: help; } @media(max-device-width:480px), screen and (max-width:800px) { width: 26%; } } .plan-chart td:nth-child(even) { background: #F8F8F8; } .plan-chart .fa-check { color: #6CCC24; } .plan-overview .btn-Action, .plan-chart .btn-Action { @media(max-device-width:480px), screen and (max-width:900px) { padding: 7px 10px; } } .section.bottom-signup { padding-top: 1em; padding-bottom: 6.5em; a { text-decoration: underline; font-weight:bold; &:hover { text-decoration: none; } } h2 { max-width: none; } } .selected { font-weight: bold; } .modal-body { max-height: 800px; overflow-y: visible; } .tt-dropdown-menu { background: #FFFFFF; cursor: pointer; border: 1px solid #ddd; } .tt-suggestion { margin:0; padding: 0px 10px 0px 10px; float: left; width: 100%; height: 32px; line-height: 32px; } .tt-cursor { background: #DAF3EF; } .interior .header-Outro.browse-page { overflow: visible; } .interior .header-Outro.browse-page .select-Container { overflow: none; padding: 2px 4px; width: 40%; } .browse-page .input-Area { width: auto; padding: 4px 5px; } .header-Outro .twitter-typeahead { top: -2px; color: #000; } .header-Outro .btn-Action { margin: 2px 0 0 10px; } .browse-page .text-Label { float: left; margin-right: 8px; font-weight: bold; line-height: 31px; } .browse-page h1 { margin-top: 0; } .browse-page .tags { padding: 0 30px 40px 30px; } .misc-page .pagination { width: 100%; float: left; } .pagination .arrow { vertical-align: 1px; } .view-all-sites { font-size: 1.2em; margin-top: 1em; } .interior .header-Outro.with-columns .col.filter { padding-top: 0px; padding-bottom: 4px; } .dropdown-submenu .dropdown-menu { width: 1px; } .fa-heart { font-size: 0.7em; color: #e93250; vertical-align: .45em; margin-left: -.15em; } .fa-user { margin-right: 0.25em; display: inline; font-size: 10px; vertical-align: .1em; margin-left: .1em; }